歡迎光臨
每天分享高質量文章

購物車的原理及實現(仿京東實現原理)

作者:一枝花算不算浪漫

來自:https://www.cnblogs.com/wang-meng/p/5854773.html

關於購物車的東西, 這裡首先丟擲四個問題:

1)用戶沒登陸用戶名和密碼,添加商品, 關閉瀏覽器再打開後 不登錄用戶名和密碼 問:購物車商品還在嗎? 

2)用戶登陸了用戶名密碼,添加商品,關閉瀏覽器再打開後 不登錄用戶名和密碼 :購物車商品還在嗎?   

3)用戶登陸了用戶名密碼,添加商品, 關閉瀏覽器,然後再打開,登陸用戶名和密碼  :購物車商品還在嗎?

4)用戶登陸了用戶名密碼,添加商品, 關閉瀏覽器 外地老家打開瀏覽器  登陸用戶名和密碼 問:購物車商品還在嗎?

上面四個問題都是以京東為模板, 那麼大家猜猜結果是什麼呢?
1) 在
2) 不在了
3) 在
4) 在

如果你能夠猜到答案, 那麼說明你真的很棒, 那麼關於這四點是怎麼實現的呢? (如果有不認可的小伙伴可以用京東實驗一下)
下麵我們就來講解下購物車的原理,最後再來說下具體的code實現.
1) 用戶沒有登錄, 添加商品, 此時的商品是被添加到了瀏覽器的Cookie中, 所以當再次訪問時(不登錄),商品仍然在Cookie中, 所以購物車中的商品還是存在的.
2) 用戶登錄了,添加商品, 此時會將Cookie中和用戶選擇的商品都添加到購物車中, 然後刪除Cookie中的商品. 所以當用戶再次訪問(不登錄),此時Cookie中的購物車商品已經被刪除了, 所以此時購物車中的商品不在了.
3) 用戶登錄, 添加商品,此時商品被添加到資料庫做了持久化儲存, 再次打開登錄用戶名和密碼, 該用戶選擇的商品肯定還是存在的, 所以購物車中的商品還是存在的.
4) 理由3)

這裡再說下 沒登錄 儲存商品到Cookie的優點以及儲存到Session和資料庫的對比:

1:Cookie: 優點: 儲存用戶瀏覽器(不用浪費我們公司的服務器) 缺點:Cookie禁用,不提供儲存
2:Session:(Redis : 浪費大量服務器記憶體:實現、禁用Cookie) 速度很快
3:資料庫(Mysql、Redis、SOlr) 能持久化的就資料庫 速度太慢

那麼我今天要講的就是:

用戶沒登陸:購物車添加到Cookie中
用戶登陸: 儲存購物車到Redis中 (不用資料庫)

整體的思路圖解:

接下來就是代碼實體來實現 購物車的功能了:

首先我們看下購物車和購物項兩個JavaBean的設計:
購物車: buyerCart.java

1 public class BuyerCart implements Serializable{
2
3     /**
4      * 購物車
5      */

6     private static final long serialVersionUID = 1L;
7    
8     //商品結果集
9     private List items = new ArrayList();
10    
11     //添加購物項到購物車
12     public void addItem(BuyerItem item){
13         //判斷是否包含同款
14         if (items.contains(item)) {
15             //追加數量
16             for (BuyerItem buyerItem : items) {
17                 if (buyerItem.equals(item)) {
18                     buyerItem.setAmount(item.getAmount() + buyerItem.getAmount());
19                 }
20             }
21         }else {
22             items.add(item);
23         }
24        
25     }
26
27     public List getItems() {
28         return items;
29     }
30
31     public void setItems(List items) {
32         this.items = items;
33     }
34    
35    
36     //小計
37     //商品數量
38     @JsonIgnore
39     public Integer getProductAmount(){
40         Integer result = 0;
41         //計算
42         for (BuyerItem buyerItem : items) {
43             result += buyerItem.getAmount();
44         }
45         return result;
46     }
47    
48     //商品金額
49     @JsonIgnore
50     public Float getProductPrice(){
51         Float result = 0f;
52         //計算
53         for (BuyerItem buyerItem : items) {
54             result += buyerItem.getAmount()*buyerItem.getSku().getPrice();
55         }
56         return result;
57     }
58    
59     //運費
60     @JsonIgnore
61     public Float getFee(){
62         Float result = 0f;
63         //計算
64         if (getProductPrice() < 79) {
65             result = 5f;
66         }
67        
68         return result;
69     }
70    
71     //總價
72     @JsonIgnore
73     public Float getTotalPrice(){
74         return getProductPrice() + getFee();
75     }
76    
77 }

這裡使用了@JsonIgonre註解是因為下麵需要將BuyerCart 轉換成Json格式, 而這幾個欄位只有get 方法, 所以不能轉換, 需要使用忽略Json.

下麵是購物項: buyerItem.java

1 public class BuyerItem implements Serializable{
2
3     private static final long serialVersionUID = 1L;
4
5     //SKu物件
6     private Sku sku;
7    
8     //是否有貨
9     private Boolean isHave = true;
10    
11     //購買的數量
12     private Integer amount = 1;
13
14     public Sku getSku() {
15         return sku;
16     }
17
18     public void setSku(Sku sku) {
19         this.sku = sku;
20     }
21
22     public Boolean getIsHave() {
23         return isHave;
24     }
25
26     public void setIsHave(Boolean isHave) {
27         this.isHave = isHave;
28     }
29
30     public Integer getAmount() {
31         return amount;
32     }
33
34     public void setAmount(Integer amount) {
35         this.amount = amount;
36     }
37
38     @Override
39     public int hashCode() {
40         final int prime = 31;
41         int result = 1;
42         result = prime * result + ((sku == null) ? 0 : sku.hashCode());
43         return result;
44     }
45
46     @Override
47     public boolean equals(Object obj) {
48         if (this == obj) //比較地址
49             return true;
50         if (obj == null)
51             return false;
52         if (getClass() != obj.getClass())
53             return false;
54         BuyerItem other = (BuyerItem) obj;
55         if (sku == null) {
56             if (other.sku != null)
57                 return false;
58         } else if (!sku.getId().equals(other.sku.getId()))
59             return false;
60         return true;
61     }
62 }

1,將商品加入購物車中

1 //加入購物車
2 function  addCart(){
3       //  + skuId
4       window.location.href="/shopping/buyerCart?skuId="+skuId+"&amount;="+$("#buy-num").val();
5 }

 

這裡傳入的引數是skuId(庫存表的主鍵, 庫存表儲存的商品id,顏色,尺碼,庫存等信息), 購買數量amount.

接著我們來看Controller是如何來處理的:

1 //加入購物車
2     @RequestMapping(value="/shopping/buyerCart")
3     public String buyerCart(Long skuId, Integer amount, HttpServletRequest request,
4             HttpServletResponse response)
throws JsonParseException, JsonMappingException, IOException
{
5         //將物件轉換成json字串/json字串轉成物件
6         ObjectMapper om = new ObjectMapper();
7         om.setSerializationInclusion(Include.NON_NULL);
8         BuyerCart buyerCart = null;
9         //1,獲取Cookie中的購物車
10         Cookie[] cookies = request.getCookies();
11         if (null != cookies && cookies.length > 0) {
12             for (Cookie cookie : cookies) {
13                 //
14                 if (Constants.BUYER_CART.equals(cookie.getName())) {
15                     //購物車 物件 與json字串互轉
16                     buyerCart = om.readValue(cookie.getValue(), BuyerCart.class);
17                     break;
18                 }
19             }
20         }
21        
22         //2,Cookie中沒有購物車, 創建購物車物件
23         if (null == buyerCart) {
24             buyerCart = new BuyerCart();
25         }
26        
27         //3, 將當前款商品追加到購物車
28         if (null != skuId && null != amount) {
29             Sku sku = new Sku();
30             sku.setId(skuId);
31             BuyerItem buyerItem = new BuyerItem();
32             buyerItem.setSku(sku);
33             //設置數量
34             buyerItem.setAmount(amount);
35             //添加購物項到購物車
36             buyerCart.addItem(buyerItem);
37         }
38        
39         //排序  倒序
40         List items = buyerCart.getItems();
41         Collections.sort(items, new Comparator() {
42
43             @Override
44             public int compare(BuyerItem o1, BuyerItem o2) {
45                 return -1;
46             }
47            
48         });
49        
50         //前三點 登錄和非登錄做的是一樣的操作, 在第四點需要判斷
51         String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
52         if (null != username) {
53             //登錄了
54             //4, 將購物車追加到Redis中
55             cartService.insertBuyerCartToRedis(buyerCart, username);
56             //5, 清空Cookie 設置存活時間為0, 立馬銷毀
57             Cookie cookie = new Cookie(Constants.BUYER_CART, null);
58             cookie.setPath("/");
59             cookie.setMaxAge(-0);
60             response.addCookie(cookie);
61         }else {
62             //未登錄
63             //4, 儲存購物車到Cookie中
64             //將物件轉換成json格式
65             Writer w = new StringWriter();
66             om.writeValue(w, buyerCart);
67             Cookie cookie = new Cookie(Constants.BUYER_CART, w.toString());
68             //設置path是可以共享cookie
69             cookie.setPath("/");
70             //設置Cookie過期時間: -1 表示關閉瀏覽器失效  0: 立即失效  >0: 單位是秒, 多少秒後失效
71             cookie.setMaxAge(24*60*60);
72             //5,Cookie寫會瀏覽器
73             response.addCookie(cookie);
74         }
75        
76         //6, 重定向
77         return "redirect:/shopping/toCart";
78     }

這裡設計一個知識點: 將物件轉換成json字串/json字串轉成物件
我們在這裡先寫一個小的Demo來演示json和物件之間的互轉, 這裡使用到了springmvc中的ObjectMapper類.

1 public class TestJson {
2
3     @Test
4     public void testAdd() throws Exception {
5         TestTb testTb = new TestTb();
6         testTb.setName("範冰冰");
7         ObjectMapper om = new ObjectMapper();
8         om.setSerializationInclusion(Include.NON_NULL);
9         //將物件轉換成json字串
10         Writer wr = new StringWriter();
11         om.writeValue(wr, testTb);
12         System.out.println(wr.toString());
13        
14         //轉回物件
15         TestTb r = om.readValue(wr.toString(), TestTb.class);
16         System.out.println(r.toString());
17     }
18    
19 }

執行結果: 

這裡我們使用了Include.NON_NULL, 如果TestTb 中屬性為null 的就不給轉換成Json, 從物件–>Json字串  用的是 objectMapper.writeValue(). 從Json字串–>物件使用的是objectMapper.readValue().
回歸上面我們專案中的代碼, 只有未登錄 添加商品時才會將此商品添加到Cookie中.

1 //未登錄
2             //4, 儲存購物車到Cookie中
3             //將物件轉換成json格式
4             Writer w = new StringWriter();
5             om.writeValue(w, buyerCart);
6             Cookie cookie = new Cookie(Constants.BUYER_CART, w.toString());
7             //設置path是可以共享cookie
8             cookie.setPath("/");
9             //設置Cookie過期時間: -1 表示關閉瀏覽器失效  0: 立即失效  >0: 單位是秒, 多少秒後失效
10             cookie.setMaxAge(24*60*60);
11             //5,Cookie寫會瀏覽器
12             response.addCookie(cookie);

我們debug 可以看到:

這裡已經將物件購物車物件buyerCart轉換成了Json格式.
將商品添加到購物車, 不管是登錄還是未登錄, 都要先取出Cookie中的購物車, 然後將當前選擇的商品追加到購物車中.
然後登錄的話  就把Cookie中的購物車清空, 並將購物車的內容添加到Redis中做持久化儲存.
如果未登錄, 將選擇的商品追加到Cookie中.

將購物車追加到Redis中的代碼:insertBuyerCartToRedis(這裡麵包含了判斷添加的是否是同款)

1 //儲存購物車到Redis中
2     public void insertBuyerCartToRedis(BuyerCart buyerCart, String username){
3         List items = buyerCart.getItems();
4         if (items.size() > 0) {
5             //redis中儲存的是skuId 為key , amount 為value的Map集合
6             Map<String, String> hash = new HashMap<String, String>();
7             for (BuyerItem item : items) {
8                 //判斷是否有同款
9                 if (jedis.hexists("buyerCart:"+username, String.valueOf(item.getSku().getId()))) {
10                     jedis.hincrBy("buyerCart:"+username, String.valueOf(item.getSku().getId()), item.getAmount());
11                 }else {
12                     hash.put(String.valueOf(item.getSku().getId()), String.valueOf(item.getAmount()));
13                 }
14             }
15             if (hash.size() > 0) {
16                 jedis.hmset("buyerCart:"+username, hash);
17             }
18         }
19        
20     }

判斷用戶是否登錄: String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));

1 public class RequestUtils {
2
3     //獲取CSessionID
4     public static String getCSessionId(HttpServletRequest request, HttpServletResponse response){
5         //1, 從Request中取Cookie
6         Cookie[] cookies = request.getCookies();
7         //2, 從Cookie資料中遍歷查找, 並取CSessionID
8         if (null != cookies && cookies.length > 0) {
9             for (Cookie cookie : cookies) {
10                 if ("CSESSIONID".equals(cookie.getName())) {
11                     //有, 直接傳回
12                     return cookie.getValue();
13                 }
14             }
15         }
16         //沒有, 創建一個CSessionId, 並且放到Cookie再傳回瀏覽器.傳回新的CSessionID
17         String csessionid = UUID.randomUUID().toString().replaceAll("-", "");
18         //並且放到Cookie中
19         Cookie cookie = new Cookie("CSESSIONID", csessionid);
20         //cookie  每次都帶來, 設置路徑
21         cookie.setPath("/");
22         //0:關閉瀏覽器  銷毀cookie. 0:立即消失.  >0 存活時間,秒
23         cookie.setMaxAge(-1);
24        
25         return csessionid;
26     }
27 }
1 //獲取
2     public String getAttributterForUsername(String jessionId){
3         String value = jedis.get(jessionId + ":USER_NAME");
4         if(null != value){
5             //計算session過期時間是 用戶最後一次請求開始計時.
6             jedis.expire(jessionId + ":USER_NAME", 60*exp);
7             return value;
8         }
9         return null;
10     }

==========================================2,購物車展示頁面
最後 重定向到購物車展示頁: return “redirect:/shopping/toCart”; 這裡進入結算頁有兩種方式:
1) 在商品詳情頁 點擊加入購物車.
2) 直接點擊購物車按鈕 進入購物車結算頁.

下麵來看下結算頁的代碼:

1 @Autowired
2     private CartService cartService;
3     //去購物車結算, 這裡有兩個地方可以直達: 1,在商品詳情頁 中點擊加入購物車按鈕  2, 直接點擊購物車按鈕
4     @RequestMapping(value="/shopping/toCart")
5     public String toCart(Model model, HttpServletRequest request,
6             HttpServletResponse response) throws JsonParseException, JsonMappingException, IOException{
7         //將物件轉換成json字串/json字串轉成物件
8         ObjectMapper om = new ObjectMapper();
9         om.setSerializationInclusion(Include.NON_NULL);
10         BuyerCart buyerCart = null;
11         //1,獲取Cookie中的購物車
12         Cookie[] cookies = request.getCookies();
13         if (null != cookies && cookies.length > 0) {
14             for (Cookie cookie : cookies) {
15                 //
16                 if (Constants.BUYER_CART.equals(cookie.getName())) {
17                     //購物車 物件 與json字串互轉
18                     buyerCart = om.readValue(cookie.getValue(), BuyerCart.class);
19                     break;
20                 }
21             }
22         }
23        
24         //判斷是否登錄
25         String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
26         if (null != username) {
27             //登錄了
28             //2, 購物車 有東西, 則將購物車的東西儲存到Redis中
29             if (null == buyerCart) {
30                 cartService.insertBuyerCartToRedis(buyerCart, username);
31                 //清空Cookie 設置存活時間為0, 立馬銷毀
32                 Cookie cookie = new Cookie(Constants.BUYER_CART, null);
33                 cookie.setPath("/");
34                 cookie.setMaxAge(-0);
35                 response.addCookie(cookie);
36             }
37             //3, 取出Redis中的購物車
38             buyerCart = cartService.selectBuyerCartFromRedis(username);
39         }
40        
41        
42         //4, 沒有 則創建購物車
43         if (null == buyerCart) {
44             buyerCart = new BuyerCart();
45         }
46        
47         //5, 將購物車裝滿, 前面只是將skuId裝進購物車, 這裡還需要查出sku詳情
48         List items = buyerCart.getItems();
49         if(items.size() > 0){
50             //只有購物車中有購物項, 才可以將sku相關信息加入到購物項中
51             for (BuyerItem buyerItem : items) {
52                 buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));
53             }
54         }
55        
56         //5,上面已經將購物車裝滿了, 這裡直接回顯頁面
57         model.addAttribute("buyerCart", buyerCart);
58        
59         //跳轉購物頁面
60         return "cart";
61     }

這裡 就是 購物車詳情展示頁面, 這裡需要註意, 如果是同一件商品連續添加, 是需要合併的.
購物車詳情展示頁面就包括兩大塊, 1) 商品詳情 2)總計(商品總額,運費)
其中1)商品詳情又包括 商品尺碼,商品顏色, 商品購買數量, 是否有貨.

取出Redis中的購物車: buyerCart = cartService.selectBuyerCartFromRedis(username);

1     //取出Redis中購物車
2     public BuyerCart selectBuyerCartFromRedis(String username){
3         BuyerCart buyerCart = new BuyerCart();
4         //獲取所有商品, redis中儲存的是skuId 為key , amount 為value的Map集合
5         Map<String, String> hgetAll = jedis.hgetAll("buyerCart:"+username);
6         SetString, String>> entrySet = hgetAll.entrySet();
7         for (Entry<String, String> entry : entrySet) {
8             //entry.getKey(): skuId
9             Sku sku = new Sku();
10             sku.setId(Long.parseLong(entry.getKey()));
11             BuyerItem buyerItem = new BuyerItem();
12             buyerItem.setSku(sku);
13             //entry.getValue(): amount
14             buyerItem.setAmount(Integer.parseInt(entry.getValue()));
15             //添加到購物車中
16             buyerCart.addItem(buyerItem);
17         }
18        
19         return buyerCart;
20     }

將購物車裝滿, 前面只是將skuId裝進購物車, 這裡還需要查出sku詳情: List items = buyerCart.getItems();
buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));

1 //向購物車中的購物項 添加相應的資料, 通過skuId 查詢sku物件, 顏色物件, 商品物件
2     public Sku selectSkuById(Long skuId){
3         Sku sku = skuDao.selectByPrimaryKey(skuId);
4         //顏色
5         sku.setColor(colorDao.selectByPrimaryKey(sku.getColorId()));
6         //添加商品信息
7         sku.setProduct(productDao.selectByPrimaryKey(sku.getProductId()));
8         return sku;
9     }

接著就傳回”cart.jsp”, 這個就是購物車詳情展示頁面了.

================================================3, 去結算頁面
到了這裡就說明用戶必須要 登錄, 而且購物車中必須要有商品.
所以這裡我麽你需要利用springmvc的過濾功能, 用戶點擊結算的時候必須要先登錄, 如果沒有登錄的話就提示用戶需要登錄.

1 //去結算
2     @RequestMapping(value="/buyer/trueBuy")
3     public String trueBuy(String[] skuIds, Model model, HttpServletRequest request, HttpServletResponse response){
4         //1, 購物車必須有商品,
5         //取出用戶名  再取出購物車
6         String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
7         //取出所有購物車
8         BuyerCart buyerCart = cartService.selectBuyerCartFromRedisBySkuIds(skuIds, username);
9         List items = buyerCart.getItems();
10         if (items.size() > 0) {
11             //購物車中有商品
12             //判斷所勾選的商品是否都有貨, 如果有一件無貨, 那麼就掃清頁面.
13             Boolean flag = true;
14             //2, 購物車中商品必須有庫存 且購買大於庫存數量時視為無貨. 提示: 購物車原頁面不動. 有貨改為無貨, 加紅提醒.
15             for (BuyerItem buyerItem : items) {
16                 //裝滿購物車的購物項, 當前購物項只有skuId這一個東西, 我們還需要購物項的數量去判斷是否有貨
17                 buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));
18                 //校驗庫存
19                 if (buyerItem.getAmount() > buyerItem.getSku().getStock()) {
20                     //無貨
21                     buyerItem.setIsHave(false);
22                     flag = false;
23                 }
24                 if (!flag) {
25                     //無貨, 原頁面不動, 有貨改成無貨, 掃清頁面.
26                     model.addAttribute("buyerCart", buyerCart);
27                     return "cart";
28                 }
29             }
30         }else {
31             //購物車沒有商品
32             //沒有商品: 1>原購物車頁面掃清(購物車頁面提示沒有商品)
33             return "redirect:/shopping/toCart";
34         }
35        
36        
37         //3, 正常進入下一個頁面
38         return "order";
39     }

取出 所指定的購物車, 因為我們結算之前在購物車詳情頁面會勾選 我們 需要購買的商品, 所以這裡是根據所勾選的商品去結算的.
BuyerCart buyerCart = cartService.selectBuyerCartFromRedisBySkuIds(skuIds, username);
從購物車中取出指定商品:

1 //從購物車中取出指定商品
2     public BuyerCart selectBuyerCartFromRedisBySkuIds(String[] skuIds, String username){
3         BuyerCart buyerCart = new BuyerCart();
4         //獲取所有商品, redis中儲存的是skuId 為key , amount 為value的Map集合
5         Map<String, String> hgetAll = jedis.hgetAll("buyerCart:"+username);
6         if (null != hgetAll && hgetAll.size() > 0) {
7             SetString, String>> entrySet = hgetAll.entrySet();
8             for (Entry<String, String> entry : entrySet) {
9                 for (String skuId : skuIds) {
10                     if (skuId.equals(entry.getKey())) {
11                         //entry.getKey(): skuId
12                         Sku sku = new Sku();
13                         sku.setId(Long.parseLong(entry.getKey()));
14                         BuyerItem buyerItem = new BuyerItem();
15                         buyerItem.setSku(sku);
16                         //entry.getValue(): amount
17                         buyerItem.setAmount(Integer.parseInt(entry.getValue()));
18                         //添加到購物車中
19                         buyerCart.addItem(buyerItem);
20                     }
21                 }
22             }
23         }
24        
25         return buyerCart;
26     }

1) 當我們購買的商品只要有一件是無貨的狀態, 那麼掃清購物車詳情頁面, 回顯無貨的商品狀態. 
2)當購物車中午商品時, 掃清當前頁面.

購物車就這麼多東西,可能講解有不到或者錯誤的地方, 歡迎大家能夠指出來。


編號761,輸入編號直達本文

●輸入m獲取文章目錄

推薦↓↓↓

Web開發

更多推薦18個技術類微信公眾號

涵蓋:程式人生、演算法與資料結構、黑客技術與網絡安全、大資料技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、資料庫、運維等。

赞(0)

分享創造快樂