让前台页面商品列表显示后台数据库中的商品

<div th:each="cartsInfo,status:${cartList}">

<tr> 

<td class="chk"><input type="checkbox"/></td>

<td><div class="cont cf">

<a href="#"><img alt="购物车详细情况" th:src="@{showImage(pictureId=${cartsInfo.pictureId})}" class="pic" /></a><h4><span th:text="${cartsInfo.commodityName}"></span></h4>

<p>品牌：<span th:text="${cartsInfo.brandName}"></span></p>

<p>经销商：<span th:text="${cartsInfo.supplierName}"></span></p>

<p>规格：每<span th:text="${cartsInfo.unit}"></span>

<span th:text="${cartsInfo.specifications}"></span></p>

<p>零售价：<span th:text="${cartsInfo.retailPrice}"></span>元</p>

<p>购买日期：<span th:text="${cartsInfo.updateTime}"></span></p>

<p><span th:text="${cartsInfo.count}"></span>件</p></div> </td>

<td><p class="price yh">￥19.6</p></td><td>

<div class="chooseAmount">

<a href="javascript:;" onclick="subNum();"></a>

<input type="text" class="fl inp-t" name="count" id="count" value="1"/>

<a href="javascript:;"  onclick="addNum();"></a></div></td>

<td><p class="price yh">￥19.6</p></td>

<td<a class="button"th:href="@{delCart(cartId=${cartsInfo.cartId},count=${cartsInfo.count},commodityId=${cartsInfo.commodityId})}">

<span>删除</span></a></td></tr></div>

实现单选，全选商品

<script type="text/javascript">
	function checkAll(obj, name){
		 
		var el = document.getElementsByTagName('input');
		var len = el.length;
		 for (var key in el) {
			 if(el[Key].name == name){
				 
				 if(obj.checked == true) {
						el[key].checked = true;
					} else {
						el[key].checked = false;
					}
					 
				 }
			 }
			 
			 
		 }
</script>

<table class="table  table-order table-cart">
    <thead><tr>
<th class="wp7_5"><input type="checkbox" onclick="checkAll(this,'checkTest')" class="vm" /> 全选</th>
<th class="wp40">商品详情</th>
<th class="wp15">单价</th>
<th class="wp15">数量</th>
<th class="wp15">小计</th>
<th class="wp7_5">操作</th>
</tr></thead><tbody>
<div th:each="cartsInfo,status:${cartList}">
<tr><td class="chk"><input type="checkbox" name="checkTest" /></td>
<td>        <div class="cont cf">
<a href="#"><img alt="购物车详细情况" th:src="@{showImage(pictureId=${cartsInfo.pictureId})}" class="pic" /></a><h4><span th:text="${cartsInfo.commodityName}"></span></h4>
<p>品牌：<span th:text="${cartsInfo.brandName}"></span></p>
<p>经销商：<span th:text="${cartsInfo.supplierName}"></span></p>
<p>规格：每<span th:text="${cartsInfo.unit}"></span>
<span th:text="${cartsInfo.specifications}"></span></p>
<p>零售价：<span th:text="${cartsInfo.retailPrice}"></span>元</p>
<p>购买日期：<span th:text="${cartsInfo.updateTime}"></span></p>
<p><span th:text="${cartsInfo.count}"></span>件</p></div></td>
<td><p class="price yh">￥19.6</p></td>
<td><div class="chooseAmount">
<a href="javascript:void(0);" th:onclick="${#strings.concat('subNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
<input th:id="${cartsInfo.commodityId}" type="text" class="fl inp-t" value="1" />
<a href="javascript:void(0);" th:onclick="${#strings.concat('addNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
</div>

首页有个加入购物车图标，在header里，我们可以加入el表达式，实现可以从界面上看出有几件商品，

<div class="col-sm-4">
<p class="cartbar nobox mt25 yh"><a th:href="@{initCart}"><i class="ico"></i>购物车<i class="num"></i>件</a>
<span th:if="${cartList.size()==0}">为空</span>
<span th:if="${cartList.size()!=0}">有&nbsp;<a href="initCart"><strong><span th:text="${cartList.size()}">1</span>件商品</strong></a></span></p>
</div>

3、cartcontrlloer.java

@RequestMapping(value = "Order", method = RequestMethod.GET)
    public String order(Model model, AlipayForm alipayForm, HttpSession session, Device device) {
    	GoodsForm goodsForm=new GoodsForm();
//		goodsForm.setType("粮食");
//		model.addAttribute("goodsForm", goodsForm);
    	List<GoodsForm> commodityType = goodsService.getType();
    	goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
    	model.addAttribute("goodsForm", goodsForm);
    	model.addAttribute("commodityType", commodityType);
    	log.info("重新支付");
    	CartForm cartForm = new CartForm();
    	model.addAttribute("cartForm", cartForm);
    	UVO uvo = (UVO)session.getAttribute("UVO");
    	if (uvo == null || StringUtils.isEmpty(uvo.getGuestId())) {
    		return "redirect:/initGuestLogin";
    	}
    	cartForm.setGuestId(uvo.getGuestId());
    	model.addAttribute("cartList", cartService.searchCartList(cartForm));
    	model.addAttribute("orderList", cartService.searchOrderList(cartForm));
        if(device.isNormal()) {
    		return "shop/order";
    	} else {
    		return "mobile/alipay/replayAlipayConfirm";
    	}