商城項目的購物車模塊的實現------通過數據庫實現

1.首先是商品詳情頁

 

 

   通過查看頁面購物車地址為:

<a href="javascript:details.addGoodsCar();" class="pr6" id="add_goods_car"><input type="button" value="加入購物車" class="btn btn_redbd plr10" ></a>

　這里觸發了一個函數,經查看發現為:

addGoodsCar:function(){
		//判斷是否登陸
		if(!loginmall.islogin()){
			if($("#login_div").length==0){
				$(".content").append(loginmall.nologinPage());
				//延遲1毫秒顯示
				setTimeout('details.loginShow()', 100);
			}else{
				details.loginShow();
			}
			return;
		}
		details.modalShow();
		buyType="0";
	}

　這里又出發了一個modalShow函數,主要是彈出模態框:

	modalShow:function(){
		var wh = $(window).height();
		$(".pop_mask").show();
		$(".pop_item").animate({height:wh},300);
		$(".pop_item .pop_con").show().animate({height:"80%"},300);
	},

　pop.mask:

<div class="pop_mask"></div>

　pop_item:

<div class="pop_item">
	<div class="pop_con" style="display:none;">
		<div class="item_info">
			<span class="iconfont t_gray s_18 close js-close" onclick="details.modalHide()"></span>
			<ul class="list_ul ul_28 bg_white clearfix mb15 ed_b">
				<li class="plr10 pb20 clearfix">
					<div class="w_inner p_relative clearfix">
						<a href="javascript:;" class="fl tc l_2 wp20 db">
							<span href="javascript:;" class="t-cell-css">
								<img  id="cellImage" src="${nginxPath }${goods.showImg}" alt="" class="">
							</span>
						</a>
						<div class="r_8 wp80 pl10 fl clearfix">
							<a href="javascript:;" class="name lh120">${goods.goodsName}</a>
							<input type="hidden" id="goodsPrice" value="${goods.price}">
							<input type="hidden" id="sellerGoodsStoreNum" value="${sellerGoods.storeNum}">
							<p class="wp100 t_orange"><span id="modal_price"><#if products?exists>￥#{products.sellPrice;m2M2}<#else>${goods.price}</#if></span><span class="t_gray s_08 inline_block ml8">(庫存<span id="modal_store_num"><#if sellerProducts?exists>${sellerProducts.storeNum}<#else>${sellerGoods.storeNum}</#if></span>件)</span></p>
							<p class="t_gray s_08" id="modal_spec_select">
								<#if productsSpecVoList?exists>
									已選：<#list productsSpecVoList as spec ><#if spec.type=='words'>${spec.value}<#else><img style="width: 30px;height: 30px;" src='${nginxPath }${spec.value}' /></#if>  </#list>
								<#else>
									<#if goodsSpecVoList?exists>
									請選擇：<#list goodsSpecVoList as spec >${spec.name}  </#list>
									</#if>
								</#if>
							</p>
							<p class="t_gray s_08" id="wenxin_tishi">
									
							</p>
						</div>
					</div>
				</li>
			</ul>
			<#if goodsSpecVoList?exists>
			<div id="modal_spec_list">
			<#list goodsSpecVoList as spec >
			<div class="bg_white ed_tb mb15 spec" specName="${spec.name}" specType="${spec.type}">
				<div class="p10 ed_b bg_f8">${spec.name}</div>
				<div class="tags color_tags plr10 pt10 clearfix">
				<#if spec.type=='words'>
				
					<#list spec.valueList as specValueVo >
					<label><span specValue="${specValueVo.value}" data-imgUrl="${specValueVo.value}"  onclick="details.combinationPro(this);productImg(this)" <#if specValueVo.selected=='YES'>class='on'</#if>>${specValueVo.value}</span></label>
					</#list>
					
				<#else>
				
					<#list spec.valueList as specValueVo >
					<label><span  class="pro_img <#if specValueVo.selected=='YES'>on</#if>" data-imgUrl="${specValueVo.value}" specValue="${specValueVo.value}" onclick="details.combinationPro(this);productImg(this)"><img src='${nginxPath }${specValueVo.value}' style='width: 30px;height: 30px;'></span></label>
					</#list>
					
				</#if>
				</div>
			</div>
			</#list>		
			</#if>
			<script>
				function productImg(obj){
					var imgUrl = $(obj).attr("data-imgUrl");
					$(".t-cell-css img").attr("src",imgUrl)
				}
			</script>
			<div class="mb60">
			<div class="bg_white ed_tb clearfix">
				<div class="p10 ed_b bg_f8">數量</div>
				<div class="fl p10">
					<p class="sub_add clearfix">
						<input type="button" class="subtract t_gray" value="-" onclick="details.subtract();">
						<input type="text" class="value tc" value="1" placeholder="1" id="productNum" onkeyup="details.checkGoodsNum(this);">
						<input type="button" class="addition t_gray" value="+" onclick="details.add();">
					</p>
				</div>
			</div>			
		</div>
		<div class="btn-sure">
				<input type="button" class="btn btn_orange btn wp100 b_radius0" value="確定" onclick="details.confirm();">
		</div>
	</div>
</div>

顯示結果為下:

 

 這里觸發了一個js函數:details.confirm()

confirm:function(){
		
		var noSelectSpec="";
		$("#modal_spec_list").find(".spec").each(function(){
			if($(this).find(".on").length<1){
				noSelectSpec+=$(this).attr("specName")+"  ";
			}
		});
		//判斷是否有沒被選中的規格
		if(noSelectSpec !=""){
			resetJstip("請選擇："+noSelectSpec);
			return false;
		}
		
		//判斷是否選中到貨品
		if(productsId=="" || sellerProductsId==""){
			resetJstip("請選擇："+noSelectSpec);
			return false;
		}
		
		//判斷當前購買量是否大於庫存
		var productNum=parseInt($("#productNum").val());
		var storeNum=parseInt(details.replaceAll($("#modal_store_num").html(), ",", ''));
		if(productNum>storeNum){
			 resetJstip("數量超出范圍~");
			 return false;
		}
		if(buyType=="0"){
			//加入購物車
			var amount=parseInt($("#productNum").val());
			$.ajax({
				type : "POST",
				url : ctx+"/shop/m/goods/ajaxAddToGoodsCar",
				data :{"sellerGoodsId":sellerGoodsId,"goodsId":goodsId,"sellerProductsId":sellerProductsId,"productsId":productsId,"amount":amount,"sharePersonId":sharePersonId},
				dataType : "json",
				async : false,
				success : function(data) {
					if(data.type==1){
						//加入購物車成功，關閉模態框
						details.modalHide();
					}
					resetJstip(data.msg);
				 }
			});
		}else{
			//立即購買,跳轉到確認訂單頁面
			$("#productsForm").html("");
			$("#productsForm").append("<input name=\"orderGoods[0].goodsId\" value=\""+goodsId+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"orderGoods[0].productId\" value=\""+productsId+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"orderGoods[0].sellerGoodsId\" value=\""+sellerGoodsId+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"orderGoods[0].sellerProductId\" value=\""+sellerProductsId+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"orderGoods[0].goodsNums\" value=\""+$("#productNum").val()+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"orderGoods[0].shareUserId\" value=\""+sharePersonId+"\" type=\"hidden\">");
			$("#productsForm").append("<input name=\"fuGoodsLevel\" value=\""+fuGoodsLevel+"\" type=\"hidden\">");
			$("#productsForm").submit();
		}
		
	},

　　經過一系列的參數判斷，將一些參數通過ajax傳到后台，我們來到后台:

@RequestMapping(value = "/ajaxAddToGoodsCar")
	@ResponseBody
	public AjaxMessage ajaxAddToGoodsCar(GoodsCar goodsCar) {
		try {

			String userId = ShiroUserUtil.getShiroUserId();
			String productSerialNumber = ShiroUserUtil.getProductSerialNumber();
			// 自己分享的商品 不能享受分享收益
			if (!EmptyUtil.isNullOrEmpty(goodsCar.getSharePersonId())) {

				String[] sharePersonIds = goodsCar.getSharePersonId().split("~");
				for (int i = 0; i < sharePersonIds.length; i++) {
					if (userId.equals(sharePersonIds[i])) {
						goodsCar.setSharePersonId(null);
						break;
					}
				}

			}
			goodsCarService.addToGoodsCar(productSerialNumber, userId, goodsCar);
			return AjaxMessage.getInstance(AjaxMessage.INFO, "添加成功,在購物車等親~");
		} catch (Exception e) {
			e.printStackTrace();
			return AjaxMessage.getInstance(AjaxMessage.ERROR, "加入購物車失敗");
		}

	}

　這個控制層訪問了一個服務層：

@Override
	public void addToGoodsCar(String productSerialNumber, String userId, GoodsCar goodsCar) {
		// 驗證當前登錄人的購物車中是否存在此貨品
		String hql = " from GoodsCar where productSerialNumber=:productSerialNumber and userId=:userId and productsId=:productsId and sellerProductsId=:sellerProductsId ";
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("productSerialNumber", productSerialNumber);
		params.put("userId", userId);
		params.put("productsId", goodsCar.getProductsId());
		params.put("sellerProductsId", goodsCar.getSellerProductsId());
		GoodsCar car = goodsCarDao.findUnique(hql, params);
		if (!EmptyUtil.isNullOrEmpty(car)) {
			// 購物車中存在此貨品，更新數量
			car.setAmount(car.getAmount() + goodsCar.getAmount());
			if (!EmptyUtil.isNullOrEmpty(goodsCar.getSharePersonId())) {
				car.setSharePersonId(goodsCar.getSharePersonId());
			}
			goodsCarDao.save(car);
		} else {
			// 購物車種不存在此貨品，保存記錄
			goodsCar.setProductSerialNumber(productSerialNumber);
			goodsCar.setUserId(userId);
			goodsCarDao.save(goodsCar);
		}

	}

可以看出這個購物車的實現依舊是存儲在數據庫的

簡單的歸納如下:

點擊添加到購物車->觸發模態框->觸發庫存與購買的判斷->觸發后台->后台判斷當前要添加的購物車的商品在購物車中是否存在則更新數量，若不存在則添加到購物車。

下面是購物車的實體:

@Entity
@Table(name = "PT_GOODS_CAR")
public class GoodsCar extends IdEntity {
	/** serialVersionUID */

	private static final long serialVersionUID = 3486623718188862844L;

	/** 產品序列號 */
	private java.lang.String productSerialNumber;

	/** 用戶ID */
	private java.lang.String userId;

	/** 商品ID */
	private java.lang.String goodsId;

	/** 貨品ID */
	private java.lang.String productsId;
	
	/** 賣家商品ID*/
	private java.lang.String sellerGoodsId;
	
	/** 賣家貨品ID*/
	private java.lang.String sellerProductsId;

	/** 創建時間 */
	private java.util.Date createTime;

	/** 商品或者貨品的數量 */
	private java.lang.Long amount;

	/** 分享人id */
	private java.lang.String sharePersonId;
}

　　setter和getter方法略