SpringBoot+Vue3+MyBatis全栈电商平台架构实践

1. 项目概述全栈电商平台的技术架构选型这个手机商城系统采用了当前企业级开发中最主流的全栈技术组合SpringBootVue3MyBatis。作为一套完整的前后端分离解决方案它完美诠释了现代Web应用的标准架构模式。我在实际开发中发现这种技术栈组合特别适合中小型电商项目——SpringBoot提供了稳健的后台服务能力Vue3带来了流畅的前端交互体验而MyBatis则保证了数据操作的灵活性。系统采用MySQL作为核心数据库这是经过多次项目验证的可靠选择。对于日订单量在1万以下的电商场景MySQL 8.0的性能完全够用而且其事务特性和索引优化对商品库存管理、订单处理等核心业务提供了坚实保障。相比MongoDB等NoSQL方案关系型数据库在保证数据一致性的优势显而易见。2. 核心技术栈深度解析2.1 SpringBoot后端设计要点采用SpringBoot 2.7.x版本兼容JDK11作为基础框架这是目前生产环境最稳定的版本组合。在项目初始化时我特别推荐使用Spring Initializr生成项目骨架这能避免手动配置带来的各种依赖冲突问题。核心配置示例application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/phone_mall?useSSLfalseserverTimezoneAsia/Shanghai username: root password: 加密后的密码建议使用Jasypt处理 redis: host: 127.0.0.1 port: 6379 password: ${REDIS_PASSWORD:}重要提示数据库连接一定要配置时区参数否则会遇到令人头疼的时区转换问题。我在三个不同项目中都踩过这个坑。2.2 Vue3前端工程化实践前端采用Vue3 Vite的组合相比传统Webpack方案冷启动速度提升超过70%。特别值得注意的是商城类项目一定要做好以下优化路由懒加载商品详情等大流量页面必须拆分chunk图片压缩使用vite-plugin-imagemin自动压缩商品图片按需引入Element Plus等UI库必须配置自动导入典型的路由配置示例const routes [ { path: /product/:id, component: () import(/views/ProductDetail.vue), meta: { keepAlive: true } } ]2.3 MyBatis的进阶用法在商品模块中我们大量使用了MyBatis的动态SQL功能。比如商品筛选条件的动态拼接select idselectByCondition resultMapProductResult SELECT * FROM product where if testbrandId ! null AND brand_id #{brandId} /if if testminPrice ! null AND price #{minPrice} /if if testmaxPrice ! null AND price #{maxPrice} /if /where ORDER BY create_time DESC /select强烈建议安装MyBatis Log Free插件它能直接输出最终执行的SQL语句调试效率提升200%以上。3. 数据库设计与优化策略3.1 核心表结构设计手机商城最关键的5张表及其关系用户表(user)采用B树索引优化登录查询商品表(product)建立组合索引(category_id, status)订单表(order)分区表设计按月份划分购物车表(cart)Redis缓存MySQL持久化双写评价表(review)全文索引优化搜索商品表的典型DDLCREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) COLLATE utf8mb4_bin NOT NULL, price decimal(10,2) NOT NULL, stock int NOT NULL DEFAULT 0, category_id int NOT NULL, status tinyint NOT NULL DEFAULT 1, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_category_status (category_id,status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_bin;3.2 性能优化实战技巧在高并发场景下我们采用了以下优化方案商品详情缓存Redis 本地缓存二级架构库存扣减MySQL乐观锁 Redis原子操作订单编号生成雪花算法替代UUID分页查询深度分页优化先查ID再关联库存扣减的原子操作示例Transactional public boolean reduceStock(Long productId, Integer quantity) { int affected productMapper.updateStock(productId, quantity); if (affected 0) { throw new BusinessException(库存不足); } return true; }对应的Mapper XMLupdate idupdateStock UPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity} /update4. 典型问题排查手册4.1 跨域问题解决方案前后端分离项目必遇的跨域问题推荐以下配置SpringBoot端CORS配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }Vue3端axios配置const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 10000, withCredentials: true })4.2 文件上传的坑商品图片上传需要特别注意前端需要将文件对象封装为FormData后端SpringBoot默认单文件最大1MB需要调整spring: servlet: multipart: max-file-size: 10MB max-request-size: 100MB完整的上传Controller示例PostMapping(/upload) public ResultString upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(请选择文件); } String fileName FileUtil.upload(file); return Result.success(fileName); }5. 部署与监控方案5.1 生产环境部署推荐使用Docker Compose编排服务version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: yourpassword volumes: - ./mysql/data:/var/lib/mysql ports: - 3306:3306 redis: image: redis:6 ports: - 6379:6379 backend: build: ./backend ports: - 8080:8080 depends_on: - mysql - redis frontend: build: ./frontend ports: - 80:805.2 监控与日志必备的监控组件SpringBoot Actuator健康检查Prometheus Grafana性能监控ELK日志收集分析关键Actuator配置management: endpoints: web: exposure: include: * endpoint: health: show-details: always在项目开发过程中我发现商品搜索功能的性能优化最具挑战性。最终采用的方案是Elasticsearch同步MySQL数据查询响应时间从原来的800ms降低到了120ms左右。这提醒我们在电商系统中搜索功能绝不能简单依赖数据库的LIKE查询