1. 项目背景与核心需求
在生鲜电商快速发展的今天，一个高效的蔬菜销售平台能够有效连接农户与消费者。这个基于SpringBoot+Vue的商城系统，正是为了解决传统蔬菜销售中的几个痛点：
- 供应链不透明：消费者无法追溯蔬菜来源
- 交易效率低下：线下采购耗时耗力
- 价格波动大：缺乏统一的价格公示机制
我去年参与了一个有机农场直销项目时，深刻体会到这些问题的严重性。当时农场主每天要接听几十个订货电话，还要手工记录订单，经常出现漏单、错单的情况。这促使我开始设计这套系统。
2. 技术选型与架构设计
2.1 为什么选择SpringBoot+Vue
这个技术组合在电商领域已经成为事实标准，我们的选择基于以下考量：
后端技术栈：
- SpringBoot 2.7.x（稳定版）
- MySQL 8.0（支持JSON字段）
- Redis 6.x（缓存秒杀库存）
- RabbitMQ（订单异步处理）
前端技术栈：
- Vue 3 + Composition API
- Element Plus（UI组件库）
- Axios（HTTP客户端）
- Vuex（状态管理）
提示：在实际项目中，我们放弃了Thymeleaf而采用纯前后端分离架构，这样前端团队可以独立开发部署。
2.2 系统架构示意图
code复制[用户端Vue] ←HTTP→ [SpringBoot API] ←→ [MySQL]
↑
│
[Redis缓存]
↓
[RabbitMQ] ←→ [订单处理微服务]
这种架构带来了几个关键优势：
- 前端资源可以CDN加速
- 后端服务可水平扩展
- 消息队列削峰填谷
3. 核心功能实现细节
3.1 商品管理与溯源系统
蔬菜商品相比普通电商商品有特殊属性：
java复制// 商品实体类关键字段
public class VegetableProduct {
private Long id;
private String name;
// 特殊字段
private LocalDate harvestDate; // 采收日期
private String farmLocation; // 产地坐标
private String pesticideInfo; // 农药使用记录
private Integer shelfLife; // 保质期(天)
}
前端采用树形表格展示商品分类：
vue复制<el-table :data="products" :tree-props="{children: 'varieties'}">
<el-table-column prop="category" label="蔬菜大类"/>
<el-table-column prop="name" label="具体品种"/>
</el-table>
3.2 高并发库存管理
蔬菜秒杀是个典型的高并发场景，我们实现了：
- Redis预减库存
- 分布式锁防超卖
- 异步创建订单
关键代码片段：
java复制// Redis库存操作
public boolean reduceStock(Long productId, int num) {
String key = "stock:" + productId;
long value = redisTemplate.opsForValue().decrement(key, num);
if (value < 0) { // 库存不足回滚
redisTemplate.opsForValue().increment(key, num);
return false;
}
return true;
}
3.3 智能推荐算法
基于用户购买历史实现推荐：
- 协同过滤算法
- 时令蔬菜优先
- 搭配推荐（如买了番茄推荐鸡蛋）
sql复制-- 推荐查询示例
SELECT * FROM products
WHERE category IN (
SELECT category FROM orders
WHERE user_id = ?
GROUP BY category
ORDER BY COUNT(*) DESC
LIMIT 3
)
AND season = 'SUMMER'
ORDER BY sales DESC;
4. 特色功能实现
4.1 可视化溯源地图
使用Leaflet集成展示蔬菜产地：
vue复制<template>
<div id="farm-map">
<l-map :zoom="12" :center="farmLocation">
<l-tile-layer url="..."/>
<l-marker :lat-lng="farmLocation">
<l-popup>{{ product.originInfo }}</l-popup>
</l-marker>
</l-map>
</div>
</template>
4.2 预售与定时达系统
解决生鲜配送时间敏感问题：
- 预售模式（今晚下单明早采收）
- 配送时段选择（9-12点/15-18点）
- 配送温度监控（IoT设备数据接入）
5. 部署与性能优化
5.1 前端优化方案
- 路由懒加载
- 图片压缩（WebP格式）
- API请求合并
javascript复制// vite.config.js 优化配置
export default defineConfig({
build: {
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'axios']
}
}
}
}
})
5.2 后端性能调优
- Nginx动静分离
- SpringBoot缓存注解
- 连接池配置
yaml复制# application.yml 关键配置
spring:
datasource:
hikari:
maximum-pool-size: 20
connection-timeout: 30000
redis:
lettuce:
pool:
max-active: 50
6. 踩坑与解决方案
6.1 微信支付证书加载问题
在Linux环境遇到证书路径问题，最终解决方案：
java复制@Bean
public WXPayConfig wxPayConfig() {
return new WXPayConfig() {
@Override
public InputStream getCertStream() {
// 使用ClassPathResource解决打包后路径问题
return new ClassPathResource("cert/apiclient_cert.p12").getInputStream();
}
};
}
6.2 Vue响应式数据丢失
在编辑商品时遇到数据绑定失效：
vue复制<script setup>
// 错误做法：直接赋值
const form = ref({})
form.value = apiData // 失去响应性
// 正确做法：逐个赋值
const form = ref({
name: '',
price: 0
})
Object.assign(form.value, apiData)
</script>
7. 项目扩展方向
这套系统在实际运营中还可以扩展：
- 农户端APP（简化商品上架）
- 智能定价系统（基于供需预测）
- 冷链物流追踪（区块链存证）
我在项目中最大的体会是：生鲜电商系统必须考虑业务场景的特殊性。比如我们最初设计的库存模型就没考虑蔬菜的损耗率，后来增加了"理论库存"和"实际库存"双字段才解决问题。建议开发类似系统的同行，一定要先去菜市场实地观察交易流程。