一个单文件商品管理系统：添加、编辑、删除闭环与顶部统计是怎么做的

为什么只做一个单文件

最近我在做一个练手项目，目标很具体：不要先堆功能，先把一个最常见的闭环跑通。商品管理里最常见的闭环就是添加、编辑、删除，再加上一个一眼能看懂的统计。

所以我做了一个单文件纯前端 Demo，打开一个 HTML 文件就能跑，不用装依赖、不用起后端。这个版本是本地重做版，还没有提交到任何比赛或平台，数据也只保存在本机浏览器里。下面讲的都是这个文件里真实有的逻辑，不是设想。

页面长什么样

页面分三块，顺序很固定：

1. 顶部统计：商品总数、库存总量、库存总价值
2. 添加 / 编辑商品表单：商品名称、单价、库存
3. 商品列表：名称、单价、库存、小计、编辑和删除按钮

第一次打开时，如果浏览器里还没有保存过数据，页面会载入 3 条示例商品：

• 无线鼠标，59.9 元，库存 120
• 机械键盘，299 元，库存 45
• USB-C 数据线，19.9 元，库存 300

按这 3 条算，初始状态就是商品总数 3、库存总量 465、库存总价值 26613.00 元。先有这样一组能算出来的数字，后面验证统计同步才有依据。

统计不是单独维护的，是每次重算的

很多人做统计容易犯一个错：添加时加一、删除时减一，时间一长统计和列表就对不上了。这个 Demo 用的办法更笨，也更稳：每次渲染都从商品数组重新算一遍。

document.getElementById('statCount').textContent = products.length;
document.getElementById('statStock').textContent =
  products.reduce((s, p) => s + p.stock, 0);
document.getElementById('statValue').textContent =
  money(products.reduce((s, p) => s + p.price * p.stock, 0));

小计也是单价乘库存，金额统一保留两位小数。这样不管是添加、编辑还是删除，只要最后调用一次渲染，统计就一定和列表一致，不需要再去单独维护三个数字。

添加和编辑用同一个表单

表单里藏了一个 editId，这是区分新增和编辑的关键：

• 没有 editId，提交就是新增一条，生成一个新 ID 后追加到数组；
• 有 editId，提交就是找到同一条记录，把名称、单价、库存改掉，不会多出一行。

点“编辑”时，表单会自动填入那条商品原来的名称、单价和库存，按钮文案变成“保存修改”，同时出现“取消编辑”。取消编辑会把表单清空、把按钮恢复成“添加商品”，避免下一次提交误改上一条。

这个设计的好处是逻辑只有一条提交路径，新增和编辑的校验也共用同一套：名称要去掉首尾空格后不为空，单价和库存要是数字且不能为负，否则就提示重新填写，不会把脏数据写进去。

删除要二次确认，删完统计也要动

删除没有做成一点就没，而是先弹确认框，确认后才从数组里过滤掉那条记录，再保存、再渲染。删除后顶部统计会跟着变，这正是前面“每次重算”的价值所在。

还有一个细节：如果正在编辑的那条商品被删了，表单会被重置，不会留下一个指向已删除记录的编辑状态。这个细节不大，但没有它就很容易出现“保存修改改到一条不存在的商品”的怪问题。

数据存在哪里

数据存在浏览器的 localStorage 里，键名是 product-management-demo-v1。每次增删改之后都会调用一次保存，刷新页面后数据还在。

这个选择的好处是零成本、打开即用，缺点也很明确：换浏览器、清缓存，数据就没了；也没有登录、多用户和后端校验。所以它适合演示和练手，不适合直接当生产系统用。

显示商品名称时，代码里做了 HTML 转义，把 & < > " ' 这类字符转成实体再输出，避免商品名里的特殊字符破坏页面结构。这一步经常被新手 Demo 省掉，但只要是用户输入进表格的东西，就值得做。

这个 Demo 的边界

说清楚边界，比吹功能更重要：

• 它是纯前端，没有后端接口、没有数据库、没有账号体系；
• 它没有搜索、分页、分类和导出，这些都是下一步可以加的，但不是这个版本的目标；
• 它目前也没有产生任何可以当作开发过程证明的材料，开发过程记录是另一回事，不能靠这个单文件本身来证明。

如果要往生产方向走，下一步的顺序应该是：先把数据从 localStorage 迁到后端接口，再加搜索和分页，最后再做权限和导出。先把闭环做对，再把规模做大，这个顺序不容易返工。

小结

一个好的练手 Demo 不一定要大，关键是闭环完整、统计可验证、边界说清楚。这个单文件商品管理系统做的就是这三件事：添加、编辑、删除走通了，顶部统计每次重算，数据存在 localStorage 里随时能验证。

如果你也在练前端 CRUD，不妨先按这个顺序检查自己的 Demo：新增会不会重复、编辑会不会改错行、删除后统计动不动、刷新后数据还在不在。这四个问题都答得上来，这个 Demo 就算合格了。