本周要回答： 一个按钮被点击之后，数据在哪里处理、经过了谁、失败时用户会看到什么？
进入本周前： 能理解数据结构和核心处理函数；对网络基础不熟悉时先补 MDN，不直接进入完整全栈课程。
- 01用户事件
- 02本地状态
- 03模拟请求
- 04可见反馈
学习内容与理解目标
先建立浏览器、服务器、数据库和外部模型四个不同执行位置的概念。学习请求方法、状态码、JSON、超时和异步处理；理解界面状态至少包括空、加载、成功和错误。React 的组件、属性、状态与事件只学当前需要的部分，不同时追逐多种前端框架。
对于本地周计划工具，浏览器本身可能足够；新增后端应有明确原因。浏览器端环境变量和构建产物不能用来保密 API key。登录和权限不是“显示一个按钮”的问题；这一周先用 mock API 练数据流，不把真实账号接进来。
学习链接与选读范围
| 级别 | 官方或原始资料 | 本周只读这些 | 阅读预算 |
|---|---|---|---|
| 必读 | R32 · MDN：Overview of HTTP | 请求、响应、客户端与服务端的关系。 | 35 分钟 |
| 必读 | R29 · React：Quick Start | 组件、数据展示、事件、状态；完成一个最小表单。 | 50 分钟 |
| 补基础 | R22 · Full Stack Open Part 0：Fundamentals of Web apps | 浏览器与服务器如何交互；理解网络面板。 | 35 分钟 |
实战拆解
为工具建立一个只有必要字段的页面，保留原有纯函数与测试。先用合成数据，把用户最常用的一条流程走通。
在浏览器网络面板里观察一次请求，解释方法、路径、状态和响应体。为无后端项目说明“没有发出请求”，而不是凭感觉宣称本地。
模拟慢响应、无网络、服务端错误和格式错误。界面应提示用户现在能做什么；加载时防止误触发重复动作，但服务端仍需后续去重。
将用户输入和模型返回当作普通文本渲染；不得为了展示 Markdown 就直接信任任意 HTML。检查键盘可达性、表单标签和错误信息位置。
画一张文字版数据流：哪些字段留本地、哪些可能发往服务器、保存多久。没有用途的网络请求和第三方组件先不要加。
交付与验收
| 本周交付 | 怎样确认真的完成 |
|---|---|
| 可交互最小页面 | 正常、空、加载、错误四类状态可演示，键盘能完成核心流程。 |
| 数据流说明 | 本人能追踪一次输入，从页面到处理函数再到输出。 |
| 边界检查 | 页面和构建文件中没有秘密；不可信内容不被当可执行 HTML。 |
不用代码生成器的练习： 自己新增一个错误状态，或把一个长事件处理函数拆成可测试函数；先说明如何触发，再修改。
隐私与安全检查： 不要把“跨域限制”当身份验证，不把隐藏前端按钮当授权。若展示外部 Markdown，采用受控渲染并审查 HTML 处理；相关原则见 R63 · OWASP：Cross Site Scripting Prevention Cheat Sheet。开启网络功能前，先知道数据离开设备的那一步。
落到日常生活： 把工具入口放在实际会打开的位置，例如本地书签；不用“每天提醒自己记得用”来掩盖入口太深或操作太多。
过关或补课判断： 能解释网络面板中出现的请求，能演示错误路径，才进入交付阶段。还只会复制网页截图时，应先回到数据流和事件。
本周可复制的协作提示
请将现有纯逻辑接成一个最小页面，不另起大型架构。加入空、加载、成功和错误状态，使用合成输入与 mock API。解释每次网络请求的目的，并让我独立增加一种错误处理。
本周来源与核对范围
来源编号与核对说明沿用课程原文，基线为 2026-09-27。未逐一登录完成外部实验；实施前请核对最新版本与访问条件。
- R22Full Stack Open Part 0：Fundamentals of Web apps ↗
核对分部入口；按页面当前小节选择，不承诺练习编号固定。
- R29React：Quick Start ↗
组件、数据、事件与状态入门。
- R32MDN：Overview of HTTP ↗
浏览器、服务器、请求与响应的基础。
- R63OWASP：Cross Site Scripting Prevention Cheat Sheet ↗
输出编码、可信模板与不可信 HTML 处理。