今天把 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需要中间件才能解析 - 假期最后一天,依然推进了一个完整模块