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}`);
});
相关推荐
JustHappy2 小时前
古法编程秘籍(七):互联网到底是什么?把两台电脑怎么说话搞懂就够了
前端·后端·网络协议
snow@li2 小时前
SEO-文章标题:写文章时候,分类+主标题+大纲+解释 作为标题 / 不点进去也知道全文覆盖什么 / 标题即架构
前端
Hommy883 小时前
【剪映小助手】添加图片接口(Add Images)
后端·github·剪映小助手·视频剪辑自动化
GetcharZp3 小时前
别再盲目用 OpenCV 读图了,这才是 CV 预处理的终极杀手锏!
后端
kyriewen3 小时前
Git Commit 前自动修复代码风格?配置 Husky + lint-staged,从此 CR 只聊逻辑
前端·git·面试
小和尚同志3 小时前
AI 自动化测试探索(一):Playwright MCP
前端·人工智能·aigc
老马识途2.04 小时前
在AI的帮助下理解spring的启动过程
java·前端·spring
徐小夕4 小时前
Loop Engineering 深度解析与实战指南(全网最全)
前端·算法·github
运筹vivo@5 小时前
Python ContextVar 底层机制与内存模型拆解
前端·数据库·python
#麻辣小龙虾#6 小时前
基于vue3.0开发一款【固废与废气运维管理系统】(支持源码)
前端·vue.js·vue3