这题很典型你搜“SpringBoot Vue3 前后端分离 毕设选题”出来的项目可能几百个但真正能顺顺当当跑起来、答完辩、交得出手的并不多。标题里带着“070”编号的系统通常在课程设计、毕业设计题库里反复出现表面是电影网站实际考察的是用户后台、电影 CRUD、分类、评论、收藏这一类最常见的全栈业务闭环。它没有特别偏门的算法所以难的不是业务不是模型而是整套前后端工程能不能在本地一次性跑通、接口联调是否干净、管理端是否完整、部署时是否会被环境问题卡住。这篇文章不打算只贴一张图然后喊“好项目”而是把这类系统从一开始怎么做需求拆解、怎么设计表结构、怎么写 SpringBoot 后端、怎么搭 Vue3 前端、怎么处理跨域和接口联调、到最后怎么本地启动按一条能落地的路线给你拆开。看完之后不管你是拿它当参考还是直接复现一个类似的管理系统都会比漫无目的地到处找视频、找代码要快。文章里所有配置和命令都以最常见的环境为准但会特别标注容易出问题的版本点避免你在同样位置浪费一下午。先说清楚文章的结构。第二部分先给核心能力速览让你 30 秒判断值不值得往下看第三部分拆功能模块第四部分讲技术选型与环境版本第五部分到第七部分分别覆盖后端搭建、数据表设计、前端搭建第八部分讲接口联调顺序第九部分补充视频上传与播放的关键点第十部分给出一份带步骤的启动检查单最后是常见报错排查和建议。全文信息量大按自己的进度分着看也行。1. 核心能力速览能力项说明项目类型电影网站系统一套典型的“管理员后台 用户门户”双端应用后端技术SpringBoot、MyBatis-Plus、MySQL、Maven前端技术Vue3、Vite、Pinia、Vue Router、Element Plus、Axios架构模式前后端分离通过 RESTful API 通信核心用户普通用户注册登录、浏览电影、搜索、查看详情、评论、收藏管理员电影管理、分类管理、用户管理、评论审核、轮播图配置主要业务电影信息维护、分类筛选、关键词搜索、详情页展示、播放页管理、评论收藏、后台统计推荐运行环境Windows / macOS / Linux 均可后端需要 JDK 8 或 17前端需要 Node.js 16 以上显存占用不涉及本地 AI 推理无显存要求启动方式后端 IDEA 启动前端 npm 启动MySQL 作为数据库是否支持 API支持后端本身就是为前端分离提供的接口服务也可用 Postman 调试批量能力不依赖独立任务队列但可以通过 SQL 初始化脚本批量导入电影数据也可以在管理端按分页批量操作数据典型案例毕业设计、课程设计、SpringBootVue3 全栈入门练习、面试作品部署难度中等偏低最花时间的往往在环境版本和联调这类选题的代码量通常在几千到一万行核心难度不在于单个技术难点而是工程化熟练度比如依赖对不对、端口对不对、路径对不对、字段名是否前后端统一。用它来练前后端分离这套思想是非常合适的因为电影网站的数据模型不复杂链路却很完整一张电影表就能串起分类、上传、列表、详情、播放页搜索这一整条前后端主线。2. 系统功能模块拆解电影网站系统给你画一个最简单的功能脑图通常是这样用户端注册、登录、退出首页轮播图推荐电影分类浏览电影关键词搜索电影列表分页电影详情页简介、导演、演员、上映年份、评分电影播放页用户收藏用户评论管理后台管理员登录Dashboard 统计数据电影总数、用户数、评论数电影管理新增、编辑、删除、上下架、封面和视频资源维护分类管理影片类型的增删改查用户管理查看用户列表、禁用账户、重置状态评论管理查看评论、删除违规评论轮播图管理维护首页推荐的 Banner 图和跳转链接标题里的“电影网站”有几种理解有的偏视频资源站重点是播放页有的偏“豆瓣式”电影资料库重点是电影信息聚合和评论。两者在设计上差别不大多一张视频资源表和少一张视频资源表的问题。如果是做毕设建议同一套代码兼顾两种视角电影信息表保存电影详情另加一个video_url或episode相关字段管理员可以填写播放地址或上传视频文件用户在前端页面中拿到地址后播放。这样功能描述起来更完整答辩时也更好展示。不建议把系统做成真正的“种子资源聚合站”去考虑盗版、破解、破解播放源。这类内容不仅要处理版权风险系统的核心价值也会被审查问题带偏。好的做法是把它定义为“影院信息管理与展示平台”电影数据由管理员录入视频使用版权清晰的演示片源或自制测试视频这样既能展示上传、播放、管理流程又能在公开博客和答辩现场放心讲。第三个值得注意的点是权限设计。很多同学在后台功能上只做了“前端页面隐藏”管理员接口没有任何鉴权这会成为答辩老师最喜欢问的问题。实际上这个系统可以采用 JWT 或 Session 两种方案。毕设演示用 Session 比较简单只需要后端拦截器检查登录状态如果想让项目显得更像企业级开发就引入 JWT登录后返回 token前端请求时放到请求头后端用拦截器或 Spring AOP 统一校验。推荐从 JWT 入手因为面试时提“无状态鉴权”比“Session 会话”更能展示对前后端分离的理解。3. 技术选型与环境版本准备这套系统的后端主流选型是 SpringBoot MyBatis-Plus MySQL。SpringBoot 版本要特别检查它和 JDK、MyBatis-Plus 之间存在明显的兼容关系。很多人在运行项目时报错Invalid value type for attribute factoryBeanObjectType或者 MyBatis 找不到 mapper就是因为 SpringBoot 3.x 用了 Jakarta 命名空间而 MyBatis-Plus 版本太老。给一个不会踩坑的组合组件推荐版本说明JDK1.8 或 17SpringBoot 2.x 用 JDK 8SpringBoot 3.x 必须 JDK 17Spring Boot2.7.18稳定、网上资料最多适合新手MyBatis-Plus3.5.3.x兼容 SpringBoot 2.xMySQL5.7 或 8.08.0 注意 driver-class 和时区配置Maven3.6IDEA 自带即可Node.js16.20 以上Vue3 Vite 需要 Node 高版本pnpm / npmnpm 8不用 pnpm 也没问题如果你学的是较新的课程或找的参考项目用了 SpringBoot 3.x那它依赖的 mybatis-plus-spring-boot3-starter 与 SpringBoot 2.x 引入方式不一样必须按参考项目提供的版本来不要自己混着换。实际项目里最常见的问题并不是代码不会写而是网上找的教程各自版本不同导致 pom.xml 依赖互相冲突。建议在创建项目时直接固定到上述组合不要追最新版。环境准备阶段还要检查三项MySQL 服务已经启动并能用命令行登录。很多奇怪的Access denied for user rootlocalhost都来自密码不一致。Maven 能联网下载中央仓库依赖。如果公司网络或校内网络限制较多需要配置阿里云镜像否则 IDEA 导入依赖会非常慢。Node 下npm config get registry建议指向国内镜像能有效避免前端依赖下载超时。# 检查 Java 和 Node 版本 java -version node -v npm -v mvn -v # npm 国内镜像示例 npm config set registry https://registry.npmmirror.com4. 后端工程搭建与 SpringBoot 核心配置后端工程我这里描述的是一种最小可运行的方案。你可以用 IDEA 新建一个 Spring Initializr 项目也可以直接在已有参考项目上修改。项目包名建议按com.example.movie这类结构组织关键要分成 controller、service、mapper、entity、config、common、dto 几个包答辩时条理清晰。第一步是准备 pom.xml。最核心的依赖就四个web、mybatis-plus、mysql-connector、lombok。此外为了方便写接口返回结构可以引入hutool或直接手写Result类两种方式都行。参考依赖片段如下parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus 增强启动器 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version scoperuntime/scope /dependency !-- Lombok 简化实体类 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies使用 MySQL 8.0 时网上老的教程里写的是com.mysql.jdbc.Driver这个类在 MySQL 8 之后已经过时必须换成com.mysql.cj.jdbc.Driver。如果数据库安装的是 MySQL 8.0建议在连接字符串上追加时区参数避免serverTimezone问题。通常写成server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/movie_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 servlet: multipart: max-file-size: 200MB max-request-size: 200MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl密码位置需要改成自己的 MySQL 密码。allowPublicKeyRetrievaltrue是很多人容易漏掉的配置如果用 MySQL 8 且连接时提示Public Key Retrieval is not allowed加上这一项就能解决。max-file-size如果是做视频上传功能要提前调大否则后台上传超过 1MB 的视频会直接报文件大小超限这个报错和逻辑代码无关。启动类上要加一个 MapperScan 注解否则 MyBatis-Plus 的 Mapper 不会被扫描进容器SpringBootApplication MapperScan(com.example.movie.mapper) public class MovieApplication { public static void main(String[] args) { SpringApplication.run(MovieApplication.class, args); } }后端业务中最常见的 Controller 写法是通过 Service 调用 Mapper 或 IService 提供的方法。MyBatis-Plus 自带的ServiceImpl能帮助你省去大量基础 CRUD 代码。比如电影管理接口只需要继承ServiceImplMovieMapper, Movie然后自己补充分页查询和条件查询。没有特别复杂的需求时不推荐在 XML 里写大量关联查询直接通过实体类映射即可。如果确实要写动态 SQLxml 文件放在 resources/mapper 下且一定保证mapper-locations路径和实际文件路径一致否则会出现Invalid bound statement (not found)的经典报错。5. 数据模型与关键表设计电影网站系统的表不用设计得太多但要让每张表都能讲清楚业务含义。按典型方案大约 6 到 8 张表足够支撑整个系统。表名含义关键字段sys_user用户表id, username, password, nickname, avatar, role, status, create_timemovie_category电影分类表id, name, sort_ordermovie_info电影信息表id, category_id, title, cover, video_url, director, actors, region, year, rating, description, status, create_timemovie_comment评论表id, movie_id, user_id, content, create_time, statusmovie_favorite收藏表id, movie_id, user_id, create_timebanner轮播图表id, image_url, link_url, title, sort_order, status如果做的是电视剧或分集视频系统可以再加一张movie_episode表。对于“电影网站”这个场景多表联动没那么复杂但设计上要注意索引。评论区经常按电影维度查所以movie_comment表的movie_id必须加普通索引收藏表则建议对user_id movie_id建联合唯一索引保证同一用户不能重复收藏同一个电影这个表述在答辩时也是一个加分点。CREATE TABLE movie_info ( id bigint NOT NULL AUTO_INCREMENT, category_id bigint DEFAULT NULL COMMENT 分类ID, title varchar(200) NOT NULL COMMENT 电影名称, cover varchar(500) DEFAULT NULL COMMENT 封面图URL, video_url varchar(500) DEFAULT NULL COMMENT 播放地址, director varchar(100) DEFAULT NULL, actors varchar(500) DEFAULT NULL, region varchar(50) DEFAULT NULL, year int DEFAULT NULL, rating decimal(3,1) DEFAULT NULL, description text, status tinyint DEFAULT 1 COMMENT 1上架 0下架, create_time datetime DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT电影信息表;密码存储很关键即使只是毕设项目也不能把明文密码直接放数据库至少用 MD5 加盐或 BCrypt。推荐使用 Spring Security 自带的BCryptPasswordEncoder不过如果引入完整 Spring Security会带来默认登录拦截配置成本上升对第一次做这类全栈项目的同学可能不友好。更轻量做法是自己引入spring-security-crypto依赖只使用其中的 BCrypt 工具类对密码做哈希和校验。这样既不会触发全套安全过滤器也能让学生作品显得更规范。数据初始化不用手动逐条去后台添加可以准备一个sql/init.sql。管理员账号默认admin/admin123用户账号自定义。初始数据里建议放入 10 条以上不同类型的电影数据包含不同封面、不同分类、不同年份首页和分类页展示效果会更丰富。电影封面可以使用站内本地图片也可以用公开的演示图链接但不建议用有明显版权的商业海报直接做线上展示。如果只做本地学习演示用公开渠道生成的占位图或自制封面即可。6. Vue3 前端工程搭建与页面实现前端部分建议直接用 Vite 创建 Vue3 项目。Vite 创建的项目结构干净比 Vue CLI 启动速度快也是当前 Vue3 的主流使用方式。如果你不想从零创建也可以选择若依等成熟开源框架分离出来的前端模板但那样会引入更多权限和路由封装对新手来说反而提高了理解门槛。优先推荐自己创建。npm create vitelatest movie-web -- --template vue cd movie-web npm install npm install vue-router4 pinia axios element-plus创建完成后需要做三件事安装必要的依赖、配置路由、配置接口封装。整个前端如果按目录划分建议是src/api存放 axios 请求封装src/router路由配置src/storePinia 用户状态src/views页面视图src/layout后台布局在开发阶段Vue 端直接的跨域问题是访问http://localhost:5173而后端是http://localhost:8080如果不做配置浏览器会因为 CORS 策略拦截响应。最简单的做法是让 Vite 帮忙转发在vite.config.js里配置server.proxy页面里的所有请求都写成/api开发环境下会自动被转发到 8080这样前后端联调时不需要后端单独开启跨域支持。import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })接口封装统一放在src/api/request.js中。具体实现不需要特别复杂能统一带上 token、统一处理响应错误码即可。如果项目后端返回结构是{ code: 200, data: ..., message: ok }那封装可以这样写import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 30000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request页面层最主要的是用户端首页、电影列表页和电影详情页。首页一般直接调用/movie/hot获取多组数据分类页通过路由参数categoryId调用分页接口。这里需要提醒的细节是Vue3 中获取路由参数使用useRoute()不要再按 Vue2 的写法去用this.$route否则会报 undefined。组合式 API 是 Vue3 的新主流建议统一使用script setup。用户端布局可以参考当前常见的视频门户结构顶部导航栏放 Logo、分类、搜索框、用户信息中间是 Banner 轮播下面是内容网格。电影列表使用 Element Plus 的el-card加自定义图片展示就能实现不错的效果。后端管理端可以做一个独立的/admin路由通过meta.requiresAuth做前置导航守卫未登录跳转到登录页。虽然是简单的代码实现但整个权限闭环在答辩时比只贴页面要强很多。7. 接口联调顺序和后端 API 设计后端 API 是否规范直接决定前端联调是否顺利。电影系统最核心的几个接口可以按以下顺序执行功能方法路径前端页面用户注册POST/api/user/register登录注册页用户登录POST/api/user/login登录注册页电影分类列表GET/api/category/list顶部导航菜单电影分页列表GET/api/movie/list首页/分类页电影详情GET/api/movie/detail/{id}电影详情页电影关键词搜索GET/api/movie/search?keywordxx搜索列表添加收藏POST/api/favorite/add详情页我的收藏GET/api/favorite/list个人中心提交评论POST/api/comment/add详情页评论列表GET/api/comment/list/{movieId}详情页后台新增电影POST/api/admin/movie/save后台电影管理后台删除电影DELETE/api/admin/movie/delete/{id}后台电影管理上面的路径是常见设计参考不代表所有源码都一样。如果你拿到的参考项目前缀不同比如统一加了/system或返回结构不是code/data/message那前端封装也要跟着调整。最怕的是前后端字段名一个叫movieName一个叫title这种低级不一致会浪费大量时间。所以在写页面之前先打开后端的接口文档或实体类把返回给前端的 JSON 名称统一确认一遍。联调时建议先启动后端把 Swagger 或 Knife4j 打开浏览器直接访问接口测试。SpringBoot 集成 knife4j 非常简单依赖加好后访问地址通常是http://localhost:8080/doc.html。如果项目中没引入也可以用 Postman 或 Apifox 手动测试。手动测试期间重点看三件事第一登录接口能不能正常返回用户信息和 token第二电影列表接口在传pageNum1pageSize10时返回的数据里外层是 page 对象还是 list 数组第三需要登录才能访问的管理接口如果没带 token后端是否统一返回 401。如果返回结构和定义一致再开始写前端页面。写一个简化版的登录接口做参考RestController RequestMapping(/api/user) public class UserController { Resource private UserService userService; PostMapping(/login) public ResultLoginVO login(RequestBody LoginDTO dto) { String token userService.login(dto.getUsername(), dto.getPassword()); return Result.ok(token); } }Controller 中不要直接查数据库尽量把所有业务逻辑放到 Service 层。登录时根据用户名查出用户用 BCrypt 校验密码校验通过后通过 JWT 工具类生成 token。用户密码错误时抛出自定义异常由全局异常处理器统一返回错误信息。全局异常处理器只需要一个RestControllerAdvice类捕获BusinessException和Exception两类异常分别返回对应提示。这样哪怕前端传参有问题接口返回也不会把堆栈信息直接暴露给浏览器专业度和鲁棒性都会提升。8. 视频资源上传与播放的关键处理视频资源是电影网站里面比较有区分度的功能也是最容易在部署阶段出问题的地方。通常有两种方式远程 URL 播放和本地文件上传。远程 URL 方案实现最容易电影表里保存一个外部播放地址前端拿到后直接把地址交给video标签。本地上传方案需要处理文件保存路径、静态资源映射、前端上传组件三个点。在后端配置本地文件路径可以新建一个application.yml自定义属性例如file: upload-dir: D:/movie-upload/然后写一个文件上传 Controller。上传成功后为了能让前端通过 URL 访问到视频需要把本地目录映射为静态资源。这个需求最常见的方式是实现WebMvcConfigurer的addResourceHandlers手动把本地路径映射成/files/**访问路径。如果不想写代码也可以把文件放到项目的 static 目录下但项目重新打包时容易丢失视频文件不推荐。Configuration public class WebConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/files/**) .addResourceLocations(file: uploadDir); } }这样操作后假设上传文件保存为/files/2025/01/test.mp4前端详情页就能直接拼出服务器 URL 进行播放。由于前后端分离前端拿到的完整地址应该是http://localhost:8080/files/2025/01/test.mp4也可以让后端返回文件相对路径前端通过环境变量拼上后端域名。还有一个容易踩的坑是浏览器播放格式。如果上传的 MP4 编码格式是 H.265/HEVC很多浏览器默认不支持播放。测试时尽量用 H.264 编码的 MP4 文件。如果从网上下载的演示片段格式不对而导致播放黑屏可以用格式工厂、FFmpeg 之类的工具转成 H.264 的 MP4 再上传。下面是使用 FFmpeg 转码 H.264 的常用命令对照# 将任意视频转成 H.264 AAC 的 MP4 ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict experimental output.mp4视频播放和图片显示都涉及版权合规。系统在演示阶段必须使用版权清晰的素材、自制素材或开源样片不要直接盗用正在上映或明确标注版权的电影文件。在项目文档中也可以写明管理员需要通过后台维护版权信息未获授权的视频不能发布。这个说明既是真实系统应该有的功能边界也是答辩和公开代码时自我保护的一种方式。9. 本地部署启动完整流程前面几步全部做完后把整体启动流程固定下来。每次重启项目或到了演示现场按照这个顺序操作不容易漏环节。第一步准备数据库。在 MySQL 中执行初始化 SQL确保数据库名与后端application.yml中一致。可以先用show databases;查看是否创建成功。第二步启动后端。用 IDEA 打开后端项目等待 Maven 导入依赖完成如果下载很慢或无法 import检查 Maven settings.xml 中的镜像配置。启动后观察控制台日志出现 “Started MovieApplication” 或类似输出表示成功。第三步单独测试后端接口。在浏览器中访问登录接口文档或使用 Apifox 请求一个公开接口比如电影列表确认后端能正常返回 JSON 数据。第四步启动前端。命令行进入movie-web目录执行npm install执行npm run dev。看到 Vite 的 ready 状态后访问终端提示的地址通常是http://localhost:5173。第五步验证完整功能。注册一个新用户退出后用新用户登录添加一部电影到收藏写一条评论再看管理后台能否正常查询到该评论。管理员登录后新增一个分类再新增一部电影并绑定该分类刷新首页确认数据展示。实际演示前经常出现前端能打开首页但管理员进不去后台或者接口提示 401。这种情况多半是管理员账号没有初始化或者是登录 token 校验失败。所以验收清单要提前走一遍用管理员身份登录、新增、编辑、删除每个流程都测一下不要让演示现场变成现场调试现场。10. 常见问题与排查方法问题现象可能原因排查方式解决方案后端启动报数据库连接失败MySQL 没启动 / 密码错误 / 数据库名不对检查 MySQL 服务状态和 application.yml改成正确的账号密码或先创建数据库启动报时区错误MySQL 8 连接字符串缺少 serverTimezone看异常信息中包含 Timezone 字样在 url 中加上 serverTimezoneAsia/Shanghaipom.xml 导入依赖失败Maven 仓库网络问题查看 IDEA 的 Maven 控制台或本地仓库路径配置阿里云镜像删除本地工程 .idea 后重新导入前端 npm install 卡住或报错npm 默认源访问慢执行 npm config get registry 查看切换国内镜像源并重新安装页面打开后接口 404前后端路径不一致浏览器 Network 面板看请求 URL修正前端 api.js 路径或后端 RequestMapping 路径请求报 CORS 跨域错误前端直连了 8080没有走 Vite proxy检查请求地址是否为 /api 开头参考上文配置 server.proxy后端也可加跨域配置报 Invalid bound statementmapper XML 路径或命名空间错误检查 target/classes 下有没有生成 XML调整 mapper-locations 或 Mapper 接口包名上传视频后前端无法访问静态资源映射路径不对直接访问 http://localhost:8080/files/文件名检查 WebConfig 和 upload-dir 路径是否匹配上传文件大小超限multipart 默认 1MB查看控制台 MultipartException 异常调大 max-file-size 和 max-request-size评论或收藏提示用户未登录token 没有存储在 localStorage 或没有放进请求头查看 request.js 拦截器确认登录成功后将 token 保存并在请求头携带浏览器播放视频黑屏视频编码不是 H.264用 VLC 或 FFmpeg 查看编码信息将视频转成 H.264 AAC 编码前端页面样式错乱Element Plus 未完整引入或按需引入配置有问题查看控制台有没有样式相关警告全量引入时直接import ElementPlus from element-plus并引入 css排查技术问题时先分端缩小范围是一个好习惯。前端打不开先问页面本身是否返回 200再看请求是否进入后端日志有没有打印 SQL最后确认数据源头。如果后端控制台打印了 SQL 而接口返回空数组那问题往往是数据库没数据而不是代码 bug。这种情况在电影列表页非常常见先往数据库里插几条数据再刷新页面即可。11. 最佳实践与合规提醒这类“基于 SpringBoot Vue3 前后端分离的电影网站系统”写代码本身并不难难点在工程规范。下面几条建议来自实际部署经验可以帮你少走很多弯路。第一目录和包名保持清晰。后端不要把所有类都扔在 controller 一层至少要有 service、entity、mapper、config、common 等包。前端不要把一堆fetch直接写在组件里单独抽一个 api 目录。这种结构在答辩时比凌乱代码更有说服力后面加功能也容易。第二配置文件不要写死在代码里。数据库密码、上传目录、端口这些建议放application.yml不要直接写在 Controller 常量里。如果项目要交给别人运行还要提供一个README.md把数据库初始化步骤、启动命令、默认管理员账号写清楚这样别人拿到项目后能快速跑起来。作为求职作品这点很加分。第三敏感信息不要提交到公开仓库。数据库密码、云存储密钥、密钥字符串等都要通过.gitignore排除或用环境变量读取。项目上传到 GitHub 或 Gitee 前检查一下application.yml里是不是有真实密码避免信息泄露。第四对素材版权和安全边界要有清楚认识。在这个系统中用户评论需要后台审核或删除能力管理员上传电影内容也需要保证只有合法授权的内容才能发布。不要为了“演示效果好”去引用未经授权的商业电影资源或用户个人数据。系统开发完成后可以在演示数据中注明“电影信息仅为演示用途版权归原作者所有”商用前需要获得对应资源授权。第五运营状态和并发能力都要权衡。这套系统如果是单机课设后端不需要做集群、缓存、队列这些复杂设计。如果你的目标是面试作品可以在完成基础功能后用 Redis 做热门电影榜单缓存用 Nginx 做前端部署和后端接口反向代理再补充一个简单的定时任务把电影状态在上映和下映之间做自动切换。把这两点加进去项目的技术亮点会明显提升。整体上选择 SpringBootVue3 做前后端分离的电影网站是一个非常稳妥的路线。技术栈不会太旧不会太难业务链路完整数据表关系容易讲清楚前端展示也有不错的视觉效果。你不必纠结标题里有没有“070”这个编号也不必在乎这个题目是不是已经被写过无数遍关键在于你是否真正理清了 SpringBoot 后端接口、MySQL 数据模型、Vue3 前端页面这三者之间的关系。把这篇里提到的表结构、接口联调顺序、静态资源映射和文件上传流程跑通整个系统的基本盘就稳了。下一篇可以继续往下走的方向也很明确给系统接入 Redis 缓存热门电影、引入 Shiro 或 Spring Security 完善权限模型、用 Docker 打包前后端让整套环境一键启动。先把本地这套跑顺再去谈扩展建议收藏备用部署时照着清单一步步来能少踩很多不必要的坑。 SpringBoot+Vue3前后端分离电影网站系统设计与实现
这题很典型你搜“SpringBoot Vue3 前后端分离 毕设选题”出来的项目可能几百个但真正能顺顺当当跑起来、答完辩、交得出手的并不多。标题里带着“070”编号的系统通常在课程设计、毕业设计题库里反复出现表面是电影网站实际考察的是用户后台、电影 CRUD、分类、评论、收藏这一类最常见的全栈业务闭环。它没有特别偏门的算法所以难的不是业务不是模型而是整套前后端工程能不能在本地一次性跑通、接口联调是否干净、管理端是否完整、部署时是否会被环境问题卡住。这篇文章不打算只贴一张图然后喊“好项目”而是把这类系统从一开始怎么做需求拆解、怎么设计表结构、怎么写 SpringBoot 后端、怎么搭 Vue3 前端、怎么处理跨域和接口联调、到最后怎么本地启动按一条能落地的路线给你拆开。看完之后不管你是拿它当参考还是直接复现一个类似的管理系统都会比漫无目的地到处找视频、找代码要快。文章里所有配置和命令都以最常见的环境为准但会特别标注容易出问题的版本点避免你在同样位置浪费一下午。先说清楚文章的结构。第二部分先给核心能力速览让你 30 秒判断值不值得往下看第三部分拆功能模块第四部分讲技术选型与环境版本第五部分到第七部分分别覆盖后端搭建、数据表设计、前端搭建第八部分讲接口联调顺序第九部分补充视频上传与播放的关键点第十部分给出一份带步骤的启动检查单最后是常见报错排查和建议。全文信息量大按自己的进度分着看也行。1. 核心能力速览能力项说明项目类型电影网站系统一套典型的“管理员后台 用户门户”双端应用后端技术SpringBoot、MyBatis-Plus、MySQL、Maven前端技术Vue3、Vite、Pinia、Vue Router、Element Plus、Axios架构模式前后端分离通过 RESTful API 通信核心用户普通用户注册登录、浏览电影、搜索、查看详情、评论、收藏管理员电影管理、分类管理、用户管理、评论审核、轮播图配置主要业务电影信息维护、分类筛选、关键词搜索、详情页展示、播放页管理、评论收藏、后台统计推荐运行环境Windows / macOS / Linux 均可后端需要 JDK 8 或 17前端需要 Node.js 16 以上显存占用不涉及本地 AI 推理无显存要求启动方式后端 IDEA 启动前端 npm 启动MySQL 作为数据库是否支持 API支持后端本身就是为前端分离提供的接口服务也可用 Postman 调试批量能力不依赖独立任务队列但可以通过 SQL 初始化脚本批量导入电影数据也可以在管理端按分页批量操作数据典型案例毕业设计、课程设计、SpringBootVue3 全栈入门练习、面试作品部署难度中等偏低最花时间的往往在环境版本和联调这类选题的代码量通常在几千到一万行核心难度不在于单个技术难点而是工程化熟练度比如依赖对不对、端口对不对、路径对不对、字段名是否前后端统一。用它来练前后端分离这套思想是非常合适的因为电影网站的数据模型不复杂链路却很完整一张电影表就能串起分类、上传、列表、详情、播放页搜索这一整条前后端主线。2. 系统功能模块拆解电影网站系统给你画一个最简单的功能脑图通常是这样用户端注册、登录、退出首页轮播图推荐电影分类浏览电影关键词搜索电影列表分页电影详情页简介、导演、演员、上映年份、评分电影播放页用户收藏用户评论管理后台管理员登录Dashboard 统计数据电影总数、用户数、评论数电影管理新增、编辑、删除、上下架、封面和视频资源维护分类管理影片类型的增删改查用户管理查看用户列表、禁用账户、重置状态评论管理查看评论、删除违规评论轮播图管理维护首页推荐的 Banner 图和跳转链接标题里的“电影网站”有几种理解有的偏视频资源站重点是播放页有的偏“豆瓣式”电影资料库重点是电影信息聚合和评论。两者在设计上差别不大多一张视频资源表和少一张视频资源表的问题。如果是做毕设建议同一套代码兼顾两种视角电影信息表保存电影详情另加一个video_url或episode相关字段管理员可以填写播放地址或上传视频文件用户在前端页面中拿到地址后播放。这样功能描述起来更完整答辩时也更好展示。不建议把系统做成真正的“种子资源聚合站”去考虑盗版、破解、破解播放源。这类内容不仅要处理版权风险系统的核心价值也会被审查问题带偏。好的做法是把它定义为“影院信息管理与展示平台”电影数据由管理员录入视频使用版权清晰的演示片源或自制测试视频这样既能展示上传、播放、管理流程又能在公开博客和答辩现场放心讲。第三个值得注意的点是权限设计。很多同学在后台功能上只做了“前端页面隐藏”管理员接口没有任何鉴权这会成为答辩老师最喜欢问的问题。实际上这个系统可以采用 JWT 或 Session 两种方案。毕设演示用 Session 比较简单只需要后端拦截器检查登录状态如果想让项目显得更像企业级开发就引入 JWT登录后返回 token前端请求时放到请求头后端用拦截器或 Spring AOP 统一校验。推荐从 JWT 入手因为面试时提“无状态鉴权”比“Session 会话”更能展示对前后端分离的理解。3. 技术选型与环境版本准备这套系统的后端主流选型是 SpringBoot MyBatis-Plus MySQL。SpringBoot 版本要特别检查它和 JDK、MyBatis-Plus 之间存在明显的兼容关系。很多人在运行项目时报错Invalid value type for attribute factoryBeanObjectType或者 MyBatis 找不到 mapper就是因为 SpringBoot 3.x 用了 Jakarta 命名空间而 MyBatis-Plus 版本太老。给一个不会踩坑的组合组件推荐版本说明JDK1.8 或 17SpringBoot 2.x 用 JDK 8SpringBoot 3.x 必须 JDK 17Spring Boot2.7.18稳定、网上资料最多适合新手MyBatis-Plus3.5.3.x兼容 SpringBoot 2.xMySQL5.7 或 8.08.0 注意 driver-class 和时区配置Maven3.6IDEA 自带即可Node.js16.20 以上Vue3 Vite 需要 Node 高版本pnpm / npmnpm 8不用 pnpm 也没问题如果你学的是较新的课程或找的参考项目用了 SpringBoot 3.x那它依赖的 mybatis-plus-spring-boot3-starter 与 SpringBoot 2.x 引入方式不一样必须按参考项目提供的版本来不要自己混着换。实际项目里最常见的问题并不是代码不会写而是网上找的教程各自版本不同导致 pom.xml 依赖互相冲突。建议在创建项目时直接固定到上述组合不要追最新版。环境准备阶段还要检查三项MySQL 服务已经启动并能用命令行登录。很多奇怪的Access denied for user rootlocalhost都来自密码不一致。Maven 能联网下载中央仓库依赖。如果公司网络或校内网络限制较多需要配置阿里云镜像否则 IDEA 导入依赖会非常慢。Node 下npm config get registry建议指向国内镜像能有效避免前端依赖下载超时。# 检查 Java 和 Node 版本 java -version node -v npm -v mvn -v # npm 国内镜像示例 npm config set registry https://registry.npmmirror.com4. 后端工程搭建与 SpringBoot 核心配置后端工程我这里描述的是一种最小可运行的方案。你可以用 IDEA 新建一个 Spring Initializr 项目也可以直接在已有参考项目上修改。项目包名建议按com.example.movie这类结构组织关键要分成 controller、service、mapper、entity、config、common、dto 几个包答辩时条理清晰。第一步是准备 pom.xml。最核心的依赖就四个web、mybatis-plus、mysql-connector、lombok。此外为了方便写接口返回结构可以引入hutool或直接手写Result类两种方式都行。参考依赖片段如下parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus 增强启动器 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version scoperuntime/scope /dependency !-- Lombok 简化实体类 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies使用 MySQL 8.0 时网上老的教程里写的是com.mysql.jdbc.Driver这个类在 MySQL 8 之后已经过时必须换成com.mysql.cj.jdbc.Driver。如果数据库安装的是 MySQL 8.0建议在连接字符串上追加时区参数避免serverTimezone问题。通常写成server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/movie_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 servlet: multipart: max-file-size: 200MB max-request-size: 200MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl密码位置需要改成自己的 MySQL 密码。allowPublicKeyRetrievaltrue是很多人容易漏掉的配置如果用 MySQL 8 且连接时提示Public Key Retrieval is not allowed加上这一项就能解决。max-file-size如果是做视频上传功能要提前调大否则后台上传超过 1MB 的视频会直接报文件大小超限这个报错和逻辑代码无关。启动类上要加一个 MapperScan 注解否则 MyBatis-Plus 的 Mapper 不会被扫描进容器SpringBootApplication MapperScan(com.example.movie.mapper) public class MovieApplication { public static void main(String[] args) { SpringApplication.run(MovieApplication.class, args); } }后端业务中最常见的 Controller 写法是通过 Service 调用 Mapper 或 IService 提供的方法。MyBatis-Plus 自带的ServiceImpl能帮助你省去大量基础 CRUD 代码。比如电影管理接口只需要继承ServiceImplMovieMapper, Movie然后自己补充分页查询和条件查询。没有特别复杂的需求时不推荐在 XML 里写大量关联查询直接通过实体类映射即可。如果确实要写动态 SQLxml 文件放在 resources/mapper 下且一定保证mapper-locations路径和实际文件路径一致否则会出现Invalid bound statement (not found)的经典报错。5. 数据模型与关键表设计电影网站系统的表不用设计得太多但要让每张表都能讲清楚业务含义。按典型方案大约 6 到 8 张表足够支撑整个系统。表名含义关键字段sys_user用户表id, username, password, nickname, avatar, role, status, create_timemovie_category电影分类表id, name, sort_ordermovie_info电影信息表id, category_id, title, cover, video_url, director, actors, region, year, rating, description, status, create_timemovie_comment评论表id, movie_id, user_id, content, create_time, statusmovie_favorite收藏表id, movie_id, user_id, create_timebanner轮播图表id, image_url, link_url, title, sort_order, status如果做的是电视剧或分集视频系统可以再加一张movie_episode表。对于“电影网站”这个场景多表联动没那么复杂但设计上要注意索引。评论区经常按电影维度查所以movie_comment表的movie_id必须加普通索引收藏表则建议对user_id movie_id建联合唯一索引保证同一用户不能重复收藏同一个电影这个表述在答辩时也是一个加分点。CREATE TABLE movie_info ( id bigint NOT NULL AUTO_INCREMENT, category_id bigint DEFAULT NULL COMMENT 分类ID, title varchar(200) NOT NULL COMMENT 电影名称, cover varchar(500) DEFAULT NULL COMMENT 封面图URL, video_url varchar(500) DEFAULT NULL COMMENT 播放地址, director varchar(100) DEFAULT NULL, actors varchar(500) DEFAULT NULL, region varchar(50) DEFAULT NULL, year int DEFAULT NULL, rating decimal(3,1) DEFAULT NULL, description text, status tinyint DEFAULT 1 COMMENT 1上架 0下架, create_time datetime DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT电影信息表;密码存储很关键即使只是毕设项目也不能把明文密码直接放数据库至少用 MD5 加盐或 BCrypt。推荐使用 Spring Security 自带的BCryptPasswordEncoder不过如果引入完整 Spring Security会带来默认登录拦截配置成本上升对第一次做这类全栈项目的同学可能不友好。更轻量做法是自己引入spring-security-crypto依赖只使用其中的 BCrypt 工具类对密码做哈希和校验。这样既不会触发全套安全过滤器也能让学生作品显得更规范。数据初始化不用手动逐条去后台添加可以准备一个sql/init.sql。管理员账号默认admin/admin123用户账号自定义。初始数据里建议放入 10 条以上不同类型的电影数据包含不同封面、不同分类、不同年份首页和分类页展示效果会更丰富。电影封面可以使用站内本地图片也可以用公开的演示图链接但不建议用有明显版权的商业海报直接做线上展示。如果只做本地学习演示用公开渠道生成的占位图或自制封面即可。6. Vue3 前端工程搭建与页面实现前端部分建议直接用 Vite 创建 Vue3 项目。Vite 创建的项目结构干净比 Vue CLI 启动速度快也是当前 Vue3 的主流使用方式。如果你不想从零创建也可以选择若依等成熟开源框架分离出来的前端模板但那样会引入更多权限和路由封装对新手来说反而提高了理解门槛。优先推荐自己创建。npm create vitelatest movie-web -- --template vue cd movie-web npm install npm install vue-router4 pinia axios element-plus创建完成后需要做三件事安装必要的依赖、配置路由、配置接口封装。整个前端如果按目录划分建议是src/api存放 axios 请求封装src/router路由配置src/storePinia 用户状态src/views页面视图src/layout后台布局在开发阶段Vue 端直接的跨域问题是访问http://localhost:5173而后端是http://localhost:8080如果不做配置浏览器会因为 CORS 策略拦截响应。最简单的做法是让 Vite 帮忙转发在vite.config.js里配置server.proxy页面里的所有请求都写成/api开发环境下会自动被转发到 8080这样前后端联调时不需要后端单独开启跨域支持。import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })接口封装统一放在src/api/request.js中。具体实现不需要特别复杂能统一带上 token、统一处理响应错误码即可。如果项目后端返回结构是{ code: 200, data: ..., message: ok }那封装可以这样写import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 30000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request页面层最主要的是用户端首页、电影列表页和电影详情页。首页一般直接调用/movie/hot获取多组数据分类页通过路由参数categoryId调用分页接口。这里需要提醒的细节是Vue3 中获取路由参数使用useRoute()不要再按 Vue2 的写法去用this.$route否则会报 undefined。组合式 API 是 Vue3 的新主流建议统一使用script setup。用户端布局可以参考当前常见的视频门户结构顶部导航栏放 Logo、分类、搜索框、用户信息中间是 Banner 轮播下面是内容网格。电影列表使用 Element Plus 的el-card加自定义图片展示就能实现不错的效果。后端管理端可以做一个独立的/admin路由通过meta.requiresAuth做前置导航守卫未登录跳转到登录页。虽然是简单的代码实现但整个权限闭环在答辩时比只贴页面要强很多。7. 接口联调顺序和后端 API 设计后端 API 是否规范直接决定前端联调是否顺利。电影系统最核心的几个接口可以按以下顺序执行功能方法路径前端页面用户注册POST/api/user/register登录注册页用户登录POST/api/user/login登录注册页电影分类列表GET/api/category/list顶部导航菜单电影分页列表GET/api/movie/list首页/分类页电影详情GET/api/movie/detail/{id}电影详情页电影关键词搜索GET/api/movie/search?keywordxx搜索列表添加收藏POST/api/favorite/add详情页我的收藏GET/api/favorite/list个人中心提交评论POST/api/comment/add详情页评论列表GET/api/comment/list/{movieId}详情页后台新增电影POST/api/admin/movie/save后台电影管理后台删除电影DELETE/api/admin/movie/delete/{id}后台电影管理上面的路径是常见设计参考不代表所有源码都一样。如果你拿到的参考项目前缀不同比如统一加了/system或返回结构不是code/data/message那前端封装也要跟着调整。最怕的是前后端字段名一个叫movieName一个叫title这种低级不一致会浪费大量时间。所以在写页面之前先打开后端的接口文档或实体类把返回给前端的 JSON 名称统一确认一遍。联调时建议先启动后端把 Swagger 或 Knife4j 打开浏览器直接访问接口测试。SpringBoot 集成 knife4j 非常简单依赖加好后访问地址通常是http://localhost:8080/doc.html。如果项目中没引入也可以用 Postman 或 Apifox 手动测试。手动测试期间重点看三件事第一登录接口能不能正常返回用户信息和 token第二电影列表接口在传pageNum1pageSize10时返回的数据里外层是 page 对象还是 list 数组第三需要登录才能访问的管理接口如果没带 token后端是否统一返回 401。如果返回结构和定义一致再开始写前端页面。写一个简化版的登录接口做参考RestController RequestMapping(/api/user) public class UserController { Resource private UserService userService; PostMapping(/login) public ResultLoginVO login(RequestBody LoginDTO dto) { String token userService.login(dto.getUsername(), dto.getPassword()); return Result.ok(token); } }Controller 中不要直接查数据库尽量把所有业务逻辑放到 Service 层。登录时根据用户名查出用户用 BCrypt 校验密码校验通过后通过 JWT 工具类生成 token。用户密码错误时抛出自定义异常由全局异常处理器统一返回错误信息。全局异常处理器只需要一个RestControllerAdvice类捕获BusinessException和Exception两类异常分别返回对应提示。这样哪怕前端传参有问题接口返回也不会把堆栈信息直接暴露给浏览器专业度和鲁棒性都会提升。8. 视频资源上传与播放的关键处理视频资源是电影网站里面比较有区分度的功能也是最容易在部署阶段出问题的地方。通常有两种方式远程 URL 播放和本地文件上传。远程 URL 方案实现最容易电影表里保存一个外部播放地址前端拿到后直接把地址交给video标签。本地上传方案需要处理文件保存路径、静态资源映射、前端上传组件三个点。在后端配置本地文件路径可以新建一个application.yml自定义属性例如file: upload-dir: D:/movie-upload/然后写一个文件上传 Controller。上传成功后为了能让前端通过 URL 访问到视频需要把本地目录映射为静态资源。这个需求最常见的方式是实现WebMvcConfigurer的addResourceHandlers手动把本地路径映射成/files/**访问路径。如果不想写代码也可以把文件放到项目的 static 目录下但项目重新打包时容易丢失视频文件不推荐。Configuration public class WebConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/files/**) .addResourceLocations(file: uploadDir); } }这样操作后假设上传文件保存为/files/2025/01/test.mp4前端详情页就能直接拼出服务器 URL 进行播放。由于前后端分离前端拿到的完整地址应该是http://localhost:8080/files/2025/01/test.mp4也可以让后端返回文件相对路径前端通过环境变量拼上后端域名。还有一个容易踩的坑是浏览器播放格式。如果上传的 MP4 编码格式是 H.265/HEVC很多浏览器默认不支持播放。测试时尽量用 H.264 编码的 MP4 文件。如果从网上下载的演示片段格式不对而导致播放黑屏可以用格式工厂、FFmpeg 之类的工具转成 H.264 的 MP4 再上传。下面是使用 FFmpeg 转码 H.264 的常用命令对照# 将任意视频转成 H.264 AAC 的 MP4 ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict experimental output.mp4视频播放和图片显示都涉及版权合规。系统在演示阶段必须使用版权清晰的素材、自制素材或开源样片不要直接盗用正在上映或明确标注版权的电影文件。在项目文档中也可以写明管理员需要通过后台维护版权信息未获授权的视频不能发布。这个说明既是真实系统应该有的功能边界也是答辩和公开代码时自我保护的一种方式。9. 本地部署启动完整流程前面几步全部做完后把整体启动流程固定下来。每次重启项目或到了演示现场按照这个顺序操作不容易漏环节。第一步准备数据库。在 MySQL 中执行初始化 SQL确保数据库名与后端application.yml中一致。可以先用show databases;查看是否创建成功。第二步启动后端。用 IDEA 打开后端项目等待 Maven 导入依赖完成如果下载很慢或无法 import检查 Maven settings.xml 中的镜像配置。启动后观察控制台日志出现 “Started MovieApplication” 或类似输出表示成功。第三步单独测试后端接口。在浏览器中访问登录接口文档或使用 Apifox 请求一个公开接口比如电影列表确认后端能正常返回 JSON 数据。第四步启动前端。命令行进入movie-web目录执行npm install执行npm run dev。看到 Vite 的 ready 状态后访问终端提示的地址通常是http://localhost:5173。第五步验证完整功能。注册一个新用户退出后用新用户登录添加一部电影到收藏写一条评论再看管理后台能否正常查询到该评论。管理员登录后新增一个分类再新增一部电影并绑定该分类刷新首页确认数据展示。实际演示前经常出现前端能打开首页但管理员进不去后台或者接口提示 401。这种情况多半是管理员账号没有初始化或者是登录 token 校验失败。所以验收清单要提前走一遍用管理员身份登录、新增、编辑、删除每个流程都测一下不要让演示现场变成现场调试现场。10. 常见问题与排查方法问题现象可能原因排查方式解决方案后端启动报数据库连接失败MySQL 没启动 / 密码错误 / 数据库名不对检查 MySQL 服务状态和 application.yml改成正确的账号密码或先创建数据库启动报时区错误MySQL 8 连接字符串缺少 serverTimezone看异常信息中包含 Timezone 字样在 url 中加上 serverTimezoneAsia/Shanghaipom.xml 导入依赖失败Maven 仓库网络问题查看 IDEA 的 Maven 控制台或本地仓库路径配置阿里云镜像删除本地工程 .idea 后重新导入前端 npm install 卡住或报错npm 默认源访问慢执行 npm config get registry 查看切换国内镜像源并重新安装页面打开后接口 404前后端路径不一致浏览器 Network 面板看请求 URL修正前端 api.js 路径或后端 RequestMapping 路径请求报 CORS 跨域错误前端直连了 8080没有走 Vite proxy检查请求地址是否为 /api 开头参考上文配置 server.proxy后端也可加跨域配置报 Invalid bound statementmapper XML 路径或命名空间错误检查 target/classes 下有没有生成 XML调整 mapper-locations 或 Mapper 接口包名上传视频后前端无法访问静态资源映射路径不对直接访问 http://localhost:8080/files/文件名检查 WebConfig 和 upload-dir 路径是否匹配上传文件大小超限multipart 默认 1MB查看控制台 MultipartException 异常调大 max-file-size 和 max-request-size评论或收藏提示用户未登录token 没有存储在 localStorage 或没有放进请求头查看 request.js 拦截器确认登录成功后将 token 保存并在请求头携带浏览器播放视频黑屏视频编码不是 H.264用 VLC 或 FFmpeg 查看编码信息将视频转成 H.264 AAC 编码前端页面样式错乱Element Plus 未完整引入或按需引入配置有问题查看控制台有没有样式相关警告全量引入时直接import ElementPlus from element-plus并引入 css排查技术问题时先分端缩小范围是一个好习惯。前端打不开先问页面本身是否返回 200再看请求是否进入后端日志有没有打印 SQL最后确认数据源头。如果后端控制台打印了 SQL 而接口返回空数组那问题往往是数据库没数据而不是代码 bug。这种情况在电影列表页非常常见先往数据库里插几条数据再刷新页面即可。11. 最佳实践与合规提醒这类“基于 SpringBoot Vue3 前后端分离的电影网站系统”写代码本身并不难难点在工程规范。下面几条建议来自实际部署经验可以帮你少走很多弯路。第一目录和包名保持清晰。后端不要把所有类都扔在 controller 一层至少要有 service、entity、mapper、config、common 等包。前端不要把一堆fetch直接写在组件里单独抽一个 api 目录。这种结构在答辩时比凌乱代码更有说服力后面加功能也容易。第二配置文件不要写死在代码里。数据库密码、上传目录、端口这些建议放application.yml不要直接写在 Controller 常量里。如果项目要交给别人运行还要提供一个README.md把数据库初始化步骤、启动命令、默认管理员账号写清楚这样别人拿到项目后能快速跑起来。作为求职作品这点很加分。第三敏感信息不要提交到公开仓库。数据库密码、云存储密钥、密钥字符串等都要通过.gitignore排除或用环境变量读取。项目上传到 GitHub 或 Gitee 前检查一下application.yml里是不是有真实密码避免信息泄露。第四对素材版权和安全边界要有清楚认识。在这个系统中用户评论需要后台审核或删除能力管理员上传电影内容也需要保证只有合法授权的内容才能发布。不要为了“演示效果好”去引用未经授权的商业电影资源或用户个人数据。系统开发完成后可以在演示数据中注明“电影信息仅为演示用途版权归原作者所有”商用前需要获得对应资源授权。第五运营状态和并发能力都要权衡。这套系统如果是单机课设后端不需要做集群、缓存、队列这些复杂设计。如果你的目标是面试作品可以在完成基础功能后用 Redis 做热门电影榜单缓存用 Nginx 做前端部署和后端接口反向代理再补充一个简单的定时任务把电影状态在上映和下映之间做自动切换。把这两点加进去项目的技术亮点会明显提升。整体上选择 SpringBootVue3 做前后端分离的电影网站是一个非常稳妥的路线。技术栈不会太旧不会太难业务链路完整数据表关系容易讲清楚前端展示也有不错的视觉效果。你不必纠结标题里有没有“070”这个编号也不必在乎这个题目是不是已经被写过无数遍关键在于你是否真正理清了 SpringBoot 后端接口、MySQL 数据模型、Vue3 前端页面这三者之间的关系。把这篇里提到的表结构、接口联调顺序、静态资源映射和文件上传流程跑通整个系统的基本盘就稳了。下一篇可以继续往下走的方向也很明确给系统接入 Redis 缓存热门电影、引入 Shiro 或 Spring Security 完善权限模型、用 Docker 打包前后端让整套环境一键启动。先把本地这套跑顺再去谈扩展建议收藏备用部署时照着清单一步步来能少踩很多不必要的坑。