今天把两个小任务合并跑通了：前端页面通过
fetch请求后端接口，后端提供了GET /users、GET /users/:id、POST /users三个接口。
中间踩了 URL 写错 的坑，最后理解了“增删改查的 URL 规则”。
一、任务一：前后端交互（前端拿数据 + 显示）
后端代码 server.js
前端代码 index.html
关键点
| 概念 | 解释 |
|---|---|
fetch | 浏览器自带的发请求方法，返回 Promise |
res.json() | 把响应转成 JS 对象 |
document.getElementById | 找到网页上的元素 |
innerHTML | 修改元素里面的内容 |
| 跨域 | 端口不同浏览器会拦，用 res.setHeader 解决 |
二、任务二：待办 API（增删改查）
增删改查 URL 规则（最重要）
| 操作 | 方法 | URL | 说明 |
|---|---|---|---|
| 查所有 | GET | /users | 不加 id |
| 查单个 | GET | /users/1 | 加 id |
| 新增 | POST | /users | 不加 id |
| 删除 | DELETE | /users/1 | 加 id |
| 整体修改 | PUT | /users/1 | 加 id |
| 部分修改 | PATCH | /users/1 | 加 id |
三、常见状态码
| 状态码 | 含义 | 使用场景 |
|---|---|---|
| 200 | OK | 获取数据成功 |
| 201 | Created | 新增数据成功 |
| 204 | No Content | 删除成功（无内容返回） |
| 400 | Bad Request | 前端传的参数不对 |
| 404 | Not Found | 资源不存在 |
| 500 | Internal Server Error | 后端代码报错 |
四、今天踩的坑 & 解决
| 坑 | 原因 | 解决 |
|---|---|---|
| 页面不显示“加载中” | 网速太快，瞬间完成 | 加 setTimeout 验证，不验证也不影响功能 |
fetch 写法没见过 | 没学过 Promise 的应用形式 | 知道 fetch 返回 Promise，照抄模板 |
| POST 返回 404 | URL 写成了 /users/1 | 改成 /users |
五、搞混的地方
| 请求是谁发给谁？ | 前端（浏览器）发请求给后端（Express），不是反过来 |
|---|---|
res.json() 是 Express 的方法还是原生的？ | Express 提供的，自动设 Content-Type: application/json |
<p id="info">加载中</p> 为什么不显示？ | 网速太快，瞬间被替换。加 2 秒延迟就能看到 |
fetch 和 Promise 的关系？ | fetch 返回 Promise，.then 和 .catch 就是 Promise 的写法 |
2.RESTful是一套 API 设计规则：URL 表示资源，HTTP 方法表示操作
3.next() = “当前中间件干完了，放行去下一个”
4.res.sendFile 是 Express 对 fs.readFile + res.end 的封装，底层确实用了路径拼接（path.join）
