Express学习笔记（二）——Express中间件

绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过， 应用级别中间件是绑定到 app 实例上 ， 路由级别中间件绑定到 router 实例上 ，代码示例如下：

3.3 错误级别的中间件

• 专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。

• 错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)。

• 错误级别的中间件，必须注册在所有路由之后！

演示错误级别的中间件：

const express = require('express')

const app = express()

app.get('/', (req, res) => {
  // 1.1 人为的制造一个错误
  throw new Error('服务器内部发生了错误！')
  res.send('home page')
})

// 2. 定义错误级别的中间件，捕获整个项目的异常错误，从而防止程序的崩溃
app.use((err, req, res, next) => {
  console.log('发生了错误！' + err.message)
  res.send('Error:' + err.message)
})

app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

3.4 Express内置的中间件

• ① express.static 快速托管静态资源的内置中间件，例如： HTML 文件、图片、CSS 样式等（无兼容性）

// 在这里调用 express.static() 方法，快速的对外提供静态资源
app.use('/abc', express.static('./files'))

app.use(express.static('./clock'))

• ② express.json 解析 JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）

• ③ express.urlencoded 解析 URL-encoded 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）

代码演示：

const express = require('express')

const app = express()

// 注意：除了错误级别的中间件，其他的中间件，必须在路由之前进行配置
// 通过 express.json() 这个中间件，解析表单中的 JSON 格式的数据
app.use(express.json())

// 通过 express.urlencoded() 这个中间件，来解析表单中的 url-encoded 格式的数据
app.use(express.urlencoded({extended: false}))

app.post('/user', (req, res) => {
  // 在服务器，可使用 req.body 这个属性，来接收客户端发送过来的请求体数据
  // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body)
  res.send('ok')
})

app.post('/book', (req, res) => {
  // 在服务器端，可以通过 req.body 来获取 JSON 格式的表单数据 和 url-encoded 格式的数据
  console.log(req.body)
  res.send('ok')
})

app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

3.5 第三方的中间件

• ① 运行 npm install body-parser 安装中间件
• ② 使用 require 导入中间件
• ③ 调用 app.use() 注册并使用中间件

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

// 1. 导入解析表单数据的中间件 body-parser
const parser = require('body-parser')

// 2. 使用 app.use() 注册中间件
app.use(parser.urlencoded({ extended: false}))

app.post('/user', (req, res) => {
  // 如果没有配置任何解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body)
  res.send('ok')
})

app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

• Express 内置的 express.urlencoded 中间件，就是基于 body-parser 这个第三方中间件进一步封装出来的。

4. JSON与URL-encoded请求体格式详解（补充）

4.1 JSON 格式（application/json）

• 定义与特点

  • 数据格式：基于键值对的嵌套结构，支持对象、数组、字符串、数字、布尔值等数据类型。
  • 编码方式：直接使用 Unicode 字符（如 UTF-8），无需对特殊字符（如 @、空格）进行转义。
  • 可读性：结构化清晰，适合人类阅读和调试。

• 语法示例

{
  "name": "Alice",
  "age": 28,
  "isStudent": false,
  "hobbies": ["coding", "music"],
  "address": {
    "city": "Shanghai",
    "postcode": "200000"
  }
}

• 适用场景

  • 复杂数据：需要传递嵌套对象或数组（如配置信息、用户资料）。
  • 前后端分离：现代 Web 应用和移动端 API 交互。
  • 非表单数据：如日志上报、批量操作、业务逻辑数据。

• HTTP 请求示例

POST /api/users HTTP/1.1
Content-Type: application/json

{
  "username": "alice",
  "password": "p@ssw0rd"
}

• 前后端处理

  • 前端发送

    • // 使用 Fetch API
      fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username: 'alice', password: 'p@ssw0rd' }),
      });
      
      // 注意：必须手动调用 JSON.stringify() 序列化数据

  • 后端解析（以 Node.js/Express 为例）：

    • const express = require('express');
      const app = express();
      
      // 需启用 JSON 解析中间件
      app.use(express.json());
      
      app.post('/api/users', (req, res) => {
        console.log(req.body.username); // 直接获取 JSON 数据
      });

• 注意事项

  • Content-Type 必须正确：若未设置 application/json，后端可能无法解析。

  • 不支持文件上传：JSON 无法直接传输二进制文件（需用 Base64 编码或改用 multipart/form-data）。

  • 数据冗余：字段名重复时会占用额外空间（如数组中的多个对象）。

4.2 URL-encoded 格式（application/x-www-form-urlencoded）

• 定义与特点

  • 数据格式：扁平化的键值对，用 & 分隔多个参数，格式为 key1=value1&key2=value2。

  • 编码方式：特殊字符（如空格、@、:）需转义为 %XX 形式（如空格 → %20，@ → %40）。

  • 可读性：编码后的字符串难以直接阅读。

• 语法示例

name=Alice&age=28&isStudent=false&hobbies=coding&hobbies=music&address.city=Shanghai&address.postcode=200000

• 注意：
  • URL-encoded 本身不支持嵌套对象或数组，但可通过约定实现（如 address.city 表示嵌套字段）。

• 适用场景

  • HTML 表单提交：浏览器默认的表单编码方式。

  • 简单键值对：无嵌套结构的参数（如登录、搜索）。

  • 兼容旧系统：传统 API 或需要 URL 参数复用的场景（如 GET 请求的 Query String）。

• HTTP 请求示例

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=alice&password=p%40ssw0rd

前后端处理

• 前端发送：

  • // 使用 URLSearchParams 自动编码
    const params = new URLSearchParams();
    params.append('username', 'alice');
    params.append('password', 'p@ssw0rd');
    
    fetch('/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: params,
    });
    
    // 或手动拼接字符串（需注意转义）
    body: 'username=alice&password=p%40ssw0rd'

• 后端解析（以 Node.js/Express 为例）：

  • const express = require('express');
    const app = express();
    
    // 需启用 URL-encoded 解析中间件
    app.use(express.urlencoded({ extended: true })); // extended: true 允许解析嵌套对象
    
    app.post('/login', (req, res) => {
      console.log(req.body.username); // 直接获取参数
    });

• 注意事项
  • 编码必须正确：前端需处理特殊字符转义（如 @ → %40），否则后端可能解析错误。
  • 不支持复杂结构：嵌套对象或数组需通过约定（如 hobbies[]=coding&hobbies[]=music）或后端框架扩展（如 express.urlencoded({ extended: true })）。
  • 数据体积较大：重复的键名和转义字符会增加传输量。

5. 自定义中间件

5.1 需求描述与实现步骤

• ① 定义中间件
• ② 监听 req 的 data 事件
• ③ 监听 req 的 end 事件
• ④ 使用 querystring 模块解析请求体数据
• ⑤ 将解析出来的数据对象挂载为 req.body
• ⑥ 将自定义中间件封装为模块

5.2 定义中间件