个人网站搭建之路

2025.8.26

好的,兄弟!第一阶段你已经亲手搭建了“手工作坊”,体验了最原始的后厨运作。现在,我们要鸟枪换炮,进入 第二阶段:成为“帮厨”

这个阶段的目标是:学会使用 Express.js 这个强大的“集成厨房系统”,让你告别繁琐的底层操作,专注于“做什么菜”(开发 API),而不是“怎么搭炉灶”。


第二阶段:成为“帮厨”的详细行动指南

任务一:安装并启动你的第一个 Express 应用 (预计 30 分钟)

这是从“手工作坊”到“现代化厨房”的升级仪式。

  1. 开辟新战场:我建议你新建一个文件夹,比如 my-express-server,把这个阶段的代码和第一阶段的分开,方便对比学习。

  2. 进入并初始化:和之前一样,用 VS Code 打开这个新文件夹,在终端里运行 npm init -y

  3. 安装 Express:在终端里运行以下命令:

    Terminal window
    npm install express
    • 命令解释npm install express 会从 npm 的“应用商店”里下载 express 这个工具包,并把它安装到你的项目中。
    • 你会看到
      • 多了一个 node_modules 文件夹:这里面存放着 express 以及它所依赖的所有其他工具包。你永远不需要手动修改这个文件夹里的任何东西。
      • package.json 文件里多了 "dependencies": { "express": "^4.18.2" } 这样的记录。这是你项目的“已安装软件列表”。
      • 可能还会多一个 package-lock.json 文件:它详细记录了每个包的精确版本号,确保你的项目在任何电脑上安装的依赖都是一模一样的。
  4. 创建主文件:新建一个 app.js 文件(Express 社区更常用 app.jsindex.js 作为主文件名)。

阶段成果:你已经成功地把 Express 这个“集成厨房系统”搬进了你的项目。


任务二:学习 Express 的核心——路由 (Routing) (预计 3-4 小时)

这是本阶段的绝对核心。路由就是定义“什么样的请求(URL + 方法)由哪段代码来处理”。

  1. 编写你的第一个 Express 服务器:打开 app.js,输入以下代码。你会发现它比纯 http 模块简洁得多。

    // 1. 引入 express
    const 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
  2. 学习处理不同的 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/todoshttp://localhost:3000/todos/123。对于 POST 请求,你需要用 Postman 这个工具来测试。

阶段成果:你理解了什么是路由,并能定义 GET 和 POST 等不同类型的接口。


任务三:学习 Express 的精髓——中间件 (Middleware) (预计 2-3 小时)

中间件是 Express 最强大、最灵活的部分。它是在“请求到达最终处理函数之前”要经过的一系列处理站

  1. 学习使用内置中间件

    • express.json()必备! 这个中间件的作用是解析请求体中 Content-Typeapplication/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 部分选择 rawJSON,然后输入 {"text": "写一篇博客", "completed": false},看看你的服务器终端打印出了什么。
  2. (可选)编写你自己的简单中间件

    • 目标:创建一个记录所有请求日志的中间件。
    • 怎么做:中间件就是一个有三个参数 (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() 这个最核心的中间件的使用。


总结一下第二阶段你需要做的事:

完成这个阶段,你就拥有了用行业标准方式快速开发任何 Web API 的能力。你已经从一个“后厨学徒”成长为一个能独立处理订单的“帮厨”了!