第二十八章 购物车

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 搭建购物车服务：

1.1 创建 module：

在 leyou 下创建 module，命名为 leyou-cart，采用 maven 的方式创建。

1.2 pom 依赖：

<?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>
    <version>1.0.0-SNAPSHOT</version>

    <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>

1.3 配置文件：

server:
  port: 8088
spring:
  application:
    name: cart-service
  redis:
    host: 192.168.56.101
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:10086/eureka
    registry-fetch-interval-seconds: 10
  instance:
    lease-renewal-interval-in-seconds: 5
    lease-expiration-duration-in-seconds: 15

1.4 启动类：

@SpringBootApplication
@EnableDiscoveryClient
@EnableFeignClients
public class LeyouCartApplication {
   

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

2. 购物车功能分析：

2.1 需求：

需求描述：

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

2.2 流程图：

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

新增商品：

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

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

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

3. 未登录购物车：

3.1 准备：

1）购物车的数据结构：

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

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

因此每一个购物车信息，都是一个对象，包含：

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

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

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

2）web 本地存储：

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

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

LocalStorage 的简单用法：

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

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

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

3）获取 num：

添加购物车需要知道购物的数量，所以我们需要获取数量大小。我们在 Vue 中定义 num，保存数量：

然后将 num 与页面的 input 框绑定，同时给 + 和 - 的按钮绑定事件：

编写方法：

3.2 添加购物车：

1）点击事件：

addCart 方法中判断用户的登录状态：

addCart(){
   
   ly.http.get("/auth/verify").then(res=>{
   
       // 已登录发送信息到后台，保存到redis中
   }).catch(()=>{
   
       // 未登录保存在浏览器本地的localStorage中
   })
}

2）获取数量，添加购物车：

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

    }).catch(()=>{
   
        // 未登录保存在浏览器本地的localStorage中
        // 1、查询本地购物车
        let carts = ly.store.get