基于Redis的Hash实现购物车搭建工作

最新推荐文章于 2024-05-14 22:14:15 发布

南宫拾壹

最新推荐文章于 2024-05-14 22:14:15 发布

阅读量1.9k

点赞数 2

分类专栏： Redis 文章标签： java redis

本文链接：https://blog.csdn.net/mutf7/article/details/119820683

版权

该博客介绍了如何利用Redis的Hash数据结构来搭建购物车系统，包括目标设定、技术选型（SpringBoot + Redis + MySQL，前端使用Vue.js）、具体实现步骤如商品添加、数量增减、删除等操作，并详细讲解了相关配置和接口调用。

摘要由CSDN通过智能技术生成

基于Redis的Hash实现购物车搭建工作

1 、目标

使用redis的hash数据结构完成小米购物车

2、技术架构

后端的数据架构：SpringBoot + Redis + MYSQL

前端使用的技术栈：vue + axios

3、具体实现

商品的添加购物车
购物车商品的数量的递增和递减
商品的删除
商品的总计和小计

具体效果如下：在这里插入图片描述

3.1 导入相关依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
</dependency>

<!--这里就是redis的核心jar包-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.dataformat</groupId>
    <artifactId>jackson-dataformat-avro</artifactId>
    <version>2.10.0</version>
</dependency>
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.6</version>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
</dependency>

<!-- 文档 -->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
    <exclusions>
        <exclusion>
            <groupId>io.swagger</groupId>
            <artifactId>swagger-models</artifactId>
        </exclusion>
        <exclusion>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>io.swagger</groupId>
    <artifactId>swagger-models</artifactId>
    <version>1.5.21</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>swagger-bootstrap-ui</artifactId>
    <version>1.8.5</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.10</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>

3.2 导入静态资源

准备素材shopcart.html
css
js
- vue.min.js
- axios.min.js

css/js放入到resource/static目录下、shopcart.html放入到resource/templates目录下

在shopcart.html页面中，引入对应js、css相关文件

<link th:href="@{
   /css/main.css}" rel="stylesheet"/>

<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>

<script>
    var vue = new Vue({
   
        el: "#app",
        data: {
   
            title: "购物车",
            // 模拟购物车
            userId: 1,
            // 购物车总计
            // totalPrice:0,
            // 购物车商品的数量
            totalCount: 0,
            // 购物车商品的数据
            resultList: []