显示勾选的购物车信息
（一）显示勾选的购物车信息（持久层）
1.规划sql
用户在购物车列表页中通过随机勾选相关的商品,在点击"结算"按钮后跳转到"确认订单页",在这个页面中需要展示用户在上个页面所勾选的"购物车列表页"中对应的数据.且展示的内容还是来自于购物车表,所以"购物车列表页"需要将用户勾选的商品id传递给"确认订单页"
select cid, uid, pid, t_cart.price, t_cart.num, title, t_product.price as realPrice, image from t_cart left join t_product on t_cart.pid = t_product.id where cid in (?,?,?) order by t_cart.created_time desc
2.设计接口和抽象方法
在CartMapper接口中添加findByCid2抽象方法
List<CartVo> findByCid2(Integer[] cids);
在CartMapper.xml文件中添加SQL语句的映射配置
<select id="findByCid2" resultType="com.cy.store.vo.CartVo"> select cid,uid,pid,t_cart.price,t_cart.num,t_product.image, t_product.title,t_product.price as realPrice from t_cart left join t_product on t_product.id=t_cart.pid where cid in ( <foreach collection="array" item="cid" separator=","> #{cid} </foreach> ) order by t_cart.created_time desc </select>
foreach循环就是一个for循环
collection标识循环的是list集合还是数组,如果是list集合就用collection=“list”
item用来接收每次循环获取的值
separator标识循环出来的值中间用什么隔开,且最后循环出来的值后面不加
（二）显示勾选的购物车信息（业务层）
1.规划异常
查询语句,没有需要规划的异常,在业务层判断这几条购物车商品的数据归属是否正确,如果不正确也不需要抛出异常,直接从查询到的数据中移除该商品就行了
2.设计接口和抽象方法及实现
在ICartService接口中添加getByCids()抽象方法
List<CartVo> getByCids(Integer uid,Integer[] cids);
在CartServiceImpl类中重写业务接口中的抽象方法
@Override public List<CartVo> getByCids(Integer uid, Integer[] cids) { List<CartVo> result = cartMapper.findByCid2(cids); if (result==null){ throw new CartNotFoundException("商品不存在"); } Iterator<CartVo> iterator = result.iterator(); while (iterator.hasNext()){ CartVo cartVo = iterator.next(); Integer uid1 = cartVo.getUid(); if (!uid1.equals(uid)){ result.remove(cartVo); throw new AccessDeniedException("数据访问异常"); } } return result; }
（三）显示勾选的购物车信息（控制层）
1.处理异常
没有异常需要处理
2.设计请求
请求路径：/carts/list
请求方式：GET
请求参数：Integer[] cids, HttpSession session
响应结果：JsonResult<List< CartVO>>
3.处理请求
在CartController类中添加处理请求的findVOByCids()方法。
@GetMapping("/list") public JsonResult<List<CartVo>> findVOByCids(Integer[] cids,HttpSession session){ List<CartVo> cartVoList = cartService.getByCids(getuidfromsession(session), cids); return new JsonResult<>(ok,cartVoList); }
（四）显示勾选的购物车信息（前端页面）
orderConfirm.js文件在orderConfirm.html页面中无用,所有在orderConfirm.html中注释掉
<!-- <script src="../js/orderConfirm.js" type="text/javascript" charset="utf-8"></script>-->
在orderConfirm.html页面编写js代码
<script type="text/javascript"> $(document).ready(function() { showCartList(); }); function showCartList() { $("#cart-list").empty(); $.ajax({ url: "/carts/list", type: "GET", data: location.search.substr(1), dataType: "JSON", success: function(json) { if (json.state == 200) { var list = json.data; console.log(location.search.substr(1));//调试用 //声明两个变量用于更新"确认订单"页的总件数和总价 var allCount = 0; var allPrice = 0; for (var i = 0; i < list.length; i++) { var tr = '<tr>\n' + '<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' + '<td>#{title}</td>\n' + '<td>¥<span>#{price}</span></td>\n' + '<td>#{num}</td>\n' + '<td><span>#{totalPrice}</span></td>\n' + '</tr>'; tr = tr.replace("#{image}",list[i].image); tr = tr.replace("#{title}",list[i].title); tr = tr.replace("#{price}",list[i].realPrice); tr = tr.replace("#{num}",list[i].num); tr = tr.replace("#{totalPrice}",list[i].realPrice*list[i].num); $("#cart-list").append(tr); //更新"确认订单"页的总件数和总价 allCount += list[i].num; allPrice += list[i].realPrice*list[i].num; } $("#all-count").html(allCount); $("#all-price").html(allPrice); } }, error: function (xhr) { alert("在确认订单页加载勾选的购物车数据时发生未知的异常"+xhr.status); } }); } </script>
订单显示收货地址
1.在orderConfirm.html页面中的ready函数中添加showAddressList方法的调用,使确认订单页加载时能够自动从后端获取该用户地址填充到select控件中并将第一个地址显示出来
$(document).ready(function() { showCartList(); showAddressList(); });
2.在orderConfirm.html页面中编写showAddressList方法
function showAddressList() { $("#address-list").empty(); $.ajax({ url: "/addresses", type: "GET", dataType: "JSON", success: function(json) { if (json.state == 200) { var list = json.data; for (var i = 0; i < list.length; i++) { /* value="#{aid}"在该模块没有用,但是扔写上,只要是从数据库查到到的数据,都要让前端页 面的该条数据和id绑定(因为可能干别的什么时需要用到,就比如说下一个"创建订单"模块 就需要根据前端传给后端的aid查询用户选中的是哪一个地址然后将其加入订单表) * */ var opt = '<option value="#{aid}">#{name} #{tag} #{provinceName}#{cityName}#{areaName}#{address} #{tel}</option>'; opt = opt.replace("#{aid}",list[i].aid); opt = opt.replace("#{name}",list[i].name); opt = opt.replace("#{tag}",list[i].tag); opt = opt.replace("#{provinceName}",list[i].provinceName); opt = opt.replace("#{cityName}",list[i].cityName); opt = opt.replace("#{areaName}",list[i].areaName); opt = opt.replace("#{address}",list[i].address); opt = opt.replace("#{tel}",list[i].tel); $("#address-list").append(opt); } } }, error: function (xhr) { alert("在确认订单页加载用户地址时发生未知的异常"+xhr.status); } }); }
后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹
