1. 项目定位这套系统到底什么水平每年到了毕设答辩季我后台收到最多的私信就是“有没有适合做毕设的项目推荐”。这套 SpringBoot Vue 的乐享田园系统管理平台算是这类需求里非常标准的答案后端走 Java SpringBoot 提供接口前端用 Vue 搭页面数据全部落在 MySQL 里整体是一个围绕田园认养、菜地租种、农产品订购业务场景的管理平台。单从名字就能看出来平台分成用户端和管理端两大块用户端负责浏览、认养、下单、查订单管理端负责维护菜地、商品、订单和做数据统计业务链路完整技术栈也主流拿来当毕业设计、课程设计或者日常练手都是很稳的选择。我之所以愿意专门写一篇长文来讲它是因为这套系统踩中了现在高校项目验收的几个核心诉求一是前后端分离符合当下企业主流开发模式答辩的时候有东西可讲二是业务模型不复杂不需要高深算法但又能把增删改查、登录鉴权、分页搜索、订单状态流转这些基本功全覆盖三是扩展性不错做完基础版本之后想加点功能写在论文里也顺手比如接个微信小程序端、加个消息通知、做个报表导出之类。下面我就从项目拆解、技术选型、模块设计、实操运行到踩坑记录完整把这套系统讲透。2. 技术选型与架构设计思路2.1 为什么坚持选 SpringBoot Vue 前后端分离现在很多教学项目还停留在 Spring MVC Thymeleaf 的传统单体模式不是说不能做而是从学习价值和答辩效果两个角度看前后端分离明显更占优势。SpringBoot 负责后端 RESTful API 的编写和发布Vue 负责前端页面渲染和交互两边通过 JSON 数据通信这正好是企业里最主流的开发协作方式。你想想答辩的时候老师问你“你这个系统的架构是什么”你能说出“前端 Vue 通过 Axios 调用后端 SpringBoot 接口服务端只负责数据处理不关心页面渲染”这一个回答就能展示你对前后端分离架构的理解比一句“用了 SSM 框架”有说服力得多。从开发体验上看前后端分离也舒服得多。前端开发阶段直接跑npm run serve起一个开发服务器通过代理把/api开头的请求转发到后端的 8080 端口不用每次改动页面都重启 Java 进程等开发完了再用npm run build把前端打成静态文件要么扔给 Nginx 托管要么直接拷贝进 SpringBoot 的resources/static目录由后端统一提供服务。这套开发到部署的完整流程本身就是一门值得练手的技术活。2.2 MySQL 表设计的核心思路乐享田园这种业务系统的数据库设计核心是围绕“用户-场地-商品-订单”四个实体展开。我见过很多学生一上来就堆字段一张表几十个列看起来很全面实际上冗余和混乱得很。合理的做法是拆成这几张核心表用户表sys_user主键、用户名、密码、昵称、手机号、角色标识、头像、创建时间、逻辑删除标记。菜地表t_land主键、菜地名称、位置描述、面积、认养价格、是否可租、状态、封面图、简介。农产品表t_product主键、产品名称、分类、单价、库存、上下架状态、图片、规格描述。订单表t_order主键、订单编号、用户ID、菜地/商品ID、数量、金额、支付状态、订单状态、创建时间、支付时间。细节上有几个经验值得强调。第一用户表的用户名和手机号建议加唯一索引防止重复注册这也是一个很好的答辩点。第二金额字段一律用decimal(10,2)别用double或者float否则结算累计误差会把你坑哭。第三每张业务表都建议加deleted字段做逻辑删除而不是物理DELETE这样既能保留历史数据又方便在管理端做回收站功能。第四订单编号别用数据库自增 ID 直接展示建议用时间戳加随机数生成业务编号比如20250607153012 四位随机码这样更接近真实项目的做法。2.3 中间件与可选的增强能力基础版系统只需要 SpringBoot、Vue、MySQL 三件套就能跑起来但想让项目在评分上更亮眼可以适当加一点中间件。最常见的是引入 Redis 做缓存把用户登录后的 Token、首页的热门菜地、商品分类这类不经常变化的数据放进去既能减少数据库压力又能在论文里写“基于 Redis 的缓存设计”。另外一个值得加的是文件上传菜地和商品都需要图片本地磁盘存储做一个上传接口就够了不要一开始就上云存储徒增学习成本。支付模块不建议真的对接微信支付宝审核成本和安全性都太复杂做一个模拟支付接口就行用户提交订单后订单状态变为“待支付”点击支付按钮时后端校验金额并把状态改为“已支付”或“已完成”。完整模拟真实支付的状态流转又不碰真实资金属于毕设里最聪明的做法。3. 核心模块拆解与实现要点3.1 登录认证与权限控制用户登录是系统第一个要做的模块也是答辩时老师最可能追问的地方。现在主流方案是用 JWTJSON Web Token做无状态认证用户登录成功后后端生成一串包含用户 ID 和角色的 Token 返回给前端前端存到 localStorage 或 SessionStorage 里后续每次请求都在请求头带上Authorization: Bearer token后端通过拦截器解析 Token 识别用户身份。权限控制要区分普通用户和管理员。普通用户只能访问用户端接口比如浏览菜地、下单、查自己的订单管理员才能调用后台管理接口比如新增菜地、处理订单、查看统计数据。实现上不需要直接上 Spring Security一个自定义拦截器加角色判断就够了写一个AuthInterceptor在preHandle方法里解析 Token再校验对应用户的角色是否匹配接口要求的权限不匹配就直接返回 401。这里有个新手特别容易踩的坑拦截器一定要把登录接口、注册接口、静态资源路径放行掉否则前端登录页面连验证码都刷不出来你排查半天也不知道是哪里拦的。3.2 田园菜地与商品管理模块菜地管理是乐享田园这个项目区别于普通电商系统的特色模块。用户端的核心操作是浏览菜地列表、查看菜地详情、选择认养时长和数量管理端的核心操作是新增菜地、编辑菜地信息、上下架、查看认养记录。这个模块写起来不难但要注意几个细节。分页查询建议用 MyBatis-Plus 提供的Page对象配合LambdaQueryWrapper做条件构造比如按菜地名称模糊搜索、按认养价格区间筛选、按状态过滤这样代码干净逻辑也清楚答辩演示时搜一个关键词马上出结果加分很明显。上下架功能别用删除代替用状态字段控制即可同时确保下架后用户不能再下单购买。图片上传要做格式和大小校验常见的做法是只允许 jpg、png、webp单张不超过 2MB上传后返回一个相对路径存到数据库里前端用这个路径拼接访问地址。3.3 订单模块与状态流转订单模块是整个系统里最有业务含量的地方建议重点下功夫。乐享田园的订单流程可以设计为用户选择菜地或农产品 - 提交订单 - 生成待支付订单 - 模拟支付 - 状态变为已支付/待处理 - 管理员确认 - 状态变为已完成 - 用户确认收货或系统自动完成。整个流程其实就是一张订单状态表状态含义触发操作0待支付用户提交订单后初始状态1已支付用户点击模拟支付校验金额后更新2已完成管理员确认处理或自动流转3已取消待支付状态下用户主动取消或超时未支付写这块时有两个坑值得提前预防。一个是防止重复下单用户在待支付状态下反复点击提交按钮可能会生成多条垃圾订单前端要做按钮 loading 禁用后端也要在生成订单的逻辑里做幂等校验最简单的方法是同一个用户在短时间内对同一个菜地的未支付订单不能重复创建。另一个坑是金额计算订单金额必须在后端重新计算绝不能信任前端传过来的总价否则用户改一下请求参数就能用 0.01 元下单这在答辩演示时不一定会被发现但在安全性审查时是致命伤。3.4 数据统计与图表展示管理端一般需要一个 Dashboard 首页用来展示平台整体的运营数据。这块建议引入 ECharts 做可视化统计对象可以包括近 7 日/30 日订单数量和销售额趋势、热门菜地和商品 TOP10、订单状态分布占比、用户增长曲线等。SQL 层面主要就是GROUP BY加时间函数按天聚合订单数据后端返回一个列表前端用折线图、柱状图、饼图分别渲染。这个模块技术难度不高但非常提分因为绝大多数学生的毕业设计首页只有表格你放一个带图表的 Dashboard 上去视觉上和功能上都高出一截。图表数据接口注意一下时区问题后端返回给前端的时间字段建议统一格式化成字符串前端不要自己再对时间戳做复杂转换省掉一堆显示错乱的麻烦。4. 实操实录从零把项目跑起来4.1 环境准备与版本选型工欲善其事必先利其器环境版本不对后面全是泪。以这套 SpringBoot Vue 项目为例推荐环境组合是JDK 1.8 或 11、Maven 3.6 以上、Node.js 14 以上、MySQL 5.7 或 8.0、开发工具用 IDEA后端加 VSCode前端或者直接用 IDEA 旗舰版也能一把梭。有个点容易被忽略Maven 的settings.xml一定要配置阿里云镜像否则在国内网络环境下下载依赖会慢到怀疑人生。配置方式是在镜像节点里加入阿里云的maven.aliyun.com/nexus/content/groups/public仓库地址然后删掉本地仓库里的.lastUpdated结尾的失败文件再重新拉取。Node 这边也同样建议把 npm 镜像切换到淘宝源npm config set registry https://registry.npmmirror.com一条命令就能解决。4.2 数据库导入与连接配置拿到源码以后第一步不是打开 IDEA而是先把数据库导入。一般在项目的sql目录下能找到初始化脚本用 Navicat 或者命令行执行整个.sql文件执行成功后检查一下表是否齐全重点看用户表、菜地表、订单表是否自动插入了一些演示数据。没有演示数据的要自己补几条不然前端页面打开空空荡荡效果很尴尬。连接配置在application.yml文件里核心是数据源这一段。给出一个标准的配置参考server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/le_xiang_tian_yuan?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver如果你的 MySQL 是 5.7驱动类名也可以正常使用com.mysql.cj.jdbc.Driver但如果你用的驱动版本太老就要改回com.mysql.jdbc.Driver。另外数据库名字要跟脚本里创建的一致我见过太多人栽在“库名对不上”这个低级错误上。还有一个高频问题是时区报错连接串里必须带上serverTimezoneAsia/Shanghai否则启动时会报 CST 时区无法识别的异常。4.3 后端启动步骤与参数调整后端启动分两种方式。第一种是在 IDEA 里直接把项目导入等待 Maven 依赖下载完找到启动类一般是Application结尾的类右键 Run 即可。第二种是命令行方式在项目根目录执行mvn clean package -DskipTests java -jar target/你的项目名-0.0.1-SNAPSHOT.jar启动之后控制台如果出现 “Started ... in x seconds” 的日志就说明后端已经起来了。这时候强烈建议先用浏览器访问一个简单的接口验证比如http://localhost:8080/api/health或者其他公开接口确认能返回 JSON 再去做前端联调避免后面排查问题时前后端互相甩锅。如果启动时出现端口被占用去application.yml里把server.port改成 8081 或者其他空闲端口即可。4.4 前端启动与打包部署前端项目一般在frontend或vue-web目录下打开终端依次执行npm install npm run serve等到控制台出现Local: http://localhost:8081类似的提示说明前端开发服务器已经跑起来了。这时候打开浏览器访问前端地址页面应该能加载出来但你直接点击登录大概率会报跨域错误因为前端在 8081 端口后端在 8080 端口。解决方式有两种推荐先在前端项目根目录创建.env.development文件设置 API 基础路径为/api然后在vue.config.js里配一个代理devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这样前端请求/api/login时开发服务器会自动帮它转发到http://localhost:8080/api/login绕过跨域限制。等整个项目调试完毕要部署的时候执行npm run build前端会生成一个dist目录把里面的文件拷到后端src/main/resources/static下再重新打包启动后端浏览器直接访问 8080 端口就能看到整个系统一个端口搞定非常适合在演示环境里跑。5. 高频问题与排查技巧实录5.1 跨域问题怎么彻底解决跨域是前后端分离项目里出现频率最高的报错表现形式是浏览器控制台出现CORS policy字样请求发不出去。前面讲的开发环境代理只能解决本地联调如果你直接把前端dist放到独立服务器上跨域还是会出现。后端的兜底方案是加一个全局 CORS 配置类允许所有来源的跨域请求Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }注意如果设置了setAllowCredentials(true)那么addAllowedOrigin不能随便写*要用addAllowedOriginPattern(*)否则请求还是会报错。这个坑我当年排查了整整一下午分享出来帮大家少走弯路。5.2 MySQL 连接与 SSL 报错用 MySQL 8.0 的时候启动后端经常报这么一串错误Public Key Retrieval is not allowed或者 SSL 连接相关警告。解决方案是在 JDBC 连接串里加上两个参数url: jdbc:mysql://localhost:3306/le_xiang_tian_yuan?useSSLfalseallowPublicKeyRetrievaltrueserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue是针对 MySQL 8.0 的缓存 SHA2 加密插件设置的很多老项目的连接串都是从 5.7 时代抄来的没这个参数启动就报错。如果你用的 MySQL 是 5.7可以不加但加上也无伤大雅。5.3 Vue 打包进 SpringBoot 之后刷新 404前端路由默认用的是 history 模式路径是/lands、/orders这种看起来是挺干净但直接打包放进后端以后用户点击链接进来没问题一按浏览器刷新就 404因为后端根本没有匹配这个路径的接口。应对办法有两个最简单的方案是把 Vue 路由改成 hash 模式路径变成/#/lands点击和刷新都能正常访问如果要坚持 history 模式就得在后端加一个路径回退配置把所有非接口的请求都转发到index.html这相对复杂一些。对于毕设项目我强烈推荐直接用 hash 模式省事且稳定。5.4 端口占用与启动失败的排查思路后端端口被占用是最经典的启动失败案例。Windows 下执行netstat -ano | findstr 8080找到占用进程的 PID再去任务管理器结束进程或者直接换后端端口。前端 8081 被占用同理改vue.config.js的port选项。还有一种情况是后端启动过程中报错提示无法连接数据库这种九成是 MySQL 服务没开或者数据库名、账号密码写错了按顺序先从最简单的数据库密码查起排查效率最高。个人经验收尾这套系统我自己在本地完整跑通过一遍也看着不少学生用它完成了答辩。最后想分享一点体会拿到一套源码别急着改需求先把它原封不动跑起来把登录、下单、后台管理整个流程走一遍理解每张表跟每个页面的对应关系然后再动手改。答辩时老师最看重的是“你对自己的项目是否真正理解”你哪怕只改了一个小功能能现场讲清楚为什么这么改、影响到哪些表哪些接口这个答辩基本就稳了。另外这套系统扩展空间很大我建议你日后可以试着加一个微信小程序端或者把模拟支付换成真实对接的沙箱环境这样整篇论文的技术深度又会往上走一个台阶。 
长河君 · 2026/10/6 14:09:07 · 阅读 1.2k SpringBoot+Vue前后端分离的田园认养系统设计与实现
1. 项目定位这套系统到底什么水平每年到了毕设答辩季我后台收到最多的私信就是“有没有适合做毕设的项目推荐”。这套 SpringBoot Vue 的乐享田园系统管理平台算是这类需求里非常标准的答案后端走 Java SpringBoot 提供接口前端用 Vue 搭页面数据全部落在 MySQL 里整体是一个围绕田园认养、菜地租种、农产品订购业务场景的管理平台。单从名字就能看出来平台分成用户端和管理端两大块用户端负责浏览、认养、下单、查订单管理端负责维护菜地、商品、订单和做数据统计业务链路完整技术栈也主流拿来当毕业设计、课程设计或者日常练手都是很稳的选择。我之所以愿意专门写一篇长文来讲它是因为这套系统踩中了现在高校项目验收的几个核心诉求一是前后端分离符合当下企业主流开发模式答辩的时候有东西可讲二是业务模型不复杂不需要高深算法但又能把增删改查、登录鉴权、分页搜索、订单状态流转这些基本功全覆盖三是扩展性不错做完基础版本之后想加点功能写在论文里也顺手比如接个微信小程序端、加个消息通知、做个报表导出之类。下面我就从项目拆解、技术选型、模块设计、实操运行到踩坑记录完整把这套系统讲透。2. 技术选型与架构设计思路2.1 为什么坚持选 SpringBoot Vue 前后端分离现在很多教学项目还停留在 Spring MVC Thymeleaf 的传统单体模式不是说不能做而是从学习价值和答辩效果两个角度看前后端分离明显更占优势。SpringBoot 负责后端 RESTful API 的编写和发布Vue 负责前端页面渲染和交互两边通过 JSON 数据通信这正好是企业里最主流的开发协作方式。你想想答辩的时候老师问你“你这个系统的架构是什么”你能说出“前端 Vue 通过 Axios 调用后端 SpringBoot 接口服务端只负责数据处理不关心页面渲染”这一个回答就能展示你对前后端分离架构的理解比一句“用了 SSM 框架”有说服力得多。从开发体验上看前后端分离也舒服得多。前端开发阶段直接跑npm run serve起一个开发服务器通过代理把/api开头的请求转发到后端的 8080 端口不用每次改动页面都重启 Java 进程等开发完了再用npm run build把前端打成静态文件要么扔给 Nginx 托管要么直接拷贝进 SpringBoot 的resources/static目录由后端统一提供服务。这套开发到部署的完整流程本身就是一门值得练手的技术活。2.2 MySQL 表设计的核心思路乐享田园这种业务系统的数据库设计核心是围绕“用户-场地-商品-订单”四个实体展开。我见过很多学生一上来就堆字段一张表几十个列看起来很全面实际上冗余和混乱得很。合理的做法是拆成这几张核心表用户表sys_user主键、用户名、密码、昵称、手机号、角色标识、头像、创建时间、逻辑删除标记。菜地表t_land主键、菜地名称、位置描述、面积、认养价格、是否可租、状态、封面图、简介。农产品表t_product主键、产品名称、分类、单价、库存、上下架状态、图片、规格描述。订单表t_order主键、订单编号、用户ID、菜地/商品ID、数量、金额、支付状态、订单状态、创建时间、支付时间。细节上有几个经验值得强调。第一用户表的用户名和手机号建议加唯一索引防止重复注册这也是一个很好的答辩点。第二金额字段一律用decimal(10,2)别用double或者float否则结算累计误差会把你坑哭。第三每张业务表都建议加deleted字段做逻辑删除而不是物理DELETE这样既能保留历史数据又方便在管理端做回收站功能。第四订单编号别用数据库自增 ID 直接展示建议用时间戳加随机数生成业务编号比如20250607153012 四位随机码这样更接近真实项目的做法。2.3 中间件与可选的增强能力基础版系统只需要 SpringBoot、Vue、MySQL 三件套就能跑起来但想让项目在评分上更亮眼可以适当加一点中间件。最常见的是引入 Redis 做缓存把用户登录后的 Token、首页的热门菜地、商品分类这类不经常变化的数据放进去既能减少数据库压力又能在论文里写“基于 Redis 的缓存设计”。另外一个值得加的是文件上传菜地和商品都需要图片本地磁盘存储做一个上传接口就够了不要一开始就上云存储徒增学习成本。支付模块不建议真的对接微信支付宝审核成本和安全性都太复杂做一个模拟支付接口就行用户提交订单后订单状态变为“待支付”点击支付按钮时后端校验金额并把状态改为“已支付”或“已完成”。完整模拟真实支付的状态流转又不碰真实资金属于毕设里最聪明的做法。3. 核心模块拆解与实现要点3.1 登录认证与权限控制用户登录是系统第一个要做的模块也是答辩时老师最可能追问的地方。现在主流方案是用 JWTJSON Web Token做无状态认证用户登录成功后后端生成一串包含用户 ID 和角色的 Token 返回给前端前端存到 localStorage 或 SessionStorage 里后续每次请求都在请求头带上Authorization: Bearer token后端通过拦截器解析 Token 识别用户身份。权限控制要区分普通用户和管理员。普通用户只能访问用户端接口比如浏览菜地、下单、查自己的订单管理员才能调用后台管理接口比如新增菜地、处理订单、查看统计数据。实现上不需要直接上 Spring Security一个自定义拦截器加角色判断就够了写一个AuthInterceptor在preHandle方法里解析 Token再校验对应用户的角色是否匹配接口要求的权限不匹配就直接返回 401。这里有个新手特别容易踩的坑拦截器一定要把登录接口、注册接口、静态资源路径放行掉否则前端登录页面连验证码都刷不出来你排查半天也不知道是哪里拦的。3.2 田园菜地与商品管理模块菜地管理是乐享田园这个项目区别于普通电商系统的特色模块。用户端的核心操作是浏览菜地列表、查看菜地详情、选择认养时长和数量管理端的核心操作是新增菜地、编辑菜地信息、上下架、查看认养记录。这个模块写起来不难但要注意几个细节。分页查询建议用 MyBatis-Plus 提供的Page对象配合LambdaQueryWrapper做条件构造比如按菜地名称模糊搜索、按认养价格区间筛选、按状态过滤这样代码干净逻辑也清楚答辩演示时搜一个关键词马上出结果加分很明显。上下架功能别用删除代替用状态字段控制即可同时确保下架后用户不能再下单购买。图片上传要做格式和大小校验常见的做法是只允许 jpg、png、webp单张不超过 2MB上传后返回一个相对路径存到数据库里前端用这个路径拼接访问地址。3.3 订单模块与状态流转订单模块是整个系统里最有业务含量的地方建议重点下功夫。乐享田园的订单流程可以设计为用户选择菜地或农产品 - 提交订单 - 生成待支付订单 - 模拟支付 - 状态变为已支付/待处理 - 管理员确认 - 状态变为已完成 - 用户确认收货或系统自动完成。整个流程其实就是一张订单状态表状态含义触发操作0待支付用户提交订单后初始状态1已支付用户点击模拟支付校验金额后更新2已完成管理员确认处理或自动流转3已取消待支付状态下用户主动取消或超时未支付写这块时有两个坑值得提前预防。一个是防止重复下单用户在待支付状态下反复点击提交按钮可能会生成多条垃圾订单前端要做按钮 loading 禁用后端也要在生成订单的逻辑里做幂等校验最简单的方法是同一个用户在短时间内对同一个菜地的未支付订单不能重复创建。另一个坑是金额计算订单金额必须在后端重新计算绝不能信任前端传过来的总价否则用户改一下请求参数就能用 0.01 元下单这在答辩演示时不一定会被发现但在安全性审查时是致命伤。3.4 数据统计与图表展示管理端一般需要一个 Dashboard 首页用来展示平台整体的运营数据。这块建议引入 ECharts 做可视化统计对象可以包括近 7 日/30 日订单数量和销售额趋势、热门菜地和商品 TOP10、订单状态分布占比、用户增长曲线等。SQL 层面主要就是GROUP BY加时间函数按天聚合订单数据后端返回一个列表前端用折线图、柱状图、饼图分别渲染。这个模块技术难度不高但非常提分因为绝大多数学生的毕业设计首页只有表格你放一个带图表的 Dashboard 上去视觉上和功能上都高出一截。图表数据接口注意一下时区问题后端返回给前端的时间字段建议统一格式化成字符串前端不要自己再对时间戳做复杂转换省掉一堆显示错乱的麻烦。4. 实操实录从零把项目跑起来4.1 环境准备与版本选型工欲善其事必先利其器环境版本不对后面全是泪。以这套 SpringBoot Vue 项目为例推荐环境组合是JDK 1.8 或 11、Maven 3.6 以上、Node.js 14 以上、MySQL 5.7 或 8.0、开发工具用 IDEA后端加 VSCode前端或者直接用 IDEA 旗舰版也能一把梭。有个点容易被忽略Maven 的settings.xml一定要配置阿里云镜像否则在国内网络环境下下载依赖会慢到怀疑人生。配置方式是在镜像节点里加入阿里云的maven.aliyun.com/nexus/content/groups/public仓库地址然后删掉本地仓库里的.lastUpdated结尾的失败文件再重新拉取。Node 这边也同样建议把 npm 镜像切换到淘宝源npm config set registry https://registry.npmmirror.com一条命令就能解决。4.2 数据库导入与连接配置拿到源码以后第一步不是打开 IDEA而是先把数据库导入。一般在项目的sql目录下能找到初始化脚本用 Navicat 或者命令行执行整个.sql文件执行成功后检查一下表是否齐全重点看用户表、菜地表、订单表是否自动插入了一些演示数据。没有演示数据的要自己补几条不然前端页面打开空空荡荡效果很尴尬。连接配置在application.yml文件里核心是数据源这一段。给出一个标准的配置参考server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/le_xiang_tian_yuan?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver如果你的 MySQL 是 5.7驱动类名也可以正常使用com.mysql.cj.jdbc.Driver但如果你用的驱动版本太老就要改回com.mysql.jdbc.Driver。另外数据库名字要跟脚本里创建的一致我见过太多人栽在“库名对不上”这个低级错误上。还有一个高频问题是时区报错连接串里必须带上serverTimezoneAsia/Shanghai否则启动时会报 CST 时区无法识别的异常。4.3 后端启动步骤与参数调整后端启动分两种方式。第一种是在 IDEA 里直接把项目导入等待 Maven 依赖下载完找到启动类一般是Application结尾的类右键 Run 即可。第二种是命令行方式在项目根目录执行mvn clean package -DskipTests java -jar target/你的项目名-0.0.1-SNAPSHOT.jar启动之后控制台如果出现 “Started ... in x seconds” 的日志就说明后端已经起来了。这时候强烈建议先用浏览器访问一个简单的接口验证比如http://localhost:8080/api/health或者其他公开接口确认能返回 JSON 再去做前端联调避免后面排查问题时前后端互相甩锅。如果启动时出现端口被占用去application.yml里把server.port改成 8081 或者其他空闲端口即可。4.4 前端启动与打包部署前端项目一般在frontend或vue-web目录下打开终端依次执行npm install npm run serve等到控制台出现Local: http://localhost:8081类似的提示说明前端开发服务器已经跑起来了。这时候打开浏览器访问前端地址页面应该能加载出来但你直接点击登录大概率会报跨域错误因为前端在 8081 端口后端在 8080 端口。解决方式有两种推荐先在前端项目根目录创建.env.development文件设置 API 基础路径为/api然后在vue.config.js里配一个代理devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这样前端请求/api/login时开发服务器会自动帮它转发到http://localhost:8080/api/login绕过跨域限制。等整个项目调试完毕要部署的时候执行npm run build前端会生成一个dist目录把里面的文件拷到后端src/main/resources/static下再重新打包启动后端浏览器直接访问 8080 端口就能看到整个系统一个端口搞定非常适合在演示环境里跑。5. 高频问题与排查技巧实录5.1 跨域问题怎么彻底解决跨域是前后端分离项目里出现频率最高的报错表现形式是浏览器控制台出现CORS policy字样请求发不出去。前面讲的开发环境代理只能解决本地联调如果你直接把前端dist放到独立服务器上跨域还是会出现。后端的兜底方案是加一个全局 CORS 配置类允许所有来源的跨域请求Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }注意如果设置了setAllowCredentials(true)那么addAllowedOrigin不能随便写*要用addAllowedOriginPattern(*)否则请求还是会报错。这个坑我当年排查了整整一下午分享出来帮大家少走弯路。5.2 MySQL 连接与 SSL 报错用 MySQL 8.0 的时候启动后端经常报这么一串错误Public Key Retrieval is not allowed或者 SSL 连接相关警告。解决方案是在 JDBC 连接串里加上两个参数url: jdbc:mysql://localhost:3306/le_xiang_tian_yuan?useSSLfalseallowPublicKeyRetrievaltrueserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue是针对 MySQL 8.0 的缓存 SHA2 加密插件设置的很多老项目的连接串都是从 5.7 时代抄来的没这个参数启动就报错。如果你用的 MySQL 是 5.7可以不加但加上也无伤大雅。5.3 Vue 打包进 SpringBoot 之后刷新 404前端路由默认用的是 history 模式路径是/lands、/orders这种看起来是挺干净但直接打包放进后端以后用户点击链接进来没问题一按浏览器刷新就 404因为后端根本没有匹配这个路径的接口。应对办法有两个最简单的方案是把 Vue 路由改成 hash 模式路径变成/#/lands点击和刷新都能正常访问如果要坚持 history 模式就得在后端加一个路径回退配置把所有非接口的请求都转发到index.html这相对复杂一些。对于毕设项目我强烈推荐直接用 hash 模式省事且稳定。5.4 端口占用与启动失败的排查思路后端端口被占用是最经典的启动失败案例。Windows 下执行netstat -ano | findstr 8080找到占用进程的 PID再去任务管理器结束进程或者直接换后端端口。前端 8081 被占用同理改vue.config.js的port选项。还有一种情况是后端启动过程中报错提示无法连接数据库这种九成是 MySQL 服务没开或者数据库名、账号密码写错了按顺序先从最简单的数据库密码查起排查效率最高。个人经验收尾这套系统我自己在本地完整跑通过一遍也看着不少学生用它完成了答辩。最后想分享一点体会拿到一套源码别急着改需求先把它原封不动跑起来把登录、下单、后台管理整个流程走一遍理解每张表跟每个页面的对应关系然后再动手改。答辩时老师最看重的是“你对自己的项目是否真正理解”你哪怕只改了一个小功能能现场讲清楚为什么这么改、影响到哪些表哪些接口这个答辩基本就稳了。另外这套系统扩展空间很大我建议你日后可以试着加一个微信小程序端或者把模拟支付换成真实对接的沙箱环境这样整篇论文的技术深度又会往上走一个台阶。