1. 项目概述

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的电子产品销售系统，是我去年为一个中型电商客户开发的实际项目。系统采用前后端分离架构，后端使用Java技术栈，前端基于Vue3组合式API开发，数据库选用MySQL8.0充分利用其JSON支持和窗口函数特性。整套系统从需求分析到上线部署历时3个月，目前日均处理订单量稳定在2000+。

提示：本文所有代码片段和配置都经过生产环境验证，但实际应用时请根据业务规模调整连接池和缓存参数

2. 技术架构解析

2.1 后端技术选型

SpringBoot2.7.x作为基础框架，主要考虑因素包括：

• 内嵌Tomcat简化部署
• 自动配置减少样板代码
• 完善的监控端点(Actuator)
• 与MyBatis-Plus的天然集成

MyBatis-Plus 3.5.2作为ORM层，其优势在于：

• 内置通用Mapper减少30%的DAO代码
• Lambda表达式构建查询条件
• 分页插件自动优化count查询
• 多租户SQL解析器（本项目未使用）

// 典型Service层实现示例 @Service public class ProductServiceImpl extends ServiceImpl<ProductMapper, Product> implements ProductService { @Cacheable(value = "product", key = "#id") public ProductDetailVO getDetailById(Long id) { return baseMapper.selectDetailById(id); } }

2.2 前端技术栈

Vue3组合式API带来明显优势：

• <script setup>语法简化组件编写
• Composition API提高代码复用性
• Vite构建速度比Webpack快5-8倍
• Pinia状态管理替代Vuex

// 商品列表组件示例 <script setup> const { data: products, loading } = useFetch('/api/products', { params: { page: 1, size: 10 } }) </script> <template> <el-table :data="products" v-loading="loading"> <!-- 表格列定义 --> </el-table> </template>

2.3 数据库设计

MySQL8.0关键特性应用：

• JSON字段存储商品规格参数
• 窗口函数实现销售排名统计
• 公用表表达式(CTE)处理复杂查询
• 索引可见性控制优化执行计划

-- 典型分页查询优化 WITH sales_stats AS ( SELECT product_id, SUM(quantity) as total_sales, RANK() OVER(ORDER BY SUM(quantity) DESC) as sales_rank FROM order_items GROUP BY product_id ) SELECT p.*, s.total_sales FROM products p JOIN sales_stats s ON p.id = s.product_id WHERE s.sales_rank <= 100;

3. 核心功能实现

3.1 商品管理系统

采用SPU/SKU数据模型：

• SPU表存储商品公共属性
• SKU表记录具体规格组合
• 价格历史表跟踪调价记录
• 库存采用乐观锁控制并发

// 库存扣减的原子操作 @Transactional public boolean reduceInventory(Long skuId, int quantity) { int updated = skuMapper.updateInventory( skuId, quantity, LocalDateTime.now() ); return updated > 0; }

3.2 订单处理流程

状态机驱动设计：

• 待支付 → 已支付 → 已发货 → 已完成
• 支付超时自动取消订单
• 分布式事务保证数据一致性
• 使用Redis实现订单号生成

stateDiagram-v2 [*] --> 待支付 待支付 --> 已支付: 支付成功 待支付 --> 已取消: 超时未支付 已支付 --> 已发货: 商家发货 已发货 --> 已完成: 用户确认 已发货 --> 退款中: 申请退货

3.3 支付集成方案

支持多种支付方式：

• 支付宝沙箱环境对接
• 微信支付Native API
• 模拟支付用于测试环境
• 支付结果异步通知处理

// 支付回调验签逻辑 public boolean verifySignature(Map<String, String> params) { String sign = params.remove("sign"); String content = params.entrySet().stream() .sorted(Map.Entry.comparingByKey()) .map(e -> e.getKey() + "=" + e.getValue()) .collect(Collectors.joining("&")); return signUtil.verify(content, sign, publicKey); }

4. 性能优化实践

4.1 缓存策略

多级缓存架构：

• Redis缓存热点数据
• Caffeine本地缓存
• 一致性哈希分片
• 缓存雪崩防护

# Redis配置示例 spring: redis: cluster: nodes: 192.168.1.101:6379,192.168.1.102:6379 lettuce: pool: max-active: 50 max-wait: 100ms

4.2 数据库优化

索引设计原则：

• 联合索引遵循最左前缀
• 覆盖索引避免回表
• 函数索引处理JSON查询
• 定期执行ANALYZE TABLE

-- 商品表索引示例 CREATE INDEX idx_category_status ON products(category_id, status); CREATE INDEX idx_price_range ON products(price) WHERE status = 1;

4.3 前端性能

Vue优化技巧：

• 组件懒加载
• 路由级别代码分割
• 虚拟滚动长列表
• Web Worker处理复杂计算

// 动态导入组件 const ProductDetail = defineAsyncComponent(() => import('./views/ProductDetail.vue') )

5. 安全防护措施

5.1 认证授权

JWT实现方案：

• 双Token机制（access/refresh）
• 黑名单处理提前退出
• 权限注解控制接口访问
• 密码加盐哈希存储

// Spring Security配置 @Configuration @EnableWebSecurity public class SecurityConfig { @Bean SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/api/admin/**").hasRole("ADMIN") .anyRequest().authenticated(); return http.build(); } }

5.2 数据安全

敏感信息保护：

• 日志脱敏处理
• 数据库字段加密
• HTTPS强制传输
• SQL注入防护

// 数据脱敏工具类 public class DataMasker { public static String maskMobile(String mobile) { return mobile.replaceAll("(\\d{3})\\d{4}(\\d{4})", "$1****$2"); } }

6. 部署方案

6.1 容器化部署

Docker Compose编排：

• 应用服务集群
• MySQL主从配置
• Redis哨兵模式
• Nginx负载均衡

# SpringBoot应用Dockerfile FROM openjdk:17-jdk COPY target/*.jar app.jar ENTRYPOINT ["java","-jar","/app.jar"]

6.2 监控告警

Prometheus监控体系：

• JVM指标采集
• 业务自定义指标
• Grafana可视化看板
• 异常告警通知

# Actuator配置 management: endpoints: web: exposure: include: "*" metrics: tags: application: ${spring.application.name}

7. 开发实践建议

7.1 代码规范

团队协作约定：

• Git Flow工作流
• SonarQube静态检查
• 统一的DTO规范
• 接口版本管理

// 统一响应体示例 public class Result<T> { private Integer code; private String message; private T data; private Long timestamp = System.currentTimeMillis(); }

7.2 测试策略

质量保障体系：

• JUnit5单元测试
• Testcontainers集成测试
• MockMVC接口测试
• JaCoCo覆盖率检查

// 商品服务测试示例 @SpringBootTest class ProductServiceTest { @Autowired private ProductService productService; @Test @DisplayName("测试商品创建") void testCreateProduct() { ProductCreateDTO dto = new ProductCreateDTO(); // 构造测试数据 Long id = productService.create(dto); assertNotNull(id); } }

8. 文档体系说明

项目包含完整文档：

• 需求规格说明书
• 数据库设计文档
• API接口文档（Swagger）
• 部署操作手册
• 用户使用指南

# Swagger配置示例 springdoc: api-docs: path: /v3/api-docs swagger-ui: path: /swagger-ui.html operationsSorter: method

9. 常见问题解决

9.1 MyBatis-Plus异常

问题1：更新操作不生效

• 检查@TableField注解配置
• 确认updateWrapper条件正确
• 事务注解是否生效

问题2：分页总数不准

• 使用优化后的count查询
• 避免left join影响计数
• 手动编写count语句

9.2 Vue3响应式问题

问题1：解构丢失响应性

• 使用toRefs保持响应
• 避免直接解构props
• 组合式函数返回ref

// 正确解构方式 const { count } = toRefs(props)

问题2：组件重复渲染

• 检查key属性设置
• 使用shallowRef优化大对象
• 合理使用v-once

10. 扩展建议

10.1 业务扩展方向

• 增加预售模式
• 实现拼团功能
• 接入物流跟踪
• 开发商家端APP

10.2 技术演进路线

• 迁移到SpringCloud
• 尝试GraalVM原生镜像
• 引入Elasticsearch搜索
• 实现WebAssembly优化

# 原生镜像编译示例 native-image -jar your-application.jar \ --no-fallback \ -H:Name=electronics-store