销售收据
等级: 中级
在第一个数据库应用中,您已经学习了如何在浏览器内置的IndexedDB数据库中使用基本知识。在销售收据中,您将通过创建一个记录销售收据的应用程序来进一步学习,假设这些收据用于随后与商店收银机中的现金进行核对。
销售收据的目标是为商家实现销售点功能,并在数据库中记录所有销售。
要求与约束
-
开发者应实现一个作为前端应用程序的应用程序,使用浏览器中的IndexedDB数据库记录所有销售收据。
-
开发者可以在应用程序源中实现一个可出售物品的库存,作为一个对象数组。每个物品应定义以下属性:
- 物品编号(唯一)
- 描述
- 单价
-
开发者应使用她的UI/UX技能创建一个舒适且高效的窗口布局,使用户轻松购买物品并显示购买历史。
-
基于浏览器的数据库的主要用例是维护需要在会话之间持续存在或作为临时工作区的状态或状态信息。例如,从服务器检索的数据必须在呈现给用户之前进行重新格式化或清理。
-
需要记住的是,由于客户端浏览器环境无法得到保护,因此不应在基于浏览器的数据库中维护任何机密或个人识别信息(PII)。
用户故事
- [ ] 用户可以看到一个包含每个物品按钮的购买面板,按钮上显示物品编号、描述和单价,以及“清除”和“结账”按钮。
- [ ] 用户可以点击一个物品按钮进行购买。
- [ ] 用户可以看到一个字段,随着物品被购买而递增显示总销售额。
- [ ] 用户可以看到一个收据面板,显示销售日期和时间,以及所有选定的购买项目。这包括物品编号、描述和单价。
- [ ] 用户可以在结账前随时点击“清除”按钮清除所有购买。
- [ ] 用户可以点击“结账”按钮完成对所有选定项目的购买。最终的总购买金额将添加到收据面板的末尾,所有选定的项目将被添加到数据库中。
- [ ] 用户可以在所有项目添加到数据库后看到收据面板被清除。
- [ ] 用户可以在应用程序窗口底部看到“每日销售”和“清除所有”按钮。
- [ ] 用户可以点击“每日销售”按钮在收据面板中显示所有客户购买的所有物品以及它们的总数。
- [ ] 用户可以点击“清除所有”按钮清除收据面板并从数据库中删除所有购买的记录。
额外功能
- [ ] 用户可以在物品按钮上看到物品的缩略图图像。
- [ ] 用户可以在购买面板下的“清除”按钮替换为“清除条目”和“取消全部”按钮。
- [ ] 用户可以点击“清除条目”按钮从收据面板中清除最后选定的物品。这相当于取消选择该物品。
- [ ] 用户可以点击“取消全部”按钮清除结账前所有进行的购买。
- [ ] 用户可以在输入面板中看到一个输入字段,当进行购买时,用户可以输入客户的名字。客户的名字将被添加到该客户购买的所有物品的收据面板中,并添加到数据库的行中。
有用链接和资源
示例项目
- N/a