SpringBoot+Vue3电商系统开发实战与优化

戴小青

1. 项目概述

这个基于Java SpringBoot+Vue3+MyBatis的网上购物商城系统，采用前后端分离架构，是一个典型的电商平台解决方案。我在实际开发过程中发现，这种技术组合特别适合中小型电商项目的快速开发和迭代。系统包含完整的用户管理、商品展示、购物车、订单处理等核心电商功能模块，后端使用SpringBoot框架提供RESTful API，前端采用Vue3构建响应式用户界面，数据持久层使用MyBatis操作MySQL数据库。

提示：前后端分离架构的最大优势在于开发团队可以并行工作，前端专注于用户体验，后端专注于业务逻辑和数据安全。

2. 技术选型解析

2.1 后端技术栈

选择SpringBoot作为后端框架主要基于以下几点考虑：

自动配置特性大大减少了XML配置
内嵌Tomcat服务器简化了部署流程
丰富的starter依赖可以快速集成常用组件
完善的生态系统和社区支持

我在项目中特别使用了Spring Security结合JWT实现认证授权，这是目前最安全的方案之一。JWT令牌的有效期设置为2小时，刷新令牌有效期为7天，这种设计既保证了安全性又不会频繁要求用户重新登录。

2.2 前端技术栈

Vue3相比Vue2有几个显著优势：

Composition API提供了更好的代码组织方式
更小的打包体积和更快的渲染速度
更好的TypeScript支持

实际开发中，我使用Vue Router处理前端路由，Pinia作为状态管理库，Element Plus提供UI组件。特别值得一提的是，Vue3的响应式系统重构后，性能提升了约40%，这在商品列表页这种需要频繁更新视图的场景下优势明显。

2.3 数据库设计

MySQL作为关系型数据库，在电商系统中表现稳定。我设计的几个核心表都遵循了第三范式：

用户表(user)

sql复制CREATE TABLE `user` (
  `user_id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_login_time` datetime DEFAULT NULL,
  `account_status` tinyint DEFAULT '1',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

商品表(product)

sql复制CREATE TABLE `product` (
  `product_id` bigint NOT NULL AUTO_INCREMENT,
  `product_name` varchar(100) NOT NULL,
  `category_id` int NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `stock` int NOT NULL,
  `description` text,
  `image_url` varchar(200) DEFAULT NULL,
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`product_id`),
  KEY `category_id` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现

3.1 用户认证模块

采用JWT认证流程如下：

用户提交用户名密码
服务端验证通过后生成access_token和refresh_token
客户端存储token并在后续请求中携带
服务端验证token有效性

关键代码示例（Spring Security配置）：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
    
    @Bean
    public JwtAuthenticationFilter jwtAuthenticationFilter() {
        return new JwtAuthenticationFilter();
    }
}

3.2 商品模块

商品模块实现了CRUD操作和分页查询。我特别优化了商品搜索功能，支持以下查询方式：

关键字搜索（使用MySQL全文索引）
分类筛选
价格区间过滤
销量/价格排序

后端接口示例：

java复制@RestController
@RequestMapping("/api/products")
public class ProductController {
    
    @Autowired
    private ProductService productService;
    
    @GetMapping
    public ResponseEntity<Page<Product>> getProducts(
            @RequestParam(required = false) String keyword,
            @RequestParam(required = false) Integer categoryId,
            @RequestParam(required = false) Double minPrice,
            @RequestParam(required = false) Double maxPrice,
            @RequestParam(defaultValue = "0") int page,
            @RequestParam(defaultValue = "10") int size) {
        Page<Product> products = productService.searchProducts(
                keyword, categoryId, minPrice, maxPrice, page, size);
        return ResponseEntity.ok(products);
    }
}

3.3 购物车和订单模块

购物车设计考虑了两种场景：

登录用户的持久化购物车（存储到数据库）
未登录用户的临时购物车（存储到localStorage）

订单状态机设计：

mermaid复制stateDiagram
    [*] --> 待支付
    待支付 --> 已支付: 支付成功
    已支付 --> 已发货: 商家发货
    已发货 --> 已完成: 用户确认收货
    待支付 --> 已取消: 超时未支付

4. 性能优化实践

4.1 数据库优化

为常用查询字段添加索引
使用连接池（HikariCP）
大表进行分表（如订单表按用户ID哈希分表）
冷热数据分离（历史订单归档）

4.2 缓存策略

采用多级缓存架构：

本地缓存（Caffeine） - 高频访问数据
Redis缓存 - 共享缓存
数据库 - 最终数据源

商品详情缓存示例：

java复制@Service
public class ProductServiceImpl implements ProductService {
    
    @Cacheable(value = "product", key = "#productId")
    public Product getProductById(Long productId) {
        return productMapper.selectById(productId);
    }
    
    @CacheEvict(value = "product", key = "#productId")
    public void updateProduct(Product product) {
        productMapper.updateById(product);
    }
}

4.3 前端性能优化

组件懒加载
路由懒加载
图片懒加载
API请求节流
Webpack分包优化

5. 安全防护措施

5.1 常见攻击防护

SQL注入：使用MyBatis参数化查询
XSS：前端使用DOMPurify净化输入，后端过滤敏感字符
CSRF：虽然RESTful API天然防御CSRF，但仍建议使用SameSite Cookie
暴力破解：登录接口添加验证码和限流

5.2 数据安全

密码加盐哈希存储（BCrypt）
敏感信息加密（如手机号）
日志脱敏
HTTPS传输

密码加密示例：

java复制public class PasswordUtil {
    
    private static final BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
    
    public static String encode(String rawPassword) {
        return encoder.encode(rawPassword);
    }
    
    public static boolean matches(String rawPassword, String encodedPassword) {
        return encoder.matches(rawPassword, encodedPassword);
    }
}

6. 部署方案

6.1 开发环境

后端：IDEA + JDK17
前端：VSCode + Node.js 16+
数据库：MySQL 8.0 Docker容器
其他：Redis、Nginx（反向代理）

6.2 生产环境部署

推荐使用Docker Compose编排服务：

yaml复制version: '3'

services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: mall
    volumes:
      - mysql_data:/var/lib/mysql
    
  redis:
    image: redis:6
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
    
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    
volumes:
  mysql_data:

7. 常见问题解决

7.1 跨域问题

解决方案：

后端配置CORS
Nginx反向代理
开发环境使用Vue代理

SpringBoot CORS配置：

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

7.2 接口幂等性

对于订单创建等关键操作，采用token机制保证幂等性：

客户端先获取token
提交请求时携带token
服务端校验token后删除

7.3 并发控制

商品库存扣减使用乐观锁：

sql复制UPDATE product SET stock = stock - 1 
WHERE product_id = ? AND stock >= 1

8. 扩展建议

增加秒杀功能：使用Redis预减库存+消息队列异步处理
接入第三方登录：微信、支付宝等OAuth2.0登录
实现推荐系统：基于用户行为的协同过滤
加入ELK日志分析系统
集成Prometheus监控

秒杀功能核心代码示例：

java复制public class SeckillService {
    
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
    
    @Autowired
    private RabbitTemplate rabbitTemplate;
    
    public boolean seckill(Long userId, Long productId) {
        // 预减库存
        Long stock = redisTemplate.opsForValue().decrement("seckill:stock:" + productId);
        if (stock < 0) {
            return false;
        }
        
        // 发送消息到队列
        SeckillMessage message = new SeckillMessage(userId, productId);
        rabbitTemplate.convertAndSend("seckill.exchange", "seckill.routingKey", message);
        return true;
    }
}

这个电商系统从技术选型到具体实现都经过精心设计，我在开发过程中积累了一些值得分享的经验：首先，接口设计要遵循RESTful规范，保持简洁一致；其次，异常处理要全面，给前端明确的错误码和提示；最后，日志记录要详细，便于排查问题。系统还有很多可以优化的地方，比如引入服务网格提高微服务治理能力，或者使用Kubernetes实现自动扩缩容。