显示购物车列表
1 持久层
1.1 规划SQL语句
# 多表查询如果字段名重复则需要显示声明该字段属于那张表 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 uid=#{uid} ORDER t_cart.created_time DESC
VO：Value Object，值对象。当进行SELECT查询时，查询的结果属于多张表中的内容，此时发现结果集不能使用某个POJI实体类来接受，POJO实体类不能包含多表查询出来的结果。解决方式是：重新构建一个新的对象用于存储所查询出来的结构集对应的映射，所以把这样的对象称之为值对象
/**表示购物车数据的VO类（Value Object）*/ public class CartVO implements Serializable { private Integer cid; private Integer uid; private Integer pid; private Long price; private Integer num; private String title; private Long realPrice; private String image; //.... }
CartVO
1.2 实现接口与抽象方法
抽象方法设计
List<CartVO> findVOByUid(Integer uid);
1.3 配置SQL映射
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 uid = #{uid} ORDER BY t_cart.created_time DESC
CartMapper–findVOByUid
测试
单元测试。
@Test public void findVOByUid(){ List<CartVO> list = cartMapper.findVOByUid(8); for (CartVO cartVO: list) { System.out.println(cartVO) ; } }
CartMapperTests–findVOByUid
2 业务层
2.1 规划异常
无
2.2 编写接口与抽象方法
1.先编写业务层的接口方法。
List<CartVO> getVOByUid(Integer uid);
CartServiceImpl–getVOByUid
测试
略
3 控制器
3.1 处理异常
无
3.2 设计请求
1.设计请求。
/carts session GET JsonResult<List<CartVO>>
3.3 处理请求
2.实现请求处理方法的代码
@RequestMapping({"","/"}) public JsonResult<List<CartVO>> getVOByUid(HttpSession session) { List<CartVO> data = cartService.getVOByUid(getuidFromSession(session)); return new JsonResult<>(OK,data); }
CartController–getVOByUid
测试
3.先登录在进行功能测试
http://localhost:8080/carts
4 前端页面
cart.html
1.注释掉cart.js文件
2.form表单结果。action=“orderConfirm.html”、tbody标签的额id="cart-list"属性、"结算按钮"改成type="button"属性值
3.ready()函数来完成自动的ajax请求的条件和处理。
//showCartList $(document).ready(function() { showCartList(); }); function showCartList() { $("#cart-list").empty(); $.ajax({ url: "/carts", type: "GET", dataType: "JSON", success: function(json) { let list = json.data; for (let i = 0; i < list.length; i++) { let tr = '<tr>' + '<td>' + '<input name="cids" value="#{cid}" type="checkbox" class="ckitem" />' + '</td>' + '<td><img src="..#{image}collect.png" class="img-responsive" /></td>' + '<td>#{title}#{msg}</td>' + '<td>¥<span id="price-#{cid}">#{realPrice}</span></td>' + '<td>' + '<input type="button" value="-" class="num-btn" οnclick="reduceNum(#{cid})" />' + '<input id="num-#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">' + '<input class="num-btn" type="button" value="+" οnclick="addNum(#{cid})" />' + '</td>' + '<td>¥<span id="total-price-#{cid}">#{totalPrice}</span></td>' + '<td>' + '<input type="button" οnclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />' + '</td>' + '</tr>'; tr = tr.replace(/#{cid}/g, list[i].cid); tr = tr.replace(/#{title}/g, list[i].title); tr = tr.replace(/#{image}/g, list[i].image); 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); if (list[i].realPrice < list[i].price) { tr = tr.replace(/#{msg}/g, "比加入时降价" + (list[i].price - list[i].realPrice) + "元"); } else { tr = tr.replace(/#{msg}/g, ""); } $("#cart-list").append(tr); } }, error: function (xhr){ alert("购物车列表数据加载是产生未知的异常，"+xhr.status) } }); } //showCartList
cart.html–showCartList
测试
READ–显示购物车列表
