简介这是一套面向计算机相关专业毕业设计与课程作业的网上商城实战项目采用SpringBootVueRedis前后端分离架构后端以SpringBoot简化开发流程前端用Vue专注视图层Redis承担缓存以提升读写与并发性能适合想完整跑通电商业务链路的初中级开发者练手。压缩包共2034个文件以1358个md说明文档、562个js脚本、69个json配置为主另含少量docx、html与sh脚本整体约117.18MB源码与SQL脚本齐备导入即可对照README梳理商品展示、购物车、订单处理、用户管理等模块的实现方式。目前已有124人学习下载。项目经严格测试验证可正常运行读者可借此理解前后端分离下的数据交互与接口设计并参考文档快速定位目录结构与关键逻辑仅限交流学习请勿用于商业用途。1. 从一份已调试的 SpringBootVueRedis 商城源码说起拿到一份标着「已调试」的前后端分离网上商城项目很多人的第一反应是解压、导入 IDE、点运行然后被一堆报错劝退。这份springbootvueredis前后端分离网上商城项目003的价值不在于它是个商城而在于它把一套完整的工程骨架跑通了后端 SpringBoot 提供 REST 接口前端 Vue 做单页应用Redis 承担缓存与会话MySQL 存业务数据。对想入门前后端分离、想拿一个能跑的项目改造成自己作品的开发者来说这种「已调试」的源码省掉了最耗时的环境对齐环节。但它也不是拿来即用的成品配置、依赖版本、跨域、缓存穿透这些坑一个不少。这篇笔记就按我实际复现这类项目的顺序把选型理由、启动步骤、参数设置和排错经验讲清楚让你能真正把它跑起来、改得动。2. 前后端分离商城的骨架拆解与选型理由2.1 为什么是 SpringBoot Vue Redis 这套组合先想清楚这套技术栈各自解决什么问题后面改代码才不会乱。SpringBoot 负责后端核心优势是自动装配和起步依赖一个spring-boot-starter-web就把内嵌 Tomcat、SpringMVC、Jackson 全带进来省掉传统 SSM 那套 XML 配置。Vue 负责前端单文件组件把模板、逻辑、样式收在一个.vue文件里配合 Vue Router 做前端路由、Axios 发请求天然适合前后端分离。Redis 在这里不是可有可无的装饰它承担两类活一是缓存热点数据商品详情、分类列表减少 MySQL 压力二是存会话或令牌让后端可以无状态水平扩展。为什么不用 JSP 或 Thymeleaf 做服务端渲染因为商城的商品列表、购物车、订单这些交互频繁服务端渲染每次都要整页刷新体验差、后端压力大。前后端分离后前端只管渲染后端只吐 JSON职责清晰前端还能独立部署到 Nginx。这套组合在中小型电商项目里是主流做法资料多、招人好招出问题也容易搜到答案。2.2 目录结构与模块职责解压后典型的结构分两块后端一个 Maven 工程前端一个 Node 工程。后端常见分层是controller接收请求、service业务逻辑、mapper或dao数据库访问、entity实体、config配置类、utils工具。前端常见是src/api接口封装、src/views页面、src/components公共组件、src/router路由、src/store状态管理。模块职责常见文件controller暴露 REST 接口参数校验UserController.javaservice业务编排、事务控制OrderServiceImpl.javamapperSQL 映射MyBatis 接口ProductMapper.xmlconfig跨域、拦截器、Redis 序列化CorsConfig.javaapi前端接口统一封装request.jsrouter前端路由与权限守卫index.js理解这个结构后你要加一个「优惠券」功能就知道该在 controller 加接口、service 写逻辑、mapper 写 SQL、前端 api 加方法、views 加页面路径是固定的。2.3 数据库表与 Redis 键的设计关系商城核心表一般有用户表、商品表、分类表、购物车表、订单表、订单明细表。Redis 的键设计要和这些表对应起来常见做法是商品详情用product:detail:{id}分类列表用category:list用户令牌用token:{userId}。键名带业务前缀是为了避免不同业务键冲突也方便用keys product:*排查生产环境别用 keys用 scan。注意Redis 里存对象时序列化方式要和读取时一致。后端用 Jackson 序列化成 JSON 存前端或另一个服务读的时候也得按 JSON 解析否则拿到的是带类名的乱码。3. 把项目在本地跑起来的最小步骤3.1 后端启动改配置、建库、跑起来第一步永远是看配置文件。后端配置文件通常是application.yml或application.properties重点改三处数据库连接、Redis 连接、服务端口。# application.yml 关键配置 server: port: 8080 # 后端服务端口前端代理要对应 spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379 database: 0 timeout: 3000msserverTimezone必须设否则 MySQL 8 连接会报时区错误。characterEncodingutf8防止中文乱码。Redis 的database默认 0如果你本机跑过别的项目建议换成 1 避免键冲突。改完配置先在 MySQL 里建库再导入项目自带的.sql文件。# 建库并导入 SQL mysql -uroot -p -e CREATE DATABASE mall DEFAULT CHARACTER SET utf8mb4; mysql -uroot -p mall mall.sql导入后确认表和数据都在再启动后端。用 IDE 直接运行主类或命令行mvn spring-boot:run。看到控制台打印 Tomcat 启动在 8080 端口、没有异常堆栈后端就算起来了。如果报Table mall.xxx doesnt exist说明 SQL 没导全或库名对不上。3.2 前端启动装依赖、配代理、连后端前端进目录先装依赖再改接口基地址。很多项目在src/utils/request.js或.env文件里配baseURL。// request.js 里配置 axios 实例 import axios from axios const service axios.create({ baseURL: /api, // 走开发服务器代理避免跨域 timeout: 5000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers[Authorization] token // 带上令牌 return config }) export default servicebaseURL设成/api是为了走 Vue 开发服务器的代理把/api开头的请求转发到后端 8080这样浏览器看到的是同源请求不会触发跨域。代理配置在vue.config.js// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀再转发 } } } }pathRewrite要不要写取决于后端接口路径带不带/api。如果后端 controller 映射是/user/login前端请求/api/user/login就必须 rewrite 掉/api。装依赖用npm install启动用npm run serve浏览器打开 8081 端口能看到页面就成功了一半。3.3 验证三层是否真的打通页面能打开不代表数据通了。按顺序验证先直接访问后端接口比如浏览器或 Postman 请求http://localhost:8080/user/login看是否返回 JSON再在前端页面触发一次登录打开浏览器开发者工具的 Network 面板看请求是否 200、响应体是否是预期数据最后看 Redis 里有没有写入令牌。# 连上 Redis 查看键 redis-cli -n 0 keys token:* get token:1如果接口返回 401 或 403多半是拦截器没放行登录接口如果 Network 里请求地址是 8081 而不是 8080说明代理没生效检查vue.config.js是否被正确加载改完要重启前端。这三步走完项目才算真正跑通。4. Redis 缓存与登录态的落地细节4.1 商品缓存什么时候写、什么时候删缓存最怕的是数据不一致。常见做法是「读时缓存、写时删除」查商品先读 Redis命中就返回没命中查 MySQL 再写回 Redis更新商品时先更新 MySQL再删除对应 Redis 键而不是更新缓存。删除比更新安全因为并发下更新缓存可能写入旧值。// 商品详情缓存逻辑 public Product getProductById(Long id) { String key product:detail: id; String cached redisTemplate.opsForValue().get(key); if (cached ! null) { return JSON.parseObject(cached, Product.class); // 命中直接返回 } Product product productMapper.selectById(id); if (product ! null) { redisTemplate.opsForValue().set(key, JSON.toJSONString(product), 30, TimeUnit.MINUTES); } return product; }30是过期时间单位分钟。设过期时间是为了兜底万一删除逻辑漏了缓存最多脏 30 分钟。过期时间设多长看业务商品详情变化不频繁可以设长库存这种高频变化的建议不缓存或设很短。4.2 登录令牌Redis 存什么、存多久前后端分离下后端不存 session登录成功后生成一个令牌返回前端前端存 localStorage每次请求带上。令牌和用户信息的映射放 Redis键是token:{token}值是用户 ID 或用户对象设一个过期时间比如 2 小时。// 登录成功后写令牌 String token UUID.randomUUID().toString().replace(-, ); redisTemplate.opsForValue().set(token: token, userId, 2, TimeUnit.HOURS);拦截器里校验取请求头的令牌去 Redis 查查不到就返回 401。这样后端可以多实例部署令牌校验不依赖单机内存。令牌过期时间要和前端行为匹配太短用户频繁掉线太长有安全风险。常见做法是配一个刷新机制或者前端在令牌快过期时静默续期。4.3 缓存穿透、击穿、雪崩的应对这三个词听着玄学其实就是三种失效场景。穿透是查一个数据库里也没有的键每次都打到 MySQL击穿是某个热点键过期瞬间大量请求涌向数据库雪崩是大量键同时过期。应对手段穿透可以缓存空值或加布隆过滤器击穿可以给热点键加互斥锁只让一个请求去查库雪崩给过期时间加随机值别让键同时失效。// 缓存空值防穿透 if (product null) { redisTemplate.opsForValue().set(key, , 5, TimeUnit.MINUTES); // 空值短过期 return null; }空值过期时间要短否则数据后来真有了缓存里还是空。互斥锁用setIfAbsent实现拿到锁的请求去查库其他请求短暂等待后重试。这些手段不用全上按业务量级选小商城缓存空值基本够用。5. 避坑与排查那些让项目跑不起来的常见问题5.1 跨域报错但代理已配现象浏览器控制台报Access-Control-Allow-Origin但vue.config.js里代理明明配了。原因通常是请求没走代理比如baseURL写成了完整地址http://localhost:8080浏览器直接跨域请求后端。解决baseURL用相对路径/api让请求先到前端开发服务器再转发。另外改完vue.config.js必须重启npm run serve热更新不会重载代理配置。5.2 后端启动报数据源或 Redis 连接失败现象启动时抛Communications link failure或Unable to connect to Redis。原因多是 MySQL 没启动、端口不对、密码错或 Redis 服务没开。解决先用mysql -uroot -p和redis-cli ping确认两个服务都能连再核对配置文件里的端口和密码。Redis 返回PONG才算正常。如果 Redis 设了密码配置里要加password项漏了会报NOAUTH。5.3 前端页面空白或接口 404现象页面能打开但一片空白或接口返回 404。原因可能是路由模式问题history 模式在开发服务器下刷新会 404改成 hash 模式或配 fallback也可能是接口路径多了或少了前缀。解决打开 Network 看实际请求 URL和后端 controller 的RequestMapping逐段比对。404 基本都是路径对不上把前端请求路径和后端映射贴一起看一眼就能发现。5.4 中文乱码现象页面显示的商品名是问号或乱码。原因可能在数据库字符集、连接 URL 或响应编码。解决建库用utf8mb4连接 URL 带characterEncodingutf8后端返回 JSON 时确认Content-Type是application/json;charsetUTF-8。三处都对了才不会乱码。MySQL 8 默认字符集已经是 utf8mb4老版本要手动设。5.5 修改代码后不生效现象改了后端代码重启没变化或改了前端页面刷新还是旧的。原因可能是 IDE 没重新编译、Maven 没重新打包或前端浏览器缓存。解决后端确认 target 目录里的 class 是新的必要时mvn clean前端硬刷新CtrlF5或禁用缓存。这类问题最没技术含量但最耗时间养成改完先确认编译产物的习惯。6. 把这套骨架改造成自己项目的方法跑通只是起点真正有价值的是把它改成你自己的东西。我的习惯是先做减法再做加法删掉用不上的模块比如原项目的秒杀、团购只留用户、商品、订单三条主线让代码量降下来自己完全掌控。然后按业务加功能每加一个功能都走一遍 controller→service→mapper→前端 api→views 的完整链路链路走顺了这套骨架就真成你的了。改造时有两个技巧值得记。一是接口先定契约再写实现用 Postman 或接口文档工具把请求参数、响应结构定死前后端并行开发不互相等。二是缓存键统一管理别在代码里到处硬编码字符串抽一个RedisKeyUtil类集中定义改键名时只改一处。改造方向具体做法注意点换主题改前端 views 和样式别动 api 层接口不变加支付新增 controller 和 service支付回调要验签、防重加搜索引入搜索引擎或优化 SQL数据量大再上搜索引擎部署上线前端打包丢 Nginx后端打 jar生产环境关掉开发代理验证改造是否成功别只看页面能点要压一压。用ab或wrk对商品列表接口打几百个并发看响应时间和错误率把 Redis 停掉看系统是降级查库还是直接崩这能暴露缓存逻辑的健壮性。我踩过最深的坑是缓存和数据库双写不一致后来统一成「先更库再删缓存」才稳定。这套骨架不难难的是每个细节都想到边界。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/9 15:08:52 · 阅读 1.2k SpringBoot+Vue+Redis商城源码实战：从跑通到改造的避坑指南
简介这是一套面向计算机相关专业毕业设计与课程作业的网上商城实战项目采用SpringBootVueRedis前后端分离架构后端以SpringBoot简化开发流程前端用Vue专注视图层Redis承担缓存以提升读写与并发性能适合想完整跑通电商业务链路的初中级开发者练手。压缩包共2034个文件以1358个md说明文档、562个js脚本、69个json配置为主另含少量docx、html与sh脚本整体约117.18MB源码与SQL脚本齐备导入即可对照README梳理商品展示、购物车、订单处理、用户管理等模块的实现方式。目前已有124人学习下载。项目经严格测试验证可正常运行读者可借此理解前后端分离下的数据交互与接口设计并参考文档快速定位目录结构与关键逻辑仅限交流学习请勿用于商业用途。1. 从一份已调试的 SpringBootVueRedis 商城源码说起拿到一份标着「已调试」的前后端分离网上商城项目很多人的第一反应是解压、导入 IDE、点运行然后被一堆报错劝退。这份springbootvueredis前后端分离网上商城项目003的价值不在于它是个商城而在于它把一套完整的工程骨架跑通了后端 SpringBoot 提供 REST 接口前端 Vue 做单页应用Redis 承担缓存与会话MySQL 存业务数据。对想入门前后端分离、想拿一个能跑的项目改造成自己作品的开发者来说这种「已调试」的源码省掉了最耗时的环境对齐环节。但它也不是拿来即用的成品配置、依赖版本、跨域、缓存穿透这些坑一个不少。这篇笔记就按我实际复现这类项目的顺序把选型理由、启动步骤、参数设置和排错经验讲清楚让你能真正把它跑起来、改得动。2. 前后端分离商城的骨架拆解与选型理由2.1 为什么是 SpringBoot Vue Redis 这套组合先想清楚这套技术栈各自解决什么问题后面改代码才不会乱。SpringBoot 负责后端核心优势是自动装配和起步依赖一个spring-boot-starter-web就把内嵌 Tomcat、SpringMVC、Jackson 全带进来省掉传统 SSM 那套 XML 配置。Vue 负责前端单文件组件把模板、逻辑、样式收在一个.vue文件里配合 Vue Router 做前端路由、Axios 发请求天然适合前后端分离。Redis 在这里不是可有可无的装饰它承担两类活一是缓存热点数据商品详情、分类列表减少 MySQL 压力二是存会话或令牌让后端可以无状态水平扩展。为什么不用 JSP 或 Thymeleaf 做服务端渲染因为商城的商品列表、购物车、订单这些交互频繁服务端渲染每次都要整页刷新体验差、后端压力大。前后端分离后前端只管渲染后端只吐 JSON职责清晰前端还能独立部署到 Nginx。这套组合在中小型电商项目里是主流做法资料多、招人好招出问题也容易搜到答案。2.2 目录结构与模块职责解压后典型的结构分两块后端一个 Maven 工程前端一个 Node 工程。后端常见分层是controller接收请求、service业务逻辑、mapper或dao数据库访问、entity实体、config配置类、utils工具。前端常见是src/api接口封装、src/views页面、src/components公共组件、src/router路由、src/store状态管理。模块职责常见文件controller暴露 REST 接口参数校验UserController.javaservice业务编排、事务控制OrderServiceImpl.javamapperSQL 映射MyBatis 接口ProductMapper.xmlconfig跨域、拦截器、Redis 序列化CorsConfig.javaapi前端接口统一封装request.jsrouter前端路由与权限守卫index.js理解这个结构后你要加一个「优惠券」功能就知道该在 controller 加接口、service 写逻辑、mapper 写 SQL、前端 api 加方法、views 加页面路径是固定的。2.3 数据库表与 Redis 键的设计关系商城核心表一般有用户表、商品表、分类表、购物车表、订单表、订单明细表。Redis 的键设计要和这些表对应起来常见做法是商品详情用product:detail:{id}分类列表用category:list用户令牌用token:{userId}。键名带业务前缀是为了避免不同业务键冲突也方便用keys product:*排查生产环境别用 keys用 scan。注意Redis 里存对象时序列化方式要和读取时一致。后端用 Jackson 序列化成 JSON 存前端或另一个服务读的时候也得按 JSON 解析否则拿到的是带类名的乱码。3. 把项目在本地跑起来的最小步骤3.1 后端启动改配置、建库、跑起来第一步永远是看配置文件。后端配置文件通常是application.yml或application.properties重点改三处数据库连接、Redis 连接、服务端口。# application.yml 关键配置 server: port: 8080 # 后端服务端口前端代理要对应 spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379 database: 0 timeout: 3000msserverTimezone必须设否则 MySQL 8 连接会报时区错误。characterEncodingutf8防止中文乱码。Redis 的database默认 0如果你本机跑过别的项目建议换成 1 避免键冲突。改完配置先在 MySQL 里建库再导入项目自带的.sql文件。# 建库并导入 SQL mysql -uroot -p -e CREATE DATABASE mall DEFAULT CHARACTER SET utf8mb4; mysql -uroot -p mall mall.sql导入后确认表和数据都在再启动后端。用 IDE 直接运行主类或命令行mvn spring-boot:run。看到控制台打印 Tomcat 启动在 8080 端口、没有异常堆栈后端就算起来了。如果报Table mall.xxx doesnt exist说明 SQL 没导全或库名对不上。3.2 前端启动装依赖、配代理、连后端前端进目录先装依赖再改接口基地址。很多项目在src/utils/request.js或.env文件里配baseURL。// request.js 里配置 axios 实例 import axios from axios const service axios.create({ baseURL: /api, // 走开发服务器代理避免跨域 timeout: 5000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers[Authorization] token // 带上令牌 return config }) export default servicebaseURL设成/api是为了走 Vue 开发服务器的代理把/api开头的请求转发到后端 8080这样浏览器看到的是同源请求不会触发跨域。代理配置在vue.config.js// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀再转发 } } } }pathRewrite要不要写取决于后端接口路径带不带/api。如果后端 controller 映射是/user/login前端请求/api/user/login就必须 rewrite 掉/api。装依赖用npm install启动用npm run serve浏览器打开 8081 端口能看到页面就成功了一半。3.3 验证三层是否真的打通页面能打开不代表数据通了。按顺序验证先直接访问后端接口比如浏览器或 Postman 请求http://localhost:8080/user/login看是否返回 JSON再在前端页面触发一次登录打开浏览器开发者工具的 Network 面板看请求是否 200、响应体是否是预期数据最后看 Redis 里有没有写入令牌。# 连上 Redis 查看键 redis-cli -n 0 keys token:* get token:1如果接口返回 401 或 403多半是拦截器没放行登录接口如果 Network 里请求地址是 8081 而不是 8080说明代理没生效检查vue.config.js是否被正确加载改完要重启前端。这三步走完项目才算真正跑通。4. Redis 缓存与登录态的落地细节4.1 商品缓存什么时候写、什么时候删缓存最怕的是数据不一致。常见做法是「读时缓存、写时删除」查商品先读 Redis命中就返回没命中查 MySQL 再写回 Redis更新商品时先更新 MySQL再删除对应 Redis 键而不是更新缓存。删除比更新安全因为并发下更新缓存可能写入旧值。// 商品详情缓存逻辑 public Product getProductById(Long id) { String key product:detail: id; String cached redisTemplate.opsForValue().get(key); if (cached ! null) { return JSON.parseObject(cached, Product.class); // 命中直接返回 } Product product productMapper.selectById(id); if (product ! null) { redisTemplate.opsForValue().set(key, JSON.toJSONString(product), 30, TimeUnit.MINUTES); } return product; }30是过期时间单位分钟。设过期时间是为了兜底万一删除逻辑漏了缓存最多脏 30 分钟。过期时间设多长看业务商品详情变化不频繁可以设长库存这种高频变化的建议不缓存或设很短。4.2 登录令牌Redis 存什么、存多久前后端分离下后端不存 session登录成功后生成一个令牌返回前端前端存 localStorage每次请求带上。令牌和用户信息的映射放 Redis键是token:{token}值是用户 ID 或用户对象设一个过期时间比如 2 小时。// 登录成功后写令牌 String token UUID.randomUUID().toString().replace(-, ); redisTemplate.opsForValue().set(token: token, userId, 2, TimeUnit.HOURS);拦截器里校验取请求头的令牌去 Redis 查查不到就返回 401。这样后端可以多实例部署令牌校验不依赖单机内存。令牌过期时间要和前端行为匹配太短用户频繁掉线太长有安全风险。常见做法是配一个刷新机制或者前端在令牌快过期时静默续期。4.3 缓存穿透、击穿、雪崩的应对这三个词听着玄学其实就是三种失效场景。穿透是查一个数据库里也没有的键每次都打到 MySQL击穿是某个热点键过期瞬间大量请求涌向数据库雪崩是大量键同时过期。应对手段穿透可以缓存空值或加布隆过滤器击穿可以给热点键加互斥锁只让一个请求去查库雪崩给过期时间加随机值别让键同时失效。// 缓存空值防穿透 if (product null) { redisTemplate.opsForValue().set(key, , 5, TimeUnit.MINUTES); // 空值短过期 return null; }空值过期时间要短否则数据后来真有了缓存里还是空。互斥锁用setIfAbsent实现拿到锁的请求去查库其他请求短暂等待后重试。这些手段不用全上按业务量级选小商城缓存空值基本够用。5. 避坑与排查那些让项目跑不起来的常见问题5.1 跨域报错但代理已配现象浏览器控制台报Access-Control-Allow-Origin但vue.config.js里代理明明配了。原因通常是请求没走代理比如baseURL写成了完整地址http://localhost:8080浏览器直接跨域请求后端。解决baseURL用相对路径/api让请求先到前端开发服务器再转发。另外改完vue.config.js必须重启npm run serve热更新不会重载代理配置。5.2 后端启动报数据源或 Redis 连接失败现象启动时抛Communications link failure或Unable to connect to Redis。原因多是 MySQL 没启动、端口不对、密码错或 Redis 服务没开。解决先用mysql -uroot -p和redis-cli ping确认两个服务都能连再核对配置文件里的端口和密码。Redis 返回PONG才算正常。如果 Redis 设了密码配置里要加password项漏了会报NOAUTH。5.3 前端页面空白或接口 404现象页面能打开但一片空白或接口返回 404。原因可能是路由模式问题history 模式在开发服务器下刷新会 404改成 hash 模式或配 fallback也可能是接口路径多了或少了前缀。解决打开 Network 看实际请求 URL和后端 controller 的RequestMapping逐段比对。404 基本都是路径对不上把前端请求路径和后端映射贴一起看一眼就能发现。5.4 中文乱码现象页面显示的商品名是问号或乱码。原因可能在数据库字符集、连接 URL 或响应编码。解决建库用utf8mb4连接 URL 带characterEncodingutf8后端返回 JSON 时确认Content-Type是application/json;charsetUTF-8。三处都对了才不会乱码。MySQL 8 默认字符集已经是 utf8mb4老版本要手动设。5.5 修改代码后不生效现象改了后端代码重启没变化或改了前端页面刷新还是旧的。原因可能是 IDE 没重新编译、Maven 没重新打包或前端浏览器缓存。解决后端确认 target 目录里的 class 是新的必要时mvn clean前端硬刷新CtrlF5或禁用缓存。这类问题最没技术含量但最耗时间养成改完先确认编译产物的习惯。6. 把这套骨架改造成自己项目的方法跑通只是起点真正有价值的是把它改成你自己的东西。我的习惯是先做减法再做加法删掉用不上的模块比如原项目的秒杀、团购只留用户、商品、订单三条主线让代码量降下来自己完全掌控。然后按业务加功能每加一个功能都走一遍 controller→service→mapper→前端 api→views 的完整链路链路走顺了这套骨架就真成你的了。改造时有两个技巧值得记。一是接口先定契约再写实现用 Postman 或接口文档工具把请求参数、响应结构定死前后端并行开发不互相等。二是缓存键统一管理别在代码里到处硬编码字符串抽一个RedisKeyUtil类集中定义改键名时只改一处。改造方向具体做法注意点换主题改前端 views 和样式别动 api 层接口不变加支付新增 controller 和 service支付回调要验签、防重加搜索引入搜索引擎或优化 SQL数据量大再上搜索引擎部署上线前端打包丢 Nginx后端打 jar生产环境关掉开发代理验证改造是否成功别只看页面能点要压一压。用ab或wrk对商品列表接口打几百个并发看响应时间和错误率把 Redis 停掉看系统是降级查库还是直接崩这能暴露缓存逻辑的健壮性。我踩过最深的坑是缓存和数据库双写不一致后来统一成「先更库再删缓存」才稳定。这套骨架不难难的是每个细节都想到边界。希望帮到你。本文还有配套的精品资源点击获取