Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）二十一（购物车）

冷不防 2022-09-10 05:29 184阅读 0赞

Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十九（购物车）

# 1.搭建购物车服务 #

## 业务分析 ##

在需求描述中，不管用户是否登录，都需要实现加入购物车功能，  
那么已登录和未登录下，购物车数据应该存放在哪里呢?

*  未登录购物车

用户如果未登录,将数据保存在服务端存在一些问题:

无法确定用户身份,需要借助与客户端存储识别身份  
服务端数据存储压力增加，而且可能是无效数据

那么我们应该用把数据保存在客户端，这样每个用户保存自己的数据，  
就不存在身份识别的问题了，而且也解决了服务端数据存储压力问题。

不过大家可能会担心Redis存储空间问题，我们可以效仿淘宝，限制购物车最多只能添加99件商品，或者更少。

# 2.购物车功能分析 #

## 2.1.需求 ##

需求描述：

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

## 2.2.流程图： ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16]  
这幅图主要描述了两个功能：新增商品到购物车、查询购物车。

新增商品：

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

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

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

# 3.未登录购物车 #

## 3.1.准备 ##

### 3.1.1购物车的数据结构 ###

首先分析一下未登录购物车的数据结构。

我们看下页面展示需要什么数据：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
因此每一个购物车信息，都是一个对象，包含：

{
        
        skuId:2131241,
        title:"小米6",
        image:"",
        price:190000,
        num:1,
        ownSpec:"{"机身颜色":"陶瓷黑尊享版","内存":"6GB","机身存储":"128GB"}"
    }

另外，购物车中不止一条数据，因此最终会是对象的数组。即：

[
        {
        ...},{
        ...},{
        ...}
    ]

### 3.1.2.web本地存储 ###

知道了数据结构，下一个问题，就是如何保存购物车数据。前面我们分析过，可以使用Localstorage来实现。Localstorage是web本地存储的一种，那么，什么是web本地存储呢？

#### 什么是web本地存储？ ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
web本地存储主要有两种方式：

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

#### LocalStorage的用法 ####

语法非常简单：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16]

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 1]

ss = JSON.stringify({
        age:12,sex:"male"})
    '{"age":12,"sex":"male"}'
    localStorage.setItem("name",ss)
    undefined
    localStorage.getItem("name")
    '{"age":12,"sex":"male"}'

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_18_color_FFFFFF_t_70_g_se_x_16]  
示例：![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][de0deb32d76d47028c851d536e2d6d8a.png]

ly.store.set("aa",{
        age:14,sex:"male"})
    undefined
    ly.store.get("aa")
    {
        age: 14, sex: 'male'}

### 3.1.3.获取num ###

添加购物车需要知道购物的数量，所以我们需要获取数量大小。我们在Vue中定义num，保存数量：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 2]  
然后将num与页面的input框绑定，同时给`+`和`-`的按钮绑定事件：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
编写事件：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16 1]

## 3.2.添加购物车 ##

### 3.2.1.点击事件 ###

我们看下商品详情页：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
现在点击加入购物车会跳转到购物车成功页面。

不过我们不这么做，我们绑定点击事件，然后实现添加购物车功能。

![在这里插入图片描述][2e4e8b1df26749a29d1fdc6ca48a80d1.png]  
addCart方法中判断用户的登录状态：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16]

### 3.2.2.获取数量，添加购物车 ###

addCart(){
        
        // 判断登录状态
        ly.http.get("/auth/verify")
            .then(resp => {
        
    
        })
            .catch(() => {
        
            // 未登录，添加到localstorage
            // 1、查询本地购物车
            const 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,
                    image: this.images[0],
                    price: this.sku.price,
                    num: this.num,
                    ownSpec: JSON.stringify(this.sku.ownSpec)
                };
                carts.push(cart);
            }
            // 把carts写回localstorage
            ly.store.set("carts", carts);
    
            // 跳转
            window.location.href = "http://www.leyou.com/cart.html";
        });
    }

结果：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
添加完成后，页面会跳转到购物车结算页面：cart.html

## 3.3.查询购物车 ##

### 3.3.1.校验用户登录 ###

因为会多次校验用户登录状态，因此我们封装一个校验的方法：

在common.js中：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16 1]

### 3.3.2.查询购物车 ###

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

刷新页面，查看控制台Vue实例：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_16_color_FFFFFF_t_70_g_se_x_16]

### 3.5.2.渲染到页面 ###

接下来，我们在页面中展示carts的数据：

页面位置：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
修改后：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
要注意，价格的展示需要进行格式化，这里使用的是我们在common.js中定义的formatPrice方法：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_14_color_FFFFFF_t_70_g_se_x_16]  
效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 8]

## 3.6.修改数量 ##

我们给页面的 `+` 和 `-`绑定点击事件，修改num 的值：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
两个事件：

increment(c) {
        
        c.num++;
        ly.verifyUser()
            .then(() => {
        
                // TODO 已登录，向后台发起请求
            })
            .catch(() => {
        
                // 未登录，直接操作本地数据
                ly.store.set("carts", this.carts);
        })
    },
    decrement(c) {
        
        if (c.num <= 1) {
        
            return;
        }
        c.num--;
        this.verifyUser()
            .then(() => {
        
            // TODO 已登录，向后台发起请求
            })
            .catch(() => {
        
                // 未登录，直接操作本地数据
                ly.store.set("carts", this.carts);
            })
    },

## 3.7.删除商品 ##

给删除按钮绑定事件：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16]  
点击事件中删除商品：

deleteCart(i) {
        
        ly.verifyUser()
            .then(() => {
        
                // 已登录
            })
            .catch(() => {
        
                // 未登录
                this.carts.splice(i, 1);
                ly.store.set("carts", this.carts);
            })
    }

## 3.8.选中商品 ##

在页面中，每个购物车商品左侧，都有一个复选框，用户可以选择部分商品进行下单，而不一定是全部：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16 2]  
我们定义一个变量，记录所有被选中的商品：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_12_color_FFFFFF_t_70_g_se_x_16]

### 3.8.1.选中一个 ###

我们给商品前面的复选框与selected绑定，并且指定其值为当前购物车商品：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 10]

### 3.8.2.初始化全选 ###

我们在加载完成购物车查询后，初始化全选：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 1]

### 3.8.4.总价格 ###

然后编写一个计算属性，计算出选中商品总价格：

computed: {
        
        totalPrice() {
        
            return this.selected.map(c => c.num * c.price).reduce((p1, p2) => p1 + p2, 0);
        }
    }

在页面中展示总价格：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
效果：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 12]

# 4.已登录购物车 #

## 4.1.购物车的微服务 ##

### 4.1.1.创建购物车的微服务 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 15]

### 4.1.2.pom依赖 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 16]

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <parent>
            <artifactId>leyou</artifactId>
            <groupId>com.leyou.parent</groupId>
            <version>1.0.0-SNAPSHOT</version>
        </parent>
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.leyou.service</groupId>
        <artifactId>ly-cart</artifactId>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-starter-openfeign</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-redis</artifactId>
            </dependency>
        </dependencies>
    
    
    </project>

### 4.1.3.配置文件 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_19_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 17]

server:
      port: 8088
    spring:
      application:
        name: cart-service
      redis:
        host: 192.168.206.66
    eureka:
      client:
        service-url:
          defaultZone: http://127.0.0.1:10086/eureka
        registry-fetch-interval-seconds: 5
      instance:
        prefer-ip-address: true
        ip-address: 127.0.0.1
        instance-id: ${
        eureka.instance.ip-address}.${
        server.port}
        lease-renewal-interval-in-seconds: 3
        lease-expiration-duration-in-seconds: 10

### 4.1.4.启动类 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 18]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 19]

@SpringBootApplication
    @EnableDiscoveryClient
    @EnableFeignClients
    public class LyCartApplication {
        
    
        public static void main(String[] args) {
        
            SpringApplication.run(LyCartApplication.class, args);
        }
    }

### 4.1.5.添加到网关的路由当中 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 20]

# 5.已登录购物车 #

接下来，我们完成已登录购物车。

在刚才的未登录购物车编写时，我们已经预留好了编写代码的位置，逻辑也基本一致。

## 5.1.添加登录校验 ##

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

### 5.1.1.引入JWT相关依赖 ###

我们引入之前写的鉴权工具：`ly-auth-common`  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 21]

<dependency>
                <groupId>com.leyou.auth</groupId>
                <artifactId>ly-auth-common</artifactId>
                <version>1.0.0-SNAPSHOT</version>
            </dependency>

### 5.1.2.配置公钥 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 22]

ly:
      jwt:
        pubKeyPath: C:\\Users\\ZHENG\\Desktop\\leyou_msgrs\\rsa\\rsa.pub # 公钥地址
        cookieName: LY_TOKEN # cookie的名称

### 5.1.3.加载公钥 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 23]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 24]

package com.leyou.cart.config;
    import com.leyou.auth.utils.RsaUtils;
    import lombok.Data;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import javax.annotation.PostConstruct;
    import java.security.PublicKey;
    
    @Data
    @ConfigurationProperties(prefix = "ly.jwt")
    @Slf4j
    public class JwtProperties {
        
    
        private String pubKeyPath;// 公钥
    
        private PublicKey publicKey; // 公钥
    
        private String cookieName;
        @PostConstruct
        public void init(){
        
            try {
        
                // 获取公钥和私钥
                this.publicKey = RsaUtils.getPublicKey(pubKeyPath);
            } catch (Exception e) {
        
                log.error("初始化公钥失败！", e);
                throw new RuntimeException();
            }
        }
    }

### 5.1.4.编写过滤器 ###

引入依赖:  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 25]

<dependency>
          <groupId>com.leyou.common</groupId>
          <artifactId>ly-common</artifactId>
          <version>1.0.0-SNAPSHOT</version>
    </dependency>

代码：

因为很多接口都需要进行登录，我们直接编写SpringMVC拦截器，进行统一登录校验。同时，我们还要把解析得到的用户信息保存起来，以便后续的接口可以使用。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 26]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 27]

package com.leyou.interceptor;
    
    import com.leyou.auth.entity.UserInfo;
    import com.leyou.auth.utils.JwtUtils;
    import com.leyou.cart.config.JwtProperties;
    import com.leyou.common.utils.CookieUtils;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.context.properties.EnableConfigurationProperties;
    import org.springframework.web.servlet.HandlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    @Slf4j
    public class UserInterceptor implements HandlerInterceptor {
        
    
        private JwtProperties prop;
    
        private static final ThreadLocal<UserInfo> tl = new ThreadLocal<>();
    
        public UserInterceptor(JwtProperties prop) {
        
            this.prop  = prop;
        }
        @Override
        public boolean preHandle(HttpServletRequest request,
                                 HttpServletResponse response,
                                 Object handler) throws Exception {
        
            //获取Cookie
            String token = CookieUtils.getCookieValue(request, prop.getCookieName());
            try {
        
                //解析token
                UserInfo user = JwtUtils.getUserInfo(prop.getPublicKey(), token);
                //传递User
                tl.set(user);
                //放行
                return true;
            } catch (Exception e) {
        
                log.error("[购物车服务]解析用户身份失败", e);
                return false;
            }
        }
    
        @Override
        public void afterCompletion(HttpServletRequest request,
                                    HttpServletResponse response,
                                    Object handler, Exception ex)
                throws Exception {
        
            tl.remove();
        }
    
        public static UserInfo getLoginUser() {
        
            return tl.get();
        }
    
    }

注意：

*  这里我们使用了`ThreadLocal`来存储查询到的用户信息，线程内共享，因此请求到达`Controller`后可以共享User
 *  并且对外提供了静态的方法：`getLoginUser()`来获取User信息

### 5.1.5.配置过滤器 ###

配置SpringMVC，使过滤器生效：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 28]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 29]

package com.leyou.cart.config;
    
    import com.leyou.interceptor.UserInterceptor;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.context.properties.EnableConfigurationProperties;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    @EnableConfigurationProperties(JwtProperties.class)
    public class MvcConfig implements WebMvcConfigurer {
        
    
        @Autowired
        private JwtProperties prop;
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
        
            registry.addInterceptor(new UserInterceptor(prop)).addPathPatterns("/**");
        }
    
    }

## 5.2.后台购物车设计 ##

### 数据结构设计 ###

当用户登录时，我们需要把购物车数据保存到后台，可以选择保存在数据库。但是购物车是一个读写频率很高的数据。因此我们这里选择读写效率比较高的Redis作为购物车存储。

Redis有5种不同数据结构，这里选择哪一种比较合适呢？

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

综上所述，我们的购物车结构是一个双层Map：`Map<String,Map<String,String>>`

*  第一层Map，Key是用户id
 *  第二层Map，Key是购物车中商品id，值是购物车数据
 *  `Map<string,Map<String,String>>`

### 实体类 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 30]

@Data
    public class Cart {
        
        private Long userId;// 用户id
        private Long skuId;// 商品id
        private String title;// 标题
        private String image;// 图片
        private Long price;// 加入购物车时的价格
        private Integer num;// 购买数量
        private String ownSpec;// 商品规格参数
    
    }

## 4.3.添加商品到购物车 ##

### 4.3.1.页面发起请求： ###

已登录情况下，向后台添加购物车：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 31]  
这里发起的是Json请求。那么我们后台也要以json接收。

### 4.3.2.后台添加购物车 ###

#### Service ####

这里我们不访问数据库，而是直接操作Redis。基本思路：

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

代码：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 32]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 33]

#### controller ####

先分析一下：

*  请求方式：新增，肯定是Post
 *  请求路径：/cart ，这个其实是Zuul路由的路径，我们可以不管
 *  请求参数：Json对象，包含skuId和num属性
 *  返回结果：无  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 34]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 35]

package com.leyou.cart.web;
    
    import com.leyou.cart.pojo.Cart;
    import com.leyou.cart.service.CartService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.ResponseEntity;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class CartController {
        
    
        @Autowired
        private CartService cartService;
    
        /*
        新增购物车
         */
       @PostMapping("cart")
        public ResponseEntity<Void> addCart(@RequestBody Cart cart){
        
            cartService.addCart(cart);
            return ResponseEntity.status(HttpStatus.CREATED).build();
        }
    
    }

#### 完善CartService ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 36]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 37]

package com.leyou.cart.service;
    
    import com.leyou.auth.entity.UserInfo;
    import com.leyou.cart.pojo.Cart;
    import com.leyou.common.utils.JsonUtils;
    import com.leyou.interceptor.UserInterceptor;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.redis.core.BoundHashOperations;
    import org.springframework.data.redis.core.StringRedisTemplate;
    import org.springframework.stereotype.Service;
    
    @Service
    public class CartService {
        
    
        @Autowired
        private StringRedisTemplate redisTemplate;
    
        private static final String KEY_PREFIX = "cart:uid:";
    
        public void addCart(Cart cart) {
        
    
            //获取登录的用户
            UserInfo user = UserInterceptor.getLoginUser();
    
            //key
            String key = KEY_PREFIX + user.getId();
            //hashKey
            String hashKey = cart.getSkuId().toString();
    
            //记录num
            Integer num = cart.getNum();
    
            BoundHashOperations<String, Object, Object> operation = redisTemplate.boundHashOps(key);
            //判断当前购物车商品是否存在
            if(operation.hasKey(hashKey)){
        
                //存在，修改数量
                String json = operation.get(hashKey).toString();
                cart = JsonUtils.toBean(json, Cart.class);
                cart.setNum(cart.getNum() + num);
            }
            //写回redis
            operation.put(hashKey,JsonUtils.toString(cart));
    
        }
    }

### 4.3.3.运行测试 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 38]  
在虚拟机的redis当中查看

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_18_color_FFFFFF_t_70_g_se_x_16 1]

## 5.4.查询购物车 ##

### 5.4.1.页面发起请求 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 39]

### 5.4.2.后台实现 ###

> Controller

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 40]

/**
     * 查询购物车列表
     *
     * @return
     */
     @GetMapping
        public ResponseEntity<List<Cart>> queryCartList(){
        
            return ResponseEntity.ok(cartService.queryCartList());
        }

> Service

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 41]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 42]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 43]

public List<Cart> queryCartList() {
        
            //获取登录的用户
            UserInfo user = UserInterceptor.getLoginUser();
    
            //key
            String key = KEY_PREFIX + user.getId();
    
            if (!redisTemplate.hasKey(key)) {
        
                //可以不存在返回404
                throw new LyException(ExceptionEnum.CART_NOT_FOUND);
            }
            //获取登录用户的所有购物车数据
            BoundHashOperations<String, Object, Object> operation = redisTemplate.boundHashOps(key);
    
            List<Cart> collect = operation.values()
                    .stream()
                    .map(o -> JsonUtils.toBean(o.toString(), Cart.class))
                    .collect(Collectors.toList());
    
            return collect;
    
        }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16 2]  
显示成功  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 44]

## 5.5.修改商品数量 ##

### 5.5.1.页面发起请求 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 45]

### 5.5.2.后台实现 ###

> Controller

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 46]

@PutMapping
        public ResponseEntity<Void> updateCartNum(@RequestParam("id") Long skuId,@RequestParam("num") Integer num){
        
    
            cartService.updateNum(skuId,num);
    
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
    
        }

> Service

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 47]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 48]

public void updateNum(Long skuId, Integer num) {
        
    
            //获取登录的用户
            UserInfo user = UserInterceptor.getLoginUser();
            //key
            String key = KEY_PREFIX + user.getId();
            //hashKey
            String hashKey = skuId.toString();
    
            //获取操作
            BoundHashOperations<String, Object, Object> operations = redisTemplate.boundHashOps(key);
    
            //判断是否存在
            if (operations.hasKey(skuId.toString())) {
        
                throw new LyException(ExceptionEnum.CART_NOT_FOUND);
            }
            //查询购物车JsonUtils.toBean序列化将JSON序列化为Java对象
            Cart cart = JsonUtils.toBean(operations.get(skuId.toString()).toString(), Cart.class);
            cart.setNum(num);
    
            //写会Redis
            operations.put(hashKey, JsonUtils.toString(cart));
        }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_14_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 49]

## 5.6.删除购物车商品 ##

### 5.6.1.页面发起请求 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 50]

deleteCart(i){
        
                    ly.verifyUser().then(() =>{
        
                        //已经登录，向后台发起请求
                        ly.http.delete("/cart/"+this.carts[i].skuId).then(() => {
        
                            this.carts.splice(i,1);
                        });
                        //console.log(this.carts[i].skuId)
                    }).catch(() => {
        
                        //未登录，直接操作本地数据库
                        this.carts.splice(i,1);
                        ly.store.set("carts",this.carts);
                    })
                },

注意：后台成功响应后，要把页面的购物车中数据也删除

### 5.6.2.后台实现 ###

> Controller

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 51]

@DeleteMapping("{skuId}")
        public ResponseEntity<Void> deleteCart(@PathVariable("skuId") Long skuId){
        
            cartService.deleteCart(skuId);
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        }

> Service

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 52]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 53]

public void deleteCart(Long skuId) {
        
    
            //获取登录的用户
            UserInfo user = UserInterceptor.getLoginUser();
            //key
            String key = KEY_PREFIX + user.getId();
            //删除
            redisTemplate.opsForHash().delete(key,skuId.toString());
    
        }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_16_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 54]  
删除成功  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 55]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/bba529489b1d48d59a038bc7f2129916.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/eff129f2ea204c76911cfaa185d32721.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/50125b13157c4a86b254ed3a03de545b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/dd44d176107a40148b55961f1ec98ec7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/69386a0fe958452c9be7412132df532d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a4685cc6022f4b5ebdc4cb0928e65b92.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a38d7c3359f34a01bf6a9bab0bd346d5.png
[de0deb32d76d47028c851d536e2d6d8a.png]: /images/20220829/4bfd3e450e454bb5807fa93d6423b3c1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/5a43d69129a94a11ada8a7fce2ca7f77.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/233e3408b60a4fe2b2a0751cb92e5ae4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/f2986c80edc54103943cb31b98d555d9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/21d419e83dec495f984e0bc410ef7dce.png
[2e4e8b1df26749a29d1fdc6ca48a80d1.png]: /images/20220829/970fc51b853e464a8fc0b070222c9401.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/751320ac97f0485a94b8cc938bd94d98.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/bfea8f553cfb4127b5795caa6f221082.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/742a9cc5d0da45aab51eb8279598f5dc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/7bd28e3364104323a9febaee8452c079.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/cfe80808e745484bbac1315c22432a37.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/017fcedfecde4c178b04cdc998a04eb4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/5492a3596557421fb3c940fbc6216d6f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/3c0174652f1c4d88bc2a0652c766830d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/ce59572d1ac247ccbe14e66e8d6133b1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/c921e012988647279c5e514ef7540ba7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_15_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/56a7f06e5bbc43c68878d2a2b742457b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3cc2c8c79bee4226984f07609987e391.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/2cc68ddbc4fa4a59b753c0505a12b8ea.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/e19727a883244d88a5b0ab963a511b03.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220829/fab9649f64294f9bbd7db0827895c780.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220829/86217bc17c2947379090e486fbbef4e0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220829/ba51b6eca5f546cbbe12d4a5b84ecd46.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220829/8d473f1021384acd874227bab220351d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220829/298fada5fa7c4714b9a74b204b030e70.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220829/ceea4a7899a54fb49e7305bf26225e5d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/5d322be00c5f4b5fa4084c2232157bd5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220829/ebf5f42712524fa49dc014a9074ae5a4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220829/eadcbf7b2e1a4cd39ac8552b95b933cd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 19]: /images/20220829/a679069138254007aa6e046fab3b001f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 20]: /images/20220829/774f5c1108034ffdb8abf2cd6922edb0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 21]: /images/20220829/f5235740763c4ff09316afbc1651471f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 22]: /images/20220829/c4988ffa8ef24a079618f144821e7132.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 23]: /images/20220829/db99d472f37948c1be5e1353df70d87d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 24]: /images/20220829/219eddb8dad34cc08e7dac25b33fec28.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 25]: /images/20220829/bcb44e7de67945bbb03c7f6d23eed6eb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 26]: /images/20220829/69ae68c2832944d6a01f059c1744f0eb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 27]: /images/20220829/b5729b5905514aba91cc45d8394fbded.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 28]: /images/20220829/03f764ee675843c69903ed1663d3b3f9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 29]: /images/20220829/3cf1e2e815494a31a8d314132c584317.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 30]: /images/20220829/2bab53d2a8f9420e9f290fee98afd3df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 31]: /images/20220829/b4d29cea6ba34ac4bcfbb5cde03eafff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 32]: /images/20220829/60d33b0254e84f10b9158c6302a0f35e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 33]: /images/20220829/2ba3072a88cd48eab2a6b34603cf9f8c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 34]: /images/20220829/a3ec56994ed5461591497f66b0094fad.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 35]: /images/20220829/c3e205a4be354d7dada264bfdd9dd9d3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 36]: /images/20220829/7c0bd9ab9f5a420f99216108900b6267.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 37]: /images/20220829/68dd54232f8347ce9b8b5df3ec725b23.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_13_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/71a45cc29e474b93919f5f3f0b756021.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/2e42b8aa2bf940d9a0fd6fde2d76f28d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_17_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/6d407740fd724574bc08cc9b8b50264c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 38]: /images/20220829/80f4c2094f8f4475b566fbfaf02fcae0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/5c1b2358b92b438b979b48492e27b544.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 39]: /images/20220829/9ade24a4b93846089f85339ffa6e29f1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 40]: /images/20220829/955c6bfdd6184f9788ae56128f7b1a7e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 41]: /images/20220829/e07f55f89fe14ee59cf4b1b9e6d282c2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 42]: /images/20220829/0d21ae391c934f5abcf05409a55da6e4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 43]: /images/20220829/81b79cfbdd564ca794300c77ba8a04d2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_10_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/bd15b00d9c494ebaba45b2e1b47f93ec.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 44]: /images/20220829/a7ae4d6e007643c29e98dd8e0ee66f9b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 45]: /images/20220829/0c6bc01c127741c1b5a2529ad4b3a7c9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 46]: /images/20220829/8dedd22ef5bb40138c6b1988ea7f2d87.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 47]: /images/20220829/d20b00b52ce246369c1e04ffce40052c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 48]: /images/20220829/a0d03ba4459649eea8c0ab22df16b2f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_14_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/8e0ac1da47f34334962db3a40393f230.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 49]: /images/20220829/eae6e61d3f23460285de9482ac43f135.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 50]: /images/20220829/bb92ec47e50b49e189e0e4289ff94405.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 51]: /images/20220829/63854902b0244c298a70e435d08f3da9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 52]: /images/20220829/e5bc49331b484176bfbaa716f007a8ca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 53]: /images/20220829/48208a2840f341f08c737aa8e8315825.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_16_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/4cdccc28caa84d2ea427558a44eb9b36.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 54]: /images/20220829/501d61ff8df64843bf4bcf6bd6fffeb2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JOd55uS5a2QaXRibHVlYm94_size_20_color_FFFFFF_t_70_g_se_x_16 55]: /images/20220829/84994ac5e6094bd4ab80c9355ce79d49.png