news 2026/2/9 15:05:18

vscode+nodejs+express 搭建一个简单网站

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vscode+nodejs+express 搭建一个简单网站

一、前期准备

1. 安装必备软件

  • Node.js:前往 Node.js 官网 下载对应系统(Windows/Mac/Linux)的 LTS 版本,安装后打开终端(CMD/PowerShell/ 终端),输入node -vnpm -v,若能显示版本号则说明安装成功(npm 会随 Node.js 一同安装)。
  • VSCode:前往 VSCode 官网 下载安装,无需额外配置,默认即可。

2. 初始化项目文件夹

  1. 创建一个项目文件夹(例如express-simple-website),并通过 VSCode 打开该文件夹(VSCode 中点击「文件」-「打开文件夹」选择对应目录)。
  2. 打开 VSCode 内置终端(快捷键 `Ctrl+`` 或 「终端」-「新建终端」),确保终端当前路径为项目根目录。

注意,此时的文件夹:

二、项目初始化与依赖安装

1. 初始化 npm 项目

在终端中输入以下命令,初始化一个 npm 项目(过程中可按回车默认配置,或按需填写项目信息):

npm init -y

执行完成后,项目根目录会生成package.json文件,用于管理项目依赖和配置。

注意查看,文件夹内多了一个文件,就是package.json

我们看下package.json里面的内容,注意后面的变化:

2. 安装 Express 框架

Express 是 Node.js 的轻量级 Web 开发框架,输入以下命令安装(--save可省略,npm 5+ 会自动将依赖写入package.json):

npm install express

安装完成后,项目根目录会生成node_modules文件夹(存放依赖文件)和package-lock.json文件(锁定依赖版本)。

安装完,我们就可以在package.json文件中看到自动添加的依赖。

文件夹内也可以看到添加了文件夹和一个文件:

在node_modules文件夹内可以看到express的包,双击点进去:

接下来,就是写代码了:

三、编写核心代码(创建 Web 服务)

在项目根目录下,创建一个入口文件(常规命名为app.jsserver.js,这里以app.js为例),这里我们建的是index.js:

  1. 在 VSCode 左侧资源管理器中,右键点击项目根目录,选择「新建文件」,命名为 index.js
  2. 复制以下代码到 index.js中,代码包含详细注释,便于理解:
// 1. 引入 Express 模块 const express = require('express'); // 2. 创建 Express 应用实例 const app = express(); // 3. 定义端口号(建议使用 3000、8080 等非系统默认端口) const port = 3000; // 4. 配置路由:处理 GET 请求,根路径(http://localhost:3000/) app.get('/',(req,res)=>{ res.send('Hello World!'); }); app.listen(port,() => { // 服务启动成功后,终端会输出该提示信息 console.log(`Express 网站已启动,访问地址:http://localhost:${port}`); });

四、运行并访问网站

1. 启动服务

在 VSCode 内置终端中,输入以下命令(nodemon)运行index.js文件,启动 Express 服务:

也可以使用命令:node index.js

2. 验证服务启动

当我们看到有日志输出,就知道express已经运行成功了。

3. 访问网站

打开任意浏览器,在地址栏输入以下地址,即可访问搭建的网站:

  • 根路径(首页):http://localhost:3000

有人就问,我访问不想加端口咋办,打网址不加端口,其实是后台默认给你加上了80端口,

那就ok了,我们监听80端口就行。

没改端口前:

改端口后:

端口咋改啊(代码里面3000改成80,保存就完事了):

注意看终端输出:

保存后它就自动重启了,为啥啊,因为我们用了nodemon,如果用的node index.js启动的,改完后得手动重启一下。

如果没有nodemon命令的,安装一下就可以了:

npm install -g nodemon

好了,完事了,网站框架也搭好了,想要内容丰富点,自个在里面加内容就行了。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/5 13:22:57

CUDA安装失败提示missing driver?检查NVIDIA驱动

CUDA安装失败提示missing driver?真正的问题可能在这里 在搭建深度学习环境时,你是否曾遇到这样的场景:满怀期待地运行 pip install torch 或 conda install pytorch-gpu,结果一执行 torch.cuda.is_available() 却返回 False&…

作者头像 李华
网站建设 2026/2/9 2:44:37

还在用AI写论文被查重?这6款工具AIGC率精准控制!

还在用ChatGPT、文心一言直接生成论文段落,然后提心吊胆地提交?还在相信“用AI改写一下就查不出来”的谣言,结果查重率、AIGC率双双爆表?还在因为“AI代写”的嫌疑,被导师约谈,甚至面临学术不端的指控&…

作者头像 李华
网站建设 2026/2/8 16:32:12

PyTorch安装后无法检测CUDA?查看torch.version.cuda

PyTorch安装后无法检测CUDA?查看torch.version.cuda定位问题 在深度学习项目中,你是否曾经历过这样的场景:满怀期待地运行训练脚本,结果发现 torch.cuda.is_available() 返回了 False?明明机器装了RTX 4090&#xff0c…

作者头像 李华
网站建设 2026/2/6 4:33:50

Miniconda-Python3.9安装fastapi用于API服务封装

Miniconda-Python3.9 安装 FastAPI 用于 API 服务封装 在 AI 模型日益走向生产部署的今天,一个常见的痛点浮出水面:如何将训练好的模型稳定、高效地暴露给前端、移动端或第三方系统调用?许多开发者都经历过“本地能跑,上线就崩”的…

作者头像 李华
网站建设 2026/2/8 14:24:20

GitHub项目fork后如何用Miniconda重建开发环境

GitHub项目fork后如何用Miniconda重建开发环境 在参与开源项目时,你是否遇到过这样的情况:刚fork了一个热门AI仓库,兴冲冲地克隆到本地,结果一运行就报错——“ModuleNotFoundError”、“ImportError: cannot import name”……查…

作者头像 李华
网站建设 2026/2/6 20:20:14

CUDA安装多版本共存管理技巧(配合Miniconda)

CUDA多版本共存管理技巧(配合Miniconda) 在深度学习项目开发中,你是否遇到过这样的场景:刚为一个复现论文的项目配置好 PyTorch 1.10 CUDA 11.3 环境,转头又要启动新模型训练,却发现新版框架要求 CUDA 11.…

作者头像 李华