Java框架搭建

第二十三篇：加入购物车功能的实现

2018-07-24  本文已影响118人  __y

我们首先来看看京东的购物车的实现，根据操作的我们可以发现两点：1.加入购物车是一个新工程，因此我们需要新增一个工程；2.购物车是不用登录就可以操作的了，而且加到购物车里面的商品可以一直保存着；我们在学cookie的时候应该说过一个应用就是电商，将购物车的内容保存到购物车中


image.png image.png

1.工程搭建

我们知道购物车是和商品挂钩的。我么前面已经实现了商品服务了，因此我们直接调用商品服务就好了；我们只需要建一个前台工程taotao-cart-web；
搭建的流程可以参考taotao-manager-web
需要修改里面的配置，具体可以从GitHub上下载下来后直接复制黏贴过去~
传送门：https://github.com/AslanYJ/shopping.git

image.png
然后导入静态资源；
工程搭建完后我们要实现以下功能：
1.添加到购物车
2.更新购物车中商品的数量
3.删除购物车中的商品
4.展示购物车

2.添加购物车

在不登陆的情况下也可以添加购物车。把购物车信息写入cookie。
优点：
1、不占用服务端存储空间
2、用户体验好。
3、代码实现简单。
缺点：
1、cookie中保存的容量有限。最大4k
2、把购物车信息保存在cookie中，更换设备购物车信息不能同步。
改造商品详情页面
先写一个js的脚本


image.png image.png 
@Controller
public class CartController {
    
    @Value("${TT_CART}")
    private String TT_CART;
    @Value("${CART_EXPIRE}")
    private Integer CART_EXPIRE;

    @Autowired
    private ItemService itemService;
    
    @RequestMapping("/cart/add/{itemId}")
    public String addCartItem(@PathVariable Long itemId, Integer num,
            HttpServletRequest request, HttpServletResponse response) {
        // 1、从cookie中查询商品列表。
        List<TbItem> cartList = getCartList(request);
        // 2、判断商品在商品列表中是否存在。
        boolean hasItem = false;
        for (TbItem tbItem : cartList) {
            //对象比较的是地址，应该是值的比较
            if (tbItem.getId() == itemId.longValue()) {
                // 3、如果存在，商品数量相加。
                tbItem.setNum(tbItem.getNum() + num);
                hasItem = true;
                break;
            }
        }
        if (!hasItem) {
            // 4、不存在，根据商品id查询商品信息。
            TbItem tbItem = itemService.getItemById(itemId);
            //取一张图片
            String image = tbItem.getImage();
            if (StringUtils.isNoneBlank(image)) {
                String[] images = image.split(",");
                tbItem.setImage(images[0]);
            }
            //设置购买商品数量
            tbItem.setNum(num);
            // 5、把商品添加到购车列表。
            cartList.add(tbItem);
        }
        // 6、把购车商品列表写入cookie。
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);
        return "cartSuccess";
    }
    
    /**
     * 从cookie中取购物车列表
     * <p>Title: getCartList</p>
     * <p>Description: </p>
     * @param request
     * @return
     */
    private List<TbItem> getCartList(HttpServletRequest request) {
        //取购物车列表
        String json = CookieUtils.getCookieValue(request, TT_CART, true);
        //判断json是否为null
        if (StringUtils.isNotBlank(json)) {
            //把json转换成商品列表返回
            List<TbItem> list = JsonUtils.jsonToList(json, TbItem.class);
            return list;
        }
        return new ArrayList<>();
    }
    
}

这里有技巧~
我们可以把用的比较多的代码抽取出来重构，比如从cookie中取list，我们不仅添加用到，删除，更新都会用到。

3.展示购物车商品列表

请求的url:/cart/cart
参数：无
返回值：逻辑视图
业务逻辑：
1、从cookie中取商品列表。
2、把商品列表传递给页面。

@RequestMapping("/cart/cart")
    public String showCartList(HttpServletRequest request, Model model) {
        //取购物车商品列表
        List<TbItem> cartList = getCartList(request);
        //传递给页面
        model.addAttribute("cartList", cartList);
        return "cart";
    }

4.修改购物车数量

请求的url：/cart/update/num/{itemId}/{num}
参数：long itemId、int num
业务逻辑：
1、接收两个参数
2、从cookie中取商品列表
3、遍历商品列表找到对应商品
4、更新商品数量
5、把商品列表写入cookie。
6、响应TaoTaoResult。Json数据。
返回值：
TaoTaoResult。Json数据

@RequestMapping("/cart/update/num/{itemId}/{num}")
    @ResponseBody
    public TaotaoResult updateNum(@PathVariable Long itemId, @PathVariable Integer num,
            HttpServletRequest request, HttpServletResponse response) {
        // 1、接收两个参数
        // 2、从cookie中取商品列表
        List<TbItem> cartList = getCartList(request);
        // 3、遍历商品列表找到对应商品
        for (TbItem tbItem : cartList) {
            if (tbItem.getId() == itemId.longValue()) {
                // 4、更新商品数量
                tbItem.setNum(num);
            }
        }
        // 5、把商品列表写入cookie。
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);
        // 6、响应TaoTaoResult。Json数据。
        return TaotaoResult.ok();
    }

5.删除购物车商品信息

image.png 
@RequestMapping("/cart/delete/{itemId}")
    public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request,
            HttpServletResponse response) {
        // 1、从url中取商品id
        // 2、从cookie中取购物车商品列表
        List<TbItem> cartList = getCartList(request);
        // 3、遍历列表找到对应的商品
        for (TbItem tbItem : cartList) {
            if (tbItem.getId() == itemId.longValue()) {
                // 4、删除商品。
                cartList.remove(tbItem);
                break;
            }
        }
        // 5、把商品列表写入cookie。
        CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);
        // 6、返回逻辑视图：在逻辑视图中做redirect跳转。
        return "redirect:/cart/cart.html";
    }

6.购物车总结

购物车总结：
我们当前实现的购物车是以Cookie的方式实现的，这样做的优点有以下两点：
1、实现简单
2、不需要占用服务端存储空间
缺点也很明显，主要有以下两点：
1、存储容量有限（Cookie中保存的数据量毕竟是比较有限的）
2、更换设备后，购物车信息不能同步。
那么针对上面的缺点，我们应该怎样解决呢？这里给大家提供一下思路：
1、要求用户登录。
2、把购物车商品列表保存到数据库中。推荐使用redis。
3、如果存到redis的话，key最好用用户的ID，value便是购物车中商品列表。在redis中存储有五种存储方式，我们比较适合使用hash方式，规定一个hash，然后key是商品ID，value是商品基本信息。这样做的好处是存储的内容不是很长，效率比较高。
4、在用户未登录的情况下写入cookie当中，当用户登录后，访问购物车列表时
a} 把cookie中的数据同步到redis。
b} 把cookie中的数据删除
c) 展示购物车列表时以redis为准。
d) 如果redis中有数据cookie中也有数据，需要做数据合并。相同的商品数量相加，不同商品添加一个新商品。
5、如果用户登录状态，展示购物车列表以redis为准。如果未登录，以cookie为准。

上一篇 下一篇

猜你喜欢

热点阅读