
本步目标:完成最终验收测试,回顾本轮学习成果
在结束本轮之前,让我们做一次完整的端到端测试,确保所有功能协同工作。
请按顺序执行以下操作:
| 步骤 | 操作 | 预期结果 |
|---|---|---|
| 1 | 清空所有现有任务 | 任务列表变空 |
| 2 | 添加任务 "买牛奶" | 任务出现在列表中 |
| 3 | 添加任务 "写周报" | 列表中有 2 个任务 |
| 4 | 添加任务 "学习 Vibe Coding" | 列表中有 3 个任务 |
| 5 | 标记 "买牛奶" 为已完成 | 该任务有视觉变化 |
| 6 | 删除 "写周报" | 列表中剩 2 个任务 |
| 7 | 刷新页面 | 任务状态完全保留 |
| 8 | 关闭并重新打开页面 | 任务状态完全保留 |
刷新/重新打开后,确认以下状态:
任务数量:2 个
"买牛奶":显示已完成状态(有删除线或变灰)
"学习 Vibe Coding":显示未完成状态
"写周报":已被删除,不应该出现
控制台无报错
添加、删除、完成功能仍然正常工作
恭喜你!经过三轮迭代,你的待办清单已经从一个静态页面,变成了一个真正可用的个人工具。
| 功能 | 4.2 结束时 | 4.3 结束时 | 4.4 结束时(现在) |
|---|---|---|---|
| 页面显示 | ✅ 静态页面 | ✅ 静态页面 | ✅ 静态页面 |
| 添加任务 | ❌ 不可用 | ✅ 可用 | ✅ 可用 |
| 删除任务 | ❌ 不可用 | ✅ 可用 | ✅ 可用 |
| 标记完成 | ❌ 不可用 | ✅ 可用 | ✅ 可用 |
| 数据持久化 | ❌ 刷新丢失 | ❌ 刷新丢失 | ✅ 刷新保留 |
从"空壳"到"能用",再到"好用"——这就是渐进式开发的力量。
| 来源 | 内容 | 用在哪里 |
|---|---|---|
| 第二章 2.3 节 | MVP 功能定义 | 确定本轮只做 localStorage |
| 第三章 3.2 节 | S.C.F. 精简框架 | 写存储功能的 Prompt |
| 第三章 3.5 节 | 迭代对话技巧 | 排查和修复问题 |
| 第三章 3.6 节 | 验证 AI 输出 | 测试数据是否正确保存 |
通过这一轮,你学到了:
| 技能 | 说明 |
|---|---|
| 数据持久化概念 | 理解为什么需要存储、存储在哪里 |
| localStorage 使用 | 浏览器本地存储的基本用法 |
| JSON 序列化基础 | 数据如何"打包"和"解包"(虽然 AI 帮你写了代码) |
| 数据验证思维 | 知道如何检查数据是否正确保存 |
| 开发者工具使用 | 学会查看 Application > Local Storage |
还记得第二章小李的 MVP 功能定义吗?
| 优先级 | 功能 | 状态 |
|---|---|---|
| P0 | 添加任务 | ✅ 已完成(4.3) |
| P0 | 显示任务列表 | ✅ 已完成(4.2) |
| P0 | 删除任务 | ✅ 已完成(4.3) |
| P0 | 标记完成 | ✅ 已完成(4.3) |
| P1 | 刷新后数据保留 | ✅ 已完成(4.4) |
| P2 | 任务分类 | 留给进阶版 |
| P2 | 截止日期 | 留给进阶版 |
小李的 MVP 核心功能(P0 + P1),现在全部实现了。
你现在拥有的是一个:
这不是一个练习,而是一个真正能用的东西。
在进阶篇中,我们会学习:
但对于个人使用来说,你现在做的这个版本已经完全够用了。
在实际开发中,遇到报错是常态。如果你在本轮遇到了无法解决的问题,不用担心——下一节专门讲如何 Debug。
先不要卡住,继续往下学。4.5 节会教你系统性的排查方法,学完后可以回来解决遗留问题。
核心功能已经完成,但在开发过程中你可能遇到过一些报错。
下一节,我们专门学习当 AI 代码出错时该怎么办——这是 Vibe Coding 的必备技能。