电商项目关于购物车的实现

购物车的实现有两张比较常见的方式：

第一种：就像某宝购物车一样是存入数据库

第二种：就像某东一样存入cookie

我今天所实现的是存入cookie中，原因是这种更提高系统的效率不需要与数据库交互太多，太多的交互会导致效率变慢，占用数据库空间

首先我会附上自己的前端页面代码第一个是商品详细列表部分页面代码不要拷贝去运行因为这是一个项目有很多关联的东西

<form method="post" action="" name="" class="infor">
				<ul class="uls form">
				<li><label>移 动 价：</label><span class="word"><b id="skuPrice" class="f14 red mr"></b>(市场价:<del id="markPrice"></del>)</span></li>
				<li><label>商品编号：</label><span class="word">20171022165816175</span></li>
				<li><label>商品评价：</label><span class="word"><span class="val_no val3d4" title="4分">4分</span><var class="blue">(已有17人评价)</var></span></li>
				<li><label>运　　费：</label><span class="word">包邮    <a href="javascript:void(0);" class="blue">配送区域</a></span></li>
				<li><label>库　　存：</label><span class="word" id="stockStatus">有货</span></li>
				<li><label>支付方式：</label><div class="pre word p16x16">
					<span title="网银支付" class="bank">网银支付</span>
					<span title="支付宝" class="pay">支付宝</span>
					<span title="手机支付" class="moblie">手机支付</span>
				</div></li>
				</ul>
				
				<div class="box_orange">
					<ul class="uls form">
					<li><label>规　　格：</label><div class="pre spec">
						
						
							<a href="javascript:void(0);" title="" skuId="3080"
								class="here"
							>
									16G
									黑色
							</a>
						
						
					</div></li>
					<li><label>我 要 买：</label><a href="javascript:void(0);" class="inb sub"></a>
					<input readonly type="text" id="quantityId" name="" value="1" class="num" size="3" />
					<a href="javascript:void(0);" class="inb add"></a><em id="sub_add_msg" class="red"></em></li>
					<li class="submit"><input id="buyNow" type="button" value="" class="hand btn138x40" onclick="buy();"/>
					<input id="addMyCart" type="button" value="" class="hand btn138x40b" onclick="addCart()"/>
					<a href="#" title="加入收藏"  class="inb fav">加入收藏</a></li>
					
					
					</ul>
				</div>

这是部分页面效果，点击加入购物车执行addCart()方法

这是addCart的js代码

function addCart(){
	var skuId = null;
	$(".spec a").each(function(){
		var name = $(".spec a").attr("class");
		if(name = "here"){
			skuId = $(this).attr("skuId");
		}
	});
	var quantity = $("#quantityId").val();
	var stockResult = validStock(skuId, quantity);
	if(stockResult == "no"){
		alert("库存不足");
		return ;
	}
	var cookieResult = validCookie();
	if(cookieResult == "no"){
		alert("cookie被禁用，请开启后再加入购物车");
		return ;
	}
	$.ajax({
		url : 'http://localhost:8280/ecps-protal/cart/addCart.do',
		type : "post",
		dataType : 'text',
		data : {
			skuId : skuId,
			quantity : quantity
		},
		success : function(resultText){
			if(resultText == "success"){
				alert("添加购物车成功");
			}
		},
		error : function(){
			alert("系统错误");
		}
	});
}
/* 对cookie进行校验 */
function validCookie(){
	var result = "yes";
	$.ajax({
		url : 'http://localhost:8280/ecps-protal/cart/validCookie.do',
		type : "post",
		dataType : 'text',
		async : false,
		success : function(resultText){
			result = resultText;
		},
		error : function(){
			
			alert("系统错误");
		}
	});
	return result;
}
/* 查询库存是否充足 */
function validStock(skuId, quantity){
	var result = "yes";
	$.ajax({
		url : 'http://localhost:8280/ecps-protal/cart/validStock.do',
		type : "post",
		dataType : 'text',
		async : false,
		data : {
			skuId : skuId,
			quantity : quantity
		},
		success : function(resultText){
			result = resultText;
		},
		error : function(){
			
			alert("系统错误");
		}
	});
	return result;
	
}

需要验证用户浏览器是否打开cookie第一次使用该系统会出现“”系统错误”，原因是第一次还没有该系统cookie所以在此执行就不会出现问题了同时还要判断数据库中库存是否符合用户的需求validStock就是验证库存

接下来是前端控制器代码

@RequestMapping("/validStock")
	public void validStock(Long skuId, Integer quantity, PrintWriter out){
		//设置一个返回值
		String result = "yes";
		EbSku sku = skuService.findSkuById(skuId);
		if(sku.getStockInventory() == 0 || sku.getStockInventory() < quantity){
			result = "no";
		}
		out.write(result);
	}

@RequestMapping("/validCookie")
	public void validCookie(HttpServletRequest request, HttpServletResponse response, PrintWriter out){
		String result = cartService.validataCookie(request, response);
		out.write(result);
	}

@RequestMapping("/addCart")
	public void addCart(Long skuId, Integer quantity, HttpServletRequest request, HttpServletResponse response, PrintWriter out){
		cartService.addCart(request, response, skuId, quantity);
		out.write("success");
	}

大家可以更加前后对应我就不一一解释了重点在service层去实现这些功能

public String validataCookie(HttpServletRequest request, HttpServletResponse response) {
		String result = "no";
		Cookie cookie = new Cookie("test", "test");
		//不能理解为cookie的储存位置 /代表http://localhost:8080/网址后一切路径的cookie  访问该项目取cookie就能取到该cookie
		cookie.setPath("/ecps-protal");//设置到该项目下的cookie
		//http://localhost:8080/ecps-portal/..  访问这个网址就能取到当前设置过得所有cookie 不会取到浏览器所有的其他网址的cookie
		//将cookie设置到浏览器里
		response.addCookie(cookie);
		
		//马上取cookie进行判断  如果拿到说明cookie未被禁用
		Cookie[] cookies = request.getCookies();
		if(cookies!=null && cookies.length > 0){
			for (Cookie cookie2 : cookies) {
				String name = cookie2.getName();
				String value = cookie2.getValue();
				if("test".equals(name) && "test".equals(value)){
					result = "yes";
				}
			}
		}
		return result;
	}

public void addCart(HttpServletRequest request, HttpServletResponse response, 
			Long skuId, Integer quantity) {
		List<EbCart> carts = new ArrayList<EbCart>();
		//json配置
		JsonConfig js = new JsonConfig();
		//设置转换的类
		js.setRootClass(EbCart.class);
		//设置不需要转换的属性
		js.setExcludes(new String[]{"sku"});
		//获得该项目下的cookie
		Cookie[] cookies = request.getCookies();
		
		if(cookies!=null && cookies.length > 0){
			String cookieKey = ECPSUtils.readProper("cart_key");
			for (Cookie cookie : cookies) {
				String name = cookie.getName();
				
				if(StringUtils.equals(name, cookieKey)){
					String value = cookie.getValue();
					//转化value的字符编码
					value = URLDecoder.decode(value);
					//将json格式的字符串转化为json数组
					JSONArray jArray = JSONArray.fromObject(value);
					//把json数组转化为Java集合
					carts = (List<EbCart>) JSONSerializer.toJava(jArray,js);
					boolean isExsit = false;
					for (EbCart cart : carts) {
						//如果存在则累加该商品的数量
						if(cart.getSkuId().longValue() == skuId.longValue()){
							cart.setQuantity(cart.getQuantity() + quantity);
							isExsit = true;
						}
					}
					//如果不存在  加入购物车中
					if(!isExsit){
						EbCart ebCart = new EbCart();
						ebCart.setSkuId(skuId);
						ebCart.setQuantity(quantity);
						carts.add(ebCart);
					}
					
				}
			}
		}
		//第一次登录该网站购物 没有cookie
		if(carts.size() == 0){
			EbCart ebCart = new EbCart();
			ebCart.setSkuId(skuId);
			ebCart.setQuantity(quantity);
			carts.add(ebCart);
		}
		//把Java集合变为json数组
		JSONArray jsonArray = JSONArray.fromObject(carts,js);
		//将json数组变为json字符串
		String result = jsonArray.toString();
		//
		result = URLEncoder.encode(result);
		//将信息放到cookie中
		Cookie cookie = new Cookie("cart_key", result);
		//设置cookie生命周期  永久有效
		cookie.setMaxAge(Integer.MAX_VALUE);
		//设置路径
		cookie.setPath("/ecps-protal");
		response.addCookie(cookie);
	}

上面的注释大家可以看懂了吧如果有什么问题或者有什么好的介意，或者发现什么错误可以私下联系我的CSDN账号谢谢观看

电商项目关于购物车的实现

猜你喜欢