显示勾选的购物车数据
1 持久层
1.1 规划查询的SQL语句
用户在购物车列表页中通过随机勾选相关的商品，在点击“结算”按钮户，跳转到结算页面，在这个页面中需要展示用户在上个页面所勾选的购物车对应的数据。列表的展示，而展示的内容还是在购物车的表。两个页面需要将用户勾选的多个cid传递给下一个页面。
SELECT cid,uid,pid, t_cart.price,t_cart.num t_product_title,t_product.image, t_product.price AS realprice FROM t_cart LEFT JOIN t_product on t_cart.pid=t_product.id WHERE cid IN (?,?,?) ORDER t_cart.created_time DESC
1.2 接口与抽象方法
List<CartVO> findVOByCid(Integer[] cids);
1.3 配置SQL映射
<select id="findVOByCid" resultType="com.cy.store.vo.CartVO"> SELECT cid, uid, pid, t_cart.price, t_cart.num, t_product.title, t_product.price AS realPrice, t_product.image FROM t_cart LEFT JOIN t_product ON t_cart.pid = t_product.id WHERE cid IN (<foreach collection="array" item="cid" separator=",">#{cid}</foreach>) ORDER BY t_cart.created_time DESC </select>
CartMapper–findVOByCid
测试
进行单元测试。
@Test public void findVOByCid(){ Integer [] cids={1,2,3}; List<CartVO> list = cartMapper.findVOByCid(cids); for (CartVO cartVO: list) { System.out.println(cartVO) ; } }
CartMapperTests–findVOByCid
2 业务层
2.1 规划异常
没有
2.1 实现接口与抽象方法
List<CartVO> getVOByCid(Integer uid,Integer[] cids);
2.2 实现抽象方法
@Override public List<CartVO> getVOByCid(Integer uid, Integer[] cids) { List<CartVO> list = cartMapper.findVOByCid(cids); Iterator<CartVO> it = list.iterator(); while (it.hasNext()){ CartVO cartVO = it.next(); if (!cartVO.getUid().equals(uid)){//表示当前的数据不属于当前用户 //从集合中移除元素 list.remove(cartVO); } } return list; }
CartService–getVOByCid
测试
略
3 控制器
3.1 设计请求
/carts/list Integer cids,HttpSession session POST JsonResult<List<CartVO>>
3.2 处理请求
@RequestMapping("/list") public JsonResult<List<CartVO>> getVOByCid(Integer[] cids,HttpSession session) { List<CartVO> data = cartService.getVOByCid(getuidFromSession(session),cids); return new JsonResult<>(OK,data); }
CartController–getVOByCid
测试
cid一定得是当前登录的用户的
http://localhost:8080/carts/list?cids=4&cids=5
前端页面
1.将cart.html中“结算”按钮属性更改为type=submit
2.orderConfirm.html页面中添加自动加载从上个页面中传递过来的cids数据，再去请求ajax，中进行填充当前页面的某个区域。
<!-- <script src="../js/orderConfirm.js" type="text/javascript" charset="utf-8"></script>-->
// <!-- showCartList --> function showCartList() { $("#cart-list").empty(); console.log(location.search.substr(1)) $.ajax({ url: "/carts/list", data: location.search.substr(1), type: "GET", dataType: "JSON", success: function(json) { let list = json.data; console.log("count=" + list.length); let allCount = 0; let allPrice = 0; for (let i = 0; i < list.length; i++) { console.log(list[i].title); let tr = '<tr>' + '<td><img src="..#{image}collect.png" class="img-responsive" /></td>' + '<td><input type="hidden" name="cids" value="#{cid}" />#{title}</td>' + '<td>¥<span>#{realPrice}</span></td>' + '<td>#{num}</td>' + '<td>¥<span>#{totalPrice}</span></td>' + '</tr>'; tr = tr.replace(/#{cid}/g, list[i].cid); tr = tr.replace(/#{image}/g, list[i].image); tr = tr.replace(/#{title}/g, list[i].title); tr = tr.replace(/#{realPrice}/g, list[i].realPrice); tr = tr.replace(/#{num}/g, list[i].num); tr = tr.replace(/#{totalPrice}/g, 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); } }); } // <!-- showCartList -->
orderConfirm–showCartList
测试
确认订单页显示收货地址列表
前端页面
1.收货地址存放在select下拉列表中，将查询到的当前登录用户的收货地址动态的加载到下拉列表中。从数据库的角度，是一个select查询语句。已经编写了根据用户的uid查询用户的地址数据。
2.OrderConfirm.html页面中，收货地址数据的展示需要自动进行加载，需要将方法的逻辑放在ready()函数中。
$(document).ready(function() { showAddressList(); showCartList(); });
3.声明和调用showAddressList()方法，方法中发送ajax请求即可。
// showAddressList function showAddressList() { //清空select下拉列表的内容 $("#address-list").empty(); $.ajax({ url: "/addresses", type: "GET", dataType: "JSON", success: function(json) { let list = json.data; console.log("count=" + list.length); for (let i = 0; i < list.length; i++) { console.log(list[i].name); let opt = '<option value="#{aid}">#{name} | #{tag} | #{province}#{city}#{area}#{address} | #{phone}</option>'; opt = opt.replace(/#{aid}/g, list[i].aid); opt = opt.replace(/#{tag}/g, list[i].tag); opt = opt.replace("#{name}", list[i].name); opt = opt.replace("#{province}", list[i].provinceName); opt = opt.replace("#{city}", list[i].cityName); opt = opt.replace("#{area}", list[i].areaName); opt = opt.replace("#{address}", list[i].address); opt = opt.replace("#{phone}", list[i].phone); $("#address-list").append(opt); } } }); } // showAddressList
orderConfirm.html–showAddressList
测试
4.先登录，在访问项目的结算页面，测试收货地址的列表加载功能。
READ–显示勾选的购物车数据
