又到毕业设计高峰最近后台被同一个问题刷屏“学长我想做一个在线电影购票系统当毕设用SpringBoot加Vue行不行” 行太行了。这几乎是前后端分离方向最经典、最适合展示综合能力的题目之一用户登录、电影展示、选座抢票、生成订单、模拟支付每一个环节都能拆出真实业务难点电影信息管理、场次排片、订单统计又能把后台管理系统该有的样子做满。把一个在线电影购票系统从零跑通、还能讲明白含金量完全不输那些花哨的AI毕业设计。这篇文章我直接把一套可复现的SpringBoot Vue在线电影购票系统的完整落地过程讲透从数据库表设计到接口实现从前端页面联动到并发避坑最后再列一些答辩时的高频追问和应对思路。无论是打算拿这个题目交差的大学生还是想系统过一遍全栈流程的入门开发者都能从这里找到能直接抄作业的方案。1. 项目整体设计与技术选型思路1.1 为什么选SpringBootVue组合SpringBoot和Vue的组合在毕业设计里几乎成了“默认答案”。后端用SpringBoot省掉了传统SSH那一堆XML配置文件内嵌Tomcat打包后一个jar就能跑配合MyBatis-Plus日常增删改查几乎不用写SQL能把精力集中在订单、座位这种真正的业务逻辑上。前端用Vue组件化开发让页面结构清晰Element UI或者Element Plus提供了现成的表格、表单、弹窗、分页组件一个后台管理界面很快就能拼出来。对比一下早期毕设常见的单工程JSP方案页面、Java代码、SQL混在一起顾客端和管理员还得靠不同的URL入口控制改一个样式要重启整个服务。前后端分离之后前端只需要关注渲染和交互后端只需要提供JSON接口两侧可以并行开发联调时用代理转发就行。答辩的时候老师看到你讲“接口规范”“跨域处理”“状态码统一”这些词第一印象就会好很多。另外SpringBoot的生态成熟遇到任何问题都能在社区里搜到答案。Vue的资料同样丰富中文文档友好新手照着写不会卡死。选这个组合不追求新潮但求稳定、可控、能解释清楚——对毕设来说这就够了。1.2 系统核心功能模块拆解在线电影购票系统听起来复杂拆开后其实只有两大块面向普通用户的C端以及面向管理员的后台。用户端要有的功能包括注册/登录、电影列表与详情、关键字搜索、场次查看、在线选座、下单、模拟支付、个人中心看历史订单。其中在线选座是核心也是最能体现项目难度的地方。后台端则包含电影信息管理上架/下架/编辑海报和简介、影厅管理行列数设置、场次排片哪部电影在哪个厅几点放、订单查询与统计、用户管理。如果时间充裕可以再加上评论评分、优惠券但这些属于锦上添花不要一开始就塞进去。我给出一张功能清单可以作为你写开题报告的参考模块用户端功能管理端功能用户注册、登录、个人信息用户列表、状态管理电影浏览、搜索、详情、预告片新增/编辑/上架/下架电影影厅查看座位图影厅行列设置场次按电影和日期选择场次排片、改价、停售选座购票选座、锁定座位、创建订单-订单待支付订单、历史订单订单查询、退款处理支付模拟支付/沙箱支付支付日志我个人强烈建议在最开始就加入用户角色区分普通用户和管理员。前端用路由守卫控制页面访问后端用拦截器校验接口权限。这个设计本身不复杂但讲项目时能突出“权限管理”这个亮点是答辩的加分项。1.3 数据库设计与表关系数据表是项目的根表设计错了后面写代码全是补丁。我的做法是先不碰代码把表关系画清楚再动手。核心表大致需要这几张用户表user、电影表movie、影厅表hall、场次表session、座位表seat、场次座位表session_seat、订单表orders、订单明细表order_item。下面逐个说明字段设计意图。用户表主要字段id、username、password存BCrypt加密后的密文、nickname、avatar、role0普通用户 1管理员、status、create_time。这里密码一定不能明文存至少要用Spring Security自带的BCryptPasswordEncoder。电影表主要有id、title、poster、description、duration、type类型、release_date、status上映中/已下架、trailer_url。其中trailer_url可以存一个mp4或者m3u8的视频地址用于详情页播放预告片。答辩时可以解释一下m3u8协议适合HTTP流式播放比直接加载MP4体验更平滑。影厅表是hallid、name、row_count、col_count用于描述一个几排几列的放映厅。座位表和影厅表关联seat表存储每个影厅的物理座位包含id、hall_id、row_num、col_num、seat_code例如“3排5座”。场次表sessionid、movie_id、hall_id、start_time、end_time、price、status售票中/满座/停售。注意结束时间建议在后端根据电影时长自动计算不要让人手工填。最关键的是一张场次座位表session_seat。它把“影厅的物理座位”和“某一场次”绑定起来字段是id、session_id、seat_id、status0可选 1已被占 2已售出。为什么会多出这一张表因为在不同场次同一个座位的状态是不确定的。没有这张表你只能通过订单去反查哪些座位卖掉了查询效率低不说并发控制基本没法做。订单表orders字段id、order_no唯一编号、user_id、session_id、total_price、status0待支付 1已支付 2已取消、create_time、expire_time。订单明细表order_item记录这个订单买了哪几个座位、当时的票价字段id、order_id、session_seat_id、price。为什么不直接orders里存座位ID因为一个订单可能买多张票一对多关系必须拆开也方便后端做退款时逐座释放。表关系上user到orders是一对多session到session_seat是一对多session_seat到order_item是一对一。ER图画出来逻辑是完整的。这张数据库设计是你可以直接照搬的基础版建议答辩时把关系图放在PPT里解释每一张表存在的必要性。2. 核心功能实现与实操要点2.1 用户登录鉴权与JWT接入登录鉴权我推荐用JWT加拦截器而不是给每个接口都写一遍session判断。JWT自带过期时间服务端不需要存会话前端拿到token后存到localStorage里每次请求放在Authorization请求头非常符合前后端分离的场景。后端需要引入jjwt依赖dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version scoperuntime/scope /dependencyJwtUtil的核心方法就三个生成token、解析token、判断是否过期。生成时把userId和role放进去过期时间设置2小时。前端每次请求都在拦截器里带上token后端写一个HandlerInterceptor在preHandle里校验token。如果token校验失败返回401前端收到后跳到登录页。有一点要注意拦截器会拦下所有请求包括登录接口本身。所以需要在WebMvcConfigurer里把登录、注册、电影列表这些不需要鉴权的接口加入排除列表。前后端联调时如果发现某个接口一直401八成是路径没放行或者请求头没有正确携带token。调试时可以先打开浏览器开发者工具看请求头里有没有Authorization字段。具体代码可以这样写Component public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行OPTIONS预检请求 if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); request.setAttribute(role, claims.get(role)); return true; } catch (Exception e) { response.setStatus(401); response.getWriter().write(未登录或token已过期); return false; } } }密码加密务必使用BCrypt。明文密码在数据库里一旦泄露就是事故毕设项目虽然不生产使用但老师发现你用了明文密码会追着问安全性问题。2.2 电影信息管理与前台展示管理端电影管理无外乎增删改查。用MyBatis-Plus之后写一个MovieController配合分页插件半小时就能完成。前端用Element Plus的el-table展示列表el-form做弹窗表单el-upload上传海报图片这些组件文档例子很多照着改一下字段就能用。需要注意的一点是电影海报不要直接存Base64到数据库图片文件很大会让你接口响应变慢数据库表也会迅速膨胀。正确做法是把图片上传到本地某个目录或对象存储数据库只存访问URL。毕业设计阶段可以在后端配置一个静态资源映射把本地upload目录映射成 /upload/**上传后前端拿到/upload/xxx.jpg就能访问了。前台展示的核心是电影列表和搜索。前端调用/movie/list接口传入keyword、type、pageNum、pageSize后端用MyBatis-Plus的LambdaQueryWrapper做模糊查询。这里有一个细节接口返回的电影列表应该只包含“上架中”的电影管理员下架的电影不能再出现在C端。这个状态过滤条件最好写在后端SQL里不要指望前端自己过滤。前端电影卡片可以用Vue的v-for循环渲染海报点击后跳到详情页详情页再调用/movie/{id}获取详情、/session/list?movieId{id}获取该电影的场次列表。页面数据加载时可以加一个loading态否则点慢了用户会以为卡死了。2.3 选座与订单流程锁座位的并发处理在线选座是整个项目最容易翻车、也最容易被老师提问的地方。先看业务流程用户选择场次后看到座位图点击一个或多个可用座位提交订单。这个过程的本质是多个用户可能会同时选择同一个座位系统必须保证只有一个用户能成功下单。最简单也是我最推荐毕设使用的方案是MySQL条件更新锁座位。座位状态落在session_seat表的status字段上。前端提交订单时传sessionId和seatIds数组后端在同一个事务里对每一个座位执行类似update的SQLUPDATE session_seat SET status 1 WHERE session_id #{sessionId} AND seat_id #{seatId} AND status 0这条SQL执行后返回影响行数。受影响行数等于1说明这个座位确实是从“可选”被改成了“已被占”抢占成功等于0说明座位已经被别人抢走直接抛出业务异常。放在事务里任何一个座位更新失败就整体回滚已经占用的座位全部释放。Service层代码可以写成Transactional public OrderResponse createOrder(OrderCreateRequest req) { for (Long seatId : req.getSeatIds()) { int rows sessionSeatMapper.lockSeat(req.getSessionId(), seatId); if (rows 0) { throw new BizException(座位已被他人选中请刷新重试); } } // 生成订单号、计算总价、插入订单表和明细表 Order order new Order(); order.setOrderNo(generateOrderNo()); order.setUserId(req.getUserId()); order.setSessionId(req.getSessionId()); order.setTotalPrice(...); order.setStatus(0); orderMapper.insert(order); return ... }很多同学会担心事务加循环中有多张表的写操作会不会有性能问题。实际上一个订单最多买5张票这个循环的成本极低数据库行锁完全扛得住。这个方法的核心点在于“条件更新”天然带上了锁的语义不需要手动加select for update也避免了并发下读取到旧状态的问题。另外一个必须处理的点是订单过期。用户占有座位但一直不支付座位就被占死了。简单做法是给订单加一个expire_time比如15分钟。用户点击支付前检查当前时间是否超过expire_time超了就取消订单并释放座位后端再写一个定时任务每隔5分钟扫描一次状态为0且过期的订单批量释放座位。毕设里定时任务用Spring自带的Scheduled注解就够了不用引入复杂的分布式任务框架。2.4 支付模拟实现真正接入微信支付或者支付宝支付需要营业执照、商户号、备案域名对学生来说不现实。但如果不做支付流程订单状态又没法闭环。我的建议是优先接支付宝沙箱环境没有真实资质也能完整演示支付。支付宝沙箱的接入点在官方开放平台申请开通后你能拿到沙箱应用的APPID、商户私钥和支付宝公钥。PC端网页支付用alipay.trade.page.pay接口后端生成跳转表单用户点击支付后跳转到支付宝沙箱环境输入官方提供的买家账号完成付款再由支付宝异步通知你的回调接口你在回调里校验签名、更新订单状态。如果觉得沙箱配置麻烦还有一个更轻量的方案本地模拟支付。前端点击“立即支付”时弹出一个确认框点击确认后调用后端/payment/mock接口后端直接把订单状态从待支付改为已支付。虽然少了外部调用但订单的“待支付-已支付”状态流转是完整真实的。答辩时可以说为了演示方便使用了模拟支付同时给出沙箱支付预留了接口抽象不影响项目完整性。实话说大部分毕设老师听到这里都很满意。支付回调还有一个要讲清楚的点幂等性。支付宝会多次异步通知同一个订单如果回调里不做判断可能出现重复更新。简单处理是在回调Service里更新订单时加上状态条件UPDATE orders SET status 1 WHERE id #{orderId} AND status 0同样用“影响行数”判断。返回0说明订单已经处理过直接返回成功给支付宝不再执行加票、发消息等业务。3. 项目落地从零搭建到跑通3.1 环境准备与工具清单开发前先把环境统一避免边写边装浪费时间。我的推荐版本组合是JDK 1.8或11、Maven 3.6、Node.js 14或者16/18、MySQL 5.7或8.0、IDEA 2022、VSCode或者WebStorm。Spring Boot版本用2.7.x这个版本稳定且兼容JDK8配套的MyBatis-Plus和JWT包都好找。Vue前端如果不想折腾Webpack配置可以直接用Vite创建。数据库管理工具可以用Navicat或DBeaver。建表脚本写好后先手动执行一遍不要完全依赖代码自动建表便于你主动控制字段类型和索引。尤其在session_seat表上建议给(session_id, seat_id)加一个唯一索引防止脏数据重复。3.2 创建SpringBoot后端项目直接去Spring Initializr生成一个项目依赖选择Spring Web、MySQL Driver、Lombok然后手动引入MyBatis-Plus和JWT的依赖。项目结构建议按这种分包方式com.example.cinema ├── config ├── controller ├── service ├── mapper ├── entity ├── common └── utilapplication.yml里最需要关注的是数据源和MyBatis-Plus配置spring: datasource: url: jdbc:mysql://localhost:3306/cinema?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto注意serverTimezoneAsia/Shanghai一定要加不加的话连接MySQL 8.x会报时间差8小时或无法识别的时区错误。map-underscore-to-camel-case开启后数据库字段order_no会自动映射到Order的orderNo属性省去一堆TableField注解。实现业务时可以用MyBatis-Plus的BaseMapper简化单表CRUD但不要过度依赖。例如sessionSeatMapper.lockSeat是一个自定义update方法必须在XML里写SQL。MyBatis-Plus只解决80%的简单查询剩下的20%核心业务还是得自己动手。3.3 创建Vue前端项目我习惯用Vite创建Vue3项目输入npm create vitelatest frontend然后选择vue模板。装依赖时顺手把vue-router、pinia、axios、element-plus一起装上。Element Plus按需引入可以减小打包体积但毕设直接全局引入最省心反正展示机跑起来没有性能压力。封装axios请求是非常必要的。我在request.js里面统一做了三件事设置baseURL为/api、请求拦截器里从localStorage拿token放到Authorization头、响应拦截器里统一处理业务码和401跳转。这样每个页面的代码都能精简到只关注业务。核心路由守卫代码router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.path.startsWith(/admin) token !isAdmin()) { next(/) } else { next() } })页面方面用户端至少要包含首页电影列表、电影详情、场次选择、座位选择、订单确认、个人中心6个页面。管理端包含电影管理、场次管理、订单管理3个主页面。看起来多但每个页面高度模板化参考Element Plus文档里的表格和表单示例一天就能写完。3.4 前后端联调与接口规范前后端分离联调时默认会碰见跨域问题。我的经验是开发环境用Vite代理解决不要在后端开全局CORS。为什么因为代理对开发者无感知生产环境换成Nginx也一样而后端开CORS会有预检请求、重复配置等细节坑。Vite配置server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }后端所有接口统一加 /api 前缀比如 /api/user/login、/api/movie/list、/api/order/create。前端axios的baseURL也是 /api这样代理会把请求原样转发到后端。接口返回格式强烈建议统一封装我们约定{ code: 200, message: 操作成功, data: {} }后端写一个Result 工具类所有Controller都返回这个对象。前端响应拦截器判断code是否等于200不是则弹出message。统一返回格式的好处是无论列表、详情还是错误信息前端处理逻辑只有一套不用每个接口单独写try-catch。联调时最快的调试方式是先打开浏览器F12 Network面板看请求有没有发出、响应状态码和返回体。如果请求发出但404先确认后端路径和前端请求路径是否一致如果请求发出但500去后端控制台看异常日志。不要用眼睛一行行检查代码看日志永远比猜快得多。3.5 打包部署方案毕设演示通常只需要在一台电脑上跑起来。最简单的方式是打包成单个SpringBoot可执行jar后端执行mvn clean package前端执行npm run build然后把dist目录下的静态文件拷贝到后端项目src/main/resources/static目录下重新打包后启动jar直接访问8080端口就能看到前端页面不用额外启动前端服务。这样做的好处是部署极简单演示时只需要一个Java环境。缺点是前端更新时需要重新打包后端开发维护不方便。如果以后想扩展可以用Nginx部署前端静态文件、反向代理后端接口。但毕设的验收场景一个jar完全够用。打包前记得把前端代理去掉因为静态文件和后端在同一个域名端口下不需要代理。4. 常见问题与调试避坑实录4.1 跨域问题排查如果你选择在后端通过CorsFilter解决跨域第一次写容易漏掉预检请求。浏览器在POST请求带自定义header之前会先发送一个OPTIONS请求如果后端没有正确处理会提示“CORS preflight did not succeed”。正确做法是在拦截器里放行OPTIONS请求并在CorsFilter中允许所有来源开发环境可以这样生产环境再收紧。还有一种情况是前端请求能通但session不一致。因为浏览器区分跨域的cookie是按域名来的前后端分离后JWT放在header里就没这个问题。这也是我推荐用JWT而不是Cookie-Session的另一个原因。4.2 数据库连接报错与时间差“数据库连接不上”是最常见的起步问题八成是MySQL没有启动、用户名密码不对、或者驱动没引入。另外MySQL 8.x的驱动类名是com.mysql.cj.jdbc.Driver不能老搬以前5.x的com.mysql.jdbc.Driver。连接串里一定带上时区参数不然执行SQL时会报server time zone value错误。如果你数据库在服务器上还要注意MySQL端口是否开放localhost和云主机内网地址别搞混。4.3 座位超卖现象、排查与修复有同学写完选座接口后自己开两个浏览器窗口测试发现同一座位能被两个订单同时占用这就是经典的超卖。原因通常不外乎两点一是没有在事务里更新座位状态或者更新时没有带上status0的条件两个事务同时读到status0然后都更新成功二是订单表使用了默认的REPEATABLE READ但更新语句的条件没有正确锁行。排查时先看自己的更新SQL是否命中“条件更新判断行数”这个模式。如果没有就是逻辑漏洞。修复方法前面已经给了这里再强调一遍座位更新和订单创建必须在同一个方法上标注Transactional并且锁座位的SQL一定加上and status0条件。写完可以用JMeter模拟20个并发请求打同一个座位的接口如果只有一个成功、其他报业务异常说明锁生效。4.4 常见面试追问与答辩准备毕设答辩本质上老师要确认这东西是你自己写的、你能讲清楚为什么这么做。我总结过一些高频追问为什么选MyBatis-Plus可以答它提供通用的CRUD方法减少重复Mapper XML同时保留自定义SQL能力适合中小项目快速交付底层还是MyBatis。怎么防止一个订单重复提交可以答前端提交按钮加loading后端在创建订单前查相同用户、相同场次、相同座位且状态为待支付的订单是否存在同时利用数据库唯一索引兜底。支付回调万一重复调用怎么办答更新订单时加status0条件用影响行数做幂等判断处理过就直接返回成功。为什么选座要用条件更新而不是先查询再更新答查询和更新之间有时间窗口并发下会读到旧数据条件更新把“检查状态”和“修改状态”合为一条原子SQL由数据库行锁保证安全。如何优化首页电影加载速度可以从接口减少返回字段、前端懒加载图片、后端加缓存三个方面回答。答辩讲项目时不要从头到尾念PPT。我会让学生准备一条完整的故事线管理员上架电影并排片用户注册登录后浏览电影选座时发生并发冲突用条件更新保证不超卖支付后订单状态流转。把事务、锁、JWT这些技术点嵌在故事里讲比单报技术名词有说服力得多。最后再分享一个我做了这么多年毕设辅导的个人体会在线电影购票系统这类题目成败不在于功能多少而在于核心链路是否清晰。有同学为了炫技塞了一堆Redis、消息队列、微服务反而把最简单的选座和订单流程讲得混乱最后老师一问“你这个项目里Redis到底解决了什么问题”答不上来很减分。倒不如老老实实把SpringBoot Vue MySQL这套基础组合吃透把JWT鉴权、事务、座位锁这三件事讲明白答辩基本稳了。如果你时间还有富余可以加一个电影预告片的m3u8播放功能再给订单模块补一个定时释放过期座位的统计日志。把这些都做完这份项目就能成为你简历里一个非常扎实的实战经历。