乐优商城(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 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值