接口API
接上数据看懂网络
前端点保存之后，数据是怎么送到后面、又怎样知道成功还是失败的？
{ "id": 184, "total": 32 }结论：约定好怎么问、怎么答；方法加路径是一次调用，状态码加 JSON 是结果。
接上数据
页面不再是空壳：接口、登录、权限、空数据和错误都要交代。
服务与数据
6 个条目数据库Database
接上数据
刷新或重启之后，订单为什么有的还在、有的就丢了？数据到底存在哪？
- #184 美式拿铁已支付
- #185 燕麦拿铁制作中
- #186 冰美式已支付
结论：落在表里的行，重启还能读到；只写在内存便利贴上的会丢。
接口分页API Pagination
接上数据
列表接口一次返回太多太慢，分页后又有新数据插进来，翻页时为什么会看到重复或漏行？
- #107补全单元测试
- #106优化首页图片
- #105接入消息队列
结论：用游标锚定这一页；按页码跳，插入新动态就会重复或漏行。
缓存Cache
接上数据
缓存命中率很高，可有人刚改了数据，别人看到的还是旧的——缓存到底什么时候算过期？
REST 资源建模
结论：纸条还在就秒回；空了才回柜取。改了源却不撕，就会读到旧版。
WebhookWebhook
接上数据
客户端不想每分钟问支付好没好，怎么让事件一来就主动通知我？
POST · evt_184 · ¥32
结论：对方主动推过来，不用反复问「好了吗」；同一封再来也不会重复入账。
REST 接口REST
接上数据
接口为什么有的写成 DELETE /articles/7，有的写成 POST /deleteArticle？哪种更好读？
DELETE · 柜子是空的
结论：同一地址加不同动作，操作同一份资源；结果看状态码，不把动词塞进路径。
网络与接口
2 个条目请求Request
接上数据看懂网络
“一个 HTTP 请求到底由什么组成？方法、路径、请求头和请求体是怎么拼成一条可发送的消息的？”
请求行
POST /api/favorites HTTP/1.1请求头
Content-Type: application/jsonAuthorization: Bearer …空行分隔头与体
请求体
{"item_id":"p_7"}请求 = 请求行 + 头 + 空行 + 可选体；方法说意图，路径说目标，头携带元信息。
响应Response
接上数据看懂网络
“接口返回的结果由什么组成？为什么有的 200 带数据，前端却要自己判 success:false 才知道失败？”
状态行
HTTP/1.1 200 OK响应头
Content-Type: application/json空行分隔头与体
响应体
{ data: […], error: null }响应 = 状态行 + 头 + 空行 + 可选体；状态码定语义，2xx 带 data、4xx/5xx 带 error。
账号与安全
5 个条目鉴权Auth
接上数据看懂网络
为什么有时要我登录，有时登录了还进不去？
打开「我的收藏」先问身份，再问权限
你现在是访客。点一下看系统怎么拦。
点进详情可对照三种结果：未登录 / 没权限 / 允许
登录Login
接上数据
“点了登录之后到底发生了什么？为什么连错几次就被锁？登录成功后，下一个请求怎么就知道是我？”
登录握手 · POST /api/login结论：登录只验一次身份；之后每个请求靠它发的凭证（Cookie / token）持续证明你是你。
会话Session
接上数据看懂网络
“登录之后每个请求都认识我，退出到底删的是什么？”
服务端记录在才算登录；退出删的是服务端记录，不是清浏览器——对照：只清 cookie 不算登出，记录残留仍能被偷来的 id 使用。
令牌Token
接上数据
“服务器不查数据库就认识我，靠的是我手里这段字符串；它被偷了或我想立刻下线怎么办？”
服务器只验签名和 exp 就放行——不查会话库，所以快、能跨服务；代价是过期前很难单条作废。
对照 session：服务端查记录可即时删；token 靠签名，撤销只能用短 exp + 黑名单，且 payload 是 base64 可读（不是加密）。
权限Permission
接上数据
登录进去了，为什么这条数据我能看、却不能删？没给的按钮直接没了，我到底有没有权？
运行与可靠性
3 个条目数据校验Validation
接上数据
“前端没拦，后端也没验，脏数据直接写进数据库，半夜被 500 告警叫醒。”
POST
/api/signupreq_7f2- 邮箱bob格式不对 · you@site.com
- 密码123至少 8 位 · 含字母和数字
- 年龄9须 13 岁以上
- 条款未同意必须勾选
400 · 4 个字段错误在入口挡回 · 脏数据未入库
若不校验直接放行 → 脏数据落库 · 业务逻辑崩溃 500。
错误处理Error Handling
接上数据
“代码出错了直接 catch 掉？还是把错误甩给用户看？”
GET /api/orders/ord_882 · 数据库连接断开
同一个错误，处理方式决定用户看到什么和系统能不能查。
实时连接WebSocket
接上数据
“HTTP 一问一答就断了，聊天和协同编辑那种服务器随时主动推、客户端也随时发的效果，到底靠什么实现？”
HTTP · 一问一答就断每次都要重新建连
WebSocket · 连一次，双向随时发握手一次，双方随时互发帧
对照：HTTP 每问一次都要重新连接；WebSocket 握手一次后保持一条双向通道，结果就是实时聊天、协同与推送都能做。
内容与数据展示
3 个条目表格Table
接上数据
「订单表排了序看不出方向，勾了行看不出选了几条，翻了页不知在第几页。」
| 订单 | 金额 ↓ | 状态 | |
|---|---|---|---|
| ✓ | #1022 | ¥320 | 已取消 |
| #1021 | ¥256 | 已支付 | |
| #1024 | ¥128 | 已支付 |
对照表头箭头、选中行、工具条计数一起回答「现在排什么、选了几条、在第几页」。
列表List
接上数据
「通知列表的项目结构不一致，加载到末尾时用户不知道还有没有更多内容。」
审核已完成刚刚未读
设计稿更新20 分钟前已读
新的评论回复1 小时前未读
当前未读 3 条 · 状态长在行上、计数长在物件上
空状态Empty
交互做完接上数据
「收藏夹一片空白——我是没有收藏，搜出来是空的，还是网挂了？」
我的收藏空态物件 · 随原因变
对照原因不同 → 空态的文案、图标与主操作都不同；空 ≠ 加载中，也 ≠ 请求失败。
Web 技术
2 个条目做完这一步之后
知识点可以反复查；任务则建议按「搭页面 → 交互 → 数据 → AI → 上线 → 协作」推进。