一个网站到底怎么工作：从页面走到数据库

这一模块只使用一个贯穿项目：AI 留言板。

用户输入一句话，点击保存；刷新页面以后，这句话还在。这个看似简单的功能，已经包含网站最重要的几层。

用户看到的页面
  ↓ 点击按钮
React 前端
  ↓ POST /api/messages
后端 API
  ↓ INSERT
数据库
  ↓ 返回新记录
后端 JSON
  ↓ 更新 state
React 重新显示列表

学完应该能回答

• 哪些代码在用户浏览器运行？
• 为什么 API Key 不能放进前端？
• fetch 发出的数据去哪里？
• 后端为什么还要连接数据库？
• 为什么刷新后数据有时会消失？
• 出错时该看 Console、Network、后端日志还是数据库？

按顺序学习

01浏览器怎样加载页面HTML、CSS、JavaScript 分别何时进入浏览器。02前端和后端怎样分工用保存留言功能明确两边的责任和安全边界。03一次请求完整旅程从点击按钮、fetch、API、数据库一直走回页面。04这些东西藏在哪些文件package.json、src、server、public、.env 和 dist 分别做什么。05跟着一个按钮读代码不读完整仓库，只追踪保存留言这一条功能路线。06出错时怎样定位根据 Console、Network、后端日志和数据库证据缩小范围。

先记住一个最有用的判断

页面刷新后还存在的数据
通常必须被保存到浏览器存储、服务器文件、数据库或文件存储中。
只放在 React state 或服务器内存里的数据，重启或刷新后可能消失。

用户刷新页面以后，刚才保存的留言消失了。是否可以直接断定 React 有问题？

答案：不能。要先判断留言原本只存在前端 state、后端内存，还是确实写入了持久存储。刷新后消失经常说明数据根本没有持久化。