购物车的原理及实现.(仿京东实现原理)

怼烎@ 2022-05-17 00:10 245阅读 0赞

# **今天来开始写一下关于购物车的东西, 这里首先抛出四个问题:** #

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中 （不用数据库）  
  
整体的思路图解:  
![format_png][]  
  
**接下来就是代码实例来实现 购物车的功能了:  
首先我们看下购物车和购物项两个JavaBean的设计:**  
购物车: buyerCart.java

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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 }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

这里使用了@JsonIgonre注解是因为下面需要将BuyerCart 转换成Json格式, 而这几个字段只有get 方法, 所以不能转换, 需要使用忽略Json.  
  
下面是购物项: buyerItem.java

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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 }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

** **

**1,将商品加入购物车中  
![format_png 1][]**

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

这里传入的参数是skuId(库存表的主键, 库存表保存的商品id,颜色,尺码,库存等信息), 购买数量amount.  
  
**接着我们来看Controller是如何来处理的:**

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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     }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

这里设计一个知识点: 将对象转换成json字符串/json字符串转成对象  
我们在这里先写一个小的Demo来演示json和对象之间的互转, 这里使用到了springmvc中的ObjectMapper类.

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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 }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

执行结果:   
![format_png 2][]  
这里我们使用了Include.NON\_NULL, 如果TestTb 中属性为null 的就不给转换成Json, 从对象-->Json字符串  用的是 objectMapper.writeValue(). 从Json字符串-->对象使用的是objectMapper.readValue().  
回归上面我们项目中的代码, 只有未登录 添加商品时才会将此商品添加到Cookie中.

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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);

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

我们debug 可以看到:  
![format_png 3][]  
这里已经将对象购物车对象buyerCart转换成了Json格式.  
将商品添加到购物车, 不管是登录还是未登录, 都要先取出Cookie中的购物车, 然后将当前选择的商品追加到购物车中.  
然后登录的话  就把Cookie中的购物车清空, 并将购物车的内容添加到Redis中做持久化保存.  
如果未登录, 将选择的商品追加到Cookie中.  
  
将购物车追加到Redis中的代码:insertBuyerCartToRedis(这里面包含了判断添加的是否是同款)

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][]

判断用户是否登录: String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][]

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] sessionProviderService

==========================================2,购物车展示页面  
**最后 重定向到购物车展示页: return "redirect:/shopping/toCart"; 这里进入结算页有两种方式:**  
**1) 在商品详情页 点击加入购物车.**  
**2) 直接点击购物车按钮 进入购物车结算页.**  
  
下面来看下结算页的代码:

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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<BuyerItem> 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     }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

这里 就是 购物车详情展示页面, 这里需要注意, 如果是同一件商品连续添加, 是需要合并的.  
购物车详情展示页面就包括两大块, 1) 商品详情 2)总计(商品总额,运费)  
其中1)商品详情又包括 商品尺码,商品颜色, 商品购买数量, 是否有货.  
![format_png 4][]  
取出Redis中的购物车: buyerCart = cartService.selectBuyerCartFromRedis(username);

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][]

将购物车装满, 前面只是将skuId装进购物车, 这里还需要查出sku详情: List<BuyerItem> items = buyerCart.getItems();  
buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][]

接着就返回"cart.jsp", 这个就是购物车详情展示页面了.

================================================3, 去结算页面  
到了这里就说明用户必须要 登录, 而且购物车中必须要有商品.  
所以这里我么你需要利用springmvc的过滤功能, 用户点击结算的时候必须要先登录, 如果没有登录的话就提示用户需要登录.

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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<BuyerItem> 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     }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

取出 所指定的购物车, 因为我们结算之前在购物车详情页面会勾选 我们 需要购买的商品, 所以这里是根据所勾选的商品去结算的.  
BuyerCart buyerCart = cartService.selectBuyerCartFromRedisBySkuIds(skuIds, username);  
从购物车中取出指定商品:

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][]

1) 当我们购买的商品只要有一件是无货的状态, 那么刷新购物车详情页面, 回显无货的商品状态.   
2)当购物车中午商品时, 刷新当前页面.  
  
购物车就这么多东西, 可能讲解有不到或者错误的地方, 欢迎大家能够指出来.

[format_png]: /images/20220517/df51aa225b94482aaf8e253f3b4cbdf1.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20220517/57ae94f5fff24bc6a1318cf6dc948d3b.png
[format_png 1]: /images/20220517/d4cee8bc3d1f429fbbfc1f4851a55e1c.png
[format_png 2]: /images/20220517/04c95172a7854392a99de3f6d346d57f.png
[format_png 3]: /images/20220517/48a41840480944528b9cab59bc73b7b0.png
[aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm]: /images/20220517/2487bd51fcb14ffe8aebea8d5eef6117.png
[format_png 4]: /images/20220517/298e6d9d4cb14d8f95aec9f6bd341733.png