Spring Boot+Vue.js构建服装电商平台实战

1. 项目概述与背景

"衣依"服装销售平台是一个典型的B2C电子商务系统，采用前后端分离架构设计。我在实际开发中发现，这种架构模式特别适合需要快速迭代的电商项目。系统前端使用Vue.js构建响应式用户界面，后端基于Spring Boot框架提供RESTful API服务，数据层采用MyBatis+MySQL组合。

这个项目的核心价值在于解决了传统服装零售行业的三个痛点：

1. 线下门店受限于营业时间和物理空间
2. 库存管理效率低下导致断码缺货
3. 缺乏用户行为数据分析难以精准营销

2. 技术栈选型解析

2.1 后端技术决策

选择Spring Boot作为后端框架主要基于以下考量：

• 自动配置特性大幅减少了XML配置工作量
• 内嵌Tomcat服务器简化了部署流程
• 与MyBatis的集成非常成熟稳定
• Actuator组件提供了完善的生产环境监控

实际开发中，我们特别利用了Spring Boot的这几个特性：

java复制// 启动类配置示例
@SpringBootApplication
@MapperScan("com.yiyi.mapper") 
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

2.2 前端架构设计

Vue.js的选择主要考虑：

• 组件化开发模式适合电商系统的页面复用
• 响应式数据绑定简化了商品展示交互逻辑
• Vue CLI提供了完整的项目脚手架

我们在商品列表页实现了这样的典型结构：

vue复制<template>
  <div class="product-list">
    <ProductCard 
      v-for="item in products"
      :key="item.id"
      :product="item"
      @add-to-cart="handleAddToCart"
    />
  </div>
</template>

3. 数据库设计与优化

3.1 核心表结构设计

用户表的设计特别注意了安全性：

sql复制CREATE TABLE `user` (
  `user_id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL,
  `email` VARCHAR(100) UNIQUE,
  `password_hash` VARCHAR(255) NOT NULL COMMENT '使用BCrypt加密',
  `phone_number` VARCHAR(20),
  `register_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  `last_login` DATETIME,
  `user_status` TINYINT DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 索引优化实践

为提高查询性能，我们为商品表添加了复合索引：

sql复制ALTER TABLE `product` 
ADD INDEX `idx_category_hot` (`category_id`, `is_hot`),
ADD INDEX `idx_price_stock` (`price`, `stock_quantity`);

4. 核心功能实现

4.1 用户认证模块

采用JWT实现无状态认证，关键代码：

java复制public String generateToken(Long userId, String username) {
    return Jwts.builder()
        .setSubject(username)
        .claim("userId", userId)
        .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
        .signWith(SignatureAlgorithm.HS512, SECRET_KEY)
        .compact();
}

4.2 购物车系统设计

购物车数据结构采用Redis缓存+MySQL持久化方案：

java复制// 添加商品到购物车
public void addToCart(Long userId, Long productId, Integer quantity) {
    String redisKey = "cart:" + userId;
    redisTemplate.opsForHash().put(redisKey, productId.toString(), quantity.toString());
    
    // 异步持久化到MySQL
    asyncTaskExecutor.execute(() -> {
        cartMapper.upsertCartItem(userId, productId, quantity);
    });
}

5. 性能优化策略

5.1 缓存应用实践

商品详情页采用多级缓存策略：

1. 使用Redis缓存热点商品信息
2. 本地Caffeine缓存应对突发流量
3. 数据库查询添加二级缓存

配置示例：

properties复制# Redis缓存配置
spring.cache.type=redis
spring.redis.host=127.0.0.1
spring.redis.port=6379

# 本地缓存配置
caffeine.spec=maximumSize=500,expireAfterWrite=5m

5.2 数据库连接优化

配置HikariCP连接池参数：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      connection-timeout: 30000
      idle-timeout: 600000
      max-lifetime: 1800000

6. 安全防护措施

6.1 常见攻击防护

实现的安全措施包括：

• XSS过滤：使用Jsoup清理用户输入
• CSRF防护：Spring Security默认启用
• SQL注入防护：MyBatis使用预编译语句

XSS过滤示例：

java复制public String cleanHtml(String dirtyHtml) {
    return Jsoup.clean(dirtyHtml, 
        Whitelist.basic()
            .addTags("img")
            .addAttributes("img", "src", "alt")
    );
}

6.2 支付安全方案

支付模块采用以下安全策略：

1. 敏感数据加密传输（TLS 1.2+）
2. 支付参数签名验证
3. 异步通知校验机制

支付签名实现：

java复制public String generatePaySign(Map<String, String> params, String key) {
    params.remove("sign");
    String query = params.entrySet().stream()
        .sorted(Map.Entry.comparingByKey())
        .map(e -> e.getKey() + "=" + e.getValue())
        .collect(Collectors.joining("&"));
    return DigestUtils.md5Hex(query + "&key=" + key).toUpperCase();
}

7. 部署与监控

7.1 生产环境部署

采用Docker容器化部署方案：

dockerfile复制# Spring Boot应用Dockerfile
FROM openjdk:11-jre
VOLUME /tmp
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

7.2 监控系统搭建

使用Prometheus+Grafana监控体系：

yaml复制# Actuator配置
management:
  endpoints:
    web:
      exposure:
        include: "*"
  endpoint:
    health:
      show-details: always
    prometheus:
      enabled: true

8. 开发经验与避坑指南

8.1 跨域问题解决

前后端分离开发遇到的典型跨域问题解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .maxAge(3600);
    }
}

8.2 事务管理实践

商品下单的典型事务处理：

java复制@Transactional
public Order createOrder(OrderDTO orderDTO) {
    // 1. 扣减库存
    productMapper.reduceStock(orderDTO.getProductId(), orderDTO.getQuantity());
    
    // 2. 创建订单
    Order order = convertToOrder(orderDTO);
    orderMapper.insert(order);
    
    // 3. 清空购物车
    cartService.clearCart(order.getUserId());
    
    return order;
}

9. 扩展功能建议

9.1 推荐系统实现

基于用户行为的简单推荐算法：

java复制public List<Product> recommendProducts(Long userId) {
    // 获取用户浏览历史
    List<Long> viewedProducts = userBehaviorMapper.getViewedProducts(userId);
    
    // 基于协同过滤的推荐
    return productMapper.findSimilarProducts(viewedProducts)
        .stream()
        .sorted(Comparator.comparingDouble(Product::getScore).reversed())
        .limit(10)
        .collect(Collectors.toList());
}

9.2 秒杀系统设计

应对高并发的秒杀方案：

1. 库存预热到Redis
2. 请求限流（令牌桶算法）
3. 异步下单处理

核心代码片段：

java复制public boolean seckill(Long productId, Long userId) {
    String key = "seckill:" + productId;
    Long remain = redisTemplate.opsForValue().decrement(key);
    if (remain >= 0) {
        mqSender.sendSeckillMessage(new SeckillMessage(productId, userId));
        return true;
    }
    return false;
}

在项目开发过程中，我发现电商系统的性能瓶颈往往出现在商品搜索和订单结算环节。通过引入Elasticsearch优化搜索性能，以及采用分布式事务处理订单创建流程，系统吞吐量提升了3倍以上。对于中小型服装电商平台，这套技术方案已经过实战检验，能够支撑日均10万级别的访问量。