HDU-CS-WIKI

Appearance

Week 4 后端 - Express 路由处理与 API 开发 ​

剧情背景：Eagle Jump 公司程序组组长阿波根海子决定在实习期内考验樱宁宁的后端开发能力。海子要求宁宁构建一个商店 API 项目，这个 API 将提供商店的基本信息和商品列表数据。为帮助宁宁顺利完成任务，海子特意整理了一份详细教程，记录了如何通过 Express 实现 API 的每一个步骤。这份文档将带领学生一步步掌握 Express 的核心知识和 API 开发技巧。

​image​

1. 初始化 Express 项目 ​

快速回顾：以下是创建和初始化 Express 项目的步骤。确保你已经完成以下操作：

  1. 创建项目文件夹（例如 store-api ​）。

  2. 在终端中进入该文件夹，并初始化项目：

    bash
    npm init -y

  3. 安装 Express 库：

    bash
    npm install express

  4. 创建入口文件 server.js ​，用于配置和启动服务器。

2. 基础概念：Express 中的路由、请求与响应 ​

在开始构建 API 之前，海子特意为宁宁解释了 Express 中的几个核心概念，这些概念是实现 API 功能的基础。

路由 ​

路由是指服务器如何响应客户端请求的规则。每一个路由规则都由三部分组成：

  • 请求方法：如 GET、POST、PUT、DELETE 等。我们这次任务主要使用 GET 方法。
  • 路径：用于匹配客户端的请求路径。例如， /api/info ​匹配商店信息的请求路径。
  • 回调函数：当请求匹配到路径时，服务器会执行这个函数处理请求并发送响应。

Express 中的路由基本格式 ​

在 Express 中定义路由的格式如下：

javascript
app.METHOD(PATH, HANDLER)
  • METHOD：请求方法（如 GET）。
  • PATH：请求路径，例如 /api/info ​。
  • HANDLER：处理请求的回调函数，包含业务逻辑，用于生成并返回响应。

路由示例 ​

假设我们要创建一个简单的路由，响应客户端的请求并返回一段文本：

javascript
app.get('/', (req, res) => {
  res.send('欢迎来到宁宁的小店！');
});

  • 解释：

    • ​ app.get('/', (req, res) => {...}) ​：定义了一个 GET 请求的路由。当用户访问根路径（ / ​）时，会触发这个路由。
    • ​ res.send('欢迎来到宁宁的小店！') ​： res.send() ​方法用于向客户端发送响应内容。在这个例子中，服务器返回的是字符串 “欢迎来到宁宁的小店！”，该内容会显示在用户的浏览器页面上。

请求与响应对象 ​

在 Express 的路由回调函数中，我们会接收到两个重要的对象：

  • 请求对象（ req ​）：包含客户端请求的详细信息，如路径、查询参数、请求头等。
  • 响应对象（ res ​）：用于控制服务器的响应行为。我们可以通过 res ​对象向客户端发送数据、设置状态码、发送 JSON 数据等。

3. 商店 API 项目：需求与功能 ​

为了让宁宁有一个清晰的开发目标，海子定义了商店 API 的具体功能需求：

  1. 商店信息接口：

    • 接口路径： /api/info ​
    • 请求方法：GET
    • 功能：返回商店的基本信息，包括商店名称、地址和营业时间。

  2. 商品列表接口：

    • 接口路径： /api/products ​
    • 请求方法：GET
    • 功能：返回一个商品列表的 JSON 数据，每个商品包含名称、价格和库存数量。

这两个接口都是通过 GET 请求获取数据，客户端可以通过访问不同的路径获取不同的信息。

4. 实现步骤与详细代码解读 ​

接下来，我们将按照步骤实现商店 API 的两个接口，并详细解读每一行代码的作用。

Step 1：定义商店信息和商品列表数据 ​

在实际项目中，数据通常存储在数据库中，但为了简化学习过程，我们直接在服务器代码中定义数据对象。

javascript
// server.js

const express = require('express');
const app = express();
const PORT = 3000;

// 商店信息
const storeInfo = {
  name: "宁宁的小店",
  address: "123 樱花街, 东京",
  hours: "每天 9:00 - 18:00"
};

// 商品列表
const products = [
  { id: 1, name: "商品A", price: 100, stock: 50 },
  { id: 2, name: "商品B", price: 200, stock: 20 },
  { id: 3, name: "商品C", price: 300, stock: 15 }
];

  • 解释：

    • ​ storeInfo ​ 是一个对象，包含商店的名称、地址和营业时间，这些信息将用于 /api/info ​接口的响应内容。
    • ​ products ​ 是一个数组，每个元素是一个商品对象，包含商品的 id ​、 name ​、 price ​和 stock ​字段，用于模拟商店的商品数据。这个数据将用于 /api/products ​接口。

Step 2：创建商店信息接口 /api/info ​ ​

首先，我们创建商店信息接口，响应 GET 请求，返回商店的基本信息。

javascript
// 商店信息接口
app.get('/api/info', (req, res) => {
  res.json(storeInfo);
});

  • 解释：

    • ​ app.get('/api/info', (req, res) => {...}) ​：定义一个 GET 请求的路由。当客户端请求 /api/info ​时，会触发这个路由。
    • ​ res.json(storeInfo) ​： res.json() ​方法用于将 JavaScript 对象转换为 JSON 格式并发送给客户端。在这里， storeInfo ​对象被转换为 JSON 格式后返回，客户端可以解析并显示这些信息。

业务应用场景：客户端（如前端页面或移动应用）可以通过这个接口获得商店的基本信息，并将其展示在界面上，例如显示商店的名称、地址和营业时间。

Step 3：创建商品列表接口 /api/products ​ ​

接下来，我们创建商品列表接口，响应 GET 请求，返回商品列表的 JSON 数据。

javascript
// 商品列表接口
app.get('/api/products', (req, res) => {
  res.json(products);
});

  • 解释：

    • ​ app.get('/api/products', (req, res) => {...}) ​：定义一个 GET 请求的路由。当客户端请求 /api/products ​时，服务器会触发这个路由。
    • ​ res.json(products) ​：将 products ​数组转换为 JSON 格式并返回给客户端，这样客户端可以获取所有商品的数据，并在页面上显示商品列表。

业务应用场景：这个接口非常适合用于商品展示的场景，客户端可以获取所有商品的基本信息，并将商品列表显示在页面上，让用户可以浏览、查看商品信息。

Step 4：启动服务器 ​

最后，通过 app.listen() ​方法启动服务器，让 Express 应用开始在指定端口上监听请求。

javascript
// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

  • 解释：

    • ​ app.listen(PORT, () => {...}) ​：启动服务器，监听指定端口（本例中为 3000 端口）。当服务器成功启动时，控制台会显示一条消息 “服务器正在运行在 http://localhost:3000 ”。
    • 通过这个步骤，Express 应用就可以处理来自客户端的请求了。

5. 实际运行与调试 ​

启动服务器 ​

  1. 在项目根目录中运行以下命令，启动 Express 服务器：

    bash
    node server.js

  2. 终端会显示：

    服务器正在运行在 http://localhost:3000

    表示服务器已经成功启动，可以开始处理客户端请求。

在浏览器中查看 API 响应 ​

步骤：

  1. 打开浏览器并输入 URL http://localhost:3000/api/info ​。

    • 你应该会看到商店的基本信息（如商店名称、地址和营业时间）以 JSON 格式显示在浏览器页面上。

  2. 输入 URL http://localhost:3000/api/products ​。

    • 你应该会看到商品列表的 JSON 数据，每个商品包含 id ​、 name ​、 price ​和 stock ​等信息。

6. 核心知识点总结 ​

  • 路由定义：使用 `app

.get ()` 方法定义 GET 请求的路由。

  • JSON 响应：通过 res.json() ​方法将对象或数组转换为 JSON 格式并返回给客户端。
  • 请求与响应对象： req ​对象包含请求信息， res ​对象用于控制服务器的响应行为。

通过这次任务，樱宁宁完成了一个简单的商店 API 项目，对 Express 的路由和 API 开发有了更深的理解。阿波根海子对她的表现感到满意，并认为她已经掌握了基本的后端开发技能，为后续的进阶学习打下了坚实的基础。

Made with ❤️ by ALL 协作者

Copyright © 2023-present Evan You && ALL 协作者