Doc：处理 POST 请求，接收和解析数据

1. 概要

本节课程将带你了解如何在 Express 框架中处理 POST 请求，并通过实例讲解如何接收和解析数据。你将学习如何使用 Express 路由方法来处理前端传送的数据，并返回处理结果。本节的核心目标是掌握如何处理用户提交的表单数据，包括数据验证和错误处理。

通过一个情景案例，我们将实现一个用户注册 API，它接收用户的用户名和密码，并返回注册结果。

2. 基础知识：什么是 POST 请求？

POST 请求是一种 HTTP 请求方法，通常用于向服务器提交数据。与 GET 请求主要用于获取数据不同，POST 请求将数据发送到服务器，服务器根据收到的数据进行处理。

POST 请求的构成

一个 POST 请求的典型结构包括以下几个部分：

请求行（Request Line）：
- 包括请求方法（如 POST、GET、PUT、DELETE）、请求 URL 和 HTTP 版本。
示例：
```
POST /register HTTP/1.1
```
1
请求头（Request Headers）：
- 包含请求的元信息，比如请求的内容类型（ Content-Type ）、请求的来源（ Origin ）、用户代理（ User-Agent ）等。
示例：
```
Content-Type: application/json
Content-Length: 42
Host: localhost:3000
```
1
2
3
请求体（Request Body）：
- 请求体包含了请求的实际数据，这是 POST 请求最重要的一部分。在用户注册或登录时，表单数据、JSON 数据等都被发送在请求体中。
示例：
```
{
  "username": "john_doe",
  "password": "password123"
}
```
1
2
3
4
请求体中可以包含不同格式的数据，常见的格式有：
- URL 编码格式 ( application/x-www-form-urlencoded )
- JSON 格式 ( application/json )
- 表单文件上传 ( multipart/form-data )

常见 POST 请求内容

JSON 格式在现代 web 开发中，JSON 格式常常用于前后端数据交换。前端通过 JavaScript 将表单数据转化为 JSON 格式，发送给服务器。
示例：
json
```
{
  "username": "john_doe",
  "password": "password123"
}
```
1
2
3
4
URL 编码格式早期的 POST 请求使用 URL 编码格式来提交表单数据。数据以键值对的形式存在，类似于查询字符串，但通过 POST 请求发送。
示例：
```
username=john_doe&password=password123
```
1
这种格式常见于 HTML 表单提交。

3. 如何处理 POST 请求？

在 Express 中，处理 POST 请求的过程可以分为以下几个步骤：

设置路由在 Express 中，使用 app.post() 方法来定义 POST 路由。该方法会接收客户端发送的数据，进行处理并返回响应。
示例代码：
js
```
app.post('/register', (req, res) => {
  const { username, password } = req.body;
  res.send(`用户名：${username}, 密码：${password}`);
});
```
1
2
3
4
解析请求体数据默认情况下，Express 并不会自动解析请求体中的数据。为了让 Express 识别并处理传递的表单数据或 JSON 数据，需要使用相应的中间件。
- express.json() ：用来解析 application/json 格式的数据。
- express.urlencoded() ：用来解析 application/x-www-form-urlencoded 格式的数据。
示例代码：
js
```
const express = require('express');
const app = express();

// 使用中间件解析 JSON 数据
app.use(express.json());

app.post('/register', (req, res) => {
  const { username, password } = req.body;
  res.send(`用户名：${username}, 密码：${password}`);
});
```
1
2
3
4
5
6
7
8
9
10
通过这种方式，Express 会自动将请求体中的 JSON 数据转化为 JavaScript 对象，并将其赋值给 req.body 。你可以通过 req.body.username 和 req.body.password 来访问表单提交的数据。
验证请求数据在处理用户提交的数据时，我们通常需要进行一些验证。例如，检查用户名是否为空，密码是否符合安全要求等。如果验证不通过，我们应该返回错误信息，告知用户。
示例代码：
js
```
app.post('/register', (req, res) => {
  const { username, password } = req.body;

  // 验证用户名和密码是否为空
  if (!username || !password) {
    return res.status(400).send('用户名和密码不能为空');
  }

  // 如果数据有效，返回注册成功消息
  res.send(`注册成功，用户名：${username}`);
});
```
1
2
3
4
5
6
7
8
9
10
11
通过这种方式，你能够在服务器端对用户输入的数据进行基本验证，并根据验证结果返回响应。

处理数据库操作（模拟）在实际的生产环境中，用户的注册信息通常会存储在数据库中。但是，在本节课程中，我们将使用 JSON 文件模拟一个数据库，读取和写入用户数据。

示例代码：

const fs = require('fs');
const users = [];  // 模拟数据库

app.post('/register', (req, res) => {
  const { username, password } = req.body;

  if (!username || !password) {
    return res.status(400).send('用户名和密码不能为空');
  }

  // 检查用户名是否已存在
  if (users.some(user => user.username === username)) {
    return res.status(400).send('用户名已存在');
  }

  // 将新用户添加到模拟数据库
  users.push({ username, password });
  res.send('注册成功');
});

4. 情景式案例解读：泷本日富美的注册与登录功能

背景介绍

泷本日富美是青叶的前辈，她负责产品页面的设计和功能实现。她希望用户可以通过注册账号来发布产品评价。为了实现这一需求，我们将开发一个简单的用户注册功能。用户输入用户名和密码后，系统会验证数据，并将用户信息存储到本地 JSON 文件中。接着，用户可以通过登录页面验证自己是否能够成功登录。

步骤 1：创建 Express 应用

首先，我们需要创建一个简单的 Express 应用，设置路由来处理用户的注册请求。我们将处理 POST 请求，并接收请求体中的 用户名 和密码。

在 server.js 文件中，编写以下代码：

const express = require('express');
const fs = require('fs');
const app = express();

// 使用中间件解析 JSON 数据
app.use(express.json());

// 注册路由
app.post('/register', (req, res) => {
  const { username, password } = req.body;

  // 验证数据
  if (!username || !password) {
    return res.status(400).send('用户名和密码不能为空');
  }

  // 模拟读取本地的用户数据文件
  fs.readFile('./user.json', (err, data) => {
    if (err) {
      return res.status(500).send('读取用户数据失败');
    }

    const users = JSON.parse(data);

    // 检查用户名是否已存在
    if (users.some(user => user.username === username)) {
      return res.status(400).send('用户名已存在');
    }

    // 添加新用户
    users.push({ username, password });

    // 保存更新后的用户数据
    fs.writeFile('./user.json', JSON.stringify(users, null, 2), (err) => {
      if (err) {
        return res.status(500).send('保存用户数据失败');
      }
      res.send('注册成功');
    });
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

代码讲解

Express 设置：
js
```
const express = require('express');
const app = express();
app.use(express.json());
```
1
2
3
我们首先通过 require('express') 引入 Express 模块，并创建了一个 Express 应用实例 app 。接着，使用 app.use(express.json()) 中间件来解析请求体中的 JSON 数据。这样，所有发送到服务器的请求中，如果包含 JSON 数据，Express 会自动将其解析并存储到 req.body 中。
注册路由：
js
```
app.post('/register', (req, res) => {
  const { username, password } = req.body;
```
1
2
我们创建了一个 POST 路由 /register ，用于处理用户注册。通过 req.body 获取客户端提交的 用户名 和密码。
验证数据：
js
```
if (!username || !password) {
  return res.status(400).send('用户名和密码不能为空');
}
```
1
2
3
在接收到请求后，我们首先验证 用户名 和密码是否为空。如果任一字段为空，我们使用 res.status(400) 返回 400 错误码，并给出提示信息：“用户名和密码不能为空”。
读取本地用户数据：
js
```
fs.readFile('./user.json', (err, data) => {
  if (err) {
    return res.status(500).send('读取用户数据失败');
  }
```
1
2
3
4
接下来，我们使用 ** fs.readFile ** 方法读取 user.json 文件，获取当前所有的注册用户信息。此文件模拟了一个简单的数据库，存储所有已注册用户的用户名和密码。
如果读取文件失败（比如文件不存在），则返回 500 错误码，并发送相应的错误信息：“读取用户数据失败”。
检查用户名是否已存在：
js
```
const users = JSON.parse(data);

if (users.some(user => user.username === username)) {
  return res.status(400).send('用户名已存在');
}
```
1
2
3
4
5
将读取到的文件内容解析成 JavaScript 对象，并存储到 users 变量中。我们使用 Array.prototype.some() 方法检查是否有用户的 用户名 与请求中的 username 相同。如果已存在该用户名，返回 400 错误，并提示：“用户名已存在”。
添加新用户并保存数据：
js
```
users.push({ username, password });

fs.writeFile('./user.json', JSON.stringify(users, null, 2), (err) => {
  if (err) {
    return res.status(500).send('保存用户数据失败');
  }
  res.send('注册成功');
});
```
1
2
3
4
5
6
7
8
如果用户名没有重复，我们将新的用户信息添加到 users 数组中。接着，使用 ** fs.writeFile ** 方法将更新后的用户数据写回到 user.json 文件中。
写入成功后，服务器返回 “注册成功” 的响应。

步骤 2：测试 POST 路由

在 server.js 文件编写完成后，运行服务器：

bash

node server.js

服务器将会监听 http://localhost:3000 ，准备接收来自客户端的请求。

步骤 3：模拟客户端请求

在客户端模拟发送 POST 请求，有两种方法，我们使用第二种较为方便。

使用 Postman：
你可以使用 Postman 这个工具来模拟发送 POST 请求。在 Postman 中，选择 POST 方法，输入 http://localhost:3000/register 作为 URL，然后在 Body 部分选择 raw 和 JSON 格式，输入以下内容：
json
```
{
  "username": "john_doe",
  "password": "password123"
}
```
1
2
3
4
点击 Send 按钮，如果一切正常，应该会看到服务器返回 “注册成功”。
** 使用 curl 命令 **（适用于 WSL2 Ubuntu 环境）：
你也可以在终端中使用 curl 来发送 POST 请求。假设你在 Ubuntu 环境中，可以使用以下命令：
bash
```
curl -X POST http://localhost:3000/register \
-H "Content-Type: application/json" \
-d '{"username": "john_doe", "password": "password123"}'
```
1
2
3
如果注册成功，终端将显示 “注册成功”。如果出现用户名已存在或数据错误的情况， curl 将返回相应的错误信息。

步骤 4：检查 JSON 数据

每次成功注册一个新用户时，都会将用户信息保存到 user.json 文件中。你可以在 user.json 中查看已经注册的用户信息：

json

[
  {
    "username": "john_doe",
    "password": "password123"
  }
]

5. 总结

在本节课程中，我们详细讲解了如何处理 POST 请求，接收用户提交的数据并返回响应。通过使用 Express 中的 app.post() 方法，我们能够轻松地接收和处理数据，并进行验证。你也学会了如何使用 express.json() 中间件来解析请求体中的 JSON 数据，并根据用户提交的表单数据做出适当的响应。通过完成本节练习，你掌握了如何实现简单的用户注册和登录功能。

4.2.1 导读模块

4.2.2 前端三件套基础

4.2.3 现代前端技术栈

4.3.1 引入

4.3.2 week-1 前端三件套

4.3.3 week-2 Git初步

4.3.4 week-3 DOM操作 Node基础

4.3.5 week-4 Vue入门 Express路由

4.3.6 week-5 Vue路由 POST请求处理

Doc：处理 POST 请求，接收和解析数据

1. 概要

2. 基础知识：什么是 POST 请求？

POST 请求的构成

常见 POST 请求内容

3. 如何处理 POST 请求？

4. 情景式案例解读：泷本日富美的注册与登录功能

背景介绍

步骤 1：创建 Express 应用

步骤 2：测试 POST 路由

步骤 3：模拟客户端请求

步骤 4：检查 JSON 数据

5. 总结

Doc：处理 POST 请求，接收和解析数据 ​

1. 概要 ​

2. 基础知识：什么是 POST 请求？ ​

POST 请求的构成 ​

常见 POST 请求内容 ​

3. 如何处理 POST 请求？ ​

4. 情景式案例解读：泷本日富美的注册与登录功能 ​

背景介绍 ​

步骤 1：创建 Express 应用 ​

步骤 2：测试 POST 路由 ​

步骤 3：模拟客户端请求 ​

步骤 4：检查 JSON 数据 ​

5. 总结 ​

Doc：处理 POST 请求，接收和解析数据

1. 概要

2. 基础知识：什么是 POST 请求？

POST 请求的构成

常见 POST 请求内容

3. 如何处理 POST 请求？

4. 情景式案例解读：泷本日富美的注册与登录功能

背景介绍

步骤 1：创建 Express 应用

步骤 2：测试 POST 路由

步骤 3：模拟客户端请求

步骤 4：检查 JSON 数据

5. 总结