乐优商城—购物车

1.实现未登录状态的购物车

2.实现登陆状态下的购物车

购物车功能分析

需求

需求描述：

• 用户可以在登录状态下将商品添加到购物车
  • 放入数据库
  • mongodb(建议)
  • 放入redis（被迫采用）
• 用户可以在未登录状态下将商品添加到购物车
  • 放入localstorage
  • cookie
  • webSQL
• 用户可以使用购物车一起结算下单
• 用户可以查询自己的购物车
• 用户可以在购物车中修改购买商品的数量。
• 用户可以在购物车中删除商品。
• 在购物车中展示商品优惠信息
• 提示购物车商品价格变化

流程图

这幅图主要描述了两个功能：新增商品到购物车、查询购物车。

新增商品：

• 判断是否登录
  • 是：则添加商品到后台Redis中
  • 否：则添加商品到本地的Localstorage

无论哪种新增，完成后都需要查询购物车列表：

• 判断是否登录
  • 否：直接查询localstorage中数据并展示
  • 是：已登录，则需要先看本地是否有数据，
    • 有：需要提交到后台添加到redis，合并数据，而后查询
    • 否：直接去后台查询redis，而后返回

未登录购物车

web本地存储主要有两种方式：

• LocalStorage：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
• SessionStorage：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

LocalStorage的用法

语法非常简单：

localStorage.setItem("key","value"); // 存储数据
localStorage.getItem("key"); // 获取数据
localStorage.removeItem("key"); // 删除数据

注意：localStorage和SessionStorage都只能保存字符串。

不过，在我们的common.js中，已经对localStorage进行了简单的封装：

添加购物车

addCart(){
    ly.verifyUser().then(res=>{
        // 已登录发送信息到后台，保存到redis中

    }).catch(()=>{
        // 未登录保存在浏览器本地的localStorage中
        // 1、查询本地购物车
        let carts = ly.store.get("carts") || [];
        let cart = carts.find(c=>c.skuId===this.sku.id);
        // 2、判断是否存在
        if (cart) {
            // 3、存在更新数量
            cart.num += this.num;
        } else {
            // 4、不存在，新增
            cart = {
                skuId: this.sku.id,
                title: this.sku.title,
                price: this.sku.price,
                image: this.sku.images,
                num: this.num,
                ownSpec: this.ownSpec
            }
            carts.push(cart);
        }
        // 把carts写回localstorage
        ly.store.set("carts", carts);
        // 跳转
        window.location.href = "http://www.leyou.com/cart.html";
    });
}

查询购物车

页面加载时，就应该去查询购物车。

var cartVm = new Vue({
    el: "#cartApp",
    data: {
        ly,
        carts: [],// 购物车数据
    },
    created() {
        this.loadCarts();
    },
    methods: {
        loadCarts() {
            // 先判断登录状态
            ly.verifyUser().then(() => {
                    // 已登录

                }).catch(() => {
                    // 未登录
                    this.carts = ly.store.get("carts") || [];
                    this.selected = this.carts;
                })
           }
    }
    components: {
        shortcut: () => import("/js/pages/shortcut.js")
    }
})

渲染carts的数据到页面

修改数量

删除商品

选中商品

已登录购物车

添加登录校验

购物车系统只负责登录状态的购物车处理，因此需要添加登录校验，我们通过JWT鉴权即可实现。

• 引入JWT相关依赖

我们引入之前写的鉴权工具：leyou-auth-common

因为很多接口都需要进行登录，我们直接编写SpringMVC拦截器，进行统一登录校验。同时，我们还要把解析得到的用户信息保存起来，以便后续的接口可以使用。

后台购物车设计

购物车是一个读写频率很高的数据。因此我们这里选择读写效率比较高的Redis作为购物车存储。

• 首先不同用户应该有独立的购物车，因此购物车应该以用户的作为key来存储，Value是用户的所有购物车信息。这样看来基本的k-v结构就可以了。
• 但是，我们对购物车中的商品进行增、删、改操作，基本都需要根据商品id进行判断，为了方便后期处理，我们的购物车也应该是k-v结构，key是商品id，value才是这个商品的购物车信息。

我们的购物车结构是一个双层Map：Map<String,Map<String,String>>

• 第一层Map，Key是用户id
• 第二层Map，Key是购物车中商品id，值是购物车数据

添加商品到购物车

这里我们不访问数据库，而是直接操作Redis

• 先查询之前的购物车数据
• 判断要添加的商品是否存在
  • 存在：则直接修改数量后写回Redis
  • 不存在：新建一条数据，然后写入Redis

@Service
public class CartService {

    @Autowired
    private StringRedisTemplate redisTemplate;

    @Autowired
    private GoodsClient goodsClient;

    static final String KEY_PREFIX = "leyou:cart:uid:";

    static final Logger logger = LoggerFactory.getLogger(CartService.class);

    public void addCart(Cart cart) {
        // 获取登录用户
        UserInfo user = LoginInterceptor.getLoginUser();
        // Redis的key
        String key = KEY_PREFIX + user.getId();
        // 获取hash操作对象
        BoundHashOperations<String, Object, Object> hashOps = this.redisTemplate.boundHashOps(key);
        // 查询是否存在
        Long skuId = cart.getSkuId();
        Integer num = cart.getNum();
        Boolean boo = hashOps.hasKey(skuId.toString());
        if (boo) {
            // 存在，获取购物车数据
            String json = hashOps.get(skuId.toString()).toString();
            cart = JsonUtils.parse(json, Cart.class);
            // 修改购物车数量
            cart.setNum(cart.getNum() + num);
        } else {
            // 不存在，新增购物车数据
            cart.setUserId(user.getId());
            // 其它商品信息，需要查询商品服务
            Sku sku = this.goodsClient.querySkuById(skuId);
            cart.setImage(StringUtils.isBlank(sku.getImages()) ? "" : StringUtils.split(sku.getImages(), ",")[0]);
            cart.setPrice(sku.getPrice());
            cart.setTitle(sku.getTitle());
            cart.setOwnSpec(sku.getOwnSpec());
        }
        // 将购物车数据写入redis
        hashOps.put(cart.getSkuId().toString(), JsonUtils.serialize(cart));
    }
}

查询购物车

购物车页面：cart.html

修改商品数量

删除购物车商品

登录后购物车合并

当跳转到购物车页面，查询购物车列表前，需要判断用户登录状态，

• 如果登录：
  • 首先检查用户的LocalStorage中是否有购物车信息，
  • 如果有，则提交到后台保存，
  • 清空LocalStorage
• 如果未登录，直接查询即可

参考