当前位置：首页 > news >正文

1.基础环境搭建与核心认知

news 2026/7/1 18:53:45

核心目标

掌握 Node.js 基础、Express 初始化，搭建起开发环境。

Node.js 前置基础

CommonJS vs ESModule 核心区别

CommonJS (require/module.exports)	ESModule (import/export)
为 Node.js 服务（服务器端，同步加载）	为浏览器 / 全端设计（异步加载，兼顾性能）
运行时加载（执行到`require`才加载模块）	编译时静态分析（import 必须在顶层，提前确定依赖）
导出：`module.exports = {a:1}`或`exports.a = 1`；导入：`const mod = require('./mod.js')`	导出：`export const a = 1`/`export default {a:1}`；导入：`import {a} from './mod.js'`/`import mod from './mod.js'`
导出的是值的拷贝（修改导入的值不影响原模块）	导出的是值的引用（原模块值变化，导入值同步变化）
可省略后缀（如`require('./mod')`），支持.node/.json 等	必须写完整后缀（如`import './mod.js'`），仅支持.js/.mjs 等
顶层 this指向模块自身（module.exports）	顶层 this指向`undefined`

`http`（核心网络模块）和`path`（路径处理模块）

http 模块：原生创建 HTTP 服务（对应前端 fetch）

http模块是 Node.js 实现 “请求 - 响应” 模型的核心，用于创建 HTTP 服务器 / 客户端，对应前端通过fetch/XMLHttpRequest发起请求的逻辑（前端是 “请求方”，Node.js 是 “响应方”）。

1. 核心作用

搭建极简 HTTP 服务器，处理客户端（浏览器 / Postman / 前端 fetch）的请求；
模拟客户端发起 HTTP 请求（类似前端 fetch）。

2. 核心概念（请求 - 响应模型）

概念	说明（对应前端）
Request（请求）	客户端发给服务器的信息（如 URL、请求方法、参数），对应前端 fetch 的`request` 配置；
Response（响应）	服务器返回给客户端的信息（如状态码、响应头、数据），对应前端 fetch 拿到的`response` ；
监听端口	服务器绑定端口（如 3000），前端通过`http://localhost:3000` 访问；

3. 实操案例：创建最简 HTTP 服务器

// 导入 http 模块 const http = require('http'); // 1. 创建服务器：回调函数处理 「请求(req) - 响应(res)」 const server = http.createServer((req, res) => { // ① 处理请求：获取请求方法、URL console.log('请求方法：', req.method); // GET/POST 等 console.log('请求 URL：', req.url); // 如 /api/user // ② 设置响应头（告诉客户端返回的是 JSON 数据，编码 utf-8） res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Access-Control-Allow-Origin': '*' // 解决前端跨域 }); // ③ 返回响应数据（对应前端 fetch 拿到的 res.json()） const responseData = { code: 200, msg: '请求成功', data: { name: 'Node.js http 模块' } }; res.end(JSON.stringify(responseData)); // 结束响应并返回数据 }); // 2. 启动服务器，监听 3000 端口 server.listen(3000, () => { console.log('服务器运行在 http://localhost:3000'); });

res.end()：必须调用，用于结束响应（否则客户端会一直等待）
跨域处理：服务器需设置Access-Control-Allow-Origin响应头（类似前端配置代理）；
对比 Express：Express 是基于http模块的封装，简化了路由、中间件等逻辑。

path 模块：路径处理（解决跨系统兼容）

方法	作用
`path.join()`	拼接路径（自动适配系统分隔符），最常用；
`path.resolve()`	解析为绝对路径（从当前工作目录出发）；
`path.basename()`	获取路径中的文件名（含后缀）；
`path.extname()`	获取路径中的文件后缀（如 .js、.json）；
`path.dirname()`	获取路径中的目录名（去掉文件名的部分）

Express 项目搭建

快速脚手架

前置：安装 Node.js（建议 14+ 版本）

步骤 1：全局安装脚手架

打开终端，执行以下命令（仅需安装一次）：

npm install -g express-generator

步骤 2：创建 Express 项目

# 创建项目（项目名自定义，如 my-express-app） express my-express-app

步骤 3：进入项目并安装依赖

# 进入项目目录 cd my-express-app # 安装依赖（express 等核心包） npm install

步骤 4：启动项目

# 方式 1：默认启动（Node 直接运行 bin/www） npm start # 方式 2：热重载启动（修改代码无需重启，需先装 nodemon） # 1. 安装 nodemon（开发依赖） npm install nodemon --save-dev # 2. 修改 package.json 的 scripts（新增 dev 命令） "scripts": { "start": "node ./bin/www", "dev": "nodemon ./bin/www" // 新增这行 } # 3. 启动热重载服务 npm run dev

步骤 5：验证项目

打开浏览器访问http://localhost:3000，能看到 Express 默认欢迎页面，说明创建成功。

脚手架生成的核心目录结构（关键）

my-express-app/ ├── bin/ // 启动脚本（www 是入口，监听端口） ├── public/ // 静态文件目录（放 css、js、图片等） ├── routes/ // 路由目录（处理接口/页面路由，如 index.js、users.js） ├── views/ // 视图模板目录（ejs/jade 等，前端页面） ├── app.js // Express 核心配置（中间件、路由挂载） ├── package.json // 依赖和脚本配置

Express 目录	作用（类比 Vue）
`app.js`	项目入口（类比 main.js）
`routes/`	路由文件（类比 Vue 的 router）
`public/`	静态资源（类比 Vue 的 public）
`package.json`	依赖配置（和 Vue 一致）