个人网站搭建之路
2025.8.26
好的,兄弟!第一阶段你已经亲手搭建了“手工作坊”,体验了最原始的后厨运作。现在,我们要鸟枪换炮,进入 第二阶段:成为“帮厨”。
这个阶段的目标是:学会使用 Express.js 这个强大的“集成厨房系统”,让你告别繁琐的底层操作,专注于“做什么菜”(开发 API),而不是“怎么搭炉灶”。
第二阶段:成为“帮厨”的详细行动指南
任务一:安装并启动你的第一个 Express 应用 (预计 30 分钟)
这是从“手工作坊”到“现代化厨房”的升级仪式。
-
开辟新战场:我建议你新建一个文件夹,比如
my-express-server
,把这个阶段的代码和第一阶段的分开,方便对比学习。 -
进入并初始化:和之前一样,用 VS Code 打开这个新文件夹,在终端里运行
npm init -y
。 -
安装 Express:在终端里运行以下命令:
Terminal window npm install express- 命令解释:
npm install express
会从 npm 的“应用商店”里下载express
这个工具包,并把它安装到你的项目中。 - 你会看到:
- 多了一个
node_modules
文件夹:这里面存放着express
以及它所依赖的所有其他工具包。你永远不需要手动修改这个文件夹里的任何东西。 package.json
文件里多了"dependencies": { "express": "^4.18.2" }
这样的记录。这是你项目的“已安装软件列表”。- 可能还会多一个
package-lock.json
文件:它详细记录了每个包的精确版本号,确保你的项目在任何电脑上安装的依赖都是一模一样的。
- 多了一个
- 命令解释:
-
创建主文件:新建一个
app.js
文件(Express 社区更常用app.js
或index.js
作为主文件名)。
阶段成果:你已经成功地把 Express 这个“集成厨房系统”搬进了你的项目。
任务二:学习 Express 的核心——路由 (Routing) (预计 3-4 小时)
这是本阶段的绝对核心。路由就是定义“什么样的请求(URL + 方法)由哪段代码来处理”。
-
编写你的第一个 Express 服务器:打开
app.js
,输入以下代码。你会发现它比纯http
模块简洁得多。// 1. 引入 expressconst express = require('express');// 2. 创建 express 应用实例const app = express();// 3. 定义路由:当用户以 GET 方法访问网站根目录 (/) 时app.get('/', (req, res) => {// req 和 res 对象被 Express 进行了增强,更好用res.send('<h1>欢迎使用 Express 服务器!</h1>');});// 4. 启动服务器const PORT = 3000;app.listen(PORT, () => {console.log(`Express 服务器已启动,正在监听 ${PORT} 端口...`);});- 运行与测试:在终端运行
node app.js
,然后访问http://localhost:3000
。
- 运行与测试:在终端运行
-
学习处理不同的 HTTP 方法和路径:
- 目标:为你之前的 Todo App 设计一套 API 接口。现在我们先不连接数据库,只返回假的 JSON 数据。
- 动手练习:在
app.js
里添加更多的路由规则。
// ... 已有的代码 ...// GET /todos - 获取所有待办事项app.get('/todos', (req, res) => {const fakeTodos = [{ id: 1, text: '学习 Node.js', completed: true },{ id: 2, text: '学习 Express', completed: false }];res.json(fakeTodos); // 使用 res.json() 发送 JSON 数据,这是 API 的标配});// POST /todos - 创建一个新的待办事项// 注意:为了接收 POST 请求的数据,你需要一个中间件,我们稍后会讲app.post('/todos', (req, res) => {// 假设我们已经拿到了请求体里的数据console.log('收到了创建新 todo 的请求!');// 返回一个成功的响应res.status(201).json({ message: '创建成功!' }); // 201 表示“已创建”});// GET /todos/:id - 获取单个待办事项app.get('/todos/:id', (req, res) => {// :id 是一个“路由参数”,Express 会把它提取出来const todoId = req.params.id; // 通过 req.params.id 获取res.send(`你正在查看 ID 为 ${todoId} 的待办事项`);});// ... 启动服务器的代码 ...- 测试:重启服务器后,用浏览器访问
http://localhost:3000/todos
和http://localhost:3000/todos/123
。对于 POST 请求,你需要用 Postman 这个工具来测试。
阶段成果:你理解了什么是路由,并能定义 GET 和 POST 等不同类型的接口。
任务三:学习 Express 的精髓——中间件 (Middleware) (预计 2-3 小时)
中间件是 Express 最强大、最灵活的部分。它是在“请求到达最终处理函数之前”要经过的一系列处理站。
-
学习使用内置中间件:
express.json()
:必备! 这个中间件的作用是解析请求体中Content-Type
为application/json
的数据(即 JSON 格式的数据)。没有它,你的app.post
路由就收不到客户端发来的 JSON 数据。- 怎么用:在你的路由定义之前,加上
app.use(express.json());
。
// ...const app = express();// 在所有路由之前使用这个中间件app.use(express.json()); // 现在你的应用能读懂 JSON 了!// 现在这个 POST 路由就能正常工作了app.post('/todos', (req, res) => {const newTodo = req.body; // req.body 就是解析后的 JSON 数据console.log('收到的新待办事项:', newTodo);res.status(201).json({ message: '创建成功', data: newTodo });});// ...- 测试:用 Postman 发送一个 POST 请求到
http://localhost:3000/todos
,在 Body 部分选择raw
和JSON
,然后输入{"text": "写一篇博客", "completed": false}
,看看你的服务器终端打印出了什么。
-
(可选)编写你自己的简单中间件:
- 目标:创建一个记录所有请求日志的中间件。
- 怎么做:中间件就是一个有三个参数
(req, res, next)
的函数。
// 自定义一个日志中间件const loggerMiddleware = (req, res, next) => {console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);next(); // ✨ 关键!调用 next() 把请求传递给下一个中间件或路由处理器};// 使用你的日志中间件app.use(loggerMiddleware);// ...next()
的作用:就像流水线上的工人完成了自己的工序后,按下了按钮,把产品传送到下一个工位。如果你的中间件不调用next()
,请求就会被“卡住”,永远到不了后面的路由。
阶段成果:你理解了中间件“请求处理流水线”的概念,并掌握了 express.json()
这个最核心的中间件的使用。
总结一下第二阶段你需要做的事:
-
动手操作:
npm install express
- 编写
app.js
,用express()
创建应用,用app.listen()
启动。 - 用
app.get()
,app.post()
等方法定义各种路由。 - 安装并学习使用 Postman 来测试你的 API,特别是 POST, PUT, DELETE 这类浏览器不方便测试的请求。
- 使用
app.use(express.json())
来让你的服务器能够接收 JSON 数据。
-
核心学习:
- 路由:如何根据 URL 和 HTTP 方法将请求分发到不同的处理函数。
req
和res
对象:学习req.params
,req.body
和res.send()
,res.json()
,res.status()
。- 中间件:理解其“流水线”工作模式,并知道
next()
函数的关键作用。
完成这个阶段,你就拥有了用行业标准方式快速开发任何 Web API 的能力。你已经从一个“后厨学徒”成长为一个能独立处理订单的“帮厨”了!