Web-Dev-Beginner

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开发有了更深的理解。阿波根海子对她的表现感到满意，并认为她已经掌握了基本的后端开发技能，为后续的进阶学习打下了坚实的基础。