電商網站中購物車的實現(xiàn)有很多種方式虫腋，這里我介紹兩種，第一種是直接用數(shù)據(jù)庫稀余，用戶在一個會話期間的所有的對購物車的操作全部都是對數(shù)據(jù)庫的操作悦冀，這種方式更新快，可以跨終端跨瀏覽器實現(xiàn)實時更新睛琳，但是比較消耗資源盒蟆，因為每次操作都是和數(shù)據(jù)庫的一次交互。第二種方式是session+數(shù)據(jù)庫师骗，在一次會話期間历等，服務器先把用戶對購物車的操作放在session中，當用戶退出登錄或者關閉瀏覽器的時候再同步到數(shù)據(jù)庫中辟癌，這種方式避免了很多對數(shù)據(jù)庫的重復操作寒屯，有利于節(jié)省資源，提高效率黍少，但是無法實現(xiàn)跨瀏覽器寡夹，跨設備的同步，信息更新也不及時厂置。第一種方式的實現(xiàn)比較簡單菩掏，在數(shù)據(jù)庫中創(chuàng)建一張購物車表，有四個字段：cart_id,user_id,goods_id,count昵济，這里就不再贅述患蹂，主要講一講第二種方式。
-
數(shù)據(jù)結構
把購物車放在session中這種方式的數(shù)據(jù)結構是HashMap砸紊，鍵是商品的id传于，值需要另外創(chuàng)建一個類：CartItem，這個類只有兩個成員：goods與count醉顽，分別記錄著商品的信息與商品的數(shù)量
package com.qfedu.entity; import lombok.Data; @Data public class CartItem { private FreshGoods freshGoods; private int count; } -
controller
package com.qfedu.controller; import com.qfedu.entity.Cart; import com.qfedu.entity.CartItem; import com.qfedu.entity.FreshGoods; import com.qfedu.service.CartService; import com.qfedu.service.FreshGoodsService; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import javax.servlet.http.HttpSession; import java.util.HashMap; import java.util.Map; /** * (Cart)表控制層 * * @author makejava * @since 2020-03-24 16:03:32 */ @Controller //@RequestMapping("cart") public class CartController { /** * 服務對象 */ @Resource private CartService cartService; @Resource private FreshGoodsService goodsService; /** * 通過主鍵查詢單條數(shù)據(jù) * * @param id 主鍵 * @return 單條數(shù)據(jù) */ //@GetMapping("selectOne") public Cart selectOne(Integer id) { return this.cartService.queryById(id); } @PostMapping("mycart") public String myCart(@RequestParam("fdid") String fdid, HttpSession session){ System.out.println("hehe" + fdid); Object objCart = session.getAttribute("cart"); Map<String, CartItem> cart = null; if(objCart == null){ // 購物車為空 cart = new HashMap<>(); CartItem cartItem = new CartItem(); FreshGoods fg = goodsService.queryById(fdid); cartItem.setCount(1); cartItem.setFreshGoods(fg); cart.put(fdid, cartItem); }else{ // 購物車不為空 cart = (Map<String, CartItem>)objCart; if(cart.containsKey(fdid)){ // 購物車中包含要添加的商品 CartItem cartItem = cart.get(fdid); cartItem.setCount(cartItem.getCount() + 1); cart.put(fdid, cartItem); }else{ FreshGoods fg = goodsService.queryById(fdid); CartItem cartItem = new CartItem(); cartItem.setCount(1); cartItem.setFreshGoods(fg); cart.put(fdid, cartItem); } } session.setAttribute("cart", cart); return "mycart"; } }這里要進行三次判斷沼溜，第一種情況是session域中還沒有購物車，所以要創(chuàng)建購物車游添，然后放進去系草，第二種情況是已經有了購物車但是購物車中還沒有要添加的商品通熄，購物車需要新添加一個CartItem，第三種情況是已經有了購物車并且購物車中已經有了要添加的商品找都，直接在原來的數(shù)量的基礎上加1.
-
mycart.jsp
<div> <c:if test="${cart != null}"> <div class="occasion-cart"> <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out"> </div> </div> <form action="payment" method="post"> <table class="table table-bordered table-striped table-hover"> <tr> <th><input type="checkbox" id="all" onclick="checkAllCart(this.checked)" /></th> <th>pdid</th> <th>pname</th> <th>price</th> <th>discount</th> <th>image</th> <th>count</th> <th>gtid</th> <th>summary</th> </tr> <c:forEach items="${cart}" var="ct"> <tr> <th><input type="checkbox" name="one" onclick="checkOneCart()" value="${ct.key}" /></th> <td> ${ct.key}</td> <td> ${ct.value.freshGoods.goodName}</td> <td> ${ct.value.freshGoods.price}</td> <td> ${ct.value.freshGoods.discount}%</td> <td> ${ct.value.freshGoods.img}</td> <td> ${ct.value.count}</td> <td> ${ct.value.freshGoods.gtid}</td> <td> ${ct.value.count * ct.value.freshGoods.price * ct.value.freshGoods.discount / 100}</td> </tr> </c:forEach> </table> <input type="hidden" name="fdid" value="${freshGoods.fdid}"/> <input type="submit" value="pay" class="button btn-primary btn-success btn-lg" style="width: 200px;" /> </form> </c:if> </div> <jsp:include page="bottom.jsp"/> <script> function checkAllCart(v) { var chOne = document.getElementsByName("one"); for(var i = 0; i < chOne.length; i++){ //alert(); chOne[i].checked = v; } } function checkOneCart() { var chOne = document.getElementsByName("one"); var flag = true; for(var i = 0; i < chOne.length; i++){ if(!chOne[i].checked){ document.getElementById("all").checked = false; flag = false; break; } } if(flag){ document.getElementById("all").checked = true; } } </script>這個頁面的主要操作是展示購物車属韧，重點在于獲取Map怨酝，還有使用js進行全選操作。
