1. 购物车列表
一.需求分析
- 实现购物车列表的显示。购物车必须登录后才可以访问。
- 从商品详细页点击“加入购物车按钮”,将商品添加到购物车。
- 点击购物车列表项中数量的加减按钮实现对数量的修改。
- 删除购物车中某条记录。
二.实现思路
- 使用redis(hash类型数据)实现购物车的存储。大key为 CacheKey.CART_LIST ,当前登录名作为小key。购物车存储结构如下图:
每个用户的购物车就是一个list集合,集合中是map类型的数据,有两个属性,一个是item,表示购物车明细数据,另一个是checked,用于存储购物车是否被选中。
每个用户的购物车类型是 List> 。
购物车列表采用前端渲染(vue.js)的方式。
三.后端代码
- 购物车列表
- 创建服务接口
- CacheKey枚举增加CART_LIST用于存储购物车列表 , 创建服务实现类
- 在qingcheng_portal工程添加CartController
- 创建服务接口
- 添加商品到购物车
- 实现思路:遍历购物车,如果购物车列表中不存在该商品则添加,存在则累加数量。
- CartService接口新增方法定义
- CartServiceImpl实现此方法
- qingcheng_web_portal的CartController新增方法
四.前端代码
- 购物车列表
- 拷贝cart.html到qingcheng_web_portal
- cart.html增加js脚本
- 为购物车的div增加id
修改cart.html购物车列表部分代码
- 更改数量与删除
- cart.html 增加方法
- 加减号调用方法
- 修改删除链接 。传递数量的相反数就是实现删除的功能。
- cart.html 增加方法
五.与商品详细页对接
- 在CartController新增方法
这个方法实现了添加商品到购物车并重定向到购物车页面的功能。
在浏览器上测试 http://localhost:9102/cart/buy.do?skuId=100000030326&num=1 - 修改item.html模板 ,js代码如下:
html部分
2. 购物车勾选逻辑
一.需求分析
- 点击购物车前面的复选框即选中该购物车项,选中后需要保存该选中状态。
- 购物车下方显示选择的商品数量以及合计金额。
- 点击删除按钮,实现对选中购物车的删除。
二.保存勾选状态
- 实现思路:在页面点击复选框后向后端提交ajax请求,提交的参数为当前行的skuId和选中状态,后端接受到请求后更新redis中的购物车状态。
- CartService新增方法定义
- CartServiceImpl实现此方法
- CartController新增方法
- cart.html新增方法
三.合计金额计算
- 实现思路:使用前端的代码实现合计金额
- 修改cart.html ,新增属性
- 新增方法
- 在findCartList和updateChecked方法的回调处调用count方法。
- 修改数量和金额的显示
四.删除勾选项
- 实现思路:使用 stream 获取没选择的购物车列表,覆盖redis 现有的购物车。
- CartService新增方法
- CartServiceImpl实现方法
- CartController新增方法
- 删除选中的购物车
- 删除选中的商品
3. 满减优惠金额计算
一.需求分析
- 我们采用满减的规则进行优惠金额的计算。例如:某品类满XX元减XX元 。
- 我们需要对购物车的商品按照品类进行分组,某个品类如果达到了优惠设置的消费额度,则按照设置的优惠金额进行减免。
- 优惠计算有翻倍和不翻倍两种。例如 ,满100元减30元。如果消费者花了320元,不翻倍是减30元,翻倍是减90元。
二.实现思路
- 首先我们先看一下满减优惠规则表 tb_preferential
- 创建一个方法,可以根据品类id和消费金额计算优惠金额
- 对购物车按商品品类进行分组,统计每个品类的消费额,调用第1步的方法得到优惠金额,将每个品类的优惠金额累加起来,得到总的优惠金额。
三.根据分类和消费额查询优惠金额
- PreferentialService新增方法定义
- PreferentialServiceImpl实现此方法
四.计算当前购物车优惠金额
- 修改CartService,新增计算优惠金额的方法定义
- CartServiceImpl实现该方法
- CartController新增方法
- 修改cart.html,新增属性
修改count方法,追加以下代码,实现优惠金额的计算