news 2026/4/16 19:39:27

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/4/16 11:47:53

SSH批量管理多个Miniconda容器实例

SSH批量管理多个Miniconda容器实例 在人工智能和数据科学项目中,团队常常面临这样的困境:同样的代码在不同机器上运行结果不一致。排查后发现,问题根源往往是Python环境的细微差异——有人用pip安装了某个库,而另一个人通过conda安…

作者头像 李华
网站建设 2026/4/16 11:59:36

收藏必备:AI大模型完整学习路线与资源汇总,助你从入门到精通_AI大模型学习路线及相关资源推荐

本文提供了AI大模型的完整学习路线与资源推荐。首先介绍AI大模型的基本概念、特点与类型;然后系统梳理从基础知识、机器学习、深度学习到大语言模型的学习路径,并提供各阶段优质资源;最后分享理论学习、实践操作和职业发展方面的实用建议。内…

作者头像 李华
网站建设 2026/4/16 17:25:50

告别AGV“迷路”“断联”!耐达讯自动化PROFIBUS三路中继器,用少投入解决大麻烦

汽车总装车间的AGV刚跨3个区域就频繁断联,物流仓库的巡检机器人因信号衰减频繁“迷路”——这是工业场景中PROFIBUS总线传输的典型痛点。在汽车制造、物流仓储、电子制造、工程机械、新能源锂电等依赖AGV的行业,信号衰减、布线复杂、扩容麻烦不仅拖慢生产…

作者头像 李华
网站建设 2026/4/16 12:14:31

CUDA安装教程:配合Miniconda-Python3.9实现无缝集成

CUDA与Miniconda-Python3.9集成:构建高效可复现的GPU开发环境 在人工智能模型日益复杂、训练数据量爆炸式增长的今天,单靠CPU已经难以支撑现代深度学习任务的算力需求。GPU凭借其强大的并行计算能力,成为加速神经网络训练的关键硬件。而要真…

作者头像 李华
网站建设 2026/4/16 12:11:57

用Miniconda-Python3.9构建大模型Prompt工程环境

用 Miniconda-Python3.9 构建大模型 Prompt 工程环境 在如今的大模型开发实践中,一个看似不起眼却极其关键的问题常常困扰着开发者:为什么同样的 Prompt 在同事的机器上运行正常,到了自己环境里却报错不断?更常见的是,…

作者头像 李华
网站建设 2026/4/16 12:46:21

PyTorch安装过程中遇到SSL错误怎么办?

PyTorch安装过程中遇到SSL错误怎么办? 在人工智能开发的日常中,搭建一个稳定可靠的深度学习环境本应是“起步动作”,但现实中却常常被一些看似低级、实则棘手的问题拖慢节奏。比如,当你满怀期待地在 Miniconda 环境下执行 pip ins…

作者头像 李华