springboot整合项目-商城项目展示购物车勾选到支付页面并展示功能

显示勾选的购物车数据

1.持久层

1.规划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
	cid IN (?, ?, ?)
ORDER BY
	t_cart.created_time DESC

接口与抽象方法

Lis findVOByCid(Integer cid)

2.实现抽象方法

 /**
     * 结算页面查询购物车里被选中的商品
     * @param uid
     * @param cids
     * @return
     */
    @Override
    public List<CartVo> getVOByCid(Integer uid, Integer[] cids) {
        List<CartVo> list = cartMapper.findVOByCid(cids);
        Iterator<CartVo> iterator = list.iterator();
        while (iterator.hasNext()) {
            CartVo next = iterator.next();
            if (!next.getUid().equals(uid)){
                list.remove(next);
            }
        }
        return list;
    }

控制层

1.请求设计

/carts/list
Integer cids HttpSession session
/JsonResult<List>

2.实现方法

    /**
     * 刷新购物车列表
     * @param ssession
     * @return
     */
    @RequestMapping({"list"})
    public JsonResult<List<CartVo>> getVoByCid(Integer[] cids,HttpSession ssession){
        List<CartVo> voByCid = cartService.getVOByCid(getUidFromSession(ssession), cids);
        return new JsonResult<List<CartVo>>(OK,voByCid);
    }

前端页面

<script type="text/javascript">
			$(document).ready(function() {
				showCarts();
			})
			function showCarts() {
				$("#cart-list").empty();
				$.ajax({
					url :"/carts/list",
					type:"post",
					data:location.search.substring(1),
					dataType:"json",
					success : function(json) {
						if (json.state == 200) {
							let list = json.data;
							let allCount = 0;
							let allPrice = 0;
							for (let i = 0; i < list.length ; i++) {
								//TODO
								let tr = '<tr>\n' +
										'\t\t\t\t\t\t\t\t\t\t\t<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
										'\t\t\t\t\t\t\t\t\t\t\t<td>#{title}</td>\n' +
										'\t\t\t\t\t\t\t\t\t\t\t<td>¥<span>#{price}</span></td>\n' +
										'\t\t\t\t\t\t\t\t\t\t\t<td>#{num}</td>\n' +
										'\t\t\t\t\t\t\t\t\t\t\t<td><span>#{totalPrice}</span></td>\n' +
										'\t\t\t\t\t\t\t\t\t\t</tr>';
								tr = tr.replace(/#{image}/g,list[i].image);
								tr = tr.replace(/#{title}/g,list[i].title);
								tr = tr.replace(/#{price}/g,list[i].price);
								tr = tr.replace(/#{num}/g,list[i].num);
								tr = tr.replace(/#{totalPrice}/g,list[i].price *list[i].num);

								$("#cart-list").append(tr);
								allCount += list[i].num;
								allPrice +=list[i].price * list[i].num;
							}
							//更新支付页面的总价和总件数
							$("#all-count").html(allCount);
							$("#all-price").html(allPrice);

						} else {
							alert("用户收货信息加载失败");
						}
					}
				});
			}
		</script>