1. 项目概述全栈电商系统的技术选型与实践这套基于SpringBootVue3MyBatis的电子产品销售系统是当前企业级电商开发的典型技术组合。采用前后端分离架构前端使用Vue3组合式API开发后端基于SpringBoot快速构建RESTful接口数据持久层选用MyBatis实现灵活SQL映射配合MySQL关系型数据库完成业务数据存储。这种技术栈选择既保证了开发效率又能满足电商系统对高并发和复杂业务逻辑的处理需求。我在实际电商项目开发中发现这套技术组合特别适合中小型电商平台的快速迭代。Vue3的响应式特性让前端开发效率提升40%以上而SpringBoot的自动配置机制可以减少约30%的后端样板代码。MyBatis的XML映射文件虽然需要手动编写SQL但在复杂多表查询场景下反而比JPA等ORM框架更灵活可控。2. 技术架构深度解析2.1 前后端分离架构设计系统采用经典的前后端分离模式通过清晰的职责划分实现高效并行开发前端Vue3 TypeScript Pinia状态管理后端SpringBoot 2.7 JDK 11通信RESTful API JWT认证数据层MyBatis-Plus MySQL 8.0这种架构的优势在于开发效率前后端可以同步进行开发只需约定好API接口性能优化前端静态资源可通过CDN加速减轻服务器压力技术栈灵活前后端可以独立进行技术升级实际项目中常见的问题是接口规范不一致。我们采用Swagger UI自动生成API文档并约定响应体统一为{ code: 200, data: {}, message: success }2.2 数据库设计与优化针对电子产品销售场景数据库主要包含以下核心表表名字段示例索引设计备注productid, name, price, stock主键id, name全文索引商品SPU表product_skusku_id, product_id, specs联合索引(product_id, specs)商品SKU表orderorder_no, user_id, total_amount唯一索引order_no订单主表order_itemorder_no, sku_id, quantity联合索引(order_no, sku_id)订单明细在MySQL性能优化方面我们主要采取以下措施使用InnoDB引擎并合理设置缓冲池大小对高频查询字段建立复合索引大文本字段如商品详情使用垂直分表定期执行OPTIMIZE TABLE维护碎片3. 核心功能实现细节3.1 商品模块实现商品模块采用SPUSKU的数据模型前端使用Vue3的setup语法糖实现响应式表单script setup const formState reactive({ name: , categoryId: null, price: 0, description: , skuList: [{ specs: {}, price: 0, stock: 0 }] }) const handleAddSku () { formState.skuList.push({ specs: {}, price: formState.price, stock: 0 }) } /script后端采用MyBatis的动态SQL处理复杂查询条件select idselectProductPage resultMapProductResult SELECT * FROM product where if testname ! null and name ! AND name LIKE CONCAT(%, #{name}, %) /if if testminPrice ! null AND price #{minPrice} /if if testmaxPrice ! null AND price #{maxPrice} /if /where ORDER BY create_time DESC /select3.2 购物车与订单流程购物车设计考虑了几个关键点未登录用户使用浏览器localStorage存储已登录用户同步到服务端数据库采用Redis缓存商品价格防止下单时价格变动订单状态机设计public enum OrderStatus { PENDING_PAYMENT, // 待支付 PAID, // 已支付 SHIPPED, // 已发货 COMPLETED, // 已完成 CANCELLED // 已取消 }分布式事务处理采用本地消息表定时任务补偿机制确保订单创建和库存扣减的一致性。4. 安全与性能优化实践4.1 系统安全防护认证授权JWT Spring Security使用HS512算法签名Token设置15分钟过期时间采用refreshToken机制续期接口防护使用Spring注解进行权限控制PreAuthorize(hasRole(ADMIN)) PostMapping(/products) public Result addProduct(RequestBody Product product) { // ... }敏感参数过滤XSS攻击使用Hutool工具类进行SQL注入检测数据安全密码使用BCrypt加密存储敏感信息如手机号进行AES加密数据库定时备份到OSS4.2 性能优化方案缓存策略商品详情Redis缓存 本地Caffeine二级缓存热点数据预先加载到Redis缓存雪崩防护随机过期时间数据库优化读写分离主库写从库读大表分片按时间范围分片慢查询监控开启MySQL慢查询日志前端优化图片懒加载路由懒加载const ProductDetail () import(/views/product/Detail.vue)使用Webpack分包策略5. 部署与监控方案5.1 容器化部署采用Docker Compose编排服务version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql frontend: build: ./frontend ports: - 80:805.2 监控与日志监控体系Spring Boot Actuator暴露健康指标Prometheus Grafana监控JVM指标ELK收集分析日志报警机制异常日志企业微信通知接口响应时间超过1秒触发告警数据库连接池使用率监控6. 典型问题排查实录6.1 跨域问题解决方案开发环境配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }生产环境推荐使用Nginx反向代理解决跨域location /api/ { proxy_pass http://backend:8080/; add_header Access-Control-Allow-Origin $http_origin; }6.2 MyBatis缓存问题一级缓存导致的数据不一致问题Transactional public void updateProduct(Product product) { // 更新操作会清空一级缓存 productMapper.updateById(product); // 必须重新查询获取最新数据 Product newProduct productMapper.selectById(product.getId()); }二级缓存配置注意事项cache evictionLRU flushInterval60000 size1024/ !-- 需要序列化的实体类 -- mapper namespacecom.example.mapper.ProductMapper cache-ref namespacecom.example.mapper.ProductMapper/ /mapper6.3 Vue3响应式陷阱解构导致的响应式丢失// 错误做法 const { name, price } reactive(product) // 正确做法 const productRef ref(product) const name computed(() productRef.value.name)数组更新检测// Vue3不再需要特殊方法 skuList.value[index] newValue // 自动触发更新