Spring Boot与Vue3构建电商平台的技术实践
1. 项目背景与技术选型解析衣依服装销售平台是一个典型的B2C电商系统采用前后端分离架构实现。这套源码的价值在于它完整呈现了2023年主流Java技术栈的最佳实践组合Spring Boot 2作为后端框架、Vue 3负责前端展示、MyBatis-Plus处理数据持久化、MySQL 8.0作为数据库支撑。这种技术组合在当前企业级应用开发中具有标杆意义。为什么选择Spring Boot 2而非最新版本这是实际项目开发中的理性决策。Spring Boot 2.x系列当前最新为2.7.x经过长期生产环境验证与MyBatis-Plus 3.5.17版本存在完善的版本兼容性。而Spring Boot 3.x需要JDK 17支持对很多仍在Java 8环境的企业来说存在升级门槛。这种版本匹配考量正是企业级开发的核心经验。Vue 3的组合式API与Spring Boot的注解驱动开发形成了有趣的对比。前端使用setup语法糖编写组件逻辑后端通过RestController暴露RESTful接口这种开发模式让全栈工程师能够用相似的模块化思维处理前后端代码。我在实际开发中发现这种对称性能显著提升开发效率。2. 系统架构设计与核心模块2.1 分层架构实现系统采用经典的三层架构但每个层面都有现代框架的特色实现表现层Vue 3 Element Plus构建的管理后台采用基于路由的懒加载策略业务层Spring Boot的starter模块化设计按功能划分为├── yiyi-admin // 管理后台接口 ├── yiyi-common // 通用工具包 ├── yiyi-generator // 代码生成器 ├── yiyi-system // 系统管理模块 └── yiyi-mall // 商城业务模块数据层MyBatis-Plus的动态SQL生成 MySQL 8.0的窗口函数优化查询2.2 关键技术实现亮点商品模块的SKU设计采用了JSON字段存储方案充分利用MySQL 8.0的JSON功能// 商品规格定义 TableField(typeHandler JacksonTypeHandler.class) private ListSpecItem specList; // MyBatis-Plus配置 Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new DynamicTableNameInnerInterceptor()); return interceptor; }订单模块使用Spring的Transactional注解管理分布式事务特别要注意的是隔离级别的设置Transactional(isolation Isolation.READ_COMMITTED, rollbackFor Exception.class) public OrderDTO createOrder(OrderParam param) { // 库存校验 // 订单生成 // 支付记录 }3. 开发环境搭建指南3.1 后端环境配置JDK选择推荐Amazon Corretto 11避免OpenJDK的内存问题注意遇到Java: OutOfMemoryError时需设置JVM参数 -Xms512m -Xmx1024m -XX:MaxMetaspaceSize256mLombok插件安装必须与IDE版本匹配dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId version1.18.26/version scopeprovided/scope /dependencyMySQL 8.0配置要点CREATE DATABASE yiyi_mall CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci;3.2 前端环境优化Vue 3开发常见问题解决方案Edge浏览器兼容性问题在vite.config.js中添加export default defineConfig({ server: { headers: { Cross-Origin-Opener-Policy: same-origin, Cross-Origin-Embedder-Policy: require-corp } } })SVG组件封装技巧template svg :widthwidth :heightheight use :xlink:href#${icon} / /svg /template4. 典型业务场景实现4.1 商品搜索功能采用ElasticsearchMySQL双写方案商品变更时通过Spring Event发布事件EventListener public void handleProductChange(ProductEvent event) { // 同步到ES elasticTemplate.save(buildProductDoc(event.getProduct())); }前端实现防抖搜索import { debounce } from lodash-es; const search debounce(() { api.searchProduct(keyword.value).then(res { productList.value res.data }) }, 300)4.2 购物车设计采用Redis Hash存储方案// 购物车结构 public class CartItem { private Long skuId; private Integer quantity; private BigDecimal price; } // Redis操作封装 public void addCart(Long userId, CartItem item) { redisTemplate.opsForHash().put( user:cart: userId, item.getSkuId().toString(), item ); }5. 性能优化实践5.1 MySQL查询优化利用窗口函数优化分页SELECT * FROM ( SELECT *, ROW_NUMBER() OVER(ORDER BY sales DESC) AS row_num FROM product ) t WHERE row_num BETWEEN 11 AND 20索引设计规范商品表联合索引(category_id, status)订单表唯一索引(order_no) 普通索引(user_id)5.2 JVM调优经验生产环境推荐配置-XX:UseG1GC -XX:MaxGCPauseMillis200 -XX:InitiatingHeapOccupancyPercent35 -XX:ExplicitGCInvokesConcurrent6. 安全防护措施6.1 接口安全设计采用JWTSpring Security方案Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())); } }敏感数据脱敏处理JsonSerialize(using SensitiveSerializer.class) private String mobile; public class SensitiveSerializer extends JsonSerializerString { Override public void serialize(String value, JsonGenerator gen, SerializerProvider provider) throws IOException { gen.writeString(value.replaceAll((\\d{3})\\d{4}(\\d{4}), $1****$2)); } }7. 部署与监控7.1 Docker化部署后端Dockerfile示例FROM amazoncorretto:11 COPY target/yiyi-admin.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]前端Nginx配置要点location / { try_files $uri $uri/ /index.html; gzip on; gzip_types text/plain application/xml application/javascript; }7.2 监控方案Spring Boot Actuator配置management: endpoints: web: exposure: include: health,info,metrics endpoint: health: show-details: always前端性能监控import { getCLS, getFID, getLCP } from web-vitals; getCLS(console.log); getFID(console.log); getLCP(console.log);8. 项目扩展方向微服务改造可将商品、订单等模块拆分为独立服务采用Spring Cloud Alibaba体系多租户支持通过MyBatis-Plus的租户插件实现Bean public TenantLineInnerInterceptor tenantLineInnerInterceptor() { return new TenantLineInnerInterceptor(new TenantLineHandler() { Override public String getTenantIdColumn() { return tenant_id; } }); }移动端适配基于Vue3的Vant组件库开发H5版本在实际开发中我发现MyBatis-Plus的Lambda查询特别适合复杂业务场景ListProduct products productMapper.selectList(Wrappers.ProductlambdaQuery() .eq(Product::getStatus, 1) .between(Product::getPrice, minPrice, maxPrice) .orderByDesc(Product::getSales));对于需要频繁变动的业务逻辑建议采用策略模式封装public interface DiscountStrategy { BigDecimal calculate(BigDecimal price); } Service public class VipDiscount implements DiscountStrategy { Override public BigDecimal calculate(BigDecimal price) { return price.multiply(new BigDecimal(0.8)); } }
