仿小米商城Java实战：SpringBoot+Vue+Redis全链路源码解析-开发者社区

简介：这是一套基于Vue与SpringBoot前后端分离架构的仿小米商城系统完整项目源码，面向具备Java Web基础、希望积累电商实战经验或完成课程设计的开发者。项目涵盖注册登录、首页展示、商品浏览、下单支付（支付模块仅支持单商品）及后台维护等核心流程，技术栈整合了SpringBoot、SSM、MyBatis、Maven、Redis与Vue，适合用来理解前后端分离下的接口联调与缓存应用。压缩包共454个文件，约2.44MB，其中136个Java源文件与134个class文件构成后端主体，54个Vue组件与23个JS文件负责前端页面交互，另含SQL脚本、XML配置、properties及yml等资源，目录结构清晰，便于按模块阅读。目前已有1344人学习下载，可作为电商类毕业设计或二次开发的参考底本，帮助读者快速梳理订单、购物车与后台管理的实现思路。

1. 仿小米商城系统：一套能跑通前后端分离全链路的 Java 实战源码

如果你正在找一个能把 SpringBoot、Vue、SSM、MySQL、Redis 串起来练手的完整项目，这套仿小米商城系统值得拆一遍。它不是那种只放几个 Controller 的 Demo，而是把前后端分离的完整链路都铺开了：后端用 SpringBoot 整合 SSM 做接口层，前端用 Vue 做单页应用，MySQL 存业务数据，Redis 扛缓存和会话，Maven 管依赖和构建。适合刚学完 Java 基础、想找一个真实业务场景把技术栈串起来的人，也适合工作一两年、想回头补一补前后端分离项目结构的人。下面按「资源是什么 → 怎么跑起来 → 坑在哪 → 怎么改」的顺序拆，每一步都落到能复现的操作上。

2. 环境准备与依赖版本：先把 Maven、MySQL、Redis 三件套钉死

2.1 为什么版本要先钉死再动手

这套项目涉及 SpringBoot、SSM、Vue、MySQL、Redis 五个技术点，任何一个版本对不上，启动阶段就会翻车。常见做法是先把 JDK、Maven、MySQL、Redis、Node 五个基础环境的版本确认一遍，再动代码。JDK 建议 1.8 或 11，SpringBoot 2.x 对这两个版本兼容性最好；Maven 用 3.6 以上，配置阿里云仓库能省掉大量下载等待；MySQL 用 5.7 或 8.0 都行，但驱动包版本要跟数据库版本匹配；Redis 用 5.x 以上，Windows 下可以用解压版直接跑；Node 用 14 或 16，Vue 2 项目对高版本 Node 兼容性一般。

提示：不要一上来就追最新版本。SpringBoot 版本太高会导致部分 SSM 注解和依赖不兼容，这是新手最容易踩的坑。

2.2 Maven 配置与依赖拉取

Maven 的核心作用是管依赖和构建，这套项目依赖较多，不配镜像仓库下载会很慢。打开 Maven 安装目录下的conf/settings.xml，在<mirrors>标签内加入阿里云仓库配置：

<mirror> <id>aliyunmaven</id> <mirrorOf>*</mirrorOf> <name>阿里云公共仓库</name> <url>https://maven.aliyun.com/repository/public</url> </mirror>

这段配置的作用是把所有依赖请求指向阿里云公共仓库，mirrorOf设为*表示拦截全部仓库请求。改完后在项目根目录执行mvn clean install -DskipTests，先把依赖拉全。如果卡在某个依赖上，优先检查pom.xml里 SpringBoot 父版本和子模块版本是否一致，版本冲突是依赖拉取失败的头号原因。

2.3 MySQL 建库与 Redis 启动

MySQL 这边先把数据库建好，字符集用utf8mb4，排序规则用utf8mb4_general_ci，避免中文乱码。建库语句如下：

CREATE DATABASE mall DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

建完库后导入项目提供的 SQL 文件，注意检查表引擎是否为 InnoDB，MyISAM 不支持事务，后面做订单和库存扣减会出问题。Redis 这边，Windows 下解压后直接运行redis-server.exe，Linux 或 macOS 下用redis-server启动，默认端口 6379。启动后用redis-cli ping验证，返回PONG说明通了。项目里 Redis 一般用来存商品分类缓存和用户会话，配置在application.yml的spring.redis节点下，host、port、database 三个参数按实际环境改。

3. 后端接口层拆解：SpringBoot 整合 SSM 的目录结构与启动流程

3.1 目录结构怎么读

这套项目的后端目录大致分四层：controller层负责接收前端请求并返回 JSON，service层写业务逻辑，mapper层对接数据库，entity层放实体类。SSM 里的 Spring 和 MyBatis 被 SpringBoot 整合后，XML 配置基本被注解替代，但 MyBatis 的 Mapper XML 文件仍然保留在resources/mapper目录下。常见做法是先看application.yml，把数据源、Redis、MyBatis 三块配置确认一遍，再去看启动类上的注解。

spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379 database: 0 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.mall.entity

url里的serverTimezone必须写，否则 MySQL 8.0 驱动会报时区错误；mapper-locations指向 XML 映射文件位置，路径写错会导致 Mapper 绑定失败；type-aliases-package让实体类在 XML 里可以用短名引用。这三处是启动阶段报错最集中的地方。

3.2 启动类与接口验证

启动类上一般有@SpringBootApplication和@MapperScan两个注解，后者指定 Mapper 接口所在包。启动前先确认 MySQL 和 Redis 都在运行，然后执行mvn spring-boot:run或直接运行主类。启动成功后，用浏览器或 Postman 访问一个商品列表接口，比如http://localhost:8080/api/goods/list，返回 JSON 数据说明后端链路通了。如果返回 404，先检查 Controller 上的@RequestMapping路径和前端请求路径是否一致；如果返回 500，看控制台堆栈，大概率是 SQL 写错或 Redis 连接失败。

注意：前后端分离项目里，后端接口路径通常带/api前缀，前端通过代理转发，这个前缀在两边配置里必须对齐。

4. 前端 Vue 工程与联调：从 npm install 到接口代理配置

4.1 Vue 工程初始化与依赖安装

前端目录一般在mall-front或类似命名的文件夹下，进去后先执行npm install。如果下载慢，可以临时切到国内镜像源：npm config set registry https://registry.npmmirror.com。安装完成后用npm run serve启动开发服务器，默认端口 8080 或 8081。Vue 2 项目启动后如果报node-sass相关错误，通常是 Node 版本过高导致，降到 14 或 16 即可。

4.2 接口代理与跨域处理

前后端分离项目在开发阶段必然遇到跨域问题，常见做法是在vue.config.js里配代理：

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/api' } } } } }

target指向后端地址，changeOrigin设为 true 让请求头里的 host 跟目标一致，pathRewrite控制路径重写规则。配完后前端请求/api/goods/list会被代理到后端，浏览器不再报跨域。如果代理不生效，检查vue.config.js修改后是否重启了开发服务器，这个文件不会热更新。

4.3 登录态与 Redis 会话验证

这套项目用 Redis 存用户登录态，前端登录成功后后端返回一个 token，后续请求在 header 里带上这个 token。验证方式很简单：登录后打开浏览器开发者工具，看请求头里有没有Authorization或自定义 token 字段，再看后端 Redis 里有没有对应的 key。如果登录后刷新页面就掉线，多半是 token 没存到 localStorage 或 Redis 过期时间设得太短。

5. 避坑与排查：启动失败、乱码、缓存穿透的常见处理

5.1 启动报数据源错误

现象：启动时控制台报Failed to configure a DataSource。原因：application.yml里数据源配置没写全，或者 MySQL 服务没启动。解决：先确认 MySQL 进程在跑，再检查 url、username、password、driver-class-name 四项是否都填了，driver 用com.mysql.cj.jdbc.Driver而不是老版的com.mysql.jdbc.Driver。

5.2 中文乱码

现象：商品名称在页面上显示为问号或乱码。原因：数据库字符集不是utf8mb4，或者连接 url 里没加characterEncoding=utf8。解决：建库时指定utf8mb4，url 里补上useUnicode=true&characterEncoding=utf8，已经建好的表用ALTER TABLE改字符集。

5.3 Redis 连接超时

现象：启动时不报错，但访问接口时卡住然后报RedisConnectionFailureException。原因：Redis 没启动，或者application.yml里的 host、port 跟实际不一致。解决：先用redis-cli ping确认 Redis 通了，再核对配置文件。如果 Redis 设了密码，还要在配置里加password字段。

5.4 前端打包后接口 404

现象：npm run build后把 dist 放进 SpringBoot 静态目录，访问页面正常但接口 404。原因：打包后的前端请求路径没有走代理，直接请求了相对路径。解决：生产环境要么用 Nginx 配反向代理，要么在后端加一层路径映射，把/api请求转发到对应 Controller。

5.5 Mapper 绑定失败

现象：启动时报Invalid bound statement (not found)。原因：MyBatis 的 XML 文件路径没配对，或者方法名和 XML 里的 id 不一致。解决：检查mapper-locations路径，确认 XML 文件在resources/mapper下，再核对 Mapper 接口方法名和 XML 里的id是否完全一致，包括大小写。

6. 进阶改造：把商品列表缓存到 Redis 并做失效控制

6.1 为什么要给商品列表加缓存

商品列表是读多写少的典型场景，每次请求都查 MySQL 没必要。常见做法是把列表数据序列化后存进 Redis，设一个合理的过期时间，比如 5 分钟。这样既能扛住重复查询，又不至于数据太旧。改造点在 Service 层，查库之前先查 Redis，命中就直接返回，没命中再查库并回写。

public List<Goods> getGoodsList() { String key = "mall:goods:list"; String cached = redisTemplate.opsForValue().get(key); if (cached != null) { return JSON.parseArray(cached, Goods.class); } List<Goods> list = goodsMapper.selectAll(); redisTemplate.opsForValue().set(key, JSON.toJSONString(list), 5, TimeUnit.MINUTES); return list; }

redisTemplate.opsForValue().get取缓存，JSON.parseArray反序列化，set的第四个参数控制过期时间。注意 key 命名要有统一前缀，方便后面批量清理。商品增删改的时候要主动删掉这个 key，否则用户会看到旧数据，这就是缓存和数据库的一致性问题。

6.2 缓存穿透和雪崩的简单防护

如果查一个不存在的商品 ID，每次都绕过缓存打到数据库，这就是缓存穿透。简单做法是查不到也往 Redis 写一个空值，过期时间设短一点，比如 1 分钟。缓存雪崩是大量 key 同时过期，解决办法是给过期时间加一个随机偏移，比如 5 分钟基础上加 0 到 60 秒的随机数。这两个防护不需要多复杂，几行代码就能挡住大部分异常流量。

6.3 验证缓存是否生效

改完后重启后端，访问商品列表接口两次，第二次看控制台有没有打印 SQL。如果第一次打印了、第二次没打印，说明缓存生效了。再打开redis-cli，执行keys mall:goods:*看 key 是否存在，用ttl命令看过期时间。如果 key 存在但接口还是查库，检查序列化方式是否一致，存进去和取出来用的类必须匹配。