♻️
前端 TDD（测试驱动开发）
  • README
  • 总-课程目标
  • 总-课程安排
  • Coding
    • 第一题：FizzBuzz 数字游戏
      • 什么是 FizzBuzz？
      • 任务 0：练功前的热身
      • FizzBuzz 项目剖析
      • 任务 1：TDD 初体验
      • 任务 2：先利其器
      • 任务 3：再撸一遍
      • FizzBuzz 项目总结
      • 附录 1：Jest 测试基础及要点
      • 附录 2：Testing Library 组件测试基础
    • 第二题：MarsRover 火星车
      • 任务 1：Tasking 任务分解
      • 火星车实战
      • 火星车 Tasking 任务分解
      • 任务 2：MarsRover 实战演练
      • MarsRover Coding 演示
      • 任务 3：MarsRover 练习
      • MarsRover 项目总结
    • 第三题：CommentBox 留言板
      • CommentBox 项目剖析
      • 任务 1：Cypress E2E 测试
      • 任务 2：测试驱动组件单元接口
      • 任务 3：组件级别的快速反馈
      • 任务 4：由外到内的前端 TDD
      • CommentBox 项目总结
    • 第四题：Bookshelf 魔法书架
      • Bookshelf 项目剖析
      • 任务 1：练习 API 契约测试
      • 任务 2：组件化与数据流管理
      • 任务 3：Redux 数据流测试
      • 任务 4：简化 Redux 项目结构
      • Bookshelf 项目总结
      • 附录 1：什么才是真正的 RESTful 架构？
      • 附录 2：【译】Redux 和 命令模式
      • 附录 3：【译】什么是 Flux 架构？（兼谈 DDD 和 CQRS）
    • 第五题：ShoppingCart 购物车
      • ShoppingCart 项目剖析
      • React 哲学：Thinking in React
      • 任务 1：任务分解 - 驱动组件树拆分
      • 任务 2：综合应用 - 驱动组件接口设计
      • 任务 3：综合应用 - 驱动数据流管理
      • 任务 4：综合应用 - 驱动组件样式开发
      • ShoppingCart 项目总结
由 GitBook 提供支持
在本页
  • 第一部分：C 端 商品购买
  • 业务需求
  • 第二部分：B 端 商品管理
  • 基础需求
  • 扩展需求
  • 要求
  1. Coding
  2. 第五题：ShoppingCart 购物车

ShoppingCart 项目剖析

上一页第五题：ShoppingCart 购物车下一页React 哲学：Thinking in React

最后更新于5年前

第一部分：C 端 商品购买

😉 只有原型稿：

业务需求

  1. 每件商品信息包含名称、编码、价格、数量等

  2. 输入商品编码，如果已经在购物车内，这购物车内数量加 1，否则加入购物车

  3. 可以对购物车内的商品直接加减数量

  4. 计算购物车内总价，包含优惠折扣

  5. mini 购物车可随时显示便于查看

第二部分：B 端 商品管理

基础需求

  1. 录入商品：输入商品的名称、编码（规则：ABC000,不能重复）、价格、库存、图片地址

  2. 商品列表：可显示所有商品的相关信息

  3. 修改库存：对商品列表中的商品库存直接加减数量

  4. 库存盘点：计算当前商品总数和总价格

  5. 商品修改：点击商品图片，可重新编辑商品信息

扩展需求

  1. 数据前后端集成

  2. 用户登录/注册

  3. 商品修改的权限控制

  4. 图片文件上传

要求

  1. 自行编写用户故事再确认

  2. 任务分解 Tasking 列表

  3. 完成上述需求中提到的功能

  4. 合理拆分组件，组件化开发

  5. 使用 Redux 完成业务功能

或许你可以用 GitHub 等看板工具管理你的需求故事卡：

设计稿：

商品管理 - 蓝湖
Shopping Cart
shoppingcart-design
GitHub kanban