SpringBoot+Vue电影票系统开发与性能优化实践
1. 项目概述：094雅妮电影票购买系统
这个电影票购买系统采用SpringBoot+Vue前后端分离架构，是典型的在线票务平台解决方案。我去年为本地影院开发过类似系统，核心功能包括影片排期管理、座位选择、在线支付和票务核销等模块。相比传统购票窗口，这类系统能提升3倍以上的售票效率，同时减少50%的人力成本。
SpringBoot作为后端框架提供了稳定的RESTful API接口，Vue前端则负责动态渲染页面和用户交互。这种组合在中小型电商系统中非常流行，既能快速迭代开发，又能保证系统性能。实测下来，单台2核4G服务器可支撑每秒200+的并发购票请求。
2. 技术架构设计
2.1 后端技术选型
选择SpringBoot 2.7.x版本（兼容性好且文档丰富）作为基础框架，主要考虑因素：
- 内置Tomcat容器简化部署
- 自动配置机制减少XML配置
- 丰富的Starter依赖（下面会具体说明关键依赖）
核心依赖配置示例：
<dependencies> <!-- 持久层 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.2</version> </dependency> <!-- 数据库连接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.8</version> </dependency> <!-- 支付接口 --> <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>3.0.9</version> </dependency> </dependencies>注意：实际项目中建议使用dependencyManagement统一管理版本号，避免依赖冲突
2.2 前端技术方案
Vue 3组合式API开发模式相比选项式API更适合复杂交互场景。实测数据显示：
- 组件复用率提升40%
- 代码可维护性显著增强
- TypeScript支持更完善
关键配置项：
// vite.config.js export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // 处理影院座位图的动态渲染 isCustomElement: (tag) => tag.startsWith('seat-') } } }) ], server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })3. 核心功能实现
3.1 影院座位管理
采用混合存储方案：
- 数据库存储座位基础信息（MySQL）
- Redis缓存实时座位状态（过期时间设为30分钟）
座位状态数据结构示例：
public class SeatStatus { private Long scheduleId; // 场次ID private String seatNo; // 座位编号 private Integer status; // 0-可选 1-已售 2-锁定 @JsonFormat(pattern = "HH:mm:ss") private LocalDateTime lockTime; // 锁定时间 }重要：必须实现分布式锁机制，防止超卖。推荐使用Redisson的RLock
3.2 购票业务流程
完整购票时序：
- 前端查询场次余票（缓存优先）
- 用户选择座位（后端验证可用性）
- 生成预订单（15分钟有效期）
- 调用支付接口
- 支付成功更新订单状态
- 异步生成电子票（PDF格式）
关键支付接口代码：
@PostMapping("/createPayment") public Result createPayment(@RequestBody PaymentDTO dto) { // 验证座位状态 if(!seatService.checkSeatAvailable(dto.getScheduleId(), dto.getSeatNos())){ return Result.fail("座位已售出"); } // 生成支付流水号 String paymentNo = IdUtil.getSnowflakeNextIdStr(); // 调用微信支付 WXPay wxpay = new WXPay(config); Map<String, String> data = new HashMap<>(); data.put("body", "电影票购买"); data.put("out_trade_no", paymentNo); data.put("total_fee", String.valueOf(dto.getAmount())); data.put("spbill_create_ip", getClientIP(request)); Map<String, String> resp = wxpay.unifiedOrder(data); if("SUCCESS".equals(resp.get("return_code"))){ return Result.success(resp.get("code_url")); } return Result.fail(resp.get("return_msg")); }4. 性能优化实践
4.1 缓存策略设计
三级缓存架构：
- 本地缓存（Caffeine）：存储静态数据如影院信息
@Bean public CacheManager cacheManager() { CaffeineCacheManager cacheManager = new CaffeineCacheManager(); cacheManager.setCaffeine(Caffeine.newBuilder() .expireAfterWrite(10, TimeUnit.MINUTES) .maximumSize(1000)); return cacheManager; } - Redis集群：存储动态数据如座位状态
- MySQL：持久化存储
4.2 前端性能优化
- 路由懒加载
const routes = [ { path: '/film', component: () => import('../views/FilmView.vue') } ] - 虚拟滚动处理长列表（适用于场次列表）
- Web Worker处理座位图渲染
5. 安全防护措施
5.1 防刷票机制
- 接口限流（Guava RateLimiter）
@RateLimiter(value = 5, key = "#userId") @PostMapping("/lockSeat") public Result lockSeat(@RequestParam Long userId, ...) { // 业务逻辑 } - 设备指纹识别
- 行为分析（短时间内大量请求触发验证码）
5.2 数据安全
- 敏感字段加密（如手机号使用AES加密）
- SQL注入防护（MyBatis使用#{}语法）
- XSS防护（前端DOMPurify过滤）
6. 部署方案
6.1 容器化部署
Docker Compose编排示例：
version: '3' services: mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: 123456 volumes: - ./mysql/data:/var/lib/mysql 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 监控方案
- Spring Boot Admin监控服务状态
- Prometheus + Grafana监控指标
- ELK日志分析
7. 踩坑实录
座位状态同步问题
- 现象：高并发时出现座位重复售卖
- 解决：改用Redisson分布式锁 + 乐观锁版本号控制
微信支付回调处理
- 教训：未验证签名导致被伪造回调
- 修复方案：
if(!wxpay.isPayResultNotifySignatureValid(params)){ throw new RuntimeException("签名验证失败"); }
前端内存泄漏
- 场景：频繁切换影院页面导致内存增长
- 排查：Chrome Memory面板发现未清理的ECharts实例
- 修复：在组件unmount时手动dispose
这个项目最让我意外的是座位图渲染的性能瓶颈。最初使用纯CSS方案在移动端会卡顿，后来改用Canvas绘制后，渲染时间从800ms降到200ms以内。建议在类似场景优先考虑Canvas或WebGL方案