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

2017年7月14日更新:
有很多小夥伴想要專案資料和原始碼, 我重新整理了一份傳了上來:

這次更新的為專案全套視訊及所有原始碼資料：
連結: https://pan.baidu.com/s/1hseNP9U 密碼: ugey

今天來開始寫一下關於購物車的東西, 這裡首先丟擲四個問題:

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<BuyerItem> items = new ArrayList<BuyerItem>();
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<BuyerItem> getItems() {
28         return items;
29     }
30 
31     public void setItems(List<BuyerItem> 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 <T> 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<BuyerItem> items = buyerCart.getItems();
41         Collections.sort(items, new Comparator<BuyerItem>() {
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(這裡麵包含了判斷新增的是否是同款)

View Code

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

View Code

sessionProviderService

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

下面來看下結算頁的程式碼:

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

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

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

RAID原理及軟RAID的實現方式

LSI(LSA)潛在語義索引原理及sklearn中的實現

BT Tracker的原理及.Net Core簡單實現Tracker Server

順序表的刪除操作原理及C語言完整實現

Adaboost原理及簡單的Python實現

FIR濾波器和IIR濾波器原理及Xilinx System Generator實現

【演算法學習】AVL平衡二叉搜尋樹原理及各項操作程式設計實現（C++）

[C++][執行緒池][完整實現] 轉：執行緒池原理及建立（C++實現）

梯度下降原理及線性迴歸程式碼實現（python/java/c++）

Android Plugin插樁式實現外掛化開發（一）-實現原理及Activity外掛化實現

Socket介面原理及用C#語言實現

快速排序演算法原理及java遞迴實現

DIV+CSS實現仿京東商城導航條效果

使用Recyclerview實現仿京東分類

popwin實現仿京東商品列表彈窗條件篩選列表彈窗

Android 實現GridView的橫向滾動，實現仿京東秒殺效果

hibernate工作原理及作用 JAVA Hibernate工作原理及為什麼要用

瀏覽器渲染原理及解剖瀏覽器內部工作原理

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

相關推薦