zoukankan      html  css  js  c++  java
  • [项目构建 十一]babasport 购物车的原理及实现.

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

    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中 (不用数据库)

    整体的思路图解:

    接下来就是代码实例来实现 购物车的功能了:

    1,将商品加入购物车中

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

    这里传入的参数是skuId(库存表的主键, 库存表保存的商品id,颜色,尺码,库存等信息), 购买数量amount.

    接着我们来看Controller是如何来处理的:

    //加入购物车
        @RequestMapping(value="/shopping/buyerCart")
        public <T> String buyerCart(Long skuId, Integer amount, HttpServletRequest request,
                HttpServletResponse response) throws JsonParseException, JsonMappingException, IOException{
            //将对象转换成json字符串/json字符串转成对象
            ObjectMapper om = new ObjectMapper();
            om.setSerializationInclusion(Include.NON_NULL);
            BuyerCart buyerCart = null;
            //1,获取Cookie中的购物车
            Cookie[] cookies = request.getCookies();
            if (null != cookies && cookies.length > 0) {
                for (Cookie cookie : cookies) {
                    //
                    if (Constants.BUYER_CART.equals(cookie.getName())) {
                        //购物车 对象 与json字符串互转
                        buyerCart = om.readValue(cookie.getValue(), BuyerCart.class);
                        break;
                    }
                }
            }
            
            //2,Cookie中没有购物车, 创建购物车对象
            if (null == buyerCart) {
                buyerCart = new BuyerCart();
            }
            
            //3, 将当前款商品追加到购物车
            if (null != skuId && null != amount) {
                Sku sku = new Sku();
                sku.setId(skuId);
                BuyerItem buyerItem = new BuyerItem();
                buyerItem.setSku(sku);
                //设置数量
                buyerItem.setAmount(amount);
                //添加购物项到购物车
                buyerCart.addItem(buyerItem);
            }
            
            //排序  倒序
            List<BuyerItem> items = buyerCart.getItems();
            Collections.sort(items, new Comparator<BuyerItem>() {
    
                @Override
                public int compare(BuyerItem o1, BuyerItem o2) {
                    return -1;
                }
                
            });
            
            //前三点 登录和非登录做的是一样的操作, 在第四点需要判断
            String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
            if (null != username) {
                //登录了
                //4, 将购物车追加到Redis中
                cartService.insertBuyerCartToRedis(buyerCart, username);
                //5, 清空Cookie 设置存活时间为0, 立马销毁
                Cookie cookie = new Cookie(Constants.BUYER_CART, null);
                cookie.setPath("/");
                cookie.setMaxAge(-0);
                response.addCookie(cookie);
            }else {
                //未登录
                //4, 保存购物车到Cookie中
                //将对象转换成json格式
                Writer w = new StringWriter();
                om.writeValue(w, buyerCart);
                Cookie cookie = new Cookie(Constants.BUYER_CART, w.toString());
                //设置path是可以共享cookie
                cookie.setPath("/");
                //设置Cookie过期时间: -1 表示关闭浏览器失效  0: 立即失效  >0: 单位是秒, 多少秒后失效
                cookie.setMaxAge(24*60*60);
                //5,Cookie写会浏览器
                response.addCookie(cookie);
            }
            
            //6, 重定向
            return "redirect:/shopping/toCart";
        }

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

    public class TestJson {
    
        @Test
        public void testAdd() throws Exception {
            TestTb testTb = new TestTb();
            testTb.setName("范冰冰");
            ObjectMapper om = new ObjectMapper();
            om.setSerializationInclusion(Include.NON_NULL);
            //将对象转换成json字符串
            Writer wr = new StringWriter();
            om.writeValue(wr, testTb);
            System.out.println(wr.toString());
            
            //转回对象
            TestTb r = om.readValue(wr.toString(), TestTb.class);
            System.out.println(r.toString());
        }
        
    }

    执行结果: 

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

    //未登录
                //4, 保存购物车到Cookie中
                //将对象转换成json格式
                Writer w = new StringWriter();
                om.writeValue(w, buyerCart);
                Cookie cookie = new Cookie(Constants.BUYER_CART, w.toString());
                //设置path是可以共享cookie
                cookie.setPath("/");
                //设置Cookie过期时间: -1 表示关闭浏览器失效  0: 立即失效  >0: 单位是秒, 多少秒后失效
                cookie.setMaxAge(24*60*60);
                //5,Cookie写会浏览器
                response.addCookie(cookie);

    我们debug 可以看到:

    这里已经将对象购物车对象buyerCart转换成了Json格式.
    将商品添加到购物车, 不管是登录还是未登录, 都要先取出Cookie中的购物车, 然后将当前选择的商品追加到购物车中.
    然后登录的话  就把Cookie中的购物车清空, 并将购物车的内容添加到Redis中做持久化保存.
    如果未登录, 将选择的商品追加到Cookie中.

    将购物车追加到Redis中的代码:insertBuyerCartToRedis(这里面包含了判断添加的是否是同款)

    //保存购物车到Redis中
        public void insertBuyerCartToRedis(BuyerCart buyerCart, String username){
            List<BuyerItem> items = buyerCart.getItems();
            if (items.size() > 0) {
                //redis中保存的是skuId 为key , amount 为value的Map集合
                Map<String, String> hash = new HashMap<String, String>();
                for (BuyerItem item : items) {
                    //判断是否有同款
                    if (jedis.hexists("buyerCart:"+username, String.valueOf(item.getSku().getId()))) {
                        jedis.hincrBy("buyerCart:"+username, String.valueOf(item.getSku().getId()), item.getAmount());
                    }else {
                        hash.put(String.valueOf(item.getSku().getId()), String.valueOf(item.getAmount()));
                    }
                }
                if (hash.size() > 0) {
                    jedis.hmset("buyerCart:"+username, hash);
                }
            }
            
        }

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

    public class RequestUtils {
    
        //获取CSessionID
        public static String getCSessionId(HttpServletRequest request, HttpServletResponse response){
            //1, 从Request中取Cookie
            Cookie[] cookies = request.getCookies();
            //2, 从Cookie数据中遍历查找, 并取CSessionID
            if (null != cookies && cookies.length > 0) {
                for (Cookie cookie : cookies) {
                    if ("CSESSIONID".equals(cookie.getName())) {
                        //有, 直接返回
                        return cookie.getValue();
                    }
                }
            }
            //没有, 创建一个CSessionId, 并且放到Cookie再返回浏览器.返回新的CSessionID
            String csessionid = UUID.randomUUID().toString().replaceAll("-", "");
            //并且放到Cookie中
            Cookie cookie = new Cookie("CSESSIONID", csessionid);
            //cookie  每次都带来, 设置路径
            cookie.setPath("/");
            //0:关闭浏览器  销毁cookie. 0:立即消失.  >0 存活时间,秒
            cookie.setMaxAge(-1);
            
            return csessionid;
        }
    }
    //获取
        public String getAttributterForUsername(String jessionId){
            String value = jedis.get(jessionId + ":USER_NAME");
            if(null != value){
                //计算session过期时间是 用户最后一次请求开始计时.
                jedis.expire(jessionId + ":USER_NAME", 60*exp);
                return value;
            }
            return null;
        }
    
    sessionProviderService

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

    下面来看下结算页的代码:

    @Autowired
        private CartService cartService;
        //去购物车结算, 这里有两个地方可以直达: 1,在商品详情页 中点击加入购物车按钮  2, 直接点击购物车按钮
        @RequestMapping(value="/shopping/toCart")
        public String toCart(Model model, HttpServletRequest request,
                HttpServletResponse response) throws JsonParseException, JsonMappingException, IOException{ 
            //将对象转换成json字符串/json字符串转成对象
            ObjectMapper om = new ObjectMapper();
            om.setSerializationInclusion(Include.NON_NULL);
            BuyerCart buyerCart = null;
            //1,获取Cookie中的购物车
            Cookie[] cookies = request.getCookies();
            if (null != cookies && cookies.length > 0) {
                for (Cookie cookie : cookies) {
                    //
                    if (Constants.BUYER_CART.equals(cookie.getName())) {
                        //购物车 对象 与json字符串互转
                        buyerCart = om.readValue(cookie.getValue(), BuyerCart.class);
                        break;
                    }
                }
            }
            
            //判断是否登录
            String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
            if (null != username) {
                //登录了
                //2, 购物车 有东西, 则将购物车的东西保存到Redis中
                if (null == buyerCart) {
                    cartService.insertBuyerCartToRedis(buyerCart, username);
                    //清空Cookie 设置存活时间为0, 立马销毁
                    Cookie cookie = new Cookie(Constants.BUYER_CART, null);
                    cookie.setPath("/");
                    cookie.setMaxAge(-0);
                    response.addCookie(cookie);
                }
                //3, 取出Redis中的购物车
                buyerCart = cartService.selectBuyerCartFromRedis(username);
            }
            
            
            //4, 没有 则创建购物车
            if (null == buyerCart) {
                buyerCart = new BuyerCart();
            }
            
            //5, 将购物车装满, 前面只是将skuId装进购物车, 这里还需要查出sku详情
            List<BuyerItem> items = buyerCart.getItems();
            if(items.size() > 0){
                //只有购物车中有购物项, 才可以将sku相关信息加入到购物项中
                for (BuyerItem buyerItem : items) {
                    buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));
                }
            }
            
            //5,上面已经将购物车装满了, 这里直接回显页面
            model.addAttribute("buyerCart", buyerCart);
            
            //跳转购物页面
            return "cart";
        }

    这里 就是 购物车详情展示页面, 这里需要注意, 如果是同一件商品连续添加, 是需要合并的.
    购物车详情展示页面就包括两大块, 1) 商品详情 2)总结
    其中1)商品详情又包括 商品尺码,商品颜色, 商品购买数量, 是否有货.

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

    //取出Redis中购物车
        public BuyerCart selectBuyerCartFromRedis(String username){
            BuyerCart buyerCart = new BuyerCart();
            //获取所有商品, redis中保存的是skuId 为key , amount 为value的Map集合
            Map<String, String> hgetAll = jedis.hgetAll("buyerCart:"+username);
            Set<Entry<String, String>> entrySet = hgetAll.entrySet();
            for (Entry<String, String> entry : entrySet) {
                //entry.getKey(): skuId
                Sku sku = new Sku();
                sku.setId(Long.parseLong(entry.getKey()));
                BuyerItem buyerItem = new BuyerItem();
                buyerItem.setSku(sku);
                //entry.getValue(): amount
                buyerItem.setAmount(Integer.parseInt(entry.getValue()));
                //添加到购物车中
                buyerCart.addItem(buyerItem);
            }
            
            return buyerCart;
        }

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

    //向购物车中的购物项 添加相应的数据, 通过skuId 查询sku对象, 颜色对象, 商品对象
        public Sku selectSkuById(Long skuId){
            Sku sku = skuDao.selectByPrimaryKey(skuId);
            //颜色
            sku.setColor(colorDao.selectByPrimaryKey(sku.getColorId()));
            //添加商品信息
            sku.setProduct(productDao.selectByPrimaryKey(sku.getProductId()));
            return sku;
        }

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

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

    //去结算
        @RequestMapping(value="/buyer/trueBuy")
        public String trueBuy(String[] skuIds, Model model, HttpServletRequest request, HttpServletResponse response){
            //1, 购物车必须有商品, 
            //取出用户名  再取出购物车
            String username = sessionProviderService.getAttributterForUsername(RequestUtils.getCSessionId(request, response));
            //取出所有购物车
            BuyerCart buyerCart = cartService.selectBuyerCartFromRedisBySkuIds(skuIds, username);
            List<BuyerItem> items = buyerCart.getItems();
            if (items.size() > 0) {
                //购物车中有商品
                //判断所勾选的商品是否都有货, 如果有一件无货, 那么就刷新页面.
                Boolean flag = true;
                //2, 购物车中商品必须有库存 且购买大于库存数量时视为无货. 提示: 购物车原页面不动. 有货改为无货, 加红提醒.
                for (BuyerItem buyerItem : items) {
                    //装满购物车的购物项, 当前购物项只有skuId这一个东西, 我们还需要购物项的数量去判断是否有货
                    buyerItem.setSku(cartService.selectSkuById(buyerItem.getSku().getId()));
                    //校验库存
                    if (buyerItem.getAmount() > buyerItem.getSku().getStock()) {
                        //无货
                        buyerItem.setIsHave(false);
                        flag = false;
                    }
                    if (!flag) {
                        //无货, 原页面不动, 有货改成无货, 刷新页面.
                        model.addAttribute("buyerCart", buyerCart);
                        return "cart";
                    }
                }
            }else {
                //购物车没有商品
                //没有商品: 1>原购物车页面刷新(购物车页面提示没有商品)
                return "redirect:/shopping/toCart";
            }
            
            
            //3, 正常进入下一个页面
            return "order";
        }

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

    //从购物车中取出指定商品
        public BuyerCart selectBuyerCartFromRedisBySkuIds(String[] skuIds, String username){
            BuyerCart buyerCart = new BuyerCart();
            //获取所有商品, redis中保存的是skuId 为key , amount 为value的Map集合
            Map<String, String> hgetAll = jedis.hgetAll("buyerCart:"+username);
            if (null != hgetAll && hgetAll.size() > 0) {
                Set<Entry<String, String>> entrySet = hgetAll.entrySet();
                for (Entry<String, String> entry : entrySet) {
                    for (String skuId : skuIds) {
                        if (skuId.equals(entry.getKey())) {
                            //entry.getKey(): skuId
                            Sku sku = new Sku();
                            sku.setId(Long.parseLong(entry.getKey()));
                            BuyerItem buyerItem = new BuyerItem();
                            buyerItem.setSku(sku);
                            //entry.getValue(): amount
                            buyerItem.setAmount(Integer.parseInt(entry.getValue()));
                            //添加到购物车中
                            buyerCart.addItem(buyerItem);
                        }
                    }
                }
            }
            
            return buyerCart;
        }

    1) 当我们购买的商品只要有一件是无货的状态, 那么刷新购物车详情页面, 回显无货的商品状态. 
    2)当购物车中午商品时, 刷新当前页面.

    购物车就这么多东西, 可能讲解有不到或者错误的地方, 欢迎大家能够指出来.

    本文来自:http://www.cnblogs.com/wang-meng/p/5854773.html

  • 相关阅读:
    mysql详解9:触发器和事件
    mysql详解7:视图
    mysql详解6:字符串函数 日期函数 IF CASE
    mysql详解5:复杂查询
    [转]Kubernetes网络组件之Calico策略实践(BGP、RR、IPIP)
    Springcloud 学习笔记05-Mybatis-Plus
    Git学习笔记04--tortoisegit的clone、pull、commit操作、分支的新增、合并、删除
    Git学习笔记03--Git客户端(TortoiseGit)安装与基本使用
    Java 项目bug记录过程--Failed to configure a DataSource
    TiDB学习笔记02-场景案例综述
  • 原文地址:https://www.cnblogs.com/bubugao/p/mvc0909.html
Copyright © 2011-2022 走看看