1. 项目概述这个前后端分离的在线宠物用品交易系统是我去年为一个创业团队开发的核心项目。采用SpringBootVueMyBatisMySQL的技术栈组合经过半年多的实际运营验证系统稳定支持日均3000订单的处理量。下面我将从架构设计到部署上线的完整过程进行拆解特别会分享在实际业务场景中遇到的性能优化问题和解决方案。2. 技术选型解析2.1 后端技术栈SpringBoot 2.7.3作为基础框架主要考虑其内嵌Tomcat简化部署自动配置减少XML配置与MyBatis的天然集成优势数据库选用MySQL 8.0而非5.7版本主要因为JSON字段支持更好用于存储商品规格参数窗口函数便于销售数据分析性能提升30%以上实测QPS2.2 前端技术栈Vue 3.2 Element Plus的组合特别适合电商类项目Composition API使代码组织更清晰按需引入减少打包体积最终chunk减小40%TypeScript支持完善采用TS严格模式3. 核心模块实现3.1 商品模块设计商品表采用纵向分表策略CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 商品名称, category_id int NOT NULL COMMENT 分类ID, price decimal(10,2) NOT NULL COMMENT 售价, stock int NOT NULL DEFAULT 0 COMMENT 库存, status tinyint NOT NULL DEFAULT 1 COMMENT 状态, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE product_spec ( product_id bigint NOT NULL, spec_json json NOT NULL COMMENT 规格参数, PRIMARY KEY (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3.2 购物车实现采用Redis Hash结构存储购物车数据// 购物车数据结构示例 { userId:1001: { product:202: { quantity: 2, selected: true, addTime: 1634567890 } } }重要提示必须设置Redis过期时间建议7天避免无效数据堆积4. 性能优化实践4.1 缓存策略采用多级缓存方案本地Caffeine缓存高频访问数据Redis集群缓存全量数据MySQL持久层缓存更新采用Write-Through模式CachePut(value products, key #product.id) public Product updateProduct(Product product) { productMapper.updateById(product); return product; }4.2 数据库优化针对商品列表查询的慢SQL问题我们添加复合索引(category_id, status, price)使用覆盖索引避免回表大分页改用游标方式优化前后对比指标优化前优化后QPS120850平均响应时间450ms65ms5. 部署方案5.1 服务器配置推荐生产环境配置前端Nginx2C4G后端SpringBoot4C8G×2数据库MySQL8C16G Redis4C8G5.2 容器化部署使用Docker Compose编排version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql ports: - 3306:3306 redis: image: redis:6 command: redis-server --requirepass ${REDIS_PASSWORD} ports: - 6379:63796. 踩坑记录Vue路由问题现象刷新页面后路由丢失原因history模式需要Nginx配置解决添加try_files规则location / { try_files $uri $uri/ /index.html; }MyBatis批量插入错误做法循环执行单条insert正确方案使用foreach标签insert idbatchInsert INSERT INTO order_detail (order_id, product_id, quantity) VALUES foreach collectionlist itemitem separator, (#{item.orderId}, #{item.productId}, #{item.quantity}) /foreach /insert这个项目让我深刻体会到电商系统的核心在于处理好三高问题高并发、高可用、高性能。特别是在促销活动时提前做好压力测试和熔断方案至关重要。建议开发阶段就引入JMeter进行基准测试我们通过这种方式提前发现了多个性能瓶颈。 SpringBoot+Vue电商系统架构与性能优化实战
1. 项目概述这个前后端分离的在线宠物用品交易系统是我去年为一个创业团队开发的核心项目。采用SpringBootVueMyBatisMySQL的技术栈组合经过半年多的实际运营验证系统稳定支持日均3000订单的处理量。下面我将从架构设计到部署上线的完整过程进行拆解特别会分享在实际业务场景中遇到的性能优化问题和解决方案。2. 技术选型解析2.1 后端技术栈SpringBoot 2.7.3作为基础框架主要考虑其内嵌Tomcat简化部署自动配置减少XML配置与MyBatis的天然集成优势数据库选用MySQL 8.0而非5.7版本主要因为JSON字段支持更好用于存储商品规格参数窗口函数便于销售数据分析性能提升30%以上实测QPS2.2 前端技术栈Vue 3.2 Element Plus的组合特别适合电商类项目Composition API使代码组织更清晰按需引入减少打包体积最终chunk减小40%TypeScript支持完善采用TS严格模式3. 核心模块实现3.1 商品模块设计商品表采用纵向分表策略CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 商品名称, category_id int NOT NULL COMMENT 分类ID, price decimal(10,2) NOT NULL COMMENT 售价, stock int NOT NULL DEFAULT 0 COMMENT 库存, status tinyint NOT NULL DEFAULT 1 COMMENT 状态, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE product_spec ( product_id bigint NOT NULL, spec_json json NOT NULL COMMENT 规格参数, PRIMARY KEY (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3.2 购物车实现采用Redis Hash结构存储购物车数据// 购物车数据结构示例 { userId:1001: { product:202: { quantity: 2, selected: true, addTime: 1634567890 } } }重要提示必须设置Redis过期时间建议7天避免无效数据堆积4. 性能优化实践4.1 缓存策略采用多级缓存方案本地Caffeine缓存高频访问数据Redis集群缓存全量数据MySQL持久层缓存更新采用Write-Through模式CachePut(value products, key #product.id) public Product updateProduct(Product product) { productMapper.updateById(product); return product; }4.2 数据库优化针对商品列表查询的慢SQL问题我们添加复合索引(category_id, status, price)使用覆盖索引避免回表大分页改用游标方式优化前后对比指标优化前优化后QPS120850平均响应时间450ms65ms5. 部署方案5.1 服务器配置推荐生产环境配置前端Nginx2C4G后端SpringBoot4C8G×2数据库MySQL8C16G Redis4C8G5.2 容器化部署使用Docker Compose编排version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql ports: - 3306:3306 redis: image: redis:6 command: redis-server --requirepass ${REDIS_PASSWORD} ports: - 6379:63796. 踩坑记录Vue路由问题现象刷新页面后路由丢失原因history模式需要Nginx配置解决添加try_files规则location / { try_files $uri $uri/ /index.html; }MyBatis批量插入错误做法循环执行单条insert正确方案使用foreach标签insert idbatchInsert INSERT INTO order_detail (order_id, product_id, quantity) VALUES foreach collectionlist itemitem separator, (#{item.orderId}, #{item.productId}, #{item.quantity}) /foreach /insert这个项目让我深刻体会到电商系统的核心在于处理好三高问题高并发、高可用、高性能。特别是在促销活动时提前做好压力测试和熔断方案至关重要。建议开发阶段就引入JMeter进行基准测试我们通过这种方式提前发现了多个性能瓶颈。