前后端分离的web影院订票系统后端用的是SpringBootMyBatisMySQL前端用Vue这套组合基本是中小型Web项目的标准姿势。前阵子我帮一个培训班做了整套案例从数据库设计到接口开发再到前端选座互动和最终部署完整走了一遍正好可以把源码思路和部署教程整理出来。这个项目麻雀虽小五脏俱全用户注册登录、影片列表、影片详情、选座、创建订单、订单查询管理端还能维护影片、场次和座位状态。对正在学前后端分离、准备毕业设计或者想入门Java Web全栈的人来说非常合适。本文不会只讲原理我会直接把每个环节怎么落地、哪些地方容易踩坑一次性说清楚。1. 项目整体设计与技术选型解析1.1 影院订票系统的业务需求与模块划分电影院订票系统核心就三件事选电影、选座位、付钱。但把流程拆细会发现需要处理的业务环节比想象中多。用户端常见功能有首页推荐、影片搜索、影片详情包含预告片、场次列表、选座、订单结算、我的订单管理端则需要维护影片、影厅、场次、座位以及查看订单记录。很多新手会把系统设计成“只有用户操作”的Demo实际上一个可交付的订票系统必须包含后台管理否则影片数据怎么录入场次怎么排我建议项目划分成两个端用户端负责观影人的完整操作链路管理端负责基础数据维护和订单查看。模块划分清楚后接口设计也就有了边界。用户端主要接口包括注册登录、查询影片、查询场次、查询座位、创建订单、支付订单、查询用户订单管理端主要接口包括影片增删改查、场次增删改查、订单列表、退款或取消订单。每个模块还要考虑异常分支比如选座时座位被别人锁了怎么办、超时未支付怎么释放座位、订单重复提交怎么处理。这些业务细节才是项目真正值钱的地方也是面试官最愿意听的内容。1.2 为什么选择SpringBootVueMyBatisMySQL这套组合先回答一个很多人会问的问题为什么不用JPA为什么不用MyBatis Plus我的判断标准就一条SQL是否可控。订票系统里涉及库存扣减、状态判断、多表关联统计用原生MyBatis可以在XML里精确控制每一条SQL性能和行为都可预期。SpringBoot负责解决Java配置繁琐的问题内置Tomcat一条命令就能启动服务。Vue的核心价值在组件化座位图这种交互密集的场景用Vue写起来比传统jQuery顺手太多。MySQL则是最稳妥的选择事务、行锁、索引都能很好支撑当前业务量。关于版本选择我需要单独强调一下。现在的SpringBoot已经出到3.x但是很多老教程、插件甚至部分Eclipse集成方案都停留在2.x。如果你的本机是JDK8最好不要直接生成SpringBoot 3.x项目因为3.x强制要求JDK17启动阶段就会报“UnsupportedClassVersionError”。我实际测试下来SpringBoot 2.7.18是目前最稳的版本JDK8、JDK11都能跑网上绝大多数问题都能搜到答案。所以这个项目我建议你用2.7.x不要盲目追新。1.3 前后端分离的核心思路与目录结构前后端分离不是简单把两个文件夹分开而是要让前端界面和后端服务通过HTTP接口解耦。前端不再关心页面里的数据怎么存储只负责把用户操作变成请求把返回数据渲染成界面后端不关心浏览器长什么样只负责校验参数、处理业务、返回统一格式的JSON。这样做的直接好处就是开发效率高前端和后端可以并行开发部署也灵活可以用Nginx托管前端用Java进程托管后端互不影响。后端工程我一般按controller、service、mapper、entity、common分层。controller只做参数接收和结果包装service写业务逻辑mapper负责数据库操作。前端工程则按views、components、router、api、utils划分。api目录专门放接口请求函数组件里不直接写axios所有请求统一走封装好的request.js。如果你把目录结构一开始就理清楚后面加功能会非常轻松不会出现一个几十行的组件里同时塞了渲染逻辑、请求逻辑和状态管理的混乱局面。2. 数据库设计与核心表结构2.1 用户、影片、场次、订单、座位的关系设计数据库是这类项目的命根子表结构设计不好后面写SQL就是灾难。我这次一共设计了9张表user、movie、category、hall、schedule、seat、order、order_item还有一张用于记录场次内座位占用情况的schedule_seat。movie和category是一对多一场电影在不同的厅有不同场次所以schedule表里既有movie_id也有hall_id。seat表只记录某个影厅的物理座位编号比如1排1座、1排2座不直接关联场次。真正决定“这个场次里某个座位是否可卖”的是schedule_seat表它把schedule和seat关联起来并保存当前状态。订单设计同样需要拆主表和子表。order表存订单号、用户id、场次id、总金额、状态、创建时间order_item表存每个座位和价格。为什么要拆因为同一个订单可能买了多张票子表能记录每张票对应的座位和单价退票时也能按座位退。如果只设计一张订单表每单多票就得用逗号拼接座位id查询和统计都会很难受。订单号我建议用时间戳加随机数生成尽量保证唯一数据库里再加唯一索引防止重复。2.2 锁座与状态机设计避免超卖订票系统最容易出问题的就是“超卖”两个用户同时看到同一个座位可售同时提交订单最后都买到了。解决思路是状态机加数据库锁。我设计了一个schedule_seat状态字段取值包括available、locked、sold。用户点击选座时前端先把座位变成“选中”状态但此时不算真实占用只有提交订单时后端才把对应座位从available改成locked并创建待支付订单支付成功后改成sold超时未支付则改回available。关键代码在更新座位状态这一步。不能先select判断再update而应该直接执行带条件的updateUPDATE schedule_seat SET status locked WHERE id ? AND status available然后用受影响行数判断是否抢座成功。如果返回0说明座位刚被别人占用了直接提示用户重新选择。这个办法没有引入Redis纯MySQL也能扛住一般并发对课程设计或小规模商用来讲完全够用。如果在服务到服务的高并发场景再考虑引入分布式锁或Redis Lua脚本。2.3 用MySQL实现字段约束与索引优化创建表的时候一定要把约束加上。用户表user_name加唯一索引手机号如果要做登录也加唯一索引订单表order_no加唯一索引防止重复订单号。金额字段不要用float用decimal(10,2)状态字段用tinyint0表示可售、1表示锁定、2表示已售后续扩展更多状态也方便。时间字段统一用datetimeJava实体对应LocalDateTime避免时区问题。索引方面外键字段基本都要建索引。schedule表里movie_id、hall_id要建普通索引schedule_seat表里schedule_id和seat_id组合起来可以建唯一索引从根源上杜绝同一个座位被插入多条记录。order表里user_id要建索引用户查订单列表时才能走索引。MySQL版本建议5.7.20以上字符集用utf8mb4既能存中文也能存一些特殊表情符号。数据库导入时如果出现编码乱码先检查SQL文件头部是不是utf8。3. 后端SpringBoot核心实现3.1 SpringBoot项目搭建与版本选择后端项目我习惯用Spring Initializr生成基础骨架再手动调整依赖。生成时选择Spring Boot 2.7.18Java版本选8。依赖不需要贪多核心就是spring-boot-starter-web、mybatis-spring-boot-starter、mysql-connector-java再根据需求加lombok、jjwt、hutool。如果你所在网络访问Maven中央仓库很慢记得把仓库地址换成国内镜像否则在Eclipse或IDEA里会一直卡在downloading状态。application.yml是整个后端的配置中心。数据库连接串要特别注意时区参数jdbc:mysql://localhost:3306/cinema_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai。缺少serverTimezone高版本MySQL驱动连接时直接报错。MyBatis配置也在这里比如驼峰命名映射map-underscore-to-camel-case: true这样数据库字段user_name就能自动映射到Java实体userName。如果想在控制台打印SQL加上log-impl: org.apache.ibatis.logging.stdout.StdOutImpl排查问题时非常直观。关于版本太高的问题我再啰嗦一句。很多人在Spring Initializr上默认选到3.x然后拿着老教程配置xml结果连启动都过不了。如果你不是专门研究新特性老老实实用2.7.x。我用SpringBoot 2.7.18跑了整个影院项目没有遇到任何奇怪问题。3.2 MyBatis配置与SQL写法MyBatis有两种配置方式注解SQL和XML。我在这个项目里全部使用XML因为选座、订单统计这类SQL比较复杂XML写起来更清晰也方便后期维护。启动类上加上MapperScan(com.cinema.mapper)Spring会扫描所有Mapper接口。每个Mapper接口对应一个XML文件命名空间写成接口全限定名方法id和接口方法名保持一致。推荐一个实用配置在application.yml里开启MyBatis驼峰映射同时配置SQL日志。你能在控制台看到每次执行的SQL、参数和返回条数这对联调接口特别重要。很多新手说“接口返回null”多半是数据库字段和实体属性对不上要么开启驼峰映射要么在resultMap里手动映射。如果项目里用了MyBatis Plus还要注意逻辑删除字段默认查询会自动过滤已删除数据但业务上有时需要把已删除记录也查出来这时候可以用InterceptorIgnore注解或自定义SQL绕过过滤。我这个项目为了可控性直接用原生MyBatis反而绕开了这类坑。3.3 核心接口查询影片、选座、创建订单接口设计遵循RESTful风格。影片模块GET /api/movie/list获取上映影片GET /api/movie/detail?id获取详情场次模块GET /api/schedule/list?movieId根据影片查场次座位模块GET /api/schedule/seat/list?scheduleId查出当前场次所有座位状态订单模块POST /api/order/createPOST /api/order/payGET /api/order/list。统一返回结构为{code, message, data}code为200表示成功401表示未登录500表示服务器异常。创建订单是这个系统的核心接口流程不能写错。我在service层的createOrder方法上加了Transactional先把订单主表插入拿到订单id再批量插入order_item。批量插入用MyBatis的foreach拼接多条insert避免循环单条插入带来的性能损耗。事务保证订单和子表要么一起成功要么一起回滚。选座接口本身不更新数据库只在提交订单时锁定座位。这样的好处是用户可以随时取消选择不会给数据库增加压力。3.4 JWT登录与权限拦截器用户登录成功后后端签发一个JWT字符串前端存在localStorage里之后每次请求在header里带上Authorization: Bearer token。后端用一个拦截器统一校验登录接口、影片列表接口、场次查询接口放行订单创建、订单查询必须登录。拦截器配置代码如下Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/user/login, /api/user/register, /api/movie/list, /api/movie/detail); }JWT解析的时候记得处理过期异常否则token失效后接口只会抛出空指针前端没法友好跳转登录页。我习惯用jjwt库解析失败时统一返回401前端axios拦截到401就清空本地登录信息并跳转登录页。密码存储不要用明文至少用MD5加盐或者使用Spring Security自带的BCryptPasswordEncoder保证数据库泄露时密码不会直接暴露。4. 前端Vue实战4.1 用Vue CLI创建项目与路由配置前端我用的Vue CLI创建工程。先检查Node环境建议Node 14或16 LTS太高的Node版本偶尔会碰到vue-cli编译兼容问题。安装依赖时用npm如果下载慢就配置淘宝镜像。创建命令vue create cinema-web项目类型选择Vue 2或Vue 3都可以我这次用的是Vue 2加Element UI原因是Element UI资料多、表单组件齐全适合快速搭建管理端。路由文件单独放一个模块。用户端有首页、影片详情、选座页、订单列表管理端有影片管理、场次管理、订单管理。选座页路由要带scheduleId参数所以定义成/booking/:scheduleId在组件里用this.$route.params.scheduleId拿到。路由守卫统一处理登录状态如果用户未登录但访问需要登录的页面就跳转登录页。这个功能只需要在beforeEach里判断一下meta信息和token值就能实现。4.2 影院座位图组件实现座位图是前端最有意思的部分。后端返回的数据结构是座位列表包含seatRow、seatColumn和status字段。我建议前端把它装配成二维数组方便按位置渲染。座位状态有三种available可售、locked锁定、sold已售。已售和锁定座位显示灰色或斜线不可点击可售座位点击后切换为选中状态选中的座位再点击则取消选中。选座数量限制为5张超过时提示用户。因为座位图会有嵌套循环建议封装成独立的座位图组件。组件内部props接收座位数据和场次信息通过$emit把选中结果传给父组件。选座的时候不能只在前端控制还要在提交订单时把座位id数组完整传递给后端。我踩过的坑是用户从A页面进入选座页再返回如果组件没有被销毁选中状态还在。所以进入选座页时一定要重新请求座位数据避免旧状态残留。4.3 对接后端接口与Axios封装前端所有请求都不能直接散落在组件里我在src/api目录建了一个request.js统一封装axios。baseURL根据环境变量区分开发环境用/api配合vue.config.js里的代理生产环境也保持/api由Nginx统一转发到后端端口。这样做是为了避开跨域也方便后面切换接口地址。axios拦截器里做了两件事请求拦截把token从localStorage取出并加到header响应拦截统一处理业务码如果code是200就返回data区域否则弹出错误信息。如果遇到401说明登录过期清除本地用户信息并跳转登录页。封装完成之后每个接口文件只需要写请求地址和参数即可代码量会大幅下降。service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) config.headers[Authorization] Bearer token; return config; });4.4 视频播放m3u8格式预告片处理影片详情页通常要放预告片常见的视频格式是mp4但我遇到不少片源是m3u8格式的流媒体地址。Safari浏览器原生支持m3u8Chrome、Firefox却不支持所以需要引入hls.js库。安装方式npm install hls.js然后在详情页组件里动态判断。m3u8播放的核心逻辑是先判断浏览器是否原生支持hls如果不支持就创建Hls实例把video元素的src设置为hls地址等待manifestParsed后调用video.play()。这里比较容易踩的坑是浏览器自动播放策略如果没有用户点击事件play()会被拒绝。所以在详情页我设置成用户点击“播放预告片”后才初始化hls.js既能解决自动播放限制也节省流量。线上如果走的是HTTPS视频地址也要尽量用HTTPS否则会被浏览器拦截为混合内容。5. 部署与常见问题排查5.1 本地环境配置MySQL安装、JDK、Node先把本地环境跑通再谈部署。MySQL安装时Windows用户建议下载MSI安装包直接安装安装过程中设置root密码字符集选utf8mb4。安装完用命令行或Navicat执行SQL脚本创建数据库和表。Linux用户可以用yum install mysql-server或者用Docker安装MySQL配置端口和密码后就能使用。启动项目前检查MySQL服务是否已启动否则SpringBoot启动时会报连接拒绝。JDK和Node也不能忽略。JDK8配置JAVA_HOME并把bin目录加入PathNode建议直接下载LTS版本安装后自带npm。前端项目在vue工程目录执行npm install安装依赖如果安装卡在某个包可以删除node_modules目录重新安装或者切换镜像。本地启动方式很简单后端执行mvn spring-boot:run前端执行npm run serve浏览器访问前端端口。唯一要改的是后端数据库密码和前端请求地址。5.2 前后端打包部署到服务器部署思路有两种一是传统Jar加Nginx二是Docker Compose统一编排。传统方式对新手更友好。后端打包mvn clean package -DskipTests在target目录生成jar包服务器安装JDK8后执行java -jar cinema-server.jar --server.port8080。前端打包npm run build生成dist目录把这个目录扔到Nginx的html目录下然后配置Nginx让/api/开头的请求转发到后端端口。Nginx配置是部署的关键不能漏掉history模式路由回退。Vue Router如果用hash模式不需要配置但history模式刷新页面会404。必须在location里加try_files $uri $uri/ /index.html;同时把/api/反向代理给Java进程。示例配置location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; }如果用Docker Compose可以把MySQL、jar包、Nginx三个服务编排在一起一条docker-compose up -d全部启动。但新手第一次部署建议先用传统方式理解每个组件在干什么排查问题时也更简单。5.3 常见问题速查表与避坑建议现象原因解决方案启动时一直停留在downloading…Maven依赖下载慢或网络不稳配置国内Maven仓库镜像检查Eclipse的Maven设置SpringBoot项目启动失败提示class文件版本错误项目用了SpringBoot 3.x但JDK是8降低SpringBoot版本到2.7.x或升级JDK17数据库连接超时MySQL没有启动、端口不对、密码有误检查MySQL服务确认application.yml连接URL加上时区参数接口返回null或字段缺失数据库字段和实体属性不一致开启map-underscore-to-camel-case或手动写resultMap前端开发环境请求跨域前后端端口不同在vue.config.js配置devServer.proxy代理生产环境由Nginx转发用户下单后座位仍被别人购买没有锁座位或没有判断受影响行数使用条件更新update ... where statusavailable并开启事务前端播放m3u8没有画面Chrome不支持hls或自动播放被拦截引入hls.js初始化后调用play让用户点击触发播放订单列表查询很慢user_id或status字段无索引给外键字段和订单状态字段建索引刷新页面404Vue Router history模式未配置回退Nginx中配置try_files指向index.html最后分享一个部署小技巧如果前后端都是自己维护我建议在jar启动命令里加上--spring.profiles.activeprod用独立的application-prod.yml管理生产环境数据库地址避免把本地数据库密码带到服务器。选座接口并发测试可以用JMeter压一压如果发现锁冲突太频繁再考虑把锁座逻辑拆出来用Redis实现。做完这个项目你基本就把前后端分离系统的全链路跑通了一遍后续再接触微服务、消息队列这些技术也能更快理解它们解决的问题。