1. 项目定位与整体设计为什么前后端分离才是田园系统的正确打开方式说实话第一次看到乐享田园这四个字我脑子里浮现的是认养菜地、采摘预约、农产品订单这些场景而不是一个冷冰冰的后台管理系统。把这个项目完整做完之后我更确定了一件事一个面向休闲农业的数字化平台用前后端分离架构来落地是现阶段最稳妥也最容易迭代的选择。这个项目的技术栈非常明确SpringBoot、Vue、MyBatis、MySQL组合起来就是一套标准的Java后端加Web前端全栈方案。它解决的典型问题是田园综合体的管理者需要在线管理土地认养、农事活动、商品订单和会员信息而用户需要在手机或电脑上完成选地、下单、查看进度。如果还像十年前那样用JSP页面把业务逻辑和界面揉在一起后期加一个小程序、加一个数据大屏都要动老代码团队协作也容易互相阻塞。前后端分离把接口层和展示层彻底拆开前端只需要关心UI和交互后端只需要稳定输出JSON数据两边各改各的联调时只要盯住接口文档和返回值就行。我身边有不少朋友第一次接触这类项目时会纠结要不要用微服务要不要上Redis要不要引入消息队列我的建议很直接——先想清楚业务规模。乐享田园这种体量的项目单机部署的SpringBoot完全能扛住MySQL存结构化数据Vue做单页应用MyBatis操作数据库这套组合是经过无数生产项目验证的。盲目引入微服务和中间件只会让部署复杂度翻倍对初学者和中小型团队反而不友好。技术上克制是这个项目教给我的第一课。2. 数据库是地基乐享田园的MySQL表结构设计2.1 核心业务表拆解用户、土地、产品、订单先把业务捋清楚。我设计的乐享田园系统包含了四个核心模块用户认证与管理、土地认养、田园活动预约、农产品商城。围绕这四个模块数据库里至少需要这十几张表用户表、角色表、认养土地表、认养订单表、活动表、活动预约表、商品表、购物车表、商品订单表、轮播图表、通知公告表、反馈表。用户表是最基本的一张表我在这里没有偷懒除了常规的username、password、phone、email、avatar之外还加了real_name和id_card字段。为什么加这两个因为土地认养和活动预约都涉及实名信息如果后期要对接保险或农产品溯源这些字段能省掉一次大改表。密码字段存的是BCrypt加密后的字符串长度设的是60这是BCrypt输出的固定长度如果设短了后面用户一注册就直接报Data too long。经验之谈这种细节踩坑最尴尬。认养土地表是整个项目的核心。字段包括土地编号、名称、面积、位置描述、土壤类型、当前状态空闲/已认养/维护中、认养价格、封面图片、详细介绍。我特意加了soil_type和light_condition这两个字段因为田园认养的用户往往关注日照和土壤质量页面需要根据这些字段做筛选排序。state字段我设置了默认值00代表空闲1代表已认养2代表维护中。查询空闲土地的时候直接where state 0配合索引性能完全不是问题。订单表的设计要稍微讲究一点。我没有只建一张订单表而是把认养订单、商品订单、活动预约订单分开建。理由很简单三种订单的字段差异太大。认养订单要记录认养开始日期、结束日期、认养面积商品订单要记录商品ID、数量、单价、收货地址活动预约订单要记录活动场次、参与人数。强行合并成一张大表会有大量字段在多数情况下为NULL不仅浪费空间MyBatis映射时也得写一堆if标签来判断。拆开后每张表结构清晰业务代码也好理解。2.2 索引、外键与事务别让数据变成烂摊子索引这块我总结出一个原则优先给查询条件里频繁出现的字段建索引而不是给所有字段都建。比如user表的phone字段登录和找回密码都会用到必须建唯一索引认养土地表的state字段和land_no字段一个用于筛选列表一个用于唯一标识也建议建索引。另外所有表的主键我都使用了BIGINT自增并且在命名上用id而不是表名_id这样MyBatis的通用Mapper或手写SQL都不容易出现歧义。外键我一张表都没有加。可能有人会在MySQL里用FOREIGN KEY来维护引用完整性但我更倾向于在应用层控制。原因很直接外键会让插入和删除操作多一次锁检查在高并发写入场景下容易成为性能瓶颈而且一旦表结构需要调整有外键约束的表改动特别痛苦动不动就报Cannot delete or update a parent row。我的做法是在订单表里冗余一个user_id和land_id或者product_id通过索引保证查询效率用Java代码在删除用户前先检查有没有关联订单。这样既保证了业务正确性又不会让数据库变得僵硬。事务的边界也要控制好。比如用户下单认养土地至少要执行两步操作插入一条订单记录更新土地状态为已认养。这两步必须放在同一个Spring事务里否则会出现订单创建成功了但土地还是空闲状态的脏数据。我在Service层加了Transactional(rollbackFor Exception.class)注意这里不能只写Transactional因为默认情况下RuntimeException才会回滚受检查异常不会。如果你抛出的是IOException这类异常不加rollbackFor的话事务就提交了数据一致性直接出问题。3. 后端核心实现SpringBootMyBatis的业务落地3.1 项目结构与统一响应体后端我用的是标准的SpringBoot分层结构controller、service、mapper、entity、dto、common、config、utils。很多初学者会把业务逻辑全写在Controller里一个类几百行接口之间互相调用直接new对象这种代码后期根本没法维护。我的习惯是Controller只做参数接收和简单校验具体业务全部下沉到ServiceService里再调用Mapper。Mapper只负责数据访问不要在里面写复杂的关系运算。各层职责单一改起来才不慌。统一响应体是我很早就养成习惯做的一件事。定义一个Result 类包含code、message、data三个字段。成功时返回Result.success(data)失败时抛出业务异常由全局异常处理器捕获后统一返回Result.error(code, message)。这样前端Axios拦截器只需要判断code是不是200不需要每个接口单独处理错误结构。乐享田园里所有Controller的返回值都是Result类型包括分页数据这也是前后端对接顺畅的关键一步。3.2 JWT登录鉴权与拦截器登录方案我选择了JWT因为它天然适合前后端分离架构。传统Session方案需要依赖服务端Session存储如果后面要扩容Session共享又得引入Redis或Spring Session很麻烦。JWT则是把用户身份信息加密后放在Token里服务端不存状态每次请求带上Token后端解析校验即可。虽然JWT无法主动失效是个槽点但对于田园系统这种对安全性要求不是顶级的业务场景已经完全够用。实现上我用的是jjwt库。用户登录成功后我用一个包含userId和username的Claims生成Token设置过期时间为24小时。然后写一个JwtInterceptor实现HandlerInterceptor在preHandle方法里从请求头取Authorization字段去掉Bearer 前缀后进行解析。解析失败就返回401解析成功就把userId放进RequestContextHolder或ThreadLocal供后续业务使用。拦截器注册时要注意放行登录、注册、轮播图、商品列表这些不需要鉴权的接口否则前端还没拿到Token后端就全给拦截了联调时一调一个准。3.3 MyBatis动态SQL与自定义TypeHandlerMyBatis在这个项目里承担着所有数据库操作。我推荐使用XML映射文件来写复杂SQL而不是纯注解。乐享田园里商品列表要支持按名称模糊查询、按价格区间筛选、按分类筛选这些条件组合起来如果写在注解里会非常难看。用XML加 和 标签就能轻松实现动态SQL。比如selectProductList里只要某个参数不为空才拼接对应条件这样前端传几个参数都能正确查询。TypeHandler也是一个容易被忽略但很实用的点。我举个例子商品表有一个detail字段存储的是富文本编辑器的HTML内容这类长文本用TEXT类型存储没有问题。但有些业务字段是JSON数组格式比如土地的photos字段我存的是JSON字符串。在Java实体类中这个字段是一个List 。如果直接映射MyBatis会报类型转换错误。所以我自定义了一个JsonStringArrayTypeHandler继承BaseTypeHandlerList 在setNonNullParameter里把List序列化成JSON字符串在getNullableResult里把JSON字符串反序列化成List。使用的时候在实体类的字段上标注TableField(typeHandler JsonStringArrayTypeHandler.class)或者XML里的resultMap配置一下前后端交互就非常自然了。MyBatis缓存我也提一下。一级缓存是SqlSession级别的默认开启在同一个Session中相同的查询不会重复访问数据库。二级缓存是Mapper级别的需要手动开启。我在乐享田园里只对用户表和土地表开启了二级缓存。但要注意一旦表被更新对应的缓存必须刷新否则会读到脏数据。后来我发现一个更稳妥的做法在系统初期热点数据访问量不大时干脆不开启二级缓存减少数据同步问题。等真正有性能压力了再用Redis做专门的缓存策略比用好MyBatis二级缓存更可控。3.4 文件上传与图片访问田园系统里大量场景需要上传图片用户头像、土地图片、商品图片、活动封面。我在配置文件里指定了上传路径为服务器的/user/local/lexiang/upload然后通过SpringMVC的MultipartFile接收前端上传的文件。存储时我用UUID重命名避免中文文件名和重复名导致的问题。同时按日期分子目录比如2025/06/07这样单个目录下的文件数量不会太多遍历和备份都更方便。前端访问图片时如果直接把上传路径暴露给用户很容易被猜出其他文件路径。我的做法是写一个FileController通过文件相对路径拼接绝对路径后用FileSystemResource返回给前端。这个接口需要登录权限校验防止目录穿越攻击。还有一个很多人会忽略的点SpringBoot默认有单个文件上传大小限制默认是1MB如果用户上传一张高清照片就直接报错。必须在application.yml里设置spring.servlet.multipart.max-file-size和max-request-size我设为了10MB和20MB基本能满足普通图片需求。4. 前端工程Vue从搭建到交互4.1 Vue项目初始化与路由设计前端我选择Vue 2 Vue Router Vuex可能有人会说怎么不用Vue 3和Pinia。乐享田园这套项目如果是为了跑通业务Vue 2的生态更成熟遇到的坑网上都有答案适合快速上线。如果是为了新项目我建议直接用Vue 3 Vite TypeScript Pinia开发体验会更好。这里我按Vue 2的常用套路来讲解因为很多老项目还在用学会了也通用。路由设计上我采用静态路由加动态路由结合的方式。静态路由包括登录页、注册页、首页、土地列表、土地详情、商品列表、商品详情、购物车、结算页等用户直接访问的页面。动态路由用于后台管理部分比如用户管理、土地管理、订单管理、活动管理等页面。为什么用动态路由因为不同角色普通用户、管理员看到的菜单和页面不一样。管理员登录后前端根据后端返回的角色和权限信息用Router.addRoutes动态添加路由再配合侧边栏菜单的v-if渲染实现权限控制。这个思路很多后台管理项目都在用若依框架就是这么做的只不过它的RBAC更系统更复杂如果你不想从零搭权限体系可以参考它的设计思路。4.2 Axios封装与Vuex/Pinia状态管理跟后端联调Axios封装是必不可少的一步。我在src/utils/request.js里创建了一个Axios实例设置了baseURL为/api这样开发时通过代理转发部署时通过Nginx转发都不用改前端代码。请求拦截器里从localStorage取出Token放到Authorization请求头里。响应拦截器统一处理后端返回的数据当code不为200时直接调用Element UI的Message提示错误信息当HTTP状态为401时清除本地Token并跳转登录页。状态管理这一块我用Vuex存用户信息、购物车数量、当前认养土地等全局数据。很多人会觉得Vuex很繁琐但项目一旦有多个组件需要共享数据比如头部导航栏要显示用户昵称、购物车图标要显示数量没有状态管理的话要么一层层props传要么用EventBus都很绕。我用Vuex的module按业务拆分了user和cart两个模块mutations和actions分开写异步操作一律走actions。比如handleLogin这个action里先调用登录接口拿到Token后存到state和localStorage再调用getUserInfo获取用户资料整个过程清晰明了。4.3 核心页面实现认养一块菜地乐享田园的前端核心页面我认为是土地认养流程。整个流程分四步浏览土地列表、查看土地详情、确认认养下单、查看认养进度。土地列表页我用了卡片的布局每张卡片显示土地的封面图、名称、面积和认养价格。因为价格是后端以分为单位存储的前端展示时我用了一个过滤函数formatPrice把分转换为元避免了浮点数精度问题。列表页还做了筛选栏支持按面积区间和土壤类型过滤每次切换筛选条件都会重新请求接口配合Loading动画体感还算流畅。土地详情页比较关键我用了一个步骤条组件展示认养流程。用户点击认养按钮后会弹出确认框要求选择认养期限3个月、6个月、1年。选择不同期限价格会根据单价乘以期限自动计算。提交订单后跳转到支付模拟页面这里没有对接真实支付而是用了一个假的支付按钮点击后直接更新订单状态为已支付。如果你要在真实环境中用建议接入支付宝或者微信支付SDK把支付回调处理好就行。4.4 调试与跨域问题的本地解法前后端分离开发时最烦的就是跨域。我在Vue工程里配置了devServer的proxy把/api前缀的请求代理到后端的localhost:8080。这样浏览器看到的是同源请求自然不存在跨域问题。后端同时也在Config里配置了CorsFilter作为兜底方案允许来自前端开发服务器的请求。不过等部署到生产环境跨域的问题就交给了Nginx前端用相对路径请求会先走到Nginx再由Nginx把/api开头的请求反向代理到后端服务这样前后端在同一个域名下既安全又省事。调试过程中我习惯用Vue Devtools查看组件状态和Vuex的数据变化。如果某个接口返回的数据渲染不出来我会先打开Network面板看响应结构再用Console打印组件里的数据是否正确赋值。切忌一上来就改代码很多问题其实是数据结构对不上或者字段名拼错了。Vue的响应式系统在某些情况下不会触发视图更新比如直接通过索引修改数组元素这时候用this.$set或者重新赋值一个新数组就能骗过检测这也是Vue 2新手常踩的坑。5. 部署上线从源码到公网可访问5.1 后端打包与启动参数后端打包用的是Maven的package命令。在pom.xml里我已经配置了SpringBoot的Maven插件执行mvn clean package后会在target目录生成一个可执行jar包。打包前要注意几个坑第一测试类的运行可能会拉长打包时间甚至报错我习惯在构建时跳过测试命令是mvn clean package -DskipTests第二application.yml里的配置要区分开发环境和生产环境我用了spring.profiles.activeprod把数据库地址、文件上传路径这些环境相关的参数放到application-prod.yml里避免开发配置误用到生产。生产环境启动时我习惯用nohup命令后台运行nohup java -jar lexiang-system.jar --server.port8080 server.log 21 。为什么要单独指定端口因为服务器上可能同时跑了其他项目明确端口可以避免冲突。另外建议在启动命令里加上JVM参数比如-Xms256m -Xmx512m防止默认堆内存过大占满服务器内存。启动后通过tail -f server.log查看日志看到Started Application in xx seconds就说明启动成功了。5.2 前端构建与Nginx反向代理前端执行npm run build后会在dist目录生成静态文件。网上有一种做法是把Vue打包后的dist文件夹直接扔进SpringBoot的static目录里打成一个大jar包。我不推荐在正式项目里这么做因为这会让前端资源和后端代码强耦合每次改前端页面都要重新打包后端和重启服务。正确做法是让Nginx直接托管dist目录静态资源由Nginx返回动态请求通过location /api反向代理到后端Java服务。我服务器上Nginx的配置大概是这样的。server监听80端口root指向/usr/share/nginx/html/乐享田园/dist。location / 配置try_files $uri $uri/ /index.html这一步是为了支持Vue Router的history模式否则用户刷新或直接输入子路由地址会返回404。location /api/ 配置proxy_pass http://127.0.0.1:8080/注意proxy_pass结尾的斜杠很关键它会把/api前缀去掉再转发给后端。配置完后nginx -t检查语法再nginx -s reload生效。5.3 MySQL生产环境配置要点生产库的MySQL安装如果你是CentOS系统用rpm安装或使用官方仓库的yum源都可以。安装完成后一定要跑一下mysql_secure_installation把匿名用户删除设置root密码禁止root远程登录。虽然本地访问时用root问题不大但一旦MySQL端口暴露到公网root弱口令就是最大的安全隐患。建议单独创建一个数据库用户只授予乐享田园数据库的增删改查权限连接串里也不要写root。连接配置里我使用的是jdbc:mysql://localhost:3306/lexiang?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrue。其中useSSLfalse一定要加否则某些MySQL驱动会在连接时强制SSL握手导致报SSL connection error网上很多人遇到这个问题其实就是这个参数没配。serverTimezone也必须指定MySQL 8.0驱动对时区敏感如果不配置可能插入时间字段时报错。字符集我统一用utf8mb4能正确存储emoji和生僻字包含中文的田园说明文字都没问题。6. 常见问题速查与避坑实录6.1 问题清单表我把这个项目从开发到部署过程中最常遇到的问题整理成了一张表方便大家直接对照排查。现象可能原因解决办法前端请求接口显示404代理没生效或Nginx路径配置错误检查devServer.proxy确认location /api配置后端返回401Token缺失或过期检查登录后是否保存Token请求头是否正确携带MySQL连接报SSL error连接串少了useSSLfalse增加useSSLfalseallowPublicKeyRetrievaltrue文件上传报文件过大未修改multipart大小限制在配置文件中调大max-file-size和max-request-size打包后访问页面空白Vue Router history模式缺少try_files配置Nginx增加try_files $uri $uri/ /index.htmlMyBatis查询返回null字段实体类字段名与列名不一致开启map-underscore-to-camel-case或使用别名中文乱码数据库连接字符集不对或建表默认字符集不对统一使用utf8mb4连接串加characterEncodingutf8前端修改数组视图不更新Vue2响应式数组检测限制使用this.$set或创建新数组替换这张表其实就是给未来的自己准备的。很多问题发生一次后第二次再遇到看一眼表就能定位不用再从第一行代码开始排查。6.2 我踩过的三个坑第一个坑是数据精度。订单金额我在Java里用BigDecimal计算在MySQL里用DECIMAL类型存储本来没问题。结果某个接口把价格转成JSON时前端显示成了科学计数法比如1.2E3。后来发现是后端直接把BigDecimal序列化成Number没有按字符串处理。我统一在实体类金额字段上加JsonSerialize(using ToStringSerializer.class)或者在配置里让Jackson将BigDecimal序列化为字符串问题就解决了。这个坑不改的话前端数字计算和展示都会出错。第二个坑是文件上传临时目录。SpringBoot接收MultipartFile时会先把文件写入系统临时目录如果临时目录被系统清理或者磁盘空间不够上传就会报错。我一开始把上传路径配置到了tmp下结果服务器重启后之前上传的图片全部失踪。后来我把所有上传文件统一放到一个独立的/data/upload目录并写了一个定时任务做备份再也没出现过文件丢失的问题。第三个坑是Vue打包后接口请求地址。开发时我习惯用相对路径/api但本地直接运行打包后的dist文件时浏览器会认为/api是当前文件系统下的路径自然请求不到后端。我曾经因为直接双击index.html看效果发现接口全报错还以为是后端问题。后来明确必须在Nginx部署环境下访问或者本地用http-server之类的静态服务器模拟生产环境才能验证打包结果。6.3 如何把这个项目继续扩展乐享田园系统本身是一个完整的商业项目雏形如果后续要变成真正可运营的产品我建议从这几个方向扩展。第一个是接入真实支付和短信服务支付用微信支付或支付宝短信用阿里云或腾讯云的验证码服务让用户能完成真实的在线支付和注册验证。第二个是增加物联网设备对接在认养土地中接入土壤湿度传感器和摄像头前端通过WebSocket或轮询展示实时环境数据这个功能会让认养的概念更有真实感。第三个是做一个运营后台的数据可视化大屏统计订单量、活跃用户、土地认养率等关键指标方便管理者做决策。技术框架本质不变加上这些模块后这个项目的完整度和商业价值会明显提升。7. 最后分享一点自己的体会做一个完整项目最难的往往不是某个技术点而是把各个环节串起来的能力。乐享田园这个系统从数据库设计、后端接口开发、前端页面渲染到最后的服务器部署每一步单独拿出来都不算特别难但组合在一起就能真实地反映一个从业者对全栈流程的熟练度。我在实际开发中最大的感受是要舍得在数据库设计上多花时间。表关系理不清后面所有代码都要跟着返工表字段命名规范MyBatis映射和各种统计SQL写起来会顺畅很多。另一个体会是环境问题永远比代码问题更能消磨耐心。如果你也在部署前后端分离项目建议先把服务器上的Java版本、MySQL版本、Nginx版本全部统一再往下走。版本不搭会导致很多莫名其妙的问题而这些问题往往搜不到现成的答案。这个项目里的源码和配置基本可以直接复用。你在搭建自己的系统时只要把数据库名、上传目录、域名这些变量替换成自己的再把业务表按实际需求调整就能快速跑通。祝你在部署的路上少踩坑。