3.5 让 Coding Agent 接手：给表单项目加后端和统计看板

上一节，我们已经准备好了两样东西：

• 一个能在浏览器中打开的静态 HTML 答题页面。
• 一份说明数据回收、统计看板和验收标准的 PRD。

页面告诉 Agent“现在长什么样”，PRD 告诉 Agent“接下来要做到什么”。

这两样东西放在一起，才是一次比较完整的项目交接。

这一篇，我们就让带界面的 IDE Agent 接手，在现有页面基础上加入后端、数据保存和统计看板。

完整参考项目地址是：

https://gitee.com/yldj-it/form-example

这个仓库可以作为完整参考案例。它的价值不在于技术有多复杂，而在于能让新手看清第一次“静态页面、后端接收、数据库保存、教师统计”的闭环。

先明确：这是热身项目

全书主线还是机房排座系统。

但如果一上来就进入排座系统，很多老师会同时遇到太多概念：

• 复杂页面。
• 数据库模型。
• 登录。
• 名单导入。
• 拖拽交互。
• 投屏展示。
• 项目配置。

这对非计算机专业背景的老师不友好。

所以我们先用一个表单统计项目热身。

它只做一件容易理解的事：

学生提交答题数据，老师查看统计结果。

这件事足够小，但已经包含校园 Web 项目的关键积木：

• 页面。
• 后端。
• 接口。
• 数据保存。
• 统计看板。

这一次的重点不是照抄参考仓库，而是学会把上一节形成的 HTML 和 PRD 交给 Agent，让它按需求一步步改造。

先把 HTML 和 PRD 放在同一个目录

开始之前，先准备一个项目文件夹。

最开始不需要复杂结构，只有两个文件也可以：

form-project
├── index.html
└── PRD.md

index.html 是 3.4 生成并确认过的学生答题页面。

PRD.md 是聊天型 AI 根据页面和统计需求整理出的需求文档。

然后用 VS Code、Trae、Qoder 等带界面的 IDE 打开整个 form-project 文件夹。

注意，是打开整个文件夹，不是只打开 index.html。

只有打开整个目录，Agent 才能同时看到页面和需求文档，也才能在后面新增后端、数据库和看板文件。

如果你想直接观察一个已经完成的参考结构，也可以下载或克隆 form-example，让 Agent 对照它说明最终项目可能包含哪些部分。

但学习主线仍然是：

从自己的静态 HTML 和 PRD 出发，
在现有页面基础上逐步加入功能。

让 Agent 先读项目，再动手

打开项目目录后，不要一上来就说：

帮我把项目做完整。

这句话范围太大，也没有告诉 Agent 要保留什么。

可以先这样说：

当前项目目录中有：
1. index.html：已经确认过的静态答题页面。
2. PRD.md：数据回收和统计看板需求文档。

请先阅读这两个文件，不要立即修改代码，也不要重写现有页面。

请先用信息科技老师能听懂的话说明：
1. PRD 要求实现哪些功能。
2. 现有 HTML 已经完成了哪些内容。
3. 还需要增加哪些后端、数据库和看板功能。
4. 你建议分成哪几个阶段改造。
5. 每个阶段准备新增或修改哪些文件。
6. 每个阶段完成后怎样验收。

这一步的目的，是让 Agent 先对照 PRD 看清现状，再提出施工计划。

老师不需要判断每一行代码，但要确认三件事：

• Agent 没有准备重写已经确认好的页面。
• 改造顺序是从小到大，而不是同时加入所有功能。
• 每一步都有老师能执行的验收动作。

把改造拆成三个阶段

对这个热身项目，可以把任务压缩成三个阶段。

第一阶段，让后端能够接收学生提交的数据。

请先完成第一阶段：
在保留现有页面样式和题目内容的基础上，
加入 Node.js 和 Express 后端，
让学生点击提交后，数据能够发送到后端接口。

这一步先不要做统计看板。
修改前说明文件范围，修改后运行项目并告诉我怎样验证接口确实收到了数据。

第二阶段，让提交记录真正保存下来。

第一阶段已经验收通过。
现在请加入 SQLite 或同类轻量数据保存方式。

请按照 PRD 保存学生姓名、学号、班级、每题答案、
每题是否正确、总分和提交时间。

不要修改无关页面。
完成后请说明数据库文件在哪里，并告诉我怎样验证重启服务后数据仍然存在。

第三阶段，再加入教师统计看板。

数据保存已经验收通过。
现在请按照 PRD 增加教师统计看板。

看板至少显示提交人数、平均分、最高分、总正确率、
各班级统计、每道题正确率和学生成绩列表。

请先说明准备增加哪些接口和页面文件，
我确认后再修改。

这样拆分以后，即使某一步报错，也只需要处理当前阶段，不会同时面对页面、接口、数据库和看板四类问题。

Agent 最终可能把目录整理成类似结构：

form-project
├── public
│   ├── index.html
│   └── dashboard.html
├── database
│   └── db.js
├── data
│   └── exam.db
├── server.js
├── package.json
├── README.md
└── PRD.md

目录不一定完全相同。这里重要的不是文件名必须一致，而是你能看出页面、后端、数据库和需求文档各自放在哪里。

数据是怎样走完一圈的

这个项目最值得学习的地方，是数据流很清楚。

可以用一条线串起来：

学生填写页面
  -> 点击提交
  -> 浏览器发送请求
  -> Express 后端接收
  -> 数据库保存
  -> 统计接口读取
  -> 看板页面展示

这就是第二章讲过的 Web 请求闭环。

现在它不再是概念，而是一个能运行的项目。

学生端关心的是：

我能不能提交成功？

老师端关心的是：

我能不能看到全班数据？

项目端关心的是：

数据有没有真的保存下来？
统计结果是不是从保存的数据算出来的？

这三句话，就能帮你抓住大部分校园表单项目的核心。

运行命令也交给 Agent 解释和执行

如果你的 Node.js 和 npm 已经在 3.2 完成体检，Agent 通常会建议在项目目录里执行：

npm install
npm start

但不要看到命令就直接复制。

可以先对 IDE Agent 说：

请根据当前项目的 package.json 和 README，
说明安装依赖和启动项目需要执行哪些命令。

请解释每条命令的作用、预计会修改哪些文件，
并确认不会覆盖现有页面或真实数据。
我确认后再执行。

老师确认以后，再让 Agent 通过 IDE 内置终端执行。这样做的重点不是让老师完全不接触命令，而是让每条命令都有来由、有范围、有结果。

具体命令以项目的 README.md 和 package.json 为准。

运行后，重点看终端输出的访问地址。

通常会有本机访问地址：

http://localhost:3000

也可能会显示局域网访问地址：

http://192.168.x.x:3000

本机访问说明你自己电脑能打开。

局域网访问则意味着同办公室或同机房的其他电脑，可能也能通过这个地址访问。

这一篇只轻轻碰一下内网访问。防火墙、端口、监听地址和校园网络限制，第四章会继续讲。

不要只验收页面能打开

表单项目最容易出现一个错觉：

学生页面能打开，统计页面也能打开，项目就完成了。

还不够。

至少要走一遍完整验收。

验收动作	要确认什么
提交一条测试数据	页面提示提交成功
刷新学生页面	不影响已经提交的数据
打开统计看板	提交人数发生变化
切换班级筛选	对应班级数据正确
查看题目正确率	每题统计能显示
搜索学生	能找到刚刚提交的测试学生
重启服务后再打开看板	已提交数据仍然存在

特别注意最后一项。

如果重启服务后数据还在，说明它不是只存在浏览器临时状态里。

这才是真正跨过了“静态页面”的门槛。

这里还可以补一张真实操作截图：先停止并重新启动服务，再刷新统计看板，确认刚才提交的模拟学生记录仍然存在。

出现问题时，只修当前阶段

当某个阶段没有通过验收时，不要马上让 Agent 重写整个项目。

先把从命令开始到报错结束的完整日志交给 Agent，并说明当前处在哪个阶段：

我们正在进行第二阶段：保存提交数据。

请根据下面的完整日志判断问题属于目录、依赖、数据库配置还是代码逻辑。
请先说明原因和最小修复方案，不要修改统计看板或其他无关页面。

（粘贴完整日志）

如果某一步已经通过，再继续下一个阶段。

通过后再让 Agent 做小改动

当项目能跑起来以后，你可能会想继续改。

比如：

• 增加班级选项。
• 修改题目内容。
• 调整统计指标。
• 隐藏学生端通往看板的入口。
• 增加导出 CSV。
• 增加重复提交提示。

不要一次全丢给 Agent。

可以这样分小步：

请基于当前项目增加一个功能：统计看板支持按班级筛选。

要求：
1. 先说明你准备修改哪些文件。
2. 不要重写整个项目。
3. 修改后请告诉我如何验收。
4. 如果涉及数据库字段变化，请单独说明。

这类提示词比“帮我优化一下”更可靠。

因为它限制了范围，也要求 Agent 解释验收方法。

真实数据先别乱用

表单项目很容易涉及学生姓名、学号、班级和成绩。

在练习阶段，建议先使用模拟数据。

比如：

姓名：测试学生01
学号：2026001
班级：测试班

不要把真实学生名单、真实成绩、身份证号、手机号等敏感信息随便发给在线 AI，也不要把带真实数据的数据库文件上传到公开仓库。

这是第二章讲过的数据和安全底线。

技术越方便，越要记得边界。

你已经完成第一次闭环

到这里，你已经看过一个真正的小型校园 Web 项目了。

它不像机房排座系统那么复杂，但已经包含最关键的过程：

页面填写 -> 后端接收 -> 数据保存 -> 看板统计

这就是从静态页面走向项目化 Web 的第一步。

下一篇，我们把这个经验迁移到主线项目：机房固定布局与班级轮换动态排座系统。

那会是一个更大的项目。别急着被技术栈吓住，我们还是按同一个方法来：先读文档，再拆结构，再拆功能，再让 AI 小步修改。

用流程图回看从 PRD 到第一次闭环

flowchart TD
  A[静态 HTML + PRD] --> B[IDE Agent 阅读并给出计划]
  B --> C[老师确认改造阶段]
  C --> D[加入后端接口]
  D --> E[保存提交数据]
  E --> F[加入统计看板]
  F --> G{模拟数据验收}
  G -->|通过| H[完成热身项目，进入 3.6]
  G -->|未通过| I[交日志给 Agent 修当前阶段]
  I --> G

封面