第 5 课 前端、后端、数据库怎么配合

所属课程

青少年高级营

所属模块

模块 A：产品与系统结构

本课概览

• 讲解核心：把系统图讲成可理解的工作流程。
• 本课重点：把系统图讲成可理解的工作流程。
• 课上产出：简化系统图。
• 示例场景：校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构

本课知识图谱

• 完整应用一定要同时考虑用户、角色、页面和流程。
• 系统图和页面树的作用，是把复杂项目讲成可讨论、可修改的结构。
• 一个系统说得清，后面的数据库、接口和管理端才有落点。
• 本课重点要落在“把系统图讲成可理解的工作流程。”上。

课前准备

老师准备

• 提前准备与“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”相关的课堂示例页或草图，方便学生先看见成品轮廓。
• 准备一张“角色与页面对应关系图”作为课堂演示图。
• 准备一张“一条完整用户流程图截图”作为课堂演示图。
• 把本课阶段成果“简化系统图。”的评价标准提前写在板书或投屏页上。

学生准备

• 准备好本节课会用到的文字、图片或题目素材。
• 带着“前端、后端、数据库怎么配合”相关的一个真实使用场景进入课堂，方便快速进入任务。
• 准备在课堂上记录一张草图、流程图或问题清单。

本课素材清单

• 角色卡：学生、老师、管理员
• 页面树模板或流程图模板
• 一个完整动作的路径说明，例如“提交作业”或“借阅图书”
• 阶段成果模板：简化系统图。
• 参考来源：teens-project/engineering/api-backend

可直接使用的素材正文

示例文本

系统说明示例
角色：学生、老师、管理员
学生要做：查看内容、提交任务、查看反馈
老师要做：发布内容、查看提交、修改状态
管理员要做：维护数据、处理异常、查看统计
课堂问题：如果同一条数据既要给学生看，又要给老师改，它应该放在哪一层最合适？

示例数据 / 字段

系统图节点：
- 用户端页面
- 管理端页面
- 数据记录
- 流程动作

练习题 / 操作任务

练习 1：给“校园图书角借阅平台”补一条“老师操作流程”。
练习 2：画出“学生提交借阅申请 -> 老师确认 -> 状态更新”的 3 步流程。
练习 3：判断“借阅状态”这个数据应该出现在学生端、老师端还是两边都要出现。

成套素材包

系统结构讲解素材
角色 1：学生 —— 查看内容、提交任务、查看反馈。
角色 2：老师 —— 发布内容、查看提交、修改状态。
角色 3：管理员 —— 维护数据、处理异常、查看统计。
流程示例：学生提交借阅申请 -> 老师审核 -> 状态更新为“已借出” -> 学生再次查看时看到最新状态。

课堂练习题组

1. 给这个系统再补 1 条“老师操作流程”。
2. 画出“学生提交 -> 老师处理 -> 状态更新”的 3 步流程。
3. 判断“借阅状态”应出现在学生端、老师端，还是两边都要出现。
4. 用一句话解释前端、后端和数据库在这个例子里的分工。

长正文素材

前后端与数据库协作长正文
这一课适合把系统讲成一条“谁先做动作、谁再处理、谁最后显示”的完整链路。导语可以这样写：当学生点击提交、老师在后台审核、页面状态跟着变化时，这中间其实有三个层面在配合。前端负责让人看见和操作，后端负责处理请求和规则，数据库负责把信息保存下来。
主体段一：老师可以先讲最短例子。学生提交一条借阅申请，前端先把内容收集起来；后端判断这条申请该怎么处理；数据库把状态保存为“待确认”；页面刷新后，学生看到的就是更新后的结果。只要这个链路讲顺，学生就会第一次真正明白三者不是并列名词，而是在合作。
主体段二：这节课还可以顺手讲“为什么不能只做页面”。如果没有后端，很多判断逻辑没地方放；如果没有数据库，记录无法稳定保存；如果没有前端，用户就没有操作入口。三者各自有边界，但也是互相依赖的。
课堂提问组：1. 如果学生提交了内容，但数据库没保存，会发生什么？ 2. 如果有数据库但没有前端，普通用户还能方便地用吗？ 3. 为什么同一个结果要经过多个环节才能显示出来？
页面收束语：当前端、后端和数据库被讲成一条顺着走的流程，学生就会发现，这不是很远的架构词，而是项目真正跑起来的骨架。

页面文案建议

• 说明句式：谁进入页面、先做什么、系统再处理什么。
• 过渡句式：同一份数据，不同角色会看到不同重点。

可替换素材方向

• 先讲清角色和流程，再讲页面和数据。
• 一个系统图里先不要超过 3 个角色和 5 个关键动作。

主视觉配图

页面示例配图

截图规划示意

60 分钟教学展开

0-15 分钟：还原真实使用场景

讲解推进

• 从“前端、后端、数据库怎么配合”在真实产品里的使用场景切入，让学生知道这不是额外知识，而是完整项目的一部分。
• 结合“把系统图讲成可理解的工作流程”说明今天这一课为什么会影响作品是否稳定、可用或可发布。
• 明确本课阶段目标是完成“简化系统图”，让学生始终围绕可验证的结果推进。

本段知识点

• 先从“前端、后端、数据库怎么配合”的真实使用场景入手，帮助学生知道今天为什么要学这一课。
• 完整应用一定要同时考虑用户、角色、页面和流程。
• 系统图和页面树的作用，是把复杂项目讲成可讨论、可修改的结构。

建议展示 / 截图

• 角色与页面对应关系图
• 前端、后端、数据库怎么配合的课堂任务卡或成果示意图

本段资料与素材

• 角色卡：学生、老师、管理员
• 任务说明卡 1 份

本段逐字稿

【本段开场】

同学们，先把今天这节课放回一个真实项目里。课题是“前端、后端、数据库怎么配合”，但我们真正要看的是：当系统里开始出现“把系统图讲成可理解的工作流程”时，项目会发生什么变化。

这一模块开始真正进入“系统结构”视角，重点不是多做页，而是看清角色、流程和边界。

先把情境放回真实项目里去想。假如现在面对的是“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”，如果没有今天这一层，这个系统最容易卡在哪里？

我们先看“角色卡：学生、老师、管理员”。看示例的时候，不只是看页面长什么样，而是看角色、数据和流程到底是怎样被摆出来的。

先把前端、后端、数据库讲成一条顺着走的工作流程，让学生不再把它们当成并列名词。

先把使用场景讲稳，比先记术语更重要。只要学生知道这一层在解决谁的麻烦，后面结构就会顺很多。

这一段先把场景、角色和目标收稳。起点一旦说清，后面系统图和流程线就不会飘。

你们现在先不要急着回答得很大，只要先把“谁、做什么、最后留下什么结果”说清，就已经够用了。

如果只有前端没有数据库，页面刷新后会发生什么？

等会儿我们会从一个最小例子开始，不是为了把事情讲简单，而是为了把关键关系先讲准。

等会儿我会先拿一个“学生提交借阅申请”的例子，把前端、后端、数据库一层层串起来。

这一段一直要记住：开始像一个在画系统骨架的人。只要你开始会判断角色、数据、页面和流程的关系，这节课就已经不只是“多学几个新词”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例图和流程线多收一遍。系统类的内容一旦关系没收住，后面每加一层都会更乱。

三层协作先收在这里。今天最重要的，不是记住词，而是看见一条动作链怎样真正跑起来。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给八至九年级学生看的“系统结构课堂演示页”课堂开场页。 本课主题是“前端、后端、数据库怎么配合”，页面场景使用“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：角色区、页面或流程区、系统结构图、一句判断说明。 核心内容请围绕“把系统图讲成可理解的工作流程”来实现。 页面重点突出：先把今天这个系统问题讲成真实场景。 页面要让人一打开就知道这页在做什么。 首屏要有主题说明、核心内容区和一个明确入口，可以保留一个开始按钮或继续入口。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。除了界面，还要把角色、数据、流程或状态关系讲清，不要只做外观示意。

课堂动作

• 先用 1 到 2 分钟让学生说出自己对“前端、后端、数据库怎么配合”最直观的理解，再进入示例页。

阶段成果

• 完成本课任务目标和阶段成果的确认。

15-30 分钟：讲清关键流程与边界条件

讲解推进

• 把“把系统图讲成可理解的工作流程”拆成具体流程，例如先发生什么、再检查什么、最后如何确认结果。
• 通过流程图、数据流或操作顺序说明关键节点，帮助学生建立工程化的顺序感。
• 强调常见边界条件与风险点，让学生知道哪里最容易出错、最需要回看。

本段知识点

• 前端负责展示与交互，后端负责处理逻辑，数据库负责保存记录，这三层承担的任务不同。
• 把“把系统图讲成可理解的工作流程。”拆成可观察、可操作的页面结构或流程关系。
• 完整应用一定要同时考虑用户、角色、页面和流程。
• 系统图和页面树的作用，是把复杂项目讲成可讨论、可修改的结构。

建议展示 / 截图

• 一条完整用户流程图截图
• 前端、后端、数据库怎么配合的结构草图、流程图或区域标注图

本段资料与素材

• 页面树模板或流程图模板
• 结构草图模板 1 份

本段逐字稿

【本段开场】

现在我们不急着继续堆功能，先把这节课最关键的关系拆开。只要这一段能听明白，后面很多看起来复杂的词都会落到具体动作上。

这一模块开始真正进入“系统结构”视角，重点不是多做页，而是看清角色、流程和边界。

这一段继续围绕“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”往下看。我们不是再换一个新例子，而是把同一个场景里的结构关系真正拆开。

这一段继续借“页面树模板或流程图模板”来拆关系。你们要边看边判断：这一块到底是在交代页面、数据，还是流程。

把“看见与操作、处理与判断、保存与读取”三层分工拆开，帮助学生第一次真正理解协作边界。

这一段最怕的是把关系讲散。我们要一直顺着“谁在用、谁处理、结果去哪”这一条线往下走。

这一段最关键的是把复杂内容讲成顺着走的关系。先看谁在用，再看谁处理，最后看结果去哪。

这一步要不断追问：它到底在系统里负责哪一层？如果答不上来，就说明关系还没有收稳。

如果有数据库没有前端，普通用户还能顺畅完成动作吗？

接下来这几分钟，你们要重点听“关系”而不是只听名词。名词可以晚一点记，关系不能听散。

这一段我会不断把动作拆成“谁先动、谁处理、谁保存、谁显示”。只要顺序一清楚，这三个词就不抽象了。

这一段一直要记住：开始像一个在画系统骨架的人。只要你开始会判断角色、数据、页面和流程的关系，这节课就已经不只是“多学几个新词”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例图和流程线多收一遍。系统类的内容一旦关系没收住，后面每加一层都会更乱。

只要前端、后端、数据库开始各就各位，系统图就会比原来扎实很多。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给八至九年级学生看的“系统结构课堂演示页”结构拆解页。 本课主题是“前端、后端、数据库怎么配合”，页面场景使用“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：角色区、页面或流程区、系统结构图、一句判断说明。 核心内容请围绕“把系统图讲成可理解的工作流程”来实现。 页面重点突出：把角色、流程、页面或结构关系拆开讲清。 页面要把区块分工、流程顺序或阅读路径讲清。 请用分区标题、编号、箭头、步骤标签或结构图，把每一块分别负责什么写清楚。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。除了界面，还要把角色、数据、流程或状态关系讲清，不要只做外观示意。

课堂动作

• 拿“报名一次活动”或“提交一次作业”举例，把三层分工讲成一个完整动作。
• 带学生一起把今天的页面、流程或知识结构画成一张简单草图，边讲边标注。

阶段成果

• 形成一张结构图、分区图或流程图草稿。

30-45 分钟：按步骤完成核心操作

讲解推进

• 按照清晰步骤完成“简化系统图”的主体部分，让学生把今天讲到的流程真正走一遍。
• 要求学生边做边记录“把系统图讲成可理解的工作流程”落在项目中的具体位置，而不是只追求最终跑通。
• 讲师及时处理最容易卡住的操作环节，并提醒学生保留关键截图、日志或流程说明。

本段知识点

• 系统图最重要的不是画得复杂，而是能把动作路径讲清楚。
• 在动手环节里，把“简化系统图。”做成真正能演示的结果。
• 系统图和页面树的作用，是把复杂项目讲成可讨论、可修改的结构。
• 一个系统说得清，后面的数据库、接口和管理端才有落点。

建议展示 / 截图

• 页面树和系统结构图并排显示的截图
• 简化系统图。正在完成中的过程截图

本段资料与素材

• 一个完整动作的路径说明，例如“提交作业”或“借阅图书”
• 简化系统图。的半成品模板

本段逐字稿

【本段开场】

下面开始看最关键的一轮演示。今天这一段不求做很多，而是要把一条最短闭环跑顺，让你们看见结果是怎样真的出现的。

这一模块开始真正进入“系统结构”视角，重点不是多做页，而是看清角色、流程和边界。

现在把“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”里的关键动作跑起来。只要这一轮动作能看顺，学生就会知道系统不是停在示意图上。

接下来还是先盯住“一个完整动作的路径说明，例如“提交作业”或“借阅图书””。今天这一步不是看热闹，而是看最关键的一轮动作怎样真的跑起来。

现场跑一轮“提交 - 处理 - 保存 - 回显”的完整链路，让三层配合变得可见。

动手时只盯最关键的动作链。只要“简化系统图。”的核心闭环跑通，今天这节课就已经有真实结果。

动手时先保最短闭环。只要今天这条“简化系统图。”核心链路真的跑起来，系统就已经站住一大半。

如果演示一跑就乱，先回到最短流程，不要一边加功能一边猜问题会不会自己消失。

老师审核这件事更像前端动作、后端判断，还是数据库保存？

下面这一段我会先演示，再回头解释。你们先看顺序，再看每一步分别落在哪一层。

接下来我会跑一轮最短链路，让你们看见“提交以后为什么不会立刻只停在页面上”。

这一段一直要记住：开始像一个在画系统骨架的人。只要你开始会判断角色、数据、页面和流程的关系，这节课就已经不只是“多学几个新词”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例图和流程线多收一遍。系统类的内容一旦关系没收住，后面每加一层都会更乱。

这一课最值钱的，是你第一次开始把架构词听成工作流程。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给八至九年级学生看的“系统结构课堂演示页”功能演示页。 本课主题是“前端、后端、数据库怎么配合”，页面场景使用“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：角色区、页面或流程区、系统结构图、一句判断说明。 核心内容请围绕“把系统图讲成可理解的工作流程”来实现。 页面重点突出：做出一轮能看见完整链路的结构示范。 页面要做出最关键的一轮功能演示，让操作、反馈和结果连成闭环。 必须支持至少一轮真实动作，例如点击、输入、切换、提交、答题、反馈或状态变化，并且操作后立刻出现结果。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。除了界面，还要把角色、数据、流程或状态关系讲清，不要只做外观示意。

课堂动作

• 讲师边投屏边带做，让学生至少独立完成一次最关键动作。

阶段成果

• 要求学生把一个完整动作画成三步：页面发起、系统处理、数据保存或返回。
• 拿到“简化系统图。”的可演示版本。

45-60 分钟：检查规范、记录问题并沉淀方法

讲解推进

• 围绕“把系统图讲成可理解的工作流程”检查结果是否稳定，包括边界输入、异常情况或不同页面之间的配合。
• 把今天的“简化系统图”沉淀成一份可复用的方法记录，方便后续课程继续调用。
• 最后统一回顾本课流程，让学生把“知道怎么做”提升到“下次还能独立重做”。

本段知识点

• 通过检查、互评和整理，让学生知道这节课的成果怎样继续进入下一课。
• 一个系统说得清，后面的数据库、接口和管理端才有落点。

建议展示 / 截图

• 简化系统图。最终整理后的展示截图
• 同伴互评或发布前检查清单截图

本段资料与素材

• 检查清单 1 份
• 结尾展示顺序卡 1 份

本段逐字稿

【本段开场】

最后这一段我们不再继续加内容，而是把今天的结果讲清楚、收整齐。能不能把“简化系统图。”说顺，决定这节课到底有没有真正站住。

这一模块开始真正进入“系统结构”视角，重点不是多做页，而是看清角色、流程和边界。

最后再回到“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”这个场景里看一遍结果。系统讲到这里，要能让别人听懂它为什么值得继续做下去。

最后回头看“检查清单 1 份”，重点不在多加内容，而在把已经做出来的结果讲顺、收稳、讲明白。

收束成一套三层分工判断法，让学生最后能说出一个动作分别落在哪一层。

这一段的重点不是再扩内容，而是把结果说得清、顺、稳。能复述清楚，才是真的学会了。

这一段收尾时先把结果讲顺、看顺、检查顺。能复述清楚，才是真的会了。

收尾时先看逻辑有没有闭合，再看表达是不是顺。讲不顺的地方，通常也是理解还没彻底收住的地方。

你现在能不能用一句话讲清三层各自负责什么？

最后我会请大家把结果倒着讲一遍：先说今天拿到了什么，再说它是怎样一步步出来的。

最后我会请大家回头判断：同样一个结果，为什么要经过多个层面才能稳定出现。

这一段一直要记住：开始像一个在画系统骨架的人。只要你开始会判断角色、数据、页面和流程的关系，这节课就已经不只是“多学几个新词”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例图和流程线多收一遍。系统类的内容一旦关系没收住，后面每加一层都会更乱。

记住，系统一旦说得清三层配合，后面的数据、接口和管理页都会更容易落地。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给八至九年级学生看的“系统结构课堂演示页”收束展示页。 本课主题是“前端、后端、数据库怎么配合”，页面场景使用“校园图书角借阅与学习任务平台，或校园互助学习平台的系统结构”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：角色区、页面或流程区、系统结构图、一句判断说明。 核心内容请围绕“把系统图讲成可理解的工作流程”来实现。 页面重点突出：把系统图整理成可复述、可继续补的版本。 页面要把当前结果整理成适合展示和收束的版本。 页面里要保留结果展示、小结、检查点或下一步，让成果能够直接拿来展示。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。除了界面，还要把角色、数据、流程或状态关系讲清，不要只做外观示意。

课堂动作

• 安排结对互看或小组展示，让学生把自己的结果讲成一段完整说明。

阶段成果

• 把今天的结果整理成可展示、可提交、可继续修改的版本。

课后作业

必做任务

• 把你今天讲到的系统，再用“谁进入、先做什么、系统再处理什么”的顺序说一遍。
• 把课堂上的“简化系统图。”再补一个更完整的细节，并保留前后对比。

提交建议

• 提交本课产出：简化系统图。
• 附 2 到 3 句说明：你今天做了什么、最满意哪里、还准备改什么。

自查清单

• 我能说清楚这节课做的页面或流程是给谁用的。
• 我能指出页面里最重要的一个区块、一个动作和一个结果。
• 我保存了课堂过程中的草图、截图或记录，方便下次继续。

相关参考

• teens-project/engineering/api-backend