学完这一课，你能：
- 说明前端、后端、接口和数据库的职责
- 沿着一次用户操作描述数据流动
- 为简单产品画出组件图和边界
1. 五个常见组件，各做一件事
- 前端
- 用户直接看到和操作的页面，负责展示信息、接收输入并发出请求。
- 后端
- 在服务器上处理规则，例如检查权限、计算结果、组织数据。
- 接口 API
- 前端与后端约定的沟通方式：请求要带什么，响应会返回什么。
- 数据库
- 保存需要长期存在的数据，例如用户、任务、订单和状态。
- 第三方服务
- 系统外部提供的能力，例如支付、短信、地图或 AI 服务。
2. 用“新建任务”走完一次链路
用户填写任务
输入标题并点击保存。
前端检查输入
整理数据并调用接口。
后端执行规则
确认身份和字段是否有效。
数据库保存记录
写入新任务并生成编号。
响应更新页面
返回结果，前端显示新任务。
如果按钮点了没反应，可能是前端事件没有触发；如果返回 401，可能是身份验证；如果返回 500，可能是后端或数据库；如果保存成功但页面没更新，问题可能又回到前端。
技术判断的起点先问“现象出现在哪一层”，再找证据。不要一看到页面不对，就认定一定是前端问题。
3. 用三张表看懂陌生系统
- 页面表列出用户能看到的页面、按钮、输入和结果。
- 数据表列出系统需要保存的对象及关键字段，例如任务的标题、状态和截止时间。
- 接口表列出每个操作发送什么、返回什么，以及失败时怎样表现。
最小系统边界先控制第一版
今日任务板第一版：能新增任务、勾选完成、刷新后仍保留。暂时不做登录、多人协作、提醒和云同步。
明确“不做什么”，也是系统设计的一部分。
动手练习 · 15 分钟
画出“今日任务板”组件图
- 写下用户会做的三个操作：新增、完成、删除。
- 为每个操作写出输入、处理和结果。
- 画出前端、数据保存位置，以及它们之间的箭头。
- 标出第一版不做的功能，避免范围不断扩大。