電商專案關於購物車的實現
阿新 • • 發佈：2019-02-19
購物車的實現有兩張比較常見的方式：
第一種： 就像某寶購物車一樣是存入資料庫
第二種：就像某東一樣存入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賬號 謝謝觀看