🔌 06 · 前端和后端：你的网站会说话了

开场：餐厅的厨房和前台

一家餐厅分两部分：前台（点餐、上菜，客人看得见）和厨房（做菜，客人看不见，但菜好不好吃全看它）。

网站也一样：

• 前端 = 前台：浏览器里跑的代码（HTML/CSS/JS），用户直接看到、点击的东西
• 后端 = 厨房：服务器上跑的代码，负责“真正干活”——查数据、存数据、算数、调用别的服务

你前几章学的 HTML/CSS/JS 都是前端。今天认识后端。

API：前后端之间的“点餐窗口”

前端怎么让后端干活？通过 API（接口）——可以理解为点餐窗口：

前端（客人）：我要一份"查成绩"          →  GET  /api/code-lab/scores
后端（厨房）：好的，这是你要的数据      ←  返回 JSON

浏览器里发这个请求，一行代码就够：

const res = await fetch('/api/code-lab/chat', {
  method: 'POST',
  body: JSON.stringify({ messages: [...] }),
});

JSON 是前端和后端之间通用的“点菜单格式”——像这样：

{ "name": "小明", "score": 5, "time": "2026-08-11" }

花括号包起来的一组“键：值”，前后端都认识它。

真实案例①：AI 助手中转函数

还记得第 5 章的 AI 助手吗？它的工作流就是完整的前后端配合：

你在浏览器输入问题（前端）
    ↓ fetch 发请求
EdgeOne 函数（后端）收到请求
    ↓ 它拿着密钥（key）
去问 DeepSeek 大模型
    ↓ 拿到回答
返回给你（前端显示气泡）

为什么不让浏览器直接问 DeepSeek？ 因为密钥是付费凭证，放在前端代码里等于把钱包钥匙贴在门口——谁都能偷。所以密钥藏在后端，前端永远碰不到。这就是后端的核心价值之一：保护秘密 + 干活。

真实案例②：成绩榜服务

这个网站的“练习成绩榜”功能（做完测验提交成绩），同样走前后端：

1. 前端：你点提交 → POST /api/code-lab/score，带着你的名字和分数
2. 后端：函数收到成绩，校验、确认，把回执发回前端
3. 前端：显示“后端已收到 ✅”

这就是一条完整的数据链路：前端 → API → 后端 → 确认回执 → 前端展示。后端还可以把成绩存进数据库（KV 存储），这样就能做历史排行榜——存储功能正在开发中，到时候你会看到它上线。

去 成绩榜页面 亲手提交一次成绩，感受一下“你按了一个按钮，服务器另一端真的有代码在运行”！这就是“全栈”（前后端都懂）的意思。

本章小结

1. 前端 = 用户看到的（浏览器），后端 = 干活的（服务器）
2. API = 前后端的点餐窗口；JSON = 双方通用的数据格式
3. 密钥必须藏在后端；后端保护秘密、存取数据、连接外部服务

🧪 动手试试：打开练习成绩榜页面，提交一次成绩（家长可以帮忙），然后在浏览器按 F12 → 网络（Network）标签，刷新页面，看看请求列表——你能找到发往后端的那条请求吗？点开它，看看 JSON 长什么样。