express的中间件,全局中间件,路由中间件,静态资源中间件以及使用注意事项 , 获取请求体数据

Express 中间件系统 的详细讲解,包括全局中间件、路由中间件、静态资源中间件、请求体解析中间件,以及使用注意事项👇


🌐 一、什么是中间件(Middleware)?

中间件是 函数,在请求到达路由处理器之前被调用,用于拦截、修改请求或响应,或者终止请求处理流程。

中间件函数格式:

js 复制代码
(req, res, next) => { /* your logic */ }

调用 next() 表示继续传递请求给下一个中间件;否则请求会被"卡住"。


📌 二、全局中间件(应用级)

示例 1:日志中间件(所有请求都会执行)

js 复制代码
app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next(); // 继续执行下一个中间件
});

🚏 三、路由中间件(局部)

只对特定路由生效的中间件:

js 复制代码
const checkAuth = (req, res, next) => {
  if (req.query.token === '123') {
    next();
  } else {
    res.status(401).send('Unauthorized');
  }
};

app.get('/secure', checkAuth, (req, res) => {
  res.send('Access granted!');
});

📁 四、静态资源中间件

内置中间件 express.static() 用于托管静态文件(HTML、CSS、JS、图片等):

js 复制代码
app.use(express.static('public')); // 访问 public 文件夹

// 假设 public 中有 index.html,可以直接通过 http://localhost:3000/index.html 访问

🧾 五、获取请求体数据的中间件

1. 解析 JSON 格式

js 复制代码
app.use(express.json());

2. 解析表单格式(x-www-form-urlencoded)

js 复制代码
app.use(express.urlencoded({ extended: true }));

示例 POST 路由:

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

⚠️ 六、使用注意事项

注意事项 说明
中间件顺序 中间件是按顺序执行的,先定义的先执行
next() 必须调用 否则请求会卡住,不继续执行后续中间件或路由
错误处理中间件 中间件中捕获错误时要调用 next(err),Express 会自动进入错误处理中间件
静态中间件要放前面 否则可能被其他中间件或路由拦截
不要滥用全局中间件 建议用局部中间件提高性能与可维护性

🎁 七、完整示例

js 复制代码
const express = require('express');
const app = express();
const port = 3000;

// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

// 全局日志中间件
app.use((req, res, next) => {
  console.log(`[LOG] ${req.method} ${req.url}`);
  next();
});

// 路由中间件示例
const auth = (req, res, next) => {
  if (req.query.token === '123') next();
  else res.status(401).send('未授权');
};

app.get('/public-info', (req, res) => res.send('Everyone can see this'));

app.get('/private-info', auth, (req, res) => res.send('This is protected'));

app.post('/form', (req, res) => {
  res.send(req.body);
});

app.listen(port, () => {
  console.log(`App running at http://localhost:${port}`);
});
相关推荐
OpenTiny社区25 分钟前
AI-Extension:让 AI 真的「看得到、动得了」你的浏览器
前端·ai编程·mcp
IT_陈寒27 分钟前
Redis缓存击穿:3个鲜为人知的防御策略,90%开发者都忽略了!
前端·人工智能·后端
uzong1 小时前
Harness Engineering 是什么?一场新的 AI 范式已经开始
人工智能·后端·架构
农夫山泉不太甜2 小时前
Tauri v2 实战代码示例
前端
唐叔在学习2 小时前
Python桌面端应用最小化托盘开发实践
后端·python·程序员
yuhaiqiang2 小时前
被 AI 忽悠后,开始怀念搜索引擎了?
前端·后端·面试
红色石头本尊2 小时前
1-umi-前端工程化搭建
前端
真夜2 小时前
关于对echart盒子设置百分比读取的宽高没有撑开盒子解决方案
前端
二闹2 小时前
Python文件读取三巨头你该选择哪一个?
后端·python
楠木6852 小时前
RAG 资料库 Demo 完整开发流程
前端·ai编程