SpringBoot+Vue运动商城系统开发实战-代码聚汇网

SpringBoot+Vue运动商城系统开发实战

Nicholas Qin

1. 项目概述：基于SpringBoot的运动用品商城系统

作为一名有10年Java全栈开发经验的工程师，我最近完成了一个基于SpringBoot的运动用品商城系统。这个项目采用前后端分离架构，后端使用SpringBoot+MyBatisPlus，前端使用Vue.js，数据库选用MySQL，是一个典型的B/S架构电商系统。

这个商城系统不仅实现了商品展示、购物车、订单管理等基础电商功能，还针对体育用品特点增加了运动分类、装备评测等特色模块。系统采用MVC设计模式，通过Spring Security实现了完善的权限控制，同时集成了支付宝沙箱支付接口，形成了一个完整的电商解决方案。

2. 系统架构设计

2.1 技术栈选型分析

在项目启动阶段，技术选型是首要考虑的问题。经过综合评估，我选择了以下技术组合：

后端技术栈：

Spring Boot 2.7.x：简化配置，快速构建微服务
MyBatis-Plus 3.5.x：增强型ORM框架，减少SQL编写
Spring Security：安全认证和授权
Redis 6.x：缓存和会话管理
Alipay SDK：支付接口集成

前端技术栈：

Vue.js 3.x：渐进式前端框架
Element Plus：UI组件库
Axios：HTTP客户端
Vue Router：前端路由管理

数据库：

MySQL 8.0：关系型数据库
Redis 6.x：缓存数据库

选择这些技术主要基于以下考虑：

Spring Boot的自动配置和起步依赖大大减少了样板代码
MyBatis-Plus的ActiveRecord模式简化了DAO层开发
Vue.js的响应式特性非常适合电商系统的动态交互
MySQL+Redis的组合既保证了数据持久化又提高了性能

2.2 系统架构设计

系统采用典型的三层架构：

code复制表示层（Web） → 业务逻辑层（Service） → 数据访问层（DAO）
       ↑                  ↑                     ↑
    Vue.js           Spring Boot           MyBatis-Plus

这种分层架构的优势在于：

职责分离，各层专注自己的功能
便于团队协作开发
易于维护和扩展
可以针对不同层进行独立测试

3. 核心功能模块实现

3.1 用户认证模块

用户系统是商城的基础，我设计了完整的注册-登录-权限控制流程：

java复制// 用户注册核心代码示例
@PostMapping("/register")
public Result register(@Valid @RequestBody UserRegisterDTO userDTO) {
    // 验证用户名是否已存在
    if (userService.existsUsername(userDTO.getUsername())) {
        throw new BusinessException("用户名已存在");
    }
    
    // 密码加密存储
    String encryptedPwd = passwordEncoder.encode(userDTO.getPassword());
    
    // 构建用户实体
    User user = new User()
        .setUsername(userDTO.getUsername())
        .setPassword(encryptedPwd)
        .setEmail(userDTO.getEmail())
        .setPhone(userDTO.getPhone());
    
    // 保存用户
    userService.save(user);
    
    return Result.success("注册成功");
}

安全注意事项：

密码必须加密存储（使用BCryptPasswordEncoder）
重要操作需要验证码防护
敏感信息接口需要权限控制
使用HTTPS保护数据传输

3.2 商品管理模块

商品系统是电商核心，我设计了多级分类和丰富的商品属性：

java复制@Entity
@Table(name = "product")
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;          // 商品名称
    private String description;   // 商品描述
    private BigDecimal price;     // 商品价格
    private Integer stock;        // 库存数量
    
    @ManyToOne
    @JoinColumn(name = "category_id")
    private Category category;    // 商品分类
    
    // 其他字段和方法...
}

商品搜索实现：

java复制public Page<Product> searchProducts(ProductQuery query, Pageable pageable) {
    return lambdaQuery()
        .like(StringUtils.isNotBlank(query.getKeyword()), Product::getName, query.getKeyword())
        .eq(query.getCategoryId() != null, Product::getCategoryId, query.getCategoryId())
        .between(query.getMinPrice() != null && query.getMaxPrice() != null, 
                Product::getPrice, query.getMinPrice(), query.getMaxPrice())
        .orderByDesc(Product::getSales)  // 按销量排序
        .page(pageable);
}

3.3 购物车与订单系统

购物车设计考虑了游客和登录用户两种场景：

java复制// 购物车服务核心方法
public void addToCart(Long userId, Long productId, Integer quantity) {
    // 检查商品是否存在且有足够库存
    Product product = productService.getById(productId);
    if (product == null || product.getStock() < quantity) {
        throw new BusinessException("商品库存不足");
    }
    
    // 查询用户是否已有该商品的购物车记录
    Cart cart = cartMapper.selectOne(new LambdaQueryWrapper<Cart>()
            .eq(Cart::getUserId, userId)
            .eq(Cart::getProductId, productId));
    
    if (cart != null) {
        // 更新数量
        cart.setQuantity(cart.getQuantity() + quantity);
        cartMapper.updateById(cart);
    } else {
        // 新增记录
        cart = new Cart()
            .setUserId(userId)
            .setProductId(productId)
            .setQuantity(quantity)
            .setCreatedAt(new Date());
        cartMapper.insert(cart);
    }
}

订单系统状态机设计：

code复制待支付 → 已支付 → 已发货 → 已完成
    ↘  取消订单

4. 系统优化与高级特性

4.1 性能优化实践

缓存策略：

商品详情使用Redis缓存
热门商品列表缓存
分类信息缓存
使用@Cacheable注解简化缓存代码

java复制@Cacheable(value = "product", key = "#id")
public Product getProductById(Long id) {
    return productMapper.selectById(id);
}

数据库优化：

合理设计索引（商品名称、分类ID等）
大表分库分表策略
读写分离配置
慢SQL监控与优化

4.2 支付系统集成

集成支付宝支付流程：

创建支付订单
调用支付宝接口获取支付链接
处理支付宝异步通知
更新订单状态

java复制public String createPayOrder(Order order) {
    AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
    request.setReturnUrl(payReturnUrl);
    request.setNotifyUrl(payNotifyUrl);
    
    AlipayTradePagePayModel model = new AlipayTradePagePayModel();
    model.setOutTradeNo(order.getOrderNo());
    model.setTotalAmount(order.getTotalAmount().toString());
    model.setSubject("运动商城订单：" + order.getOrderNo());
    model.setProductCode("FAST_INSTANT_TRADE_PAY");
    
    request.setBizModel(model);
    
    try {
        return alipayClient.pageExecute(request).getBody();
    } catch (AlipayApiException e) {
        throw new RuntimeException("创建支付失败", e);
    }
}

5. 系统部署与运维

5.1 生产环境部署方案

推荐部署架构：

code复制Nginx (负载均衡) → 多个Spring Boot应用实例
                   ↘ MySQL主从集群
                   ↘ Redis哨兵集群

Docker部署示例：

dockerfile复制# Spring Boot应用Dockerfile
FROM openjdk:11-jre
VOLUME /tmp
ADD target/sport-shop.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

5.2 监控与日志

使用Spring Boot Actuator暴露健康检查端点
Prometheus + Grafana监控系统
ELK日志收集分析系统
自定义业务指标监控

6. 开发经验与避坑指南

6.1 常见问题解决方案

问题1：MyBatis-Plus主键策略冲突

现象： 使用@TableId注解配置了AUTO策略，但插入时仍需要手动设置ID。

解决方案：

java复制@TableId(value = "id", type = IdType.AUTO)
private Long id;

同时确保数据库字段是自增的。

问题2：Vue axios跨域问题