果蔬到家APP：Vue+SpringBoot生鲜电商实战解析

马迪姐

1. 项目概述：果蔬到家APP的设计初衷与核心价值

去年帮学弟调试毕业设计时，发现市面上关于生鲜电商APP的完整实现资料实在太少。大多数教程要么只讲前端页面，要么只写后端接口，真正能把扫码登录、库存同步、订单状态机这些核心模块串起来的案例凤毛麟角。这个"果蔬到家"项目恰好填补了这个空白——它不仅包含可运行的完整源码，还特别提供了本地化部署方案和数据库初始化脚本，对计算机专业毕业生来说简直是救命稻草。

这个APP典型功能包括：用户端商品浏览/加入购物车/在线支付，商家端库存管理/订单处理，以及配送员接单/轨迹跟踪三大模块。技术栈采用现在企业里最主流的Vue+SpringBoot组合，但特别值得关注的是它实现了三个毕业设计最容易翻车的难点：微信支付沙箱环境对接、高并发场景下的库存扣减方案，以及基于WebSocket的订单状态实时推送。我在阿里做生鲜电商项目时，这几个点都是新人最容易栽跟头的地方。

2. 技术架构解析：为什么选择这样的技术组合？

2.1 前端技术选型考量

采用Vue2+ElementUI而不是React或Vue3，这是经过实际教学验证的选择。去年给30个学生指导毕业设计时，用Vue2的组平均比React组提前2周完成前端调试。原因很简单：ElementUI的文档示例足够丰富，像时间选择器、省市区联动这种常用组件直接复制代码就能用。项目里封装的axios拦截器特别实用，401token过期时自动跳登录页，配合后端Shiro的登录拦截，这种细节在官方文档里可不会教。

关键提示：源码中src/utils/request.js的401拦截处理一定要保留，这是避免前后端联调时疯狂掉头发的关键防御代码。

2.2 后端框架设计亮点

SpringBoot版本锁定2.3.7.RELEASE是个明智选择——新版SpringBoot2.4+对Shiro的支持有问题。数据库连接池没选默认的HikariCP而是用了Druid，因为毕业设计答辩时老师最爱问的就是："你怎么防止SQL注入？"这时候可以指着Druid的后台监控说支持SQL防火墙。项目里的RBAC权限控制实现得相当规范，权限表设计包含sys_user、sys_role、sys_menu三张主表，比那些把权限字段直接塞用户表的Demo强太多。

3. 核心模块实现细节

3.1 微信支付对接的魔鬼细节

支付模块在src/main/java/com/fruit/pay目录下，最值得关注的是WxPayController里的异步通知处理。很多毕设项目只做支付发起不管回调验证，这个项目不仅实现了签名验证，还处理了重复通知问题。关键代码片段：

java复制// 验证签名（防止伪造通知）
if(!wxPayService.verifyNotify(notifyMap)){
    return wxPayService.createFailXml("验签失败");
}
// 检查订单是否存在
FruitOrder order = orderService.getById(outTradeNo);
if(order == null){
    return wxPayService.createFailXml("订单不存在");
}
// 防止重复处理（最容易被忽略的点）
if(order.getStatus() != OrderStatus.UNPAID){
    return wxPayService.createSuccessXml();
}

3.2 库存扣减的并发控制

商品服务里的reduceStock方法用了乐观锁方案，比直接用synchronized性能高得多。核心SQL长这样：

sql复制UPDATE fruit_goods 
SET stock = stock - #{num} 
WHERE id = #{goodsId} AND stock >= #{num}

配合MyBatis的@Update注解，返回值int如果是0表示扣减失败。项目里还贴心地写了库存不足时的回滚逻辑，这个在答辩演示时特别有用——故意超卖然后展示如何优雅地给用户提示。

4. 部署教程中的关键陷阱

4.1 数据库初始化那些坑

提供的sql文件里包含测试数据，但mysql5.7和8.0的语法兼容性问题需要特别注意。如果导入时报错"1071 - Specified key was too long"，需要修改my.ini添加：

ini复制[mysqld]
innodb_large_prefix=ON
innodb_file_format=Barracuda
innodb_file_per_table=ON

4.2 第三方服务配置

application-dev.yml里需要修改的关键配置项：

微信支付的mchId和apiKey（用沙箱环境）
阿里云OSS的endpoint和accessKey（建议用临时令牌）
短信接口的appCode（可以用mock模式）

有个巨坑：最新版微信SDK要求必须配置商户证书，但沙箱环境其实不需要。如果遇到"证书不存在"错误，直接注释掉wxpay.cert-path配置项就行。

5. 答辩加分项改造建议

5.1 性能优化方向

源码里已经用了Redis做商品缓存，可以进一步：

给/getGoodsList接口添加@Cacheable注解
用Redisson实现分布式锁改造库存扣减
接入SkyWalking做性能监控

5.2 安全加固方案

答辩时老师常问安全问题，建议增加：

在DruidConfig里打开SQL防火墙
给Shiro添加密码重试限制
用Hutool的SecureUtil实现敏感数据加密

6. 常见问题排雷指南

6.1 前端跨域问题

如果出现403跨域错误，检查三个地方：

后端CorsConfig是否生效
Nginx配置是否有Access-Control-Allow-Origin
前端axios的baseURL是否含多余斜杠

6.2 支付回调失败

八成是内网穿透问题，推荐用natapp做临时穿透：

修改wxpay.notify-url为穿透地址
在开发者工具-公众平台测试账号里配置域名
用Postman手动触发回调测试

6.3 订单状态不同步

WebSocket连接失败时检查：

spring.websocket配置的allowed-origins
前端socket.js里的ws地址
服务端是否用了@EnableWebSocketMessageBroker

这个项目最让我欣赏的是它考虑到了毕业设计的全生命周期——从环境搭建、编码实现、调试技巧到答辩话术。比如在订单模块特意留了几个TODO注释，就是给学生在答辩时展示"我的进一步优化思路"用的。建议学弟学妹们拿到源码后，重点研究下FruitOrderStateMachine这个类，它用状态模式实现了订单流转，这种设计模式的应用绝对是答辩时的加分亮点。