SpringBoot+Vue+MySQL水果商城源码部署与核心业务拆解

最近朋友甩给我一套飘香水果购物网站信息管理系统的源码说是SpringBoot 后端 Vue 前端 MySQL 三件套还特意标了可直接运行。我起初没太当回事——市面上的课设项目源码我看过太多十个里有八个缺数据库脚本剩下两个环境配置也是坑坑洼洼。但拿到手完整从零跑了一遍之后我决定把它拆开讲透这套项目麻雀虽小五脏俱全前台购物、后台管理、订单流转全都覆盖对想学前后端分离商城架构的人来说是一个性价比很高的参考模板。这篇文章会按我实际部署的顺序来写——环境怎么装、后端怎么起、前端怎么调、核心业务怎么实现、跑的过程中会踩到哪些坑每一步都会说清楚原因不只是给命令。1. 项目全貌这套水果商城源码里到底装了什么1.1 技术栈为什么是SpringBootVueMySQL这个组合先回答一个很多人拿到源码都会问的问题为什么这三样组合这么流行SpringBoot解决的是后端Java工程配置繁琐的问题。你去看老一点的SSH、SSM项目光配置文件就有一堆XML新手复制都能复制错。SpringBoot用自动配置把大部分样板代码收掉了约定优于配置一个main方法就能启动整个Web服务。对于商城这种业务逻辑不复杂的系统Controller→Service→Mapper的分层非常清晰看代码的人能很快定位到某个功能对应的实现。Vue解决的是页面复用和状态管理的问题。传统JSP/Thymeleaf那套是服务器端渲染前端写的代码和后端模板混在一起改个样式都费劲。Vue的单文件组件把HTML、CSS、JS放在一起商城首页、商品列表、购物车这些UI拆成组件之后改起来和搭积木差不多。MySQL则是这个组合里最没争议的部分。商城的数据其实是典型的读多写少结构用户浏览商品、看详情这些操作远多于下单和改库存。MySQL作为关系型数据库事务能力扎实部署简单索引优化文档又多用来承载这种中小规模商城的商品、用户、订单数据足够了。三样东西拼起来就是一条标准的前后端分离开发链路这也是现在培训班和学校课设里随处可见这个组合的根本原因。1.2 前台、管理端和数据层各做了什么这套系统我跑起来之后第一感觉是它的功能切口很克制没有塞一堆和水果无关的功能凑数。用户端核心就四件事注册登录手机号或用户名注册登录后才有购物车和下单的资格逛商品首页有轮播图和分类导流商品列表页支持按分类筛选详情页能看到价格、库存、销量和描述购物车操作加购、改数量、删除、多选结算下单和订单管理确认收货地址、提交订单、查看待发货/已发货/已完成的历史订单还支持取消订单。管理端对应着另一套权限界面管理员登录后进后台可以做商品上下架和增删改、维护分类比如热带水果时令水果进口果品、处理订单状态把待发货改成已发货、管理注册用户以及看一个简单的销售统计列表。数据层就是MySQL里的那些表。我先看过一遍表结构这套库设计得挺规整核心大概有六类用户表、分类表、商品表、购物车表、订单主表和订单明细表外加一张轮播图表。订单主表和明细表拆分是标准的主从表设计——一个订单对应多条明细每条明细记录当时下单的商品名称、快照价格和数量。这个拆法很关键因为商品价格后续会改但订单里的价格必须定格在下单那一刻不能跟着商品表变动。1.3 拿到的源码包应该是什么目录形态我打开源码压缩包第一习惯是看根目录下有没有README或数据库脚本其次看前后端两个子工程的位置。正常的形态应该类似下面这样fruit-shop/ ├── backend/ # SpringBoot后端工程 │ ├── src/main/java/com/shop/... │ ├── src/main/resources/ │ │ ├── application.yml │ │ └── mapper/*.xml │ └── pom.xml ├── frontend/ # Vue前端工程 │ ├── src/views/... │ ├── src/api/... │ ├── vue.config.js │ └── package.json └── sql/ └── fruit_shop.sql # 数据库初始化脚本如果你拿到的包不是这个形态比如前端文件直接在根目录下、后端却在子目录也没关系思路是一样——先把前后端两个工程分开识别出来再找sql脚本。sql脚本是整个项目能不能跑起来的第一前提没有它后面所有环境配置都是白做。2. 环境准备把SpringBootVueMySQL这套组合的地基打牢这章我按后端依赖→数据库→前端依赖的顺序讲。为什么要这个顺序因为后端的启动依赖数据库而前端的编译依赖Node两者之间没有强先后关系但先用后端把数据库打通联调时你才知道浏览器里报的错到底是前端的问题还是后端的问题。2.1 JDK与Maven版本匹配是第一道门槛这套源码如果用的是SpringBoot 2.x那JDK 8或JDK 11都能跑如果源码用的是SpringBoot 3.x那必须JDK 17起步。拿到的包怎么判断看后端pom.xml里的parent标签或者看spring-boot-starter-parent的版本号。2.7及以下是老规矩3.0以上直接换JDK 17别在JDK 8上死磕否则启动时会报UnsupportedClassVersionError或java.lang.UnsupportedOperationException这三个报错本质上都是JDK版本和框架版本不匹配。Maven方面我建议用3.6.3或3.8.x。下载后先别急着用先改一个文件conf/settings.xml把本地仓库地址和镜像配好。国内环境不换阿里云镜像的话第一次拉SpringBoot依赖能让你等到怀疑人生。在settings.xml里的mirrors标签下加上这段mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirrorIDEA里导入后端工程时记得在Settings → Build Tools → Maven里把Maven home path指向你本地解压的那个Maven目录然后勾选Always update snapshots等依赖下载完再看代码红波浪线基本会消失大半。这里有个新手几乎必踩的细节Maven默认JDK编译版本和项目要求的编译版本如果不一致启动时会报--release或source/target相关的编译错误。在pom.xml里确认java.version和maven.compiler.source是否一致很多时候直接改java.version1.8/java.version就能救回来。2.2 MySQL安装与数据库初始化数据库这块是整个部署过程中最容易出岔子的地方尤其对新手。我分开讲常见场景。场景一你机器上还没装MySQL。最省事的路径是去官网下MySQL Community Server。下载时注意选择MySQL Installer还是.zip免安装版。如果你遇到安装器报e0434352这类错误别纠结多半是系统缺少.NET Framework运行时或者安装缓存损坏。要么装一下对应的.NET运行时再重试要么干脆用zip免安装版解压后在bin目录下执行mysqld --initialize-insecure再mysqld --console启动用无密码root登录后自己ALTER USER设置密码绕开安装器的问题。提示导入SQL前先在客户端里确认一下脚本开头有没有CREATE DATABASE语句。有的脚本自带建库语句直接整体执行即可有的脚本只包含建表语句必须手动先建好库否则会报 No database selected。场景二已经装了MySQL但是版本差异导致连接报错。这套源码如果是基于MySQL 5.7写的驱动用的mysql-connector-java 5.1.x连MySQL 8.0时会因为认证插件和SSL问题报错常见的是Public Key Retrieval is not allowed或者Communications link failure。解决方法有两个第一个是在jdbc url上加参数url: jdbc:mysql://localhost:3306/fruit_shop?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue第二个是把驱动升级到mysql-connector-java 8.0.xSpringBoot 2.x里也可以直接用mysql-connector-j。我个人的建议如果后端代码里连Class.forName(com.mysql.jdbc.Driver)这种写法都出现了说明项目偏老直接用老驱动 MySQL 5.7更省心如果代码里已经是com.mysql.cj.jdbc.Driver那就是按MySQL 8.0配的。数据库初始化很多人纸上谈兵觉得有手就行实际导入时却栽跟头。新建一个数据库名字跟你后端配置里的库名一致比如fruit_shop字符集选utf8mb4别选utf8emoji和某些生僻字会存不进去然后导入sql脚本。命令行导入用mysql -uroot -p fruit_shop fruit_shop.sql用Navicat的话右键数据库 → 运行SQL文件。导入完检查一下表数量比如看到user、category、product、cart、order、order_item这些表都建出来了数据里有admin账号、轮播图和若干测试商品就说明脚本执行干净了。2.3 Node与Vue CLI前端环境前端部分相对独立装好Node.js和npm就行。这里有一个版本匹配的问题非常值得注意Vue CLI 4/5对应Node 12以上都能跑但如果你用的是那些带node-sass的老前端工程Node版本太高会直接编译失败报错是典型的Node Sass could not find a binding或gyp ERR!。看到这类报错别去硬调代码先看package.json里有没有sass-loader和node-sass。如果有最稳的做法是换一个大版本匹配的Node。一般规律是node-sass 4.x配Node 14node-sass 6.x配Node 16。前端工程能不用node-sass就别用这个依赖是Windows用户的心病。npm换淘宝源这一步我每次都建议先做装依赖的速度完全不是一个级别npm config set registry https://registry.npmmirror.com然后在前端工程目录下执行npm install依赖装完后先跑一下npm run serve如果浏览器能弹出页面通常默认8080端口前端环境就算通了。2.4 数据库脚本导入后的自检清单导入sql后不要急着启动后端先花两分钟自查能省掉后面大量排错时间库名是否与application.yml中配置的数据库名完全一致账号密码是否与配置中的username/password一致注意如果脚本是给root用户建的而配置里写的是另一个用户连接必失败排查表前缀。有的项目表名统一带t_前缀t_user、t_product有的不带。你看sql文件里的建表语句和你后端entity里TableName注解是否对得上Mapper里的SQL如果带表名也要瞄一眼确认时间字段。有些老项目字段类型是datetime有些是timestamp这影响不大但serverTimezoneAsia/Shanghai这个参数最好加上否则启动后端时十有八九会报时区相关错误。这段自检经验是我跑了好几套商城源码后总结出来的数据库层面的错误往往不会第一时间报数据库不对而是报Table xxx.xxx doesnt exist或者Unknown column这时候回头看表结构和配置比瞎改代码高效得多。3. 后端启动实录从配置文件到接口调通3.1 下手前读懂三个配置文件环境就绪后第一次启动后端不要直接点运行先把配置文件过一遍。这套项目的配置集中在src/main/resources/application.yml有的工程叫application.properties最需要关注三个位置。第一个是服务端口。默认一般写8081或8080。如果前端工程的代理目标端口跟它不一致就会出现前端能打开页面但浏览器网络面板里所有请求都是404的现象。两个工程的口径必须提前对齐。第二个是数据源。我在上一章已经给了完整的jdbc url示例这里再强调一个容易被忽略的点如果项目同时配置了Druid或别的连接池用户名密码可能不是直接写在spring.datasource下而是套了一层连接池的配置前缀。你改的时候要看清楚最外层的key是spring.datasource还是druid别改错层级。第三个是MyBatis的mapper配置。典型配置长这样mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.shop.entity configuration: map-underscore-to-camel-case: truemap-underscore-to-camel-case这个配置如果缺少数据库的order_no映射到Java的orderNo就会为null后续业务会莫名报错。看到这种数据库有值Java取出来是null的诡异问题先查这一项。还有一个容易被忽略的点是日志级别。把logging.level.com.shop.mapperdebug加上启动后能直接看到每次执行SQL拼出来的完整语句联调阶段排查数据问题就靠它。3.2 启动与第一次验证看到这个日志才算成功配置改完在IDEA里找到启动类通常叫ShopApplication或FruitShopApplication右键运行。启动成功的标志不是编译通过而是控制台出现一行类似Started ... Application in x.xxx seconds或者Tomcat启动端口的消息。只要看到这个说明Spring容器初始化完毕、数据源连接成功——数据源连接失败会在启动阶段直接报错根本走不到这一步。接下来验证接口。大多数这种项目都会集成Swagger启动后访问http://localhost:8081/swagger-ui.html如果SpringBoot 2.6以上版本Swagger地址往往是/swagger-ui/index.html。能看到接口文档列表就可以从这里直接发起请求做冒烟测试先调登录接口拿token再带着token调商品列表确认后端这一侧没有任何问题。没有Swagger也不影响直接用浏览器访问后端的接口路径也可以。比如GET http://localhost:8081/api/product/list如果返回JSON数据数组就说明Controller、Service、Mapper、数据库整条链路已经打通了。3.3 启动失败的五个高频坑及对症方案这一节我列一个自己反复见到的报错清单每个都给直接可用的对策都是真实跑项目中碰到过的。报错特征根因解决方案Port 8081 was already in use端口被其他进程占用改配置文件端口或netstat -ano | findstr 8081找到PID后结束进程Unknown database fruit_shop数据库不存在先去MySQL里创建库再找sql脚本导入Access denied for user rootlocalhost账号密码不匹配核对配置里的用户名密码MySQL密码不对就重置后再跑The server time zone value ... is unrecognizedjdbc url缺时区参数url加上serverTimezoneAsia/ShanghaiCause: java.sql.SQLSyntaxErrorException: Table ... doesnt exist表名对不上查实体类/XML里的表名和数据库实际表名对比注意前缀和大小写除开表格里的情况还有一个特别隐蔽的坑如果项目里用了LombokIDEA必须装Lombok插件并且开启Annotation ProcessingSettings → Build → Compiler → Annotation Processors → Enable annotation processing不然后端启动时可能因为log.info这类自动生成的getter/setter报编译错误。这种问题你光看报错会非常懵因为报错指向的是你代码里不存在的那几行排查方向很容易跑偏。4. 前端跑通依赖安装、代理配置与前后端联调4.1 npm install时最折磨人的几个问题前端环境准备阶段我通常会先看package.json里的依赖清单。如果是经典的vue2 element-ui axios vuex组合那还算温和。最怕的是遇到node-sass和sass-loader组合。这个组合在Windows上的坑是结构性的它需要本地编译原生模块而编译工具链不是人人都有装不上就直接报错。解决思路有三个按顺位来改用sass代替node-sass在package.json里把node-sass那行删掉安装sass也就是dart-sass然后把sass-loader版本调整到^10或^12。代码里原本的import语法可能需要微调但整体兼容性还不错。如果不想换就按Node版本来node-sass4.14.1配node14实测基本能装上。终极方案用npm install --registryhttps://registry.npmmirror.com单独装一次node-sass走国内源里的二进制镜像比GitHub源稳定很多。另外一个很常见的问题是npm版本太新和项目的package-lock.json锁版本不一致导致npm install报ERESOLVE。这种情况两个选择删除package-lock.json和node_modules重新装或者改用npm install --legacy-peer-deps。我一般推荐后者保留已有锁文件可以减少不必要的版本漂移。4.2 vue.config.js里必须配好的代理转发前后端联调绕不开跨域。后端如果已经开了CORS前端直接写http://localhost:8081/api/xxx也能通。但更规范、更贴近生产环境的做法是前端所有请求都走相对路径/api由Vue脚手架把请求代理到后端端口。这样做的好处是将来部署到线上时你只需要把代理目标改成线上域名前端代码一行都不用动。vue.config.js里的典型结构module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } } };前端src/api/request.js里一般还会创建axios实例设置baseURL: /api。这样就形成了一个完整的请求链路浏览器 → 前端8080 → 代理 → 后端8081。联调时万一发现请求到达后端但后端返回404第一反应不是去后端加路由而是看后端接口的RequestMapping是不是也带了/api前缀。如果后端本身就配置了server.servlet.context-path: /api那前端代理到http://localhost:8081之后又叠加了一层/api请求路径就变成了/api/api/xxx自然404。这种重复前缀问题我在好几个项目里都见过排查技巧很简单直接在浏览器地址栏访问后端的完整路径能通就说明代理配置本身没问题问题出在前缀叠加上。4.3 前端页面与后端API的映射关系为了帮大家建立页面→接口的全局观我把这套系统里最常见的对应关系列出来联调时按图索骥前端操作位置后端接口说明登录页POST /api/user/login返回token和用户信息注册页POST /api/user/register创建用户首页轮播图GET /api/banner/list轮播数据商品列表页GET /api/product/list?categoryIdpageNum带分类筛选和分页商品详情页GET /api/product/detail/{id}单个商品完整字段购物车GET/POST/PUT/DELETE /api/cart/...购物车增删改查提交订单POST /api/order/submit生成订单和订单明细后台商品管理POST /api/admin/product/save管理员新增/编辑商品这套映射关系本身并不复杂但理解它有一个实际收益当你发现某个页面功能报错时可以快速定位是前端组件的问题还是后端接口的问题而不是从首页开始一页页点过去。4.4 跑通后怎么验证前后端是真实联通的我见过有人感觉跑通了前端实际上一刷新页面就崩或者列表数据全是空。标准验证方法其实很快打开浏览器开发者工具F12切到Network面板刷新页面看有没有发送/api/product/list这个请求点开请求看Response正常是一个包含商品对象的JSON数组再切到Console面板看有没有报红色的跨域或404错误。如果Network面板里压根没有发出请求那就是前端组件在渲染时出了问题比如数据还没加载就调用了数组的length控制台多半会有Cannot read properties of undefined的报错。如果请求发出来了但Response是错误页面那问题在后端。前后端分离调试的核心原则就一句话先确认请求发出去了再确认请求回来了最后看返回的数据和页面渲染是否一致。5. 核心业务实现拆解商城系统最值钱的几块逻辑5.1 用户登录与Token校验的完整姿势这套系统的登录我看了下是典型的登录成功后前端保存凭证后续请求带着凭证走的流程。具体逻辑是用户提交手机号/用户名和密码后端校验通过后签发一个token返回前端把它存到localStorage或vuex里每次axios请求前在拦截器里加Authorization: Bearer token后端通过拦截器或AOP校验这个token是否有效、是否过期。这里面有一个关键问题校验token的过滤器拦截了哪些路径。看这套项目的时候重点看两个地方。一个是前端vue-router的路由守卫通常长这样router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next(/login); } else { next(); } });另一个是后端拦截器/过滤器里用的excludePathPatterns或permitAll配置白名单一般是登录、注册、商品列表这类不需要登录态的接口。为什么强调这个点因为很多同学改项目时新加了一个接口路径但忘记加入白名单前端带不带token都一样后端一拦截就全部宣告失败这会浪费大量调试时间。登录密码这块多数课设项目用的MD5加不加盐都有。我的态度是学习阶段看明白流程即可但如果你要把它改成真实上线的系统密码存储务必换成BCryptPasswordEncoderSpring Security里自带实现成本极低安全收益是数量级的提升。5.2 商品与图片从上传到回显的完整链路商城系统的商品模块有个容易让人绕晕的地方图片的存储与回显。在这套源码里我印象比较深的处理方式是商品表里存的是图片的访问路径比如/upload/xxx.jpg而不是把图片二进制塞进数据库。这样做的原因很朴素数据库只存元数据图片文件放在本地磁盘或对象存储服务上访问时通过URL直接读读取效率和扩展性都远超BLOB字段。后端的文件上传接口把收到的MultipartFile写到本地某个目录比如项目根目录下的upload/或配置的绝对路径然后返回相对路径。回显时要用一个虚拟目录映射把物理路径暴露出去SpringBoot里的写法是Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); } }这个写法网上搜springboot 文件上传 虚拟路径映射能搜到一大堆因为太常用了。但实际跑项目时我遇到的一个坑是用file:前缀时要特别注意末尾斜杠写file:D:/upload和file:D:/upload/语义是有差别的少写斜杠可能导致路径拼接错乱。另外Windows路径分隔符和Linux不同如果你是在Windows上开发、将来部署到Linux上传目录最好在配置里统一管理不要硬编码。如果你有接入MinIO或云OSS的打算把本地存储替换成对象存储也不算难上传接口里把写磁盘改成调用SDK回显的路径改成对象存储的URL即可。5.3 购物车与订单状态机数据一致性的关键购物车表相对简单核心字段就是用户ID、商品ID、数量、是否勾选。但要做到正确有一个很容易忽略的问题购物车里商品的数量不能超过后台库存。加购时后端要查一次库存如果库存是0要么直接提示已售罄要么在加入时把数量钳制到库存上限。否则用户下单到一半才发现库存不足体验非常割裂。订单模块是这套系统里最有技术含量的地方。先看状态字段一般用一个整型表示状态例如0待支付 1已支付/待发货 2已发货/配送中 3已完成 4已取消前端页面根据状态码渲染不同按钮组后端在改变状态时只允许合法流转比如已取消的订单不能直接跳到已完成待发货状态下才能触发发货操作。这套状态机逻辑虽然简单但你去观察真实电商项目会发现它们也差不多只是状态拆得更细。订单提交的后端流程值得细说先校验用户传的商品列表和数量是否合法再重新计算总价不要信任前端传过来的总价然后扣减库存生成订单主记录再批量生成订单明细最后清空购物车对应商品。这几个步骤放在一个Transactional事务里任何一步失败都会整体回滚。扣库存那一步好的写法是用一条带条件更新的SQLUPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity}这条SQL的妙处在于如果库存不足影响行数是0程序拿到这个结果就能立刻抛出异常回滚不需要先查再写天然防止了超卖。这个条件更新行数判断的思路在小型商城项目里并发不高时够用了也是我建议读者一定要吃透的底层逻辑。5.4 后台管理统计报表与权限校验后台管理的难点从来不是CRUD而是权限校验和数据口径。商品管理的增删改查只是重复的接口代码真正的门槛在于一个普通用户能不能调后台接口如果后端接口只是写了个名字叫admin的Controller而没有实际的权限校验那后台就等于摆设。我看这套源码时特意确认过拦截器配置管理员接口必须要求登录且角色为admin。前端则通过登录时返回的role字段决定路由菜单的展示在router.beforeEach里对后台路由做二次校验。前后端双重控制才算是靠谱的权限模型。数据统计那部分常见实现是查询订单明细表后按商品ID分组汇总销量再配合前端的ECharts画柱状图或饼图。这里有个真实业务中的口径细节统计销量应该从订单明细的quantity字段聚合而不是数订单主表里的订单数而且因为订单明细表里包含历史价格和历史商品名聚合出来的数字不会因为商品后来改了名或价格而变。这个细节能体现开发者是否理解主从表模式下明细表的快照价值。6. 交付与扩展把这套源码变成你自己的项目6.1 重新换皮从飘香水果改成你自己的店名很多同学拿这套源码去做课程设计最在意的就是别让老师一眼看出是网上的。其实换皮成本很低核心做四件事改前端标题和Logo全局搜索飘香一般分布在首页导航栏、登录页标题、浏览器document.title这几处逐个替换即可改数据库名把fruit_shop改成你自己的库名同步更新application.yml导入sql脚本时用新库名改后端包名这个稍微费点劲IDEA里右键根包名 → Refactor → Rename连锁改包名后要重新mvn clean确保编译通过改初始数据把sql里的管理员账号、测试商品、轮播图URL替换成自己的数据。图片的话把新的图片文件放到上传目录数据库里对应字段改成相对路径即可。做完这四步从外观到数据层面它已经是你的项目了。但如果老师问到某个功能实现原理还是得能说清楚这也是我前面几章把核心业务逻辑摊开讲的原因。6.2 如果拿到的是jar包版本而不是完整源码这个场景太常见了尤其从某些网盘下载的资源辛辛苦苦下载完发现只有一个可执行的jar包没有src源码。很多同学就慌了。其实SpringBoot的jar包是可以反编译阅读的因为里面全是编译后的.class文件而class文件保留了大量的代码结构信息。我处理过几次这种情况路径是这样直接用IDEA打开jar包IDEA内置的反编译器FernFlower会把每个class反编译成可以阅读的.java文件。但IDEA里直接看适合读代码学思路不太适合还原成可编译工程。要还原成完整工程可以借助CFR或JD-GUI把整个jar包反编译出来得到一套java文件然后手动搭Maven结构把反编译的com/xxx/...下的java文件放回src/main/java把jar里的application.yml、mapper/*.xml等resources放回src/main/resources根据jar里的依赖列表在pom.xml里补全SpringBoot、MyBatis、MySQL驱动的坐标。这个方案能还原出可阅读、可改动的工程但反编译的代码里不会有注释泛型信息也可能丢失部分只适合拿来学习框架结构和业务逻辑不适合直接原样上线。我的建议是把反编译产物当源码阅读器用重点看Controller的路由、Service里的业务判断和Mapper里的SQL看懂之后自己重写一遍既练手也尊重原作者。6.3 往后走你可以加的扩展方向如果你不满足于能跑想把这套系统做得更像一个生产级项目我会按优先级排序给三条扩展路线。第一优先级是缓存与性能给商品列表和首页数据加一层Redis缓存热点接口直接从缓存读同时用CacheEvict在商品修改时清缓存。这个改动对并发提升立竿见影而且以后面试聊起来也有内容。第二优先级是文件存储升级把本地磁盘存储替换成MinIO或云OSS好处是图片不再占用应用服务器磁盘部署到云上时也不怕文件丢失。替换逻辑我在5.2节已经埋了伏笔核心就是换上传实现和URL生成方式Controller层的接口签名完全不用变。第三优先级是部署上云本地npm run build打包前端产物把dist里的静态文件配给Nginx后端mvn clean package -DskipTests打成jar包用systemd或容器跑起来MySQL单独一个实例。这样一个Nginx jar MySQL的生产架构就成型了加上域名和HTTPS证书就是一个能给别人用的完整站点。这三条路线我每一条都试过难度是递增的但收益也是递增的。如果你时间有限我建议先做第一优先级因为它的成就感来得最快你给原本秒开的接口加完缓存还能顺便观察到请求耗时的变化这种看得见变快的体验是学习阶段最好的正向反馈。我折腾完这套飘香水果商城源码最大的感受不是SpringBoot和Vue本身有多难而是完整链路这个词的重量。一个功能从数据库字段设计开始穿过后端Service再落到前端页面渲染中间要处理参数命名、状态码、权限校验、异常提示——任何一环脱节用户看到的就是一个莫名其妙的白屏或报错。这套源码之所以让我愿意花时间把它彻底跑通是因为它把所有环节都串起来了而且串得足够清晰。如果你也是那种教程看了不少、完整项目没跑过几个的状态我真的建议你找一个这样的全栈商城源码从环境装起一步步把它跑起来再试着改改业务逻辑这比盲目刷视频有用得多。过程中遇到什么问题欢迎留言一起聊。