Web-Dev-Beginner

Appearance

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

1. 概要 ​

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

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

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

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

POST 请求的构成 ​

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

  1. 请求行（Request Line）：

    • 包括请求方法（如 POST、GET、PUT、DELETE）、请求 URL 和 HTTP 版本。

    示例：

    POST /register HTTP/1.1

  2. 请求头（Request Headers）：

    • 包含请求的元信息，比如请求的内容类型（Content-Type​）、请求的来源（Origin​）、用户代理（User-Agent​）等。

    示例：

    Content-Type: application/json
Content-Length: 42
Host: localhost:3000

  3. 请求体（Request Body）：

    • 请求体包含了请求的实际数据，这是 POST 请求最重要的一部分。在用户注册或登录时，表单数据、JSON 数据等都被发送在请求体中。

    示例：

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

    请求体中可以包含不同格式的数据，常见的格式有：

    • URL 编码格式 (application/x-www-form-urlencoded​)
    • JSON 格式 (application/json​)
    • 表单文件上传 (multipart/form-data​)

常见 POST 请求内容 ​

  1. JSON 格式 在现代 web 开发中，JSON 格式常常用于前后端数据交换。前端通过 JavaScript 将表单数据转化为 JSON 格式，发送给服务器。

    示例：

    json
    {
  "username": "john_doe",
  "password": "password123"
}

  2. URL 编码格式 早期的 POST 请求使用 URL 编码格式来提交表单数据。数据以键值对的形式存在，类似于查询字符串，但通过 POST 请求发送。

    示例：

    username=john_doe&password=password123

    这种格式常见于 HTML 表单提交。

3. 如何处理 POST 请求？ ​

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

  1. 设置路由 在 Express 中，使用 app.post()​ 方法来定义 POST 路由。该方法会接收客户端发送的数据，进行处理并返回响应。

    示例代码：

    js
    app.post('/register', (req, res) => {
  const { username, password } = req.body;
  res.send(`用户名：${username}, 密码：${password}`);
});

  2. 解析请求体数据 默认情况下，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}`);
});

    通过这种方式，Express 会自动将请求体中的 JSON 数据转化为 JavaScript 对象，并将其赋值给 req.body​。你可以通过 req.body.username​ 和 req.body.password​ 来访问表单提交的数据。

  3. 验证请求数据 在处理用户提交的数据时，我们通常需要进行一些验证。例如，检查用户名是否为空，密码是否符合安全要求等。如果验证不通过，我们应该返回错误信息，告知用户。

    示例代码：

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

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

  // 如果数据有效，返回注册成功消息
  res.send(`注册成功，用户名：${username}`);
});

    通过这种方式，你能够在服务器端对用户输入的数据进行基本验证，并根据验证结果返回响应。

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

    示例代码：

    js
    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. 情景式案例解读：泷本日富美的注册与登录功能 ​

背景介绍 ​

​image​

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

步骤 1：创建 Express 应用 ​

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

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

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');
});

代码讲解

  1. Express 设置：

    js
    const express = require('express');
const app = express();
app.use(express.json());

    我们首先通过 require('express')​ 引入 Express 模块，并创建了一个 Express 应用实例 app​。接着，使用 app.use(express.json())​ 中间件来解析请求体中的 JSON 数据。这样，所有发送到服务器的请求中，如果包含 JSON 数据，Express 会自动将其解析并存储到 req.body​ 中。

  2. 注册路由：

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

    我们创建了一个 POST 路由 /register​，用于处理用户注册。通过 req.body​ 获取客户端提交的 用户名 和 密码。

  3. 验证数据：

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

    在接收到请求后，我们首先验证 用户名 和 密码 是否为空。如果任一字段为空，我们使用 res.status(400)​ 返回 400 错误码，并给出提示信息：“用户名和密码不能为空”。

  4. 读取本地用户数据：

    js
    fs.readFile('./user.json', (err, data) => {
  if (err) {
    return res.status(500).send('读取用户数据失败');
  }

    接下来，我们使用 ** fs.readFile ** 方法读取 user.json​ 文件，获取当前所有的注册用户信息。此文件模拟了一个简单的数据库，存储所有已注册用户的用户名和密码。

    如果读取文件失败（比如文件不存在），则返回 500 错误码，并发送相应的错误信息：“读取用户数据失败”。

  5. 检查用户名是否已存在：

    js
    const users = JSON.parse(data);

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

    将读取到的文件内容解析成 JavaScript 对象，并存储到 users​ 变量中。我们使用 Array.prototype.some()​ 方法检查是否有用户的 用户名 与请求中的 username​ 相同。如果已存在该用户名，返回 400 错误，并提示：“用户名已存在”。

  6. 添加新用户并保存数据：

    js
    users.push({ username, password });

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

    如果用户名没有重复，我们将新的用户信息添加到 users​ 数组中。接着，使用 ** fs.writeFile ** 方法将更新后的用户数据写回到 user.json​ 文件中。

    写入成功后，服务器返回 “注册成功” 的响应。

步骤 2：测试 POST 路由 ​

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

bash
node server.js

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

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

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

  1. 使用 Postman：
    你可以使用 Postman 这个工具来模拟发送 POST 请求。在 Postman 中，选择 POST 方法，输入 http://localhost:3000/register​ 作为 URL，然后在 Body 部分选择 raw 和 JSON 格式，输入以下内容：

    json
    {
  "username": "john_doe",
  "password": "password123"
}

    点击 Send 按钮，如果一切正常，应该会看到服务器返回“注册成功”。

  2. ** 使用 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"}'

    如果注册成功，终端将显示“注册成功”。如果出现用户名已存在或数据错误的情况，curl​ 将返回相应的错误信息。

步骤 4：检查 JSON 数据 ​

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

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

5. 总结 ​

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