CodeArts实践：单文件商品管理应用的生成与浏览器验收

实践目标

本次使用华为云 CodeArts 网页版生成一个纯前端商品管理小应用，重点是把“代码已经生成”推进到“在页面中完成操作验证”。应用代码由 AI 辅助生成，下面记录实际验收过程，不涉及真实商品交易。

参考实验：基于CodeArts代码智能体—快速构建商品管理Web应用。官方手册使用桌面端；本次核心应用生成和功能验收在网页版完成，两者的环境入口并不相同。

1. 把需求和边界一起说清楚

给代码智能体的需求可以写成：

创建一个纯前端单文件商品管理应用，支持商品添加、编辑、删除、名称搜索、数量与单价校验，使用 localStorage 保存演示数据。生成可直接运行的 index.html，并提供预览。只在当前开发环境中生成和测试，不创建云主机或公网 IP，不调用付费接口，不读取其他项目文件。

把“单文件”“纯前端”“演示数据”写进需求，有助于控制实践范围。这个例子只需要 HTML、CSS 和 JavaScript，不需要为练习先搭建数据库或购买云主机。

本次生成的页面包含商品名称、数量和单价输入区，以及商品列表、搜索栏、编辑和删除入口。列表展示每件商品的小计，并汇总商品数量与总金额。页面上的云产品名称与价格只是演示数据，不代表官方报价，也不表示购买了对应资源。

2. 用同一件测试商品验证完整流程

实际验收时，新增“实验验证商品”，数量为 2、单价为 3.50 元。页面显示“添加成功”，列表新增一行，小计为 7.00 元。随后进入该行的编辑状态，将数量修改为 3 并保存，页面显示“修改已保存”，小计更新为 10.50 元。

接着点击预览刷新按钮，确认商品仍在、数量仍为 3、单价仍为 3.50 元。这一步用于检查刷新后数据是否保留，避免把“当前页面看起来正常”误当成持久化成功。

最后点击该测试商品的删除按钮，确认弹窗中明确写着“实验验证商品”，再确认删除。页面显示删除提示，列表恢复到原有三件演示商品。这里删除的仅为本次新增的测试数据。

3. 将测试结论限定在实际覆盖范围

以上四项在浏览器页面中完成了实际验证。名称搜索、非法数值边界、多标签页同时修改等属于进一步验收范围，不能仅凭页面出现输入框就声称全部通过。

对于金额计算，后续可补充小数输入、空值、负数、超大数量等用例；如果要用于真实业务，应重新设计金额精度、权限、备份及服务端校验，而不是直接把演示页当成生产系统。

4. 如何使用这次实践结果

单文件应用适合演示、学习和小范围原型验证。本次已在 CodeArts 产物预览中运行，未发布公网服务，也没有创建 ECS、EIP 等计费资源。

实践完成与活动积分到账是两件事：积分是否发放，应以成长中心的实际记录为准。代码生成、页面验收、公开部署和任务奖励应分别核对，避免把中间步骤当作最终完成。