练习：跟着“保存留言”按钮走完全程

这项练习的目标不是完全理解每个符号，而是学会追踪一条功能路线。

准备工具

打开三个窗口：

1. 编辑器：搜索文件和函数名。
2. 浏览器开发者工具：Console 和 Network。
3. 运行项目的终端：查看前后端日志。

第一步：在页面找到按钮文字

页面写着“保存留言”。在编辑器全局搜索这四个字。

可能找到：

<button onClick={handleSubmit}>保存留言</button>

现在知道：点击会进入 handleSubmit。

第二步：在同一文件找 handleSubmit

async function handleSubmit() {
  await saveMessage(text)
}

这里又出现一个函数 saveMessage。继续搜索它在哪里定义或导入。

第三步：找到真正的 fetch

export async function saveMessage(text: string) {
  return fetch('/api/messages', {
    method: 'POST',
    body: JSON.stringify({ text })
  })
}

记下两样：

方法     POST
地址     /api/messages

第四步：用 Network 确认代码真的这样运行

1. 打开 Network。
2. 清空记录。
3. 输入一条测试留言。
4. 点击保存。
5. 找到 /api/messages。

检查实际 Method、Payload、Status 和 Response。

代码只是“准备这样做”；Network 才是浏览器“实际做了什么”。

第五步：在后端搜索地址

全局搜索 /api/messages，可能找到：

app.post('/api/messages', createMessage)

继续查 createMessage：

async function createMessage(req, res) {
  const message = await db.messages.create({ text: req.body.text })
  return res.status(201).json(message)
}

第六步：找到数据写入

db.messages.create 表示后端正在调用数据访问层。继续找 db 在哪里创建、连接的是哪个数据库、使用哪张表。

你不一定需要读懂 SQL，但应该能回答：

保存到哪张表：messages
主要字段：id、text、user_id、created_at
失败看哪里：后端日志和数据库权限

第七步：沿 Response 返回前端

后端返回 201 和 message JSON。回到 saveMessage 或 handleSubmit，找前端怎样使用返回值：

const saved = await saveMessage(text)
setMessages((current) => [...current, saved])

这一步让页面列表更新。

第八步：自己画出这条路线

不要复制下面答案，关闭页面后自己写一次：

按钮文件：
点击函数：
请求函数：
HTTP 方法和地址：
后端路由文件：
数据库动作：
返回状态码：
前端更新 state 的位置：

故意制造一个安全错误

在本地练习分支中，把请求地址临时改成：

/api/messages-wrong

然后点击按钮，观察：

1. Network 是否出现请求。
2. 状态码是不是 404。
3. Response 写了什么。
4. 后端正确路由为什么没运行。

练习结束后撤销这项修改。

你刚刚获得的能力

以后看到任何按钮，都可以沿同一套路走：

按钮文字
  → onClick
  → 函数名
  → fetch 地址
  → Network 真实请求
  → 后端路由
  → 数据库或第三方 API
  → Response
  → 前端 state

代码里写了 fetch，但点击按钮后 Network 没有任何请求。应该直接搜索后端路由吗？

答案：先不用。请求还没离开前端，应该先查按钮是否触发、前端函数是否提前报错，以及 fetch 前的代码是否中断。