Spring Boot+Vue影院售票系统架构设计与实践

1. 项目概述

作为一名有多年开发经验的Java工程师，最近完成了一个基于BS架构的影院售票系统。这个系统采用Spring Boot+Vue的前后端分离架构，实现了从影片管理、场次安排到在线购票、订单管理的全流程数字化解决方案。相比传统售票方式，这套系统将购票响应时间从平均3分钟缩短到15秒内，同时减少了80%的人工操作错误。

2. 系统架构设计

2.1 技术选型分析

在技术选型上，我主要考虑了以下几个关键因素：

1. 开发效率：Spring Boot的自动配置和起步依赖能快速搭建项目
2. 性能需求：预计高峰时段每秒100+的并发请求
3. 团队技能：团队成员熟悉Java生态
4. 长期维护：需要选择有活跃社区支持的技术

最终确定的技术栈如下表所示：

2.2 系统架构图

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

code复制表示层（Vue） → 业务逻辑层（Spring Boot） → 数据访问层（MyBatis Plus）
　　　　　　　　　↓
　　　　　　　Redis缓存

这种架构的优势在于：

• 前后端完全解耦，可独立部署
• 通过RESTful API进行通信
• 利用Redis缓存热点数据（如影片信息）

3. 核心功能实现

3.1 用户认证模块

3.1.1 JWT认证流程

1. 用户登录成功后，服务端生成JWT token
2. 将token返回给客户端保存
3. 后续请求在Authorization头中携带token
4. 服务端通过过滤器验证token有效性

关键代码实现：

java复制// JWT生成
public String generateToken(UserDetails userDetails) {
    Map<String, Object> claims = new HashMap<>();
    return Jwts.builder()
            .setClaims(claims)
            .setSubject(userDetails.getUsername())
            .setIssuedAt(new Date(System.currentTimeMillis()))
            .setExpiration(new Date(System.currentTimeMillis() + JWT_TOKEN_VALIDITY * 1000))
            .signWith(SignatureAlgorithm.HS512, secret)
            .compact();
}

// 过滤器验证
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) 
    throws ServletException, IOException {
    String token = getJwtFromRequest(request);
    if (StringUtils.hasText(token) && jwtUtil.validateToken(token)) {
        String username = jwtUtil.getUsernameFromToken(token);
        UserDetails userDetails = userDetailsService.loadUserByUsername(username);
        UsernamePasswordAuthenticationToken authentication = 
            new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
        authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
        SecurityContextHolder.getContext().setAuthentication(authentication);
    }
    chain.doFilter(request, response);
}

3.1.2 安全防护措施

1. 密码加密：使用BCryptPasswordEncoder
2. CSRF防护：Spring Security默认启用
3. XSS防护：前端使用vue-sanitize处理用户输入
4. SQL注入：MyBatis使用预编译语句

3.2 影片管理模块

3.2.1 数据库设计

影片信息表(movie_info)关键字段：

3.2.2 影片缓存策略

使用Redis二级缓存热门影片信息：

java复制@Cacheable(value = "movies", key = "#id")
public Movie getMovieById(Long id) {
    return movieMapper.selectById(id);
}

@CacheEvict(value = "movies", key = "#movie.id")
public void updateMovie(Movie movie) {
    movieMapper.updateById(movie);
}

缓存配置要点：

• 设置TTL为1小时
• 使用LRU淘汰策略
• 对热门影片设置不同的过期时间，避免缓存雪崩

4. 售票业务实现

4.1 座位锁定机制

为解决高并发下的座位冲突问题，设计了三级锁定策略：

1. 前端限制：同一座位在UI层只能被一个用户操作
2. 缓存锁：使用Redis SETNX实现分布式锁
3. 数据库锁：通过SELECT FOR UPDATE确保最终一致性

关键实现代码：

java复制public boolean lockSeats(List<Long> seatIds, Long userId) {
    String lockKey = "seat_lock:" + StringUtils.join(seatIds, ",");
    // 尝试获取分布式锁
    Boolean locked = redisTemplate.opsForValue().setIfAbsent(lockKey, userId.toString(), 5, TimeUnit.MINUTES);
    if (locked != null && locked) {
        try {
            // 检查座位状态
            List<Seat> seats = seatMapper.selectBatchIds(seatIds);
            if (seats.stream().anyMatch(s -> s.getStatus() != SeatStatus.AVAILABLE)) {
                return false;
            }
            // 更新座位状态
            seatMapper.lockSeats(seatIds, userId);
            return true;
        } finally {
            redisTemplate.delete(lockKey);
        }
    }
    return false;
}

4.2 订单支付流程

支付状态机设计：

code复制待支付 → 支付中 → 支付成功
　　　↓　　　　　↓
　　　└→ 支付失败 ←┘

支付超时处理：

java复制@Scheduled(fixedRate = 60000)
public void checkPaymentTimeout() {
    List<Order> timeoutOrders = orderMapper.selectTimeoutOrders(PAYMENT_TIMEOUT_MINUTES);
    timeoutOrders.forEach(order -> {
        order.setStatus(OrderStatus.CANCELLED);
        orderMapper.updateById(order);
        // 释放座位
        seatService.releaseSeats(order.getSeatIds());
    });
}

5. 性能优化实践

5.1 数据库优化

1. 索引优化：

   • 为查询频繁的字段建立组合索引
   • 例如：ALTER TABLE schedule ADD INDEX idx_movie_time (movie_id, show_time)

2. SQL优化：

   • 避免SELECT *
   • 使用JOIN替代子查询
   • 合理使用EXPLAIN分析执行计划

5.2 前端性能优化

1. 组件懒加载：

javascript复制const MovieList = () => import('./views/MovieList.vue')

2. API请求合并：

javascript复制// 使用axios的拦截器合并短时间内相同请求
let pendingRequests = new Map()
axios.interceptors.request.use(config => {
    const requestKey = `${config.method}-${config.url}-${JSON.stringify(config.params)}`
    if (pendingRequests.has(requestKey)) {
        return pendingRequests.get(requestKey)
    }
    const request = axios(config)
    pendingRequests.set(requestKey, request)
    request.finally(() => pendingRequests.delete(requestKey))
    return request
})

6. 部署方案

6.1 容器化部署

使用Docker Compose编排服务：

yaml复制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
    ports:
      - "6379:6379"
  
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"

6.2 CI/CD流程

1. 代码提交触发GitHub Actions
2. 运行单元测试和集成测试
3. 构建Docker镜像并推送到Registry
4. 通过SSH连接到生产服务器执行更新

7. 踩坑经验分享

1. 分布式锁问题：

   • 最初使用简单的Redis锁，发现存在锁过期但业务未完成的问题
   • 解决方案：引入Redisson的看门狗机制自动续期

2. 事务失效场景：

   • 在同一个类中方法调用时，@Transactional会失效
   • 解决方案：通过AopContext.currentProxy()获取代理对象

3. Vue响应式问题：

   • 直接通过索引修改数组元素不会触发视图更新
   • 解决方案：使用Vue.set或数组的splice方法

4. 日期处理陷阱：

   • 前端传日期字符串时，不同浏览器解析方式不同
   • 解决方案：统一使用ISO8601格式(yyyy-MM-ddTHH:mm:ss)

这个项目从需求分析到最终上线历时3个月，期间遇到了不少技术挑战，但也积累了宝贵的实战经验。特别是在高并发场景下的座位锁定机制，经过多次优化后，在压力测试中可以达到500+ TPS的性能表现。