4.4.4 完整功能验证与阶段回顾 转载

来源:https://github.com/datawhalechina/vibe-vibe

04-practice-0-to-1_4.4-data-storage_4.4.4-final-verification.png

本步目标:完成最终验收测试,回顾本轮学习成果

最终验收测试

在结束本轮之前,让我们做一次完整的端到端测试,确保所有功能协同工作。

测试流程

请按顺序执行以下操作:

步骤 操作 预期结果
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),现在全部实现了。

当前项目状态

你现在拥有的是一个:

  • 功能完整的待办清单:增删改查 + 数据持久化
  • 可以真正使用的个人工具:刷新不丢、关机不丢
  • 你亲手做出来的第一个 AI 编程项目

这不是一个练习,而是一个真正能用的东西

💡 进阶预告

在进阶篇中,我们会学习:

  • 使用云数据库(如 Supabase)实现多设备同步
  • 添加用户登录,每个人有自己的任务列表
  • 部署到互联网,让别人也能访问

但对于个人使用来说,你现在做的这个版本已经完全够用了。

遇到问题怎么办?

在实际开发中,遇到报错是常态。如果你在本轮遇到了无法解决的问题,不用担心——下一节专门讲如何 Debug。

⚠️ 如果有问题

先不要卡住,继续往下学。4.5 节会教你系统性的排查方法,学完后可以回来解决遗留问题。

下一步

核心功能已经完成,但在开发过程中你可能遇到过一些报错。

下一节,我们专门学习当 AI 代码出错时该怎么办——这是 Vibe Coding 的必备技能。

4.5 Debug 实战

最后编辑:Alex 2026-03-05 11:39:50