Vibe Coding 02：换个浏览器，刚记的账怎么没了？

上一集，我们做出了一个 HTML 记账页面。午饭 32 元，点击保存，明细和合计都能看到。

但在同一台电脑上，换一个独立浏览器打开，账本又变空了。

这条记录没有被删掉。记录仍在原来的浏览器存储里，另一个浏览器读不到它。我是夏末，这一集沿着这笔午饭，把前端、后端和数据库的分工讲清楚。

!第二集封面：让两个页面用同一本账

这次要改变的是记录的去向

目标很具体：在浏览器 A 记下的账，浏览器 B 刷新后也能看到；在 B 修改金额，回到 A 刷新，应该读到修改后的结果。

还有两个要求：程序关掉再启动，记录应该还在；保存失败时，页面得如实提示，不能清空输入，再给一个成功的错觉。

这四件事就是本轮的验收标准。它们来自教学中复现的问题。实际使用者是不是最需要这个能力，还要通过试用确认。

前端：接住用户的操作

上一集的表单、金额输入、日期选择、支出明细，以及按钮点击后的界面变化，属于前端。这些内容在浏览器里运行，是使用者看见、操作的部分。

本集保留原来的记账方式。变化发生在点击“保存”之后：页面不再把新增记录各自留在浏览器，而是将这笔账发给共同的程序，等结果回来再展示。

所以，添加后端并不意味着把前端重做一遍。先找到本轮真正需要改变的那一段。

后端：共同处理请求和规则

两个浏览器要使用同一本账，就需要共同接收、检查和返回记录的地方。这个程序，就是本次加入的后端。

收到一笔支出后，它检查金额、日期等字段，保存记录，再返回结果。两个浏览器都向它读写数据，就有了共同的账本。

项目用 Python 和 FastAPI 编写后端。先理解它负责哪件事，比一开始背下框架名称更有帮助。

数据库：让程序关闭后，记录还在

后端负责处理请求，数据还需要持久保存。本集使用 SQLite，将记录写入电脑上的数据库文件。

SQLite 可以嵌入应用使用，不需要为这轮本机实验另外配置一个数据库服务器。它是这次教学方案的选择，并不表示所有项目都应采用同一套技术。SQLite 官方使用场景说明

!两个浏览器前端共同访问后端与SQLite数据库的示意图

原创概念示意：同一台电脑上的两个独立浏览器访问同一个服务，刷新后读取最新记录。

沿着一次保存，可以这样理解：前端收集输入 → 后端检查处理 → 数据库存储 → 后端返回结果 → 前端展示。

注意，数据库文件让记录在重启后保留，不等于做了备份。文件丢失或损坏后怎样恢复，是另一件需要单独解决的事。

把“加后端”写成能验收的任务

我不会只告诉 AI：“帮我加一个后端。”我会先让它检查旧版存储位置，再说明准备改哪里，保留哪些现有行为。

任务要写成可操作的结果：

保留已有页面和记账流程，只解决同一电脑上两个独立浏览器读写同一份记录的问题。A 新增 32 元午饭，B 刷新可见；B 把原记录改成 23 元，A 刷新后为 23 元且仍只有 1 笔。重启程序记录仍在。停服后保存失败，页面保留输入，不自动重复提交。本轮不做账号、云端部署、旧数据迁移或实时同步。

确认改动范围，再进入实现。这样，“完成了”才有具体的判断标准。

从 32 元到 23 元，两边对上了

按照项目说明启动新版后，先打开一个空的教学账本。旧版数据仍然保留，本集没有自动迁移旧账，32 元午饭是重新输入的。

点击保存，页面等到后端确认，显示 1 笔记录，合计 32 元。在另一个独立浏览器打开同一地址，不用重新填写，也能看到它。

接着在第二个浏览器里，把原记录改为 23 元。回到第一个浏览器，手动刷新：金额为 23 元，合计为 23 元，数量仍然是 1 笔。

!第二集真实操作：另一浏览器修改后，原浏览器刷新显示23元和一笔记录

第二集原录制截图，使用虚构教学账本。当前页面读到同一后端返回的修改结果。

我还核对了保存请求、返回的记录编号和数据库内容。修改前后编号一致，金额从 3200 分变成 2300 分。页面上的 23 元，应当对应数据库里同一笔记录的 2300 分。

页面向后端发送这笔账时，使用 JSON 这种文本格式：这笔账的金额、日期、分类、备注，按约定组织后传过去。格式只负责表达数据，检查和保存仍由程序完成。

!第二集验收顺序：新增、修改、刷新与异常检查

保存失败时，不能装作成功

我停掉后端，保留已经打开的页面，输入 8 元饮料，再点击保存。

这次页面提示“本次未确认保存成功”，金额和备注继续保留。它没有把输入清空，也没有把这笔支出冒充为已保存记录。

!第二集真实操作：停服后保存失败，8元与备注仍然保留

原录制中的停服实验。失败反馈和输入保留，也是这次交付的一部分。

重启后再核对账本：原来的 23 元仍在，停服期间的 8 元没有写入。

但不能由此得出“所有报错都代表没保存”。如果记录已经写入，只是返回结果途中连接中断，页面也可能报错。结果不明时先核对，不能自动再记一遍。 本集尚未实现完整的防重复提交机制。

我也绕过页面，直接向后端提交零元。后端拒绝，原账本不变。记账规则不能只靠页面上的按钮限制。

本集完成的是一个本机验证版

现在，同一台电脑上的两个独立浏览器，可以读写同一本账；修改保持记录一致；重启后记录保留；失败会明确反馈。

它还不是可以给不同用户长期使用的私人账本：

• 两边需要手动刷新，没有实时推送。
• 没有账号隔离，也没有解决同时修改的冲突。
• 127.0.0.1 指向当前电脑，把这个地址发给朋友，并不能让他访问你的账本。
• 旧数据迁移、跨设备访问和备份恢复，尚未完成。

下一集继续改进回看账目的体验，并引入 Git 和 GitHub，记录每次改动：改了什么、为什么改、出问题时怎样回到可用版本。

这一集最重要的变化，是从“页面显示了什么”，开始追问：数据实际上发生了什么？

本集资料

• 第二集视频：跟夏末做产品02：前后端分工
• 上一篇：Vibe Coding 01：先用一个 HTML 页面，做出能记账的小工具
• 第一集公开源码：ledger-mvp。第二集本地源码包随配套资料提供，在线下载入口待补。
• 个人博客：夏末

本文对应第二集“产品迭代”成片及其 v5 脚本。截图与操作结果整理自该版录制资料。