电影院购票系统

SpringBootVueMySQLMybatisPlusElementPlusECharts

采用前后端分离架构,覆盖从用户浏览电影、在线选座、下单支付到退票评价的完整业务流程。系统同时提供后台管理端,支持电影排片、影厅座位配置、订单管理和数据统计。

电影院购票系统 — 项目介绍文档

一、项目概述

本项目是一套电影院在线购票系统,采用前后端分离架构,覆盖从用户浏览电影、在线选座、下单支付到退票评价的完整业务流程。系统同时提供后台管理端,支持电影排片、影厅座位配置、订单管理和数据统计。

属性 说明
项目名称 电影院购票系统(Cinema Ticket System)
架构模式 B/S 前后端分离
后端技术 Spring Boot 3.2 / MyBatis-Plus 3.5 / MySQL 8.0 / JWT
前端技术 Vue 3 / Element Plus / Pinia / Axios / ECharts / Vite
开发语言 Java 21 / JavaScript(ES6+)
适用场景 计算机毕设、课程设计、源码学习与二次开发

二、技术架构

2.1 后端技术栈

类别 技术选型 版本 说明
核心框架 Spring Boot 3.2.3 Java 企业级开发框架
ORM 框架 MyBatis-Plus 3.5.5 增强版 MyBatis,简化 CRUD
数据库 MySQL 8.0+ 关系型数据库
安全认证 jjwt(JWT) 0.12.3 无状态 Token 认证
密码加密 BCrypt(Hutool) 5.8.26 慢哈希 + 随机盐值
API 文档 Knife4j(OpenAPI 3) 4.4.0 Swagger 增强 UI
工具库 Hutool 5.8.26 Java 通用工具集
构建工具 Maven 3.8+ 依赖管理与项目构建

2.2 前端技术栈

类别 技术选型 版本 说明
核心框架 Vue 3(Composition API) 3.4.21 渐进式前端框架
UI 组件库 Element Plus 2.6.3 企业级桌面端组件库
路由 Vue Router 4.3.0 单页应用路由管理
状态管理 Pinia 2.1.7 Vue 官方状态管理库
HTTP 客户端 Axios 1.15.2 基于 Promise 的 HTTP 库
图表 ECharts 5.5.0 数据可视化图表库
构建工具 Vite 5.2.0 下一代前端构建工具

2.3 架构图

┌─────────────────────────────────────────────────────────┐
│                      浏览器(Browser)                    │
├───────────────────────┬─────────────────────────────────┤
│   前台页面(Portal)     │     后台管理(Admin)             │
│   localhost:5173       │     localhost:5173/admin       │
│   · 首页/电影浏览       │     · 仪表盘/数据统计              │
│   · 选座购票/支付       │     · 电影/排片 CRUD              │
│   · 我的订单/评论       │     · 影厅/座位配置                │
│   · 个人中心            │     · 用户/订单管理               │
└───────────────────────┴─────────────────────────────────┘
                          │  HTTP /api/*
                          ▼
┌─────────────────────────────────────────────────────────┐
│              Spring Boot 后端(localhost:8080)            │
├─────────────┬──────────────┬──────────────┬──────────────┤
│  Interceptor │  Controller  │   Service    │   Mapper     │
│  JWT认证     │  portal/ 前台  │   业务逻辑    │  MyBatis-Plus│
│  管理员鉴权   │  admin/ 后台  │   事务管理    │  XML 自定义SQL│
└─────────────┴──────────────┴──────────────┴──────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│                        MySQL 8.0                        │
└─────────────────────────────────────────────────────────┘

2.4 安全设计

  • JWT 双拦截器:JwtAuthInterceptor(认证)+ AdminAuthInterceptor(鉴权),按路径和执行顺序分层控制
  • 密码 BCrypt 加密:使用慢哈希算法加随机盐值,有效抵御彩虹表攻击
  • @Anonymous 注解:标注公开接口(如注册、登录、电影查询),无需额外维护白名单
  • 同源代理:开发环境由 Vite proxy 将 /api 转发到后端,避免跨域问题;生产环境建议 Nginx 反向代理

三、功能模块

3.1 前台功能(普通用户)

模块 功能点 说明
首页 热映轮播、分类快捷入口、搜索 展示海报轮播、电影分类导航、全局搜索框
电影浏览 热映列表、即将上映、分类筛选、关键词搜索、排序 多维度筛选,支持按评分/热度/上映日期排序
电影详情 基本信息、评分评论、场次列表 展示电影详情和当日排片
选座购票 实时座位图、多选座位、下单锁定 行级悲观锁+乐观双检,防并发超卖
支付 模拟支付宝/微信支付 15分钟倒计时,超时自动取消
我的订单 订单列表、状态筛选、订单详情 支持待支付/已支付/已退票/已完成/已取消筛选项
退票 开场前退票、自动退款 开场前30分钟可退,自动释放座位
评论 评分+文字评论、删除自己的评论 每人每部电影限评一次
个人中心 修改资料、头像上传、修改密码 昵称/邮箱/手机号/头像可编辑

3.2 后台功能(管理员)

模块 功能点 说明
仪表盘 今日/累计收入、订单数、用户数、票房趋势图、电影排行、上座率 ECharts 可视化图表
电影管理 新增/编辑/删除/搜索/状态筛选、海报上传 逻辑删除,支持上下架
分类管理 分类增删改查 前端首页分类导航
影厅管理 创建/删除影厅、可视化座位图配置 支持通道/普通/情侣/VIP座位类型
排片管理 创建/取消场次、时间段冲突检测 自动计算散场时间(含清场间隔)
用户管理 用户列表、启用/禁用、搜索 模糊搜索用户名
评论管理 评论列表、隐藏/显示切换 违规评论可隐藏。注:目前仅有后端接口(/admin/comments),后台管理页面尚未实现
订单管理 全部订单查询、按状态筛选、详情查看 管理端只读,不干预用户操作

四、项目亮点

4.1 并发安全:选座防超卖

创建订单时采用 三层并发控制:

  1. SELECT FOR UPDATE(行级悲观锁):锁定目标座位行,防止其他事务同时读取
  2. 乐观双检:UPDATE WHERE status=0 原子操作,更新时再次校验状态
  3. 乐观锁版本号:schedule_seat.version 字段,MyBatis-Plus @Version 自动管理

4.2 订单过期自动处理

@Scheduled 定时任务每分钟执行:

  • 释放超时未支付的锁定座位
  • 将超时待支付订单标记为已过期

4.3 排片时间冲突检测

创建排片时自动检测影厅时段占用,防止同一影厅同一时段重复排片(使用时间段重叠检测算法)。

4.4 座位图可视化配置

管理员可自定义影厅行列数,支持四种座位类型(通道/普通/情侣/VIP),前端实时渲染可视化座位图,色块区分不同类型和售卖状态。

4.5 分类与排序

  • 电影分类使用逗号分隔字符串存储,SQL 层 FIND_IN_SET 函数直接过滤,保证分页准确
  • 支持多维度排序:评分、热度、上映日期

4.6 RESTful API 设计

严格遵循 RESTful 规范,前后台接口清晰分离(前台 /movies、/orders 等,后台 /admin/**)。前端通过 axios baseURL=/api + Vite 代理将 /api 前缀剥离后转发到后端,配合 Knife4j 生成在线 API 文档。

4.7 代码规范性

  • 全局统一异常处理(GlobalExceptionHandler),错误码枚举化管理
  • 分页统一返回结构(PageResult),前端无需适配不同接口
  • 所有数据库操作使用 Lambda 表达式构建条件,避免字段名硬编码

五、项目结构

cinema-ticket-system/
├── db/                                  # 数据库脚本
│   ├── init.sql                         # 初始化:建库建表 + 基础数据(管理员账号、电影分类)
│   └── demo.sql                         # 演示数据:用户/电影/影厅/场次/订单/支付/评论(可反复执行)
├── springboot/                          # 后端 Spring Boot 项目
│   ├── src/main/java/com/example/
│   │   ├── common/                      # 公共模块
│   │   │   ├── annotation/             # @Anonymous、@RequireRole 注解
│   │   │   ├── constant/               # 业务常量
│   │   │   ├── enums/                  # 13 个枚举类
│   │   │   ├── exception/             # 全局异常处理 + 错误码
│   │   │   ├── BaseEntity.java         # 基础实体(id + 时间戳)
│   │   │   ├── LogicDeleteEntity.java  # 逻辑删除实体
│   │   │   ├── PageResult.java         # 统一分页结果
│   │   │   ├── Result.java             # 统一响应体
│   │   │   └── UserContext.java        # 用户上下文工具
│   │   ├── config/                      # 配置类
│   │   │   ├── CorsConfig.java         # 跨域配置
│   │   │   ├── MybatisPlusConfig.java  # MP 分页+乐观锁+自动填充
│   │   │   └── WebMvcConfig.java       # 拦截器注册 + 静态资源
│   │   ├── controller/
│   │   │   ├── admin/                  # 8 个后台控制器
│   │   │   ├── portal/                 # 6 个前台控制器
│   │   │   └── FileController.java     # 文件上传
│   │   ├── dto/                         # 数据传输对象(7 个模块)
│   │   ├── entity/                      # 11 个实体类
│   │   ├── mapper/                      # 12 个 Mapper 接口
│   │   ├── security/                    # JWT + 拦截器
│   │   │   ├── JwtUtils.java           # Token 生成/解析
│   │   │   ├── JwtAuthInterceptor.java # 认证拦截器
│   │   │   └── AdminAuthInterceptor.java # 鉴权拦截器
│   │   ├── service/                     # 10 个业务服务类
│   │   ├── task/                        # 定时任务
│   │   ├── utils/                       # 工具类
│   │   ├── vo/                          # 视图对象(7 个模块)
│   │   └── MainApplication.java         # 启动类
│   └── src/main/resources/
│       ├── mapper/                      # 3 个 XML 自定义 SQL
│       └── application.yml              # 主配置文件
├── vue/                                 # 前端 Vue 3 项目
│   └── src/
│       ├── api/                         # API 封装
│       │   ├── admin/                   # 后台接口(7 个模块 + index.js 汇总)
│       │   ├── portal/                  # 前台接口(4 个模块)
│       │   └── request.js               # Axios 拦截器(认证+错误处理)
│       ├── components/
│       │   └── common/MovieCard.vue     # 电影卡片组件
│       ├── layouts/
│       │   ├── PortalLayout.vue         # 前台布局(导航+页脚)
│       │   └── AdminLayout.vue          # 后台布局(侧边栏+顶栏)
│       ├── router/index.js              # 路由配置(28 条路由)
│       ├── stores/useUserStore.js       # Pinia 用户状态
│       ├── utils/fileUrl.js             # 文件路径工具
│       ├── views/
│       │   ├── portal/                  # 前台页面(7 个模块 12 页)
│       │   └── admin/                   # 后台页面(7 个模块 9 页)
│       └── main.js                      # 入口文件
└── uploads/                             # 文件上传目录
    └── demo/                            # 演示图片(随仓库提交,供 init.sql / demo.sql 引用)
        ├── admin.webp                   # 默认头像(admin 及演示账号共用)
        ├── goat.png                     # 电影《奇迹梦之队》海报
        ├── pegasus.jpeg                 # 电影《飞驰人生3》海报
        ├── blades.jpg                   # 电影《镖人:风起大漠》海报
        ├── avatar3.jpg                  # 电影《阿凡达3》海报
        └── test-poster-1~8.*            # 测试海报
客服
反馈