导语：23 篇后端做完了——表结构有了、四个接口能落库。但用户不会用接口，用户要点按钮。这一篇做前端，把接口变成能点的界面。
23 篇结束时，你的待办应用已经有了"仓库"（SQLite 表）和"窗口"（四个接口），数据重启还在。但这一切用户都看不见——用户看到的是页面。这一篇补上最后一块：前端页面，让增删改查变成输入框、按钮和列表。
一、让 AI 生成前端
需求模板（接着 23 篇的对话往下说，上下文自然延续）：
"后端已经能用了：POST/GET/PUT/DELETE /todos，数据存 SQLite。现在写一个前端页面：一个输入框 + 新增按钮，下面列出所有待办，每条待办有'勾选完成'和'删除'按钮。用 HTML + 原生 JS 调后端接口，不要框架。写完告诉我怎么打开测试。"
为什么这样写：
- 上下文（后端已能用 + 接口清单）：AI 不用重新认识项目。
- 期望（输入框 + 列表 + 勾选 + 删除）：界面要素说清。
- 范围（HTML + 原生 JS，不要框架）：新手阶段别上 React/Vue。
经验：接着上一轮的对话往下说，别开新对话——AI 记得你的项目结构和接口，前端生成的准确率直接翻倍（22 篇②：给足上下文）。
二、看前端怎么调后端（三样对齐）
前端和后台的连接，就是 15 篇讲的"传话窗口"。看这一行就懂了：
// 新增待办：把输入框内容 POST 给后端
fetch('/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: '我的第一件事' })
})
对照检查三样东西：
- 路径（
/todos）——和后端路由一致吗？ - 方法（POST）——和后端接口一致吗？
- 字段名（
title）——和数据库表字段一致吗？
经验：前端调不通，八成是这三样之一对不上——用浏览器开发者工具（F12）的 Network 面板看请求，一眼定位（19 篇：排查按链路来）。
三、跑通完整流程 + 验证清单（本篇重点）
前端写完，按 22 篇第④步做完整验证——走一遍全部功能：
| 功能 | 操作 | 期望 |
|---|---|---|
| 新增 | 输入内容点新增 | 列表出现新待办 |
| 查看 | 刷新页面 | 待办还在 |
| 完成 | 勾选 | 显示为完成状态 |
| 删除 | 点删除 | 待办消失 |
| 持久化 | 重启后端再看 | 数据还在 |
验证四步走：
- 跑起来：启动后端 + 打开前端页面，无报错。
- 逐功能测：新增 → 显示 → 勾选完成 → 删除，四个功能全走一遍，别只测一个。
- 看网络请求：F12 → Network，确认每个操作都发出了正确的请求（路径、方法、字段）。
- 问 AI 解释：让它讲讲"数据从输入框到数据库的完整路径"——讲得通，代码就是真通的。
经验："刷新还在"和"重启还在"是两个层次——刷新还在说明前端调接口调对了；重启还在说明后端真的落库了（23 篇验证过的）。两个都过，应用才算真做成了。
四、避坑清单
- 跨域（CORS）报错：前端和后端端口不同（如前端 5500、后端 5000），浏览器会拦跨域请求——让 AI 给后端加 CORS 配置，一句话的事，别自己瞎改。
- 字段对不上：前端发
title、后端读name——数据存不进去。对照表结构检查字段名。 - 路径不一致：前端调
/todos/（多斜杠）、后端路由是/todos——404。F12 Network 一眼看出。 - 改完不生效：改了前端文件，浏览器要硬刷新（Ctrl+F5 清缓存）；改了后端要重启服务（14 篇）。
- 数据没存住：重启后待办消失——问题在后端（23 篇的落库验证），别在前端瞎找。
总结
- 前端需求模板：输入框 + 列表 + 勾选 + 删除，HTML + 原生 JS，接着 23 篇的对话说。
- 前后端连接看三样：路径、方法、字段名——和后端接口一一对应。
- 完整验证：跑起来、逐功能测（新增/查看/完成/删除/持久化）、看 Network、问解释。
- 避坑五条：CORS 让 AI 配、字段名对齐、路径对齐、改完硬刷新/重启、数据没存住回查后端。
10 分钟小任务：让 AI 生成前端页面，然后走一遍验证清单——五个功能全测一遍，重点看"刷新还在"和"重启还在"两关。全部通过，恭喜：你的第一个完整应用做成了——有数据库、有接口、有页面！ 下一篇，把它部署到云服务器，让全世界都能访问。
下一篇：项目上服务器：Linux + Docker 部署实战。