SpringBoot+Vue3+MyBatis全栈电商平台架构解析-育师

1. 项目概述：全栈电商平台的技术架构解析

这个手机商城系统采用了当前主流的前后端分离架构，后端基于SpringBoot框架构建，前端使用Vue3实现，数据持久层选用MyBatis操作MySQL数据库。这种技术组合在电商类项目中具有典型代表性，既能满足高并发场景下的性能需求，又能保证开发效率和可维护性。

我在实际开发中发现，欢迪迈手机商城这类系统通常需要处理几个核心业务场景：商品展示、购物车管理、订单处理、支付对接和用户管理。每个模块都有其特定的技术实现难点，比如商品SKU的多维属性处理、高并发下的库存扣减、分布式事务管理等。

提示：选择SpringBoot+Vue3+MyBatis这套技术栈时，要特别注意各组件版本兼容性问题。比如SpringBoot 3.x需要JDK17+支持，而Vue3的Composition API与传统Options API在开发体验上有显著差异。

2. 技术栈深度解析与选型考量

2.1 SpringBoot后端框架优势

SpringBoot的自动配置机制大幅减少了XML配置工作量。在商城项目中，我通过starter依赖快速集成了：

spring-boot-starter-web（RESTful API支持）
spring-boot-starter-security（权限控制）
spring-boot-starter-data-redis（缓存层）
spring-boot-starter-mail（邮件通知）

特别在支付回调处理中，SpringBoot的内置Tomcat容器能稳定处理支付宝/微信支付的异步通知。实测在4核8G服务器上，SpringBoot 2.7.x版本可稳定支撑800+ QPS的商品查询请求。

2.2 Vue3前端框架特性应用

Vue3的Composition API让商城前端代码组织更灵活。例如商品详情页的代码可以这样结构化：

// 商品核心逻辑 const useProduct = () => { const product = ref(null) const getDetail = async (id) => { product.value = await api.getProduct(id) } return { product, getDetail } } // 购物车交互逻辑 const useCart = () => { const addToCart = (sku) => { // 购物车操作逻辑 } return { addToCart } }

这种组织方式比Vue2的Options API更利于复杂业务逻辑的复用。配合Vite构建工具，开发环境热更新速度提升明显。

2.3 MyBatis持久层实践技巧

在商品SKU这类复杂关系处理上，MyBatis的动态SQL展现出强大优势：

<select id="selectSkusByCondition" resultType="Sku"> SELECT * FROM product_sku <where> <if test="productId != null"> AND product_id = #{productId} </if> <if test="attrs != null"> AND JSON_CONTAINS(spec_attrs, #{attrs}) </if> <if test="minPrice != null"> AND price >= #{minPrice} </if> </where> </select>

我特别推荐使用MyBatis-Plus扩展库，其Lambda表达式写法让代码更简洁：

List<Product> products = productMapper.selectList( Wrappers.<Product>lambdaQuery() .eq(Product::getCategoryId, categoryId) .gt(Product::getStock, 0) .orderByDesc(Product::getSales) );

3. 数据库设计与性能优化

3.1 MySQL表结构关键设计

电商系统的数据库设计有几个核心表需要特别注意：

商品表(product)：采用SPU+SKU两级结构

CREATE TABLE `product` ( `id` BIGINT PRIMARY KEY, `name` VARCHAR(120) NOT NULL, `category_id` INT NOT NULL, `brand_id` INT, `default_sku_id` BIGINT, `status` TINYINT DEFAULT 1 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

SKU表(product_sku)：使用JSON存储规格属性

CREATE TABLE `product_sku` ( `id` BIGINT PRIMARY KEY, `product_id` BIGINT NOT NULL, `spec_attrs` JSON NOT NULL COMMENT '规格属性JSON', `price` DECIMAL(10,2) NOT NULL, `stock` INT NOT NULL DEFAULT 0, INDEX `idx_product` (`product_id`) );

订单表(order)：关键字段需考虑分库分表

CREATE TABLE `order` ( `id` VARCHAR(32) PRIMARY KEY, `user_id` BIGINT NOT NULL, `total_amount` DECIMAL(12,2) NOT NULL, `payment_way` TINYINT NOT NULL, `status` TINYINT NOT NULL DEFAULT 0, `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, INDEX `idx_user` (`user_id`), INDEX `idx_create` (`create_time`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 性能优化实战方案

在高并发场景下，我们实施了以下优化措施：

查询优化：

商品列表页使用覆盖索引：

ALTER TABLE product ADD INDEX idx_category_status (category_id, status);

热点数据缓存：使用Redis缓存商品详情，设置合理的过期策略

@Cacheable(value = "product", key = "#id", unless = "#result == null") public Product getProductById(Long id) { return productMapper.selectById(id); }

库存扣减方案：

乐观锁实现：

UPDATE product_sku SET stock = stock - #{num} WHERE id = #{skuId} AND stock >= #{num}

预扣库存+定时任务补偿机制

读写分离：使用Sharding-JDBC实现MySQL主从分离

4. 前后端分离架构实现细节

4.1 接口规范设计

采用RESTful风格设计API，规范包括：

状态码：200成功，400参数错误，401未授权，500服务器错误

响应体格式：

{ "code": 200, "message": "success", "data": {...}, "timestamp": 1689234567890 }

使用Swagger生成接口文档：

@Configuration @EnableOpenApi public class SwaggerConfig { @Bean public Docket api() { return new Docket(DocumentationType.OAS_30) .select() .apis(RequestHandlerSelectors.basePackage("com.handima.mall.controller")) .paths(PathSelectors.any()) .build(); } }

4.2 跨域与安全方案

CORS配置：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*") .maxAge(3600); } }

JWT认证流程：

登录成功后生成token：

String token = Jwts.builder() .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() + 3600 * 1000)) .signWith(SignatureAlgorithm.HS512, secretKey) .compact();

前端在axios拦截器中添加token：

service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config })

5. 典型业务场景实现

5.1 商品搜索功能实现

采用Elasticsearch实现全文检索：

@RestController @RequestMapping("/search") public class SearchController { @Autowired private ElasticsearchRestTemplate elasticsearchTemplate; @GetMapping public Page<ProductVO> search( @RequestParam String keyword, @RequestParam(defaultValue = "0") Integer page, @RequestParam(defaultValue = "10") Integer size) { NativeSearchQuery query = new NativeSearchQueryBuilder() .withQuery(QueryBuilders.multiMatchQuery(keyword, "name", "keywords")) .withPageable(PageRequest.of(page, size)) .build(); SearchHits<ProductDocument> hits = elasticsearchTemplate.search(query, ProductDocument.class); List<ProductVO> products = hits.stream() .map(hit -> convertToVO(hit.getContent())) .collect(Collectors.toList()); return new PageImpl<>(products, query.getPageable(), hits.getTotalHits()); } }

5.2 购物车设计要点

混合存储方案：

未登录用户：使用浏览器localStorage存储

已登录用户：同步到服务端Redis

public void addToCart(Long userId, CartItem cartItem) { String key = "cart:" + userId; redisTemplate.opsForHash().put( key, cartItem.getSkuId().toString(), JSON.toJSONString(cartItem) ); redisTemplate.expire(key, 30, TimeUnit.DAYS); }

5.3 订单创建流程

分布式事务处理方案：

@Transactional public Order createOrder(OrderDTO orderDTO) { // 1. 校验库存 List<OrderItem> items = checkStock(orderDTO.getItems()); // 2. 扣减库存 reduceStock(items); // 3. 生成订单 Order order = generateOrder(orderDTO, items); // 4. 清除购物车 clearCart(orderDTO.getUserId(), orderDTO.getCartItems()); return order; }

6. 部署与监控方案

6.1 容器化部署

使用Docker Compose编排服务：

version: '3' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root ports: - "3306:3306" volumes: - ./mysql/data:/var/lib/mysql redis: image: redis:6 ports: - "6379:6379" backend: build: ./backend ports: - "8080:8080" depends_on: - mysql - redis frontend: build: ./frontend ports: - "80:80"

6.2 性能监控配置

SpringBoot Actuator + Prometheus + Grafana监控方案：

# application.yml management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: export: prometheus: enabled: true

7. 开发中的典型问题与解决方案

7.1 跨域问题深度处理

除了基础的CORS配置外，还需要注意：

携带Cookie时的配置：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") .allowCredentials(true) .allowedMethods("*") .maxAge(3600); } }

前端axios配置：
```
axios.defaults.withCredentials = true
```

7.2 图片上传与存储方案

采用阿里云OSS存储示例：

public String uploadToOss(MultipartFile file) { String fileName = UUID.randomUUID() + getExtension(file.getOriginalFilename()); OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); try { ossClient.putObject(bucketName, fileName, file.getInputStream()); return "https://" + bucketName + "." + endpoint + "/" + fileName; } finally { ossClient.shutdown(); } }

7.3 支付回调处理

保证接口幂等性的处理方案：

@PostMapping("/pay/callback") public String paymentCallback(@RequestBody String notifyData) { // 1. 验证签名 if (!alipaySignature.verify(notifyData)) { return "failure"; } // 2. 解析订单号 String orderNo = parseOrderNo(notifyData); // 3. 检查是否已处理 if (orderService.isProcessed(orderNo)) { return "success"; } // 4. 处理订单 orderService.handlePayment(orderNo); return "success"; }

8. 项目扩展方向建议

基于现有架构，可以考虑以下增强功能：

推荐系统集成：
- 基于用户行为的协同过滤推荐
- 使用Redis的Sorted Set实现实时排行榜

秒杀系统设计：

public boolean seckill(Long userId, Long skuId) { // 1. 内存标记过滤 if (!seckillStatus.contains(skuId)) { return false; } // 2. Redis预减库存 Long stock = redisTemplate.opsForValue().decrement("seckill:stock:" + skuId); if (stock < 0) { redisTemplate.opsForValue().increment("seckill:stock:" + skuId); return false; } // 3. 消息队列异步下单 mqTemplate.send("seckill.order", new SeckillMessage(userId, skuId)); return true; }