README

Example Guide

贡献指南

▼ 项目列表

▼ Intermediate-Level Ideas

Book Finder App

To-Do 应用

命令行计算器

Markdown预览器

Emoji翻译器应用

Password Generator

Name Generator

Meme生成器应用

FlashCards应用

Charity Finder App

Podcast目录应用

Game Suggestion App

Simple Online Store

Flip Art App

HighStriker游戏

Sports Bracket Generator

时区提醒机器人

二维码徽章应用

卡片记忆游戏

Bit Masks App

Chrome主题扩展

Currency Converter

Drawing App

GitHub个人资料

Image Scanner

Markdown表格生成器

RegExp助手应用

Sales数据库应用程序

String Art

This or That Game

Typing Practice App

Voting App

Math Editor

▼ 初学者项目合集

Bin2Dec应用

Border Radius Previewer

CSV转JSON应用

Calculator App

Calendar App

因果应用

Christmas Lights App

Color Cycle App

倒计时器应用

Dollars To Cents App

Dynamic CSS Variables App

First Database App

Flip Image App

GitHub状态应用

Hello App

IOT邮箱应用

JSON转CSV应用

Javascript正则表达式验证

Key-Value 应用

Lorem Ipsum 生成器

Notes应用

Pearson回归应用

Pomodoro时钟

产品登陆页

Quiz应用程序

随机餐点生成器

随机数生成器

Recipe App

Roman to Decimal Converter

滑块设计

Stopwatch App

True or False App

Vigenere 密码

Weather App

Windchill App

Word Frequency App

▼ Advanced Ideas

Battleship Bot

Battleship游戏引擎

Boole Bot 游戏

Bug Race Game

Calorie Counter App

Chat应用

Contribution Tracker App

Elevator App

FastFood应用

GitHub时间线应用

GitTweet应用

Instagram克隆应用

Kudos Slackbot

Movie App

MyPodcast Library App

NASA系外行星查询

Shell Game

Shuffle-Deck-App

Slack 归档器

SpellIt-App

Survey App

销售收据

等级: 中级

第一个数据库应用中,您已经学习了如何在浏览器内置的IndexedDB数据库中使用基本知识。在销售收据中,您将通过创建一个记录销售收据的应用程序来进一步学习,假设这些收据用于随后与商店收银机中的现金进行核对。

销售收据的目标是为商家实现销售点功能,并在数据库中记录所有销售。

要求与约束

  • 开发者应实现一个作为前端应用程序的应用程序,使用浏览器中的IndexedDB数据库记录所有销售收据。

  • 开发者可以在应用程序源中实现一个可出售物品的库存,作为一个对象数组。每个物品应定义以下属性:

    • 物品编号(唯一)
    • 描述
    • 单价
  • 开发者应使用她的UI/UX技能创建一个舒适且高效的窗口布局,使用户轻松购买物品并显示购买历史。

  • 基于浏览器的数据库的主要用例是维护需要在会话之间持续存在或作为临时工作区的状态或状态信息。例如,从服务器检索的数据必须在呈现给用户之前进行重新格式化或清理。

  • 需要记住的是,由于客户端浏览器环境无法得到保护,因此不应在基于浏览器的数据库中维护任何机密或个人识别信息(PII)。

用户故事

  • [ ] 用户可以看到一个包含每个物品按钮的购买面板,按钮上显示物品编号、描述和单价,以及“清除”和“结账”按钮。
  • [ ] 用户可以点击一个物品按钮进行购买。
  • [ ] 用户可以看到一个字段,随着物品被购买而递增显示总销售额。
  • [ ] 用户可以看到一个收据面板,显示销售日期和时间,以及所有选定的购买项目。这包括物品编号、描述和单价。
  • [ ] 用户可以在结账前随时点击“清除”按钮清除所有购买。
  • [ ] 用户可以点击“结账”按钮完成对所有选定项目的购买。最终的总购买金额将添加到收据面板的末尾,所有选定的项目将被添加到数据库中。
  • [ ] 用户可以在所有项目添加到数据库后看到收据面板被清除。
  • [ ] 用户可以在应用程序窗口底部看到“每日销售”和“清除所有”按钮。
  • [ ] 用户可以点击“每日销售”按钮在收据面板中显示所有客户购买的所有物品以及它们的总数。
  • [ ] 用户可以点击“清除所有”按钮清除收据面板并从数据库中删除所有购买的记录。

额外功能

  • [ ] 用户可以在物品按钮上看到物品的缩略图图像。
  • [ ] 用户可以在购买面板下的“清除”按钮替换为“清除条目”和“取消全部”按钮。
  • [ ] 用户可以点击“清除条目”按钮从收据面板中清除最后选定的物品。这相当于取消选择该物品。
  • [ ] 用户可以点击“取消全部”按钮清除结账前所有进行的购买。
  • [ ] 用户可以在输入面板中看到一个输入字段,当进行购买时,用户可以输入客户的名字。客户的名字将被添加到该客户购买的所有物品的收据面板中,并添加到数据库的行中。

有用链接和资源

示例项目

  • N/a