Day15:Express 内置中间件三件套(跑通+理解)

6 阅读2分钟

今天把 Express 最常用的三个内置中间件全部跑通了:处理表单数据、处理 JSON 数据、托管静态资源。
还搞懂了“静态托管不是部署”,以及“给静态资源加前缀”是大项目标准做法。


一、今日核心代码


二、三个中间件的作用与场景

中间件作用什么时候用
express.urlencoded()解析表单格式数据(name=张三&age=18前端通过传统表单 POST 提交时
express.json()解析 JSON 格式数据({"name":"张三"}前端通过 AJAX / Fetch 提交 JSON 时
express.static()托管图片、CSS、HTML 等静态文件让外部能访问 public 文件夹里的资源

三、今天搞清楚的几个“为什么”

1. 为什么静态托管要加 /static 前缀?

javascript

app.use('/static', express.static('public'))
  • 避免路由冲突:自己的 API 可能也有 /images,不会和静态文件打架
  • 便于管理:一眼看出哪些请求是静态资源
  • 便于迁移:以后换 CDN,改前缀就行

✅ 这是大项目的标准写法。


2. 静态托管 = 部署到云端吗?

不是。

能做的事不能做的事
本地开发时省去手写 res.sendFile让外网用户访问
改 CSS 不用重启服务器代替云存储

3. extended: false 是什么意思?

javascript

app.use(express.urlencoded({ extended: false }))
  • false:用 Node.js 内置的 querystring 模块解析(够用)
  • true:用第三方 qs 模块解析(支持嵌套对象,一般用不到)

记住写 false 就行。  这是固定写法,不用深究。


4. req.body 从哪里来?

  • 没有 express.urlencoded() 或 express.json() → req.body 是 undefined
  • 有了这两个中间件 → Express 自动解析请求体,把结果挂到 req.body 上

今天在 Postman 里测试不同 Body 格式,终端能打印出数据,就是因为这两行配置。


四、今天踩的坑 & 解决

原因解决
图片不显示路径写错或静态托管没配置检查 express.static 路径 + 浏览器访问 /static/img/无人机.png
req.body 是 undefined忘记在postman里面调整body的文件格式针对所需的内容调整,eg:json:raw

五、今日小成就

  • 三个内置中间件全部跑通
  • 理解了 express.static 的真正作用(本地托管,不是部署)
  • 知道给静态资源加前缀的好处
  • 知道 req.body 需要中间件才能解析
  • 假期最后一天,依然推进了一个完整模块