乐优商城（13）--购物车

乐优商城（13）–购物车

一、搭建购物车服务

1.1、创建module

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>myLeyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.cart</groupId>
    <artifactId>leyou-cart</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</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
  cloud:
    nacos:
      discovery:
        server-addr: IP地址:8848
        username: nacos
        password: nacos
  redis:
    host: ip地址
    port: 8975

1.4、启动类

@SpringBootApplication
@EnableDiscoveryClient
@EnableFeignClients
public class LeyouCartApplication {
   

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

二、购物车功能分析

2.1、需求

需求描述：

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

2.2、流程图

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

新增商品：

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

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

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

三、未登录购物车

3.1、准备

3.1.1、购物车的数据结构

首先分析一下未登录购物车的数据结构。看下页面展示需要什么数据：

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

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

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

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

3.1.2、web本地存储

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

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

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

LocalStorage的用法：

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

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

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

3.1.3、获取num

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

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

对应方法：

3.2、添加购物车

3.2.1、点击事件

修改加入购物车的跳转链接：

现在点击加入购物车会跳转到购物车成功页面。不过不这么做，先绑定点击事件，然后实现添加购物车功能。

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

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

3.2.2、获取数量，添加购物车

addCart(){
   
   //先判断登录状态
   ly.verifyUser().then(res =>{
   
      // 已登录发送信息到后台，保存到redis中
      
   }).catch(() =>{
   
      //未登录保存在浏览器本地的localStorage中
      //若本地存在该商品，先查询本地
      let carts = ly.store.get("carts") || [];
      let cart = carts.find(c => c.skuId