谷粒商城-高级篇-购物车

就玩一会_

于 2024-11-14 18:06:44 发布

阅读量708

点赞数 17

分类专栏：谷粒商城文章标签：谷粒商城

本文链接：https://blog.youkuaiyun.com/weixin_53175511/article/details/143777425

版权

1、环境搭建

1）、创建gulimall-cart模块

2）、修改C:\Windows\System32\drivers\etc\hosts里的域名

#----------gulimall----------
192.168.119.127 gulimall.com
192.168.119.127 search.gulimall.com
192.168.119.127 item.gulimall.com
192.168.119.127 auth.gulimall.com
192.168.119.127 cart.gulimall.com

3）、在/mydata/nginx/html/static/目录创建cart文件夹，将所有的静态资源全部都传到虚拟机/mydata/nginx/html/static/cart目录下

将两个静态页面加入gulimall-cart服务里

4）、改静态资源的访问路径，只举一个例子

5）、添加依赖

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.atguigu</groupId>
    <artifactId>gulimall-cart</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gulimall-cart</name>
    <description>购物车</description>
 
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Hoxton.SR8</spring-cloud.version>
    </properties>
 
    <dependencies>
 
        <dependency>
            <groupId>com.auguigu.gulimall</groupId>
            <artifactId>gulimall-commom</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</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-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
 
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
 
    <repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
        </repository>
    </repositories>
 
</project>

6）、添加配置

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

7）、为主启动类添加注解

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

8）、修改网关，给购物车配置路由

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

测试

先把cartList.html改成index.html启动项目 http://cart.gulimall.com/

前端页面修改跳转到首页的链接

					<ul class="header-left">
						<li>
							<a href="http://gulimall.com">首页</a>
						</li>
					</ul>

					<div class="one_top_left">
						<a href="http://gulimall.com" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a>
						<a href="#" class="one_left_link">购物车</a>
					</div>

2、数据模型分析

2.1需求描述（多读多写状态Redis）

没登陆是临时用户，点击购物车生成一个user-key的cookie数据，然后登录后将临时数据和登录下已有的购物车合并。关闭浏览器后，未登录的临时购物车清空。

用户可以在登录状态下将商品添加到购物车【用户购物车/在线购物车】
1.放入数据库
2.mongodb
3.放入 redis（采用）
登录以后，会将临时购物车的数据全部合并过来，并清空临时购物车；

用户可以在未登录状态下将商品添加到购物车【游客购物车/离线购物车/临时购物车】
放入 localstorage（客户端存储，后台不存）
cookie
WebSQL
放入 redis（采用）
浏览器即使关闭，下次进入，临时购物车数据都在（和上面两个不同的状态）

基本功能：
用户可以使用购物车一起结算下单
给购物车添加商品
用户可以查询自己的购物车
用户可以在购物车中修改购买商品的数量。
用户可以在购物车中删除商品。
选中不选中商品
在购物车中展示商品优惠信息

2.2、数据存储

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

2.3、数据结构

购物项
因此每一个购物项信息，都是一个对象，基本字段包括：

{
    skuId: 2131241, 
    check: true, 
    title: "Apple iphone.....", 
    defaultImage: "...", 
    price: 4999, 
    count: 1, 
    totalPrice: 4999, 
    skuSaleVO: {...}
}

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

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

Redis 有 5 种不同数据结构，这里选择哪一种比较合适呢？Map<String, List>

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

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

Map<String k1,Map<String k2,CartItemInfo>>
第一层 Map，Key 是用户 id(区分不同的购物车)
第二层 Map，Key 是购物车中商品 id，值是购物项数据
一个购物车是由各个购物项组成的，但是我们用 List进行存储并不合适，因为使用 List查找某个购物项时需要挨个遍历每个购物项，会造成大量时间损耗，为保证查找速度，我们使用 hash进行存储。

2.4、流程

参照京东

user-key 是随机生成的 id，不管有没有登录都会有这cookie 信息。

两个功能：新增商品到购物车、查询购物车。
新增商品：判断是否登录
是：则添加商品到后台 Redis 中，把 user 的唯一标识符作为 key。
否：则添加商品到后台 redis 中，使用随机生成的 user-key 作为 key。

查询购物车列表：判断是否登录
否：直接根据 user-key 查询 redis 中数据并展示
是：已登录，则需要先根据 user-key 查询 redis 是否有数据。
有：需要提交到后台添加到 redis，合并数据，而后查询。
否：直接去后台查询 redis，而后返回。

3、VO编写

1.因此每一个购物项信息，都是一个对象，基本字段包括：

添加“com.atguigu.gulimall.cart.vo.CartItem”类，代码如下：

需要计算的属性，必须重写他的get方法，保证每次获取属性都会进行计算

package com.atguigu.gulimall.cart.vo;
 
import java.math.BigDecimal;
import java.util.List;
 
/**
 * @Description: 购物项
 * @Date: 2024/5/19 19:04
 * @Version 1.0
 */
public class CartItem {
    /**
     * 商品id
     */
    private Long skuId;
 
    /**
     * 是否选中
     */
    private Boolean check = true;
 
    /**
     * 标题
     */
    private String title;
 
    /**
     * 图片
     */
    private String image;
 
    /**
     * 商品套餐属性，
     多种属性，因此用List
     */
    private List<String> 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<String> getSkuAttr() {
        return skuAttr;
    }
 
    public void setSkuAttr(List<String> 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;
    }
}

添加“com.atguigu.gulimall.cart.vo.Cart”类，代码如下：