当前位置：首页 > news >正文

SpringBoot2+Vue3水果电商系统开发实践

news 2026/8/3 8:50:27

1. 项目概述

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0技术栈的水果电商系统，是我去年为一个本地水果连锁品牌开发的线上销售平台。系统从零开始构建，前后耗时3个月，目前日均订单量稳定在800单左右，经受住了618和双十一的流量考验。

系统采用前后端分离架构，后端基于SpringBoot2.7.3构建，前端使用Vue3+Element Plus实现。数据库选用MySQL8.0，利用其JSON字段特性存储商品规格参数。整个系统包含商品管理、订单处理、会员体系、营销活动等核心模块，特别针对水果这类生鲜商品设计了独特的库存管理和配送时效功能。

提示：系统源码已通过企业级代码审计，包含完整的API文档和部署手册，适合作为全栈开发学习项目或二次开发的基座。

2. 技术栈深度解析

2.1 SpringBoot2后端架构

选用SpringBoot2.7.3而非最新的3.x版本，主要考虑企业环境的JDK兼容性。项目中几个关键配置：

// 多数据源配置示例 @Configuration @MapperScan(basePackages = "com.fruit.mapper.primary", sqlSessionTemplateRef = "primarySqlSessionTemplate") public class PrimaryDataSourceConfig { @Bean(name = "primaryDataSource") @ConfigurationProperties(prefix = "spring.datasource.primary") public DataSource primaryDataSource() { return DataSourceBuilder.create().build(); } }

特别实现了以下企业级功能：

基于Redis的分布式锁控制库存扣减
阿里云OSS集成实现图片上传
自定义注解实现操作日志记录
多环境配置分离（dev/test/prod）

2.2 Vue3前端工程化

前端采用Vue3.2+TypeScript组合，通过setup语法糖提升开发效率。几个典型实现：

// 商品SKU选择组件 const handleSkuChange = (skuComb) => { currentSku.value = skuComb price.value = skuComb.price stock.value = skuComb.stock // 禁用无货规格 disableUnavailableSpecs(skuComb) }

工程化亮点包括：

自动按需导入的Element Plus组件
基于axios的请求拦截和统一错误处理
Vuex状态管理购物车数据
动态路由权限控制

2.3 MyBatis-Plus高级应用

项目中深度使用了MyBatis-Plus 3.5.2的特性：

// 复杂查询示例 LambdaQueryWrapper<Order> wrapper = new LambdaQueryWrapper<>(); wrapper.select(Order::getId, Order::getOrderNo) .eq(Order::getUserId, userId) .between(Order::getCreateTime, startDate, endDate) .orderByDesc(Order::getCreateTime);

特别实现了：

多租户SQL解析器
自动填充创建/更新时间
逻辑删除全局配置
性能分析插件

3. 核心业务模块实现

3.1 商品管理系统

水果商品特有的属性处理：

// MySQL中的JSON字段示例 { "origin": "海南三亚", "sweetness": 15.2, "weight_range": ["3kg", "5kg"], "preservation": { "temperature": "4-8℃", "shelf_life": 7 } }

关键功能点：

多规格SKU组合算法
批次管理（针对不同采摘日期的商品）
新鲜度可视化展示
预售/现货模式切换

3.2 订单履约流程

独创的"三段式"状态机设计：

graph TD A[待支付] -->|支付成功| B[待发货] B -->|仓库拣货| C[已发货] C -->|用户签收| D[已完成] B -->|24h未支付| E[已取消]

特殊处理逻辑：

生鲜商品不支持无理由退货
配送时效倒计时显示
温控物流状态跟踪
签收后的新鲜度评价

4. 性能优化实践

4.1 MySQL调优配置

# my.cnf关键参数 innodb_buffer_pool_size = 4G innodb_log_file_size = 512M transaction-isolation = READ-COMMITTED binlog_format = ROW

建立的索引包括：

商品表的分类+状态联合索引
订单表的用户ID+创建时间倒序索引
采用覆盖索引优化统计查询

4.2 缓存策略设计

采用多级缓存架构：

本地Caffeine缓存热点数据（TTL 5分钟）
Redis集群存储会话和库存数据
静态资源通过CDN加速

缓存击穿解决方案：

public Product getProductById(Long id) { String key = "product:" + id; Product product = redisTemplate.opsForValue().get(key); if (product == null) { synchronized (this) { product = redisTemplate.opsForValue().get(key); if (product == null) { product = productMapper.selectById(id); redisTemplate.opsForValue().set(key, product, 30, TimeUnit.MINUTES); } } } return product; }

5. 部署与监控方案

5.1 容器化部署

Docker Compose编排文件关键配置：

services: app: image: fruit-store:1.0 ports: - "8080:8080" depends_on: - redis - mysql environment: - SPRING_PROFILES_ACTIVE=prod mysql: image: mysql:8.0 command: --default-authentication-plugin=mysql_native_password volumes: - ./mysql/data:/var/lib/mysql

5.2 监控体系搭建

采用的监控组件：

Prometheus采集JVM指标
Grafana展示业务看板
ELK收集日志
SkyWalking追踪调用链

关键监控指标：

订单创建成功率
平均响应时间
库存准确率
配送超时率

6. 典型问题解决方案

6.1 超卖问题处理

采用Redis+Lua实现原子化库存扣减：

-- 库存扣减脚本 local key = KEYS[1] local num = tonumber(ARGV[1]) local stock = tonumber(redis.call('GET', key)) if stock >= num then redis.call('DECRBY', key, num) return 1 end return 0

6.2 分布式事务场景

使用Seata处理跨服务事务：

@GlobalTransactional public void createOrder(OrderDTO orderDTO) { // 扣减库存 stockService.reduceStock(orderDTO.getItems()); // 创建订单 orderService.create(orderDTO); // 扣减优惠券 couponService.useCoupon(orderDTO.getCouponId()); }