谷粒商城笔记+踩坑（18）——购物车

目录

一、环境搭建

1.1、购物车模块初始化

1.2、动静资源处理

1.3、页面跳转配置

二、数据模型分析

2.1、购物车需求

2.1.1、离线购物车和在线购物车需求、数据库选择redis

2.1.2、购物车数据结构

2.2、模型类抽取，Cart和CartItem

2.3、Redis依赖和配置、SpringSession配置类

三、ThreadLocal 用户身份鉴别

3.1、需求分析 

3.2、传输对象封装临时用户id,userKey,是否有临时用户

3.3、创建购物车常量类

3.4、自定义拦截器，临时用户信息放到ThreadLocal<>

3.5、把拦截器添加到WebMvcConfigurer配置类

3.6、Controller处理购物车请求

四、添加商品到购物车

4.1、前端页面修改

4.2、Controller

4.3、service 

4.3.1、远程查询sku的组合信息

4.3.2、远程查询sku的组合信息

4.3.3、异步编排，自定义线程池配置类

4.3.4、添加购物车业务实现

4.4、刷新页面不断发请求问题，RedirectAttribute

4.4.0、分析

4.4.1、改成重定向到添加成功页面并查询购物车数据

4.4.2、Service层 CartServiceImpl 实现类编写 获取购物车某个购物项方法

4.4.3、success页面修改

五、获取购物车

六、选中购物项[是否选中]

七、修改购物项数量

7.1、前端 cartList.html 页面修改

7.2、后端 接口编写

八、删除购物项

8.1、前端修改

8.2、后端接口

---

一、环境搭建

1.1、购物车模块初始化

第一步、创建gulimall-cart服务，并进行降版本处理

    org.springframework.boot
    spring-boot-starter-parent
    2.1.8.RELEASE
     

com.atguigu
gulimall-cart
0.0.1-SNAPSHOT
gulimall-cart
购物车

    1.8
    Greenwich.SR3

第二步、hosts添加域名映射

# Gulimall Host Start
127.0.0.1 gulimall.cn
127.0.0.1 search.gulimall.cn
127.0.0.1 item.gulimall.cn
127.0.0.1 auth.gulimall.cn
127.0.0.1 cart.gulimall.cn
# Gulimall Host End

第三步、导入公共模块依赖

    com.atguigu.gulimall
    gulimall-common
    0.0.1-SNAPSHOT

因为目前不用数据库，故排除掉

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
public class GulimallCartApplication {

    public static void main(String[] args) {
        SpringApplication.run(GulimallCartApplication.class, args);
    }

}

第四步、bootstrap.yml添加nacos配置

server.port=40000

spring.application.name=gulimall-cart
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

第五步、为启动类添加注解，开启服务注册和发现

@EnableFeignClients
@EnableDiscoveryClient
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
public class GulimallCartApplication {

    public static void main(String[] args) {
        SpringApplication.run(GulimallCartApplication.class, args);
    }

}

第六步、修改网关，给购物车配置路由

- id: gulimall_cart_route
  uri: lb://gulimall-cart
  predicates:
  	- Host=cart.gulimall.cn

1.2、动静资源处理

---

1. 静：将资料中购物车文件夹下的所有的静态资源复制到服务器的：mydata/nginx/html/static/cart 目录下

2. 动：将资料中购物车文件夹下的 两个页面复制到 gulimall-cart服务的 templates 目录下

3. 替换掉网页中的所有资源申请路径

1.3、页面跳转配置

---

需求：实现页面的跳转

1. 当我们在商品详情页item.html点击加入购物车之后，跳转到加入成功页success.html
2. 在成功页success.html 点击 购物车 进入购物车列表页 cartList.html
3. 在成功页success.html 点击 查看商品详情 跳转到该商品的详情页
4. 在 首页 index.html 中点击我的购物车也跳转到 购物车列表页 cartList.html

gulimall-product 服务中的 Item.html

   
      加入购物车
   


//......

我的购物车
  

    购物车还没有商品，赶紧选购吧！
  

Gulimall-cart 服务中 success.html 页面

  查看商品详情
  去购物车结算

Gulimall-cart 服务中 success.html 页面

  
  购物车


//.....


    首页

Gulimall-cart 服务中的 CartController类中添加映射

@Controller
public class CartController {

    @GetMapping("/cart.html")
    public String cartListPage(){

        return "cartList";
    }

    /**
     * 添加商品到购物车
     * @return
     */
    @GetMapping("/addToCart")
    public String addToCart() {
        return "success";
    }
}

 

二、数据模型分析

2.1、购物车需求

---

2.1.1、离线购物车和在线购物车需求、数据库选择redis

需求描述

离线购物车：

• 用户可在 未登录状态 下将商品添加到购物车 [ 用户离线临时购物车 ]。浏览器即使关闭，下次进入，临时购物车数据都在。

在线购物车： 

• 用户可以在 登录状态 下将商品添加到购物车 [ 用户在线购物车 ]。登录之后，会将离线购物车的数据全部合并过来，并清空离线购物车；

---

• 购物功能
  • 用户可以使用购物车一起结算下单
  • 添加商品到购物车
  • 用户可以查询自己的购物车
  • 用户可以在购物车中修改购买商品的数量
  • 用户可以在购物车中删除商品
  • 在购物车中展示商品优惠信息
  • 提示购物车商品价格变化

---

数据存储：

购物车是一个读多写多的场景，因此放入数据库并不合适，但购物车又需要持久化，因此这里我们选用Redis的持久化机制存储购物车数据。

redis默认是内存数据库，所有数据存在内存，

2.1.2、购物车数据结构

---

购物车Redis的Hash进行存储，key是用户标识码例如gulimall:cart:1，值是一个个CartItem

Redis中 每个用户的购物车 都是由各个购物项组成，根据分析这里使用 Hash进行存储比较合适：

• MapMap>
  • K1：用户标识
  • Map
    • K2 ：商品Id
    • CartltemInfo ：购物项详情

2.2、模型类抽取，Cart和CartItem

---

• Cart
  需要计算的属性，必须重写它的get方法，保证每次获取属性都会进行计算
  • 计算商品的总数量
  • 计算商品类型数量
  • 计算商品的总价

注意：

• 这里不用@Data，自己生成getter和setter方法，主要为了数量、金额等属性自定义计算方法。例如Cart里的商品数量通过CartItem列表计算总数量。
• 金额相关数据必须用BigDecimal类型，进行精确的运算

package com.atguigu.cart.vo;
/**
 * Description: 整体购物车
 *  这里不用@Data，自己生成getter和setter方法，主要为了数量、金额等属性自定义计算方法。
 *  例如Cart里的商品数量通过CartItem列表计算总数量。
 */
public class Cart {

    /**
     * 购物车子项信息
     */
    List items;
    /**
     * 商品的总数量
     */
    private Integer countNum;
    /**
     * 商品类型数量
     */
    private Integer countType;
    /**
     * 商品总价
     */
    private BigDecimal totalAmount;
    /**
     * 减免价格
     */
    private BigDecimal reduce = new BigDecimal("0");

//需要计算的属性，必须重写它的get方法，保证每次获取属性都会进行计算
    public List getItems() {
        return items;
    }

    public void setItems(List items) {
        this.items = items;
    }

    public Integer getCountNum() {
        int count = 0;
        if (items!=null && items.size()>0) {
            for (CartItem item : items) {
                countNum += item.getCount();
            }
        }
        return count;
    }


    public Integer getCountType() {
        int count = 0;
        if (items!=null && items.size()>0) {
            for (CartItem item : items) {
                countNum += 1;
            }
        }
        return count;
    }


    public BigDecimal getTotalAmount() {
        BigDecimal amount = new BigDecimal("0");
        // 1、计算购物项总价
        if (items!=null && items.size()>0) {
            for (CartItem item : items) {
                BigDecimal totalPrice = item.getTotalPrice();
                amount = amount.add(totalPrice);
            }
        }
        // 2、减去优惠总价
        BigDecimal subtract = amount.subtract(getReduce());
        return subtract;
    }


    public BigDecimal getReduce() {
        return reduce;
    }

    public void setReduce(BigDecimal reduce) {
        this.reduce = reduce;
    }
}

• CartItem
  • 计算小计价格

package com.atguigu.cart.vo;
/**
 * Description: 购物项内容。
 *  这里不用@Data，自己生成getter和setter方法，主要为了数量、金额等属性自定义计算方法。
 *  例如Cart里的商品数量通过CartItem列表计算总数量。
 */
public class CartItem {
    /**
     * 商品Id
     */
    private Long skuId;
    /**
     * 商品是否被选中(默认被选中)
     */
    private Boolean check = true;
    /**
     * 商品标题
     */
    private String title;
    /**
     * 商品图片
     */
    private String image;
    /**
     * 商品套餐信息
     */
    private List skuAttr;
    /**
     * 商品价格
     */
    private BigDecimal price;
    /**
     * 数量
     */
    private Integer count;
    /**
     * 小计价格
     */
    private BigDecimal totalPrice;

    public Long getSkuId() {
        return skuId;
    }

    public void setSkuId(Long skuId) {
        this.skuId = skuId;
    }

    public Boolean getCheck() {
        return check;
    }

    public void setCheck(Boolean check) {
        this.check = check;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public List getSkuAttr() {
        return skuAttr;
    }

    public void setSkuAttr(List skuAttr) {
        this.skuAttr = skuAttr;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public Integer getCount() {
        return count;
    }

    public void setCount(Integer count) {
        this.count = count;
    }

    /**
     * 动态计算当前的总价
     * @return
     */
    public BigDecimal getTotalPrice() {
        return this.price.multiply(new BigDecimal("" + this.count));
    }

    public void setTotalPrice(BigDecimal totalPrice) {
        this.totalPrice = totalPrice;
    }
}

2.3、Redis依赖和配置、SpringSession配置类

---

1、导入redis和SpringSession的依赖

  org.springframework.session
  spring-session-data-redis


  org.springframework.boot
  spring-boot-starter-data-redis

2、编写配置

# 配置redis
spring.redis.host=124.222.223.222
spring.redis.port=6379

3、添加SpringSession配置类(自定义Session配置类)

作用：配置类设置session使用json序列化,并放大作用域(自定义)。

将 gulimall-auth-server 服务中 /com/atguigu/gulimall/auth/config路径下的GulimallSessionConfig.java配置类复制到 gulimall-cart服务的config包下：

package com.atguigu.cart.config;

@Configuration
public class GulimallSessionConfig {

    @Bean
    public CookieSerializer cookieSerializer() {
        DefaultCookieSerializer cookieSerializer = new DefaultCookieSerializer();
        cookieSerializer.setDomainName("gulimall.cn");
        cookieSerializer.setCookieName("GULISESSION");

        return cookieSerializer;
    }

    @Bean
    public RedisSerializer