吴声威1. 项目概述：现代影院系统的技术架构演进
十年前我刚入行时，电影院售票系统还停留在单体架构时代。如今这套基于SpringBoot+Vue的前后端分离方案，已经成为行业标配。这个项目完整呈现了从技术选型到部署上线的全流程，特别适合需要实战经验的初中级开发者。
系统核心包含三大模块：前端采用Vue3组合式API开发响应式界面，后端基于SpringBoot提供RESTful API，数据库使用MySQL 8.0实现事务管理。我特别加入了Seata分布式事务解决方案，这在处理高并发购票场景时至关重要。下面这张架构图能清晰展示各组件关系：
code复制[用户端]
│
▼
Vue3+Element Plus ←──┐
│ │
Axios HTTP请求 │
│ │
▼ │
SpringBoot(JDK17) │
│ │
├─▶ MyBatis-Plus │
│ │
├─▶ Redis缓存 │同步
│ │
└─▶ MySQL8.0◀──────┘
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心技术栈深度解析
2.1 后端工程化实践
采用SpringBoot 3.1.5版本构建，我的pom.xml关键依赖配置如下：
xml复制<dependencies>
<!-- 持久层 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3.1</version>
</dependency>
<!-- 分布式事务 -->
<dependency>
<groupId>io.seata</groupId>
<artifactId>seata-spring-boot-starter</artifactId>
<version>1.7.1</version>
</dependency>
<!-- 接口文档 -->
<dependency>
<groupId>org.springdoc</groupId>
<artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
<version>2.2.0</version>
</dependency>
</dependencies>
数据库设计特别注意了影院业务的特殊性：
- 场次表采用分片键设计，按影院ID哈希分片
- 座位表使用JSON字段存储座位状态，减少关联查询
- 订单表设置version字段实现乐观锁
2.2 前端工程架构设计
Vue3项目通过vite构建，目录结构组织如下：
code复制src/
├── api/ # 接口定义
├── composables/ # 组合式函数
├── stores/ # Pinia状态管理
├── utils/ # 工具类
└── views/
├── cinema/ # 影院模块
├── movie/ # 影片模块
└── order/ # 订单模块
关键实现技巧：
- 使用Suspense组件处理异步加载
- 采用keep-alive缓存热门影片页面
- 通过Intersection Observer实现海报懒加载
3. 高并发场景下的实战解决方案
3.1 座位锁定的技术实现
当用户选座时，系统需要临时锁定座位。我采用Redis+MySQL双写方案：
java复制// 座位锁定服务
public class SeatLockService {
@Resource
private RedissonClient redisson;
public boolean tryLock(Long scheduleId, String seatNo) {
String lockKey = "lock:seat:" + scheduleId + ":" + seatNo;
RLock lock = redisson.getLock(lockKey);
return lock.tryLock(5, 30, TimeUnit.SECONDS);
}
@Transactional
public void confirmLock(Long orderId) {
// 将Redis锁转换为数据库持久化锁
}
}
重要提示：锁超时时间建议设置在20-30秒，过短会导致正常操作失败，过长会影响其他用户购票
3.2 分布式事务处理
采用Seata的AT模式解决跨服务事务问题，配置要点：
- undo_log表必须添加到每个业务数据库
- 需要配置seata.enable-auto-data-source-proxy=true
- 事务分组必须与TC集群匹配
典型的事务处理代码：
java复制@GlobalTransactional
public void createOrder(OrderDTO dto) {
// 1. 扣减库存
inventoryService.reduce(dto.getItems());
// 2. 创建订单
orderMapper.insert(dto);
// 3. 扣减余额
accountService.debit(dto.getUserId(), dto.getAmount());
}
4. 性能优化实战记录
4.1 缓存策略设计
采用多级缓存架构：
- 本地缓存：Caffeine处理静态数据（如影院信息）
- 分布式缓存：Redis缓存动态数据（如场次余票）
- 数据库缓存：MySQL查询缓存
缓存更新策略对比：
| 策略 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Cache Aside | 实现简单 | 存在不一致窗口 | 读多写少 |
| Write Through | 强一致性 | 性能损耗大 | 写密集型 |
| Write Behind | 性能最好 | 可能丢失数据 | 允许延迟 |
4.2 SQL优化案例
发现场次查询存在性能瓶颈，原始SQL：
sql复制SELECT * FROM schedule
WHERE cinema_id = ? AND show_date = ?
优化方案：
- 添加复合索引：(cinema_id, show_date, status)
- 改写为覆盖索引查询：
sql复制SELECT id, film_id, room_id, start_time
FROM schedule
WHERE cinema_id = ? AND show_date = ? AND status = 1
优化后QPS从120提升到2100，效果显著。
5. 部署方案详解
5.1 容器化部署
Docker Compose编排文件关键配置：
yaml复制services:
cinema-db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql-data:/var/lib/mysql
cinema-backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- cinema-db
- redis
cinema-frontend:
build: ./frontend
ports:
- "80:80"
5.2 CI/CD流水线
GitHub Actions配置示例：
yaml复制name: Cinema Deploy
on:
push:
branches: [ main ]
jobs:
backend-build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: mvn -B package --file pom.xml
- uses: docker/build-push-action@v3
with:
context: ./backend
push: true
tags: ${{ secrets.DOCKER_HUB }}/cinema-backend:latest
6. 踩坑经验分享
-
Vue3响应式丢失问题：
在组合式函数中返回普通对象会导致响应式丢失，必须用reactive()或ref()包装 -
MyBatis批量插入优化：
MySQL默认不支持大批量插入，需要在jdbc url添加rewriteBatchedStatements=true参数 -
Seata超时设置：
默认全局事务超时时间为60秒，对于购票业务建议调整为：properties复制seata.tx-service-group.default.grouplist=127.0.0.1:8091 client.tm.degrade-check=false client.tm.degrade-check-allow-times=10 client.tm.default-global-transaction-timeout=120 -
Element Plus按需导入：
未使用的组件也会被打包，需要通过unplugin-vue-components插件实现真正按需加载
这套系统我在本地压力测试中实现了800+ TPS的订单处理能力，完整源码中包含了所有测试用例和性能调优记录。对于想深入理解前后端分离架构的开发者，建议重点研究分布式事务处理和缓存一致性方案的设计实现。