尧图网站建设 
这次我们不聊 AI 绘画也不聊大模型推理。回到 Java 全栈开发看一个很典型的工程基于 SpringBoot Vue3 的前后端分离电影网站系统。这类项目在毕业设计、课程设计、Java 求职项目里出现频率非常高核心价值不在于“电影资源”本身而在于它覆盖了一条完整的前后端分离开发链路用户端与管理员端双端分离、JWT 登录鉴权、文件上传与回显、分类检索、轮播图管理、评论留言以及 Vue3 组合式 API Element Plus 后台界面的落地。这个系统的技术标签很明确SpringBoot 负责后端 Api 服务Vue3 Vite 负责前端页面MySQL 存业务数据MyBatis Plus 做数据访问。从实战角度看它适合准备 SpringBoot 面试项目、写 Vue3 毕设、或者想系统梳理前后端联调流程的开发者。同时我们也会把 SpringBoot 配置、Vue3 路由、Axios 请求封装、JWT 拦截器、跨域处理这些高频技术点串起来看。这篇文章会按四个层次展开先给项目功能与能力速览再讲系统模块设计然后走一遍环境准备、后端工程搭建、前端工程搭建和联调验证最后给接口调用与批量任务设计、常见排查思路和工程化管理建议。全文以可复现为主不写空概念。1. 核心能力速览能力项说明项目类型前后端分离的 Web 管理系统电影网站后端技术栈SpringBoot、MyBatis Plus、MySQL、JWT、Lombok前端技术栈Vue3、Vite、Vue Router、Pinia、Axios、Element Plus端口规划后端常见 8080前端 Vite 开发端口常见 5173需开启跨域核心功能用户端电影浏览与检索、电影详情、收藏与评论后台端电影管理、分类管理、轮播图管理、用户管理、管理员登录数据库MySQL 5.7 或 8.x具体版本看实际工程启动方式后端 SpringBoot 启动类 前端 npm run dev或前后端分别打包部署是否支持接口 API支持后端暴露 RESTful 接口前端通过 Axios 调用是否支持批量任务可在后台实现电影批量上架的接口设计与事务控制适合读者Java 后端入门、Vue3 前端入门、毕业设计开发、前后端联调学习者注意一点本文不会虚构某个源码仓库的完整目录和真实运行截图只给出一套通用的实现思路、配置模板和验证流程。你拿到的实际项目如果结构不同应对照具体代码调整路径与参数。2. 适用场景与使用边界这类电影网站系统最常用的场景有三个第一是毕业设计和课程设计。SpringBoot Vue3 是目前比较稳妥的组合既能体现后端接口设计能力又能展示前端工程化能力。功能上加入用户登录、轮播图、分类查询、电影详情、评论收藏再配上后台管理界面满足演示和答辩要求。第二是前后端分离项目练手。很多人从单体 JSP 项目转向前后端分离时最大的卡点不是语法而是理解不了前端如何调后端、token 如何存、接口 401 怎么办、跨域又是怎么回事。电影网站系统复杂度适中比图书管理丰富又比商城系统简单适合作为第二个或第三个练手项目。第三是简历项目素材准备。如果你把 JWT 登录、拦截器配置、文件上传、分页查询这些点真正吃透面试时可以围绕“遇到跨域如何处理”“token 过期怎么办”“分页插件原理是什么”展开回答比背简历要有说服力。但也要说清楚边界。这类系统本质是管理平台并不等于真正的视频点播平台。它通常存的是“电影信息 预告片/封面资源”或播放链接不涉及大规模流媒体分发如果涉及真实影片素材、用户上传内容和人脸实名信息必须注意版权授权、内容审核和数据隐私合规个人练习时也应该使用演示数据不要拿未授权资源做商业化发布。3. 系统功能模块设计在设计一个电影网站系统时建议按“用户端 管理端 公共服务”三层来拆。这样后端 Controller 不会堆到一起Vue3 前端页面也方便用路由做权限区分。3.1 用户端模块用户端是访客或注册用户看到的部分典型页面包括首页轮播图推荐、热门电影、最新电影、分类快速入口。电影列表按分类筛选、按名称搜索、分页展示。电影详情封面、导演、主演、简介、上映年份、播放/预告入口、收藏按钮。用户登录与注册基于 JWT登录后可以收藏电影和发表评论。个人中心查看我的收藏、我的评论。页面规划在 Vue3 里对应为router-view包裹的布局页例如Layout.vue中有顶部导航栏和右侧主内容区子页面通过children配置进入。3.2 后台管理端模块管理端设计为独立路由前缀例如/admin使用后台布局。常见功能如下仪表盘显示电影总数、用户总数、评论总数、分类数。电影管理新增、编辑、上下架、删除电影支持封面上传和批量上架。分类管理维护电影类型支持排序。轮播图管理设置首页展示位与跳转链接。用户管理查看注册用户、禁用或启用账号。管理员权限管理员登录与用户端登录分离后端做角色判断。3.3 数据库表设计参考后端表设计不需要特别复杂常用的核心表有表名核心字段userid、username、password、nickname、avatar、role、status、create_timefilm_categoryid、name、sort、statusfilmid、title、cover、video_url、director、actors、area、language、category_id、description、publish_time、status、create_timebannerid、image、title、target_url、sort、statususer_favoriteid、user_id、film_id、create_timefilm_commentid、user_id、film_id、content、create_time密码字段建议使用 BCrypt 加密库存放密文status 字段用于逻辑上下架。表结构以实际项目为准本文只给常规切分思路。4. 技术栈与版本选型要点SpringBoot 项目高频问题之一是版本匹配。SpringBoot 3.x 要求 JDK 17 及以上SpringBoot 2.7 可以配合 JDK 8 使用。如果你拿到项目源码后启动报错优先看 pom.xml 里的 spring-boot-starter-parent 版本和本机 JDK 是否匹配。一个常见的组合是组件示例版本区间说明JDK1.8 或 17与 SpringBoot 主版本对应SpringBoot2.7.x 或 3.x3.x 使用 jakarta.servlet 包MySQL5.7 或 8.0注意驱动坐标差异Vue3.4使用 Vite 创建Vite5.x需要 Node 18Element Plus2.xVue3 桌面端组件库MyBatis Plus3.5.x降低单表 CRUD 成本前端创建命令一般格式npm create vitelatest movie-web -- --template vue如果只想要一个可运行骨架这一步会生成包含 main.js、App.vue、vite.config.js 的 Vue3 项目。后面前端工程在此基础上增加 router、pinia、axios 封装和页面组件。5. 环境准备与前置条件在克隆或新建项目后先准备环境。下面是通用检查清单。5.1 后端环境JDK推荐 JDK 8 或 17对应 SpringBoot 版本。Maven3.6 或直接使用 IDE 自带的 Maven。MySQL本地安装或 Docker 运行。IDEIDEA 社区版也可以Ultimate 对 Spring 初始化支持更好。启动前检查 8080 端口是否被占用。Linux / macOS 上查看端口lsof -i:8080Windows PowerShell 上查看端口netstat -ano | findstr :80805.2 前端环境Node.js建议 18 或 20 LTSVite 5 需要 Node 18。npm 或 pnpm、yarn。前端开发端口默认 5173如果被占用 Vite 会自动换端口控制台会提示。5.3 准备数据库新建数据库例如CREATE DATABASE IF NOT EXISTS movie_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;然后在 application.yml 中确认数据库名、用户名、密码是否正确。最常踩的问题就是建库字符集不是 utf8mb4导致电影名或评论里的 emoji 无法入库。5.4 检查配置后端典型配置如下需要按实际环境替换数据源参数server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/movie_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 servlet: multipart: max-file-size: 100MB max-request-size: 200MB mybatis-plus: configuration: map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 06. 后端工程搭建与启动后端工程的核心任务是提供接口、管理数据、处理登录鉴权和文件存储。6.1 创建 SpringBoot 项目可以在 Spring Initializr 选择依赖Spring Web、MySQL Driver、Lombok然后在 pom.xml 中加入 MyBatis Plus 和 JWT 相关库。MyBatis Plus 坐标参考dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependencyJWT 相关代码通常使用 jjwt 库但要注意版本。使用较新的 jjwt 0.11.5 时依赖由三个模块组成api、impl、jackson。低版本 0.9.1 在较新 JDK 上可能会因为 javax.xml.bind 缺失而出问题。6.2 项目结构分层后端建议按标准分层com.example.movie ├── controller ├── service │ └── impl ├── mapper ├── entity ├── dto ├── vo ├── config ├── common └── utilsController 只做参数接收和结果封装业务逻辑放 Service数据库操作在 Mapper。这样代码虽然多几层但后续维护和答辩讲解都更容易。6.3 JWT 登录鉴权思路登录流程用户提交用户名密码后端校验通过后生成 token 返回给前端。前端把 token 存在 localStorage 或 Pinia 中并在每次请求的请求头里带Authorization: Bearer token。后端通过拦截器或过滤器校验 token。一个简单的 JWT 工具类核心方法public String generateToken(Integer userId, String username, String role) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }拦截器做 token 校验注意不要拦截登录接口否则属于自己把自己锁在外面。public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); return true; } catch (Exception e) { response.setStatus(401); return false; } } response.setStatus(401); return false; }在开发环境调试 Swagger 或接口文档时如果不想每次都带 token可以把 swagger 相关路径加进白名单。如果使用 Knife4j还需要注意 SpringBoot 3.x 下配置类路径发生了变化。6.4 跨域配置前后端分离开发时前端 http://localhost:5173 访问后端 http://localhost:8080浏览器会拦截跨域请求。推荐在后端配置全局跨域Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }如果使用 allowCredentials(true)allowedOrigins 不能设置为*需要改用 allowedOriginPatterns。6.5 封装统一返回结果前后端联调要约定统一格式例如{ code: 200, message: success, data: {} }对应的 Java 类可用泛型实现Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT ok(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); return result; } public static T ResultT error(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }统一返回结果的好处是前端 Axios 拦截器可以只判断一次 code不需要每个页面单独处理错误分支。6.6 启动后端在 IDEA 中找到主启动类右键 Run。如果启动成功控制台会出现 SpringBoot 启动日志。之后访问http://localhost:8080/api/ping如果返回 JSON说明后端基本可用。如果启动失败先看日志中的APPLICATION FAILED TO START提示重点排查数据源连接失败和端口被占用。7. 前端工程搭建与启动Vue3 前端工程不只是一个页面集合它要承担路由管理、登录状态保持、请求封装、组件复用和页面交互。7.1 安装依赖进入前端目录后安装依赖npm install如果安装速度慢可以切换为国内镜像后再次执行。在工程内新增 .npmrc 也是一种方式但以实际环境为准。7.2 目录规划src ├── api // 存放接口请求模块 ├── assets // 静态资源 ├── components // 公共组件 ├── layout // 布局组件 ├── router // 路由配置 ├── store // Pinia 状态 ├── views // 页面组件 │ ├── home │ ├── film │ ├── user │ └── admin ├── utils // 工具函数 ├── App.vue └── main.js7.3 路由配置Vue3 使用 Vue Router 4。路由配置中可以做登录守卫进入需要登录的页面之前检查本地有没有 token没有 token 则跳转到登录页。这个逻辑放在 router.beforeEach 中。7.4 Axios 请求封装Axios 封装是前端工程的关键。在 Vue3 项目中Axios 的使用方式与 Vue2 差别不大但建议用 ES Module 方式导出实例。一个基础封装要点如下设置 baseURL例如/api开发环境通过 Vite 代理转发到后端 8080。请求拦截器从 localStorage 或 Pinia 中取 token加入请求头。响应拦截器如果返回 code 非 200抛出提示如果 HTTP 状态是 401清除本地登录信息并跳转登录页。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request开发时最常见的跨域方案是前端 Vite 代理而不是在后端依赖 CORS。Vite 配置需要在 vite.config.js 中开启import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })这里假设后端接口前缀没有/api所以做了一次重写。如果你的后端接口本身带/api前缀就把 rewrite 去掉。7.5 Vue3 核心组合式 API 应用页面中使用 Vue3 组合式 API以电影列表为例template div classfilm-list el-card v-foritem in filmList :keyitem.id classfilm-card img :srcitem.cover alt封面 / h3{{ item.title }}/h3 span{{ item.categoryName }}/span /el-card /div /template script setup import { ref, onMounted } from vue import { getFilmList } from /api/film const filmList ref([]) const loadFilms async () { const res await getFilmList({ current: 1, size: 12 }) filmList.value res.data.records } onMounted(loadFilms) /script注意 Vue2 里常用的this.$route、this.$store写法在 Vue3 组合式 API 中要换成useRoute()、useStore()Pinia 为useUserStore()。computed在 Vue3 中需要显式导入这也是面试常问的一个点Vue3 的响应式系统基于 Proxy而 computed 是懒执行的计算属性。7.6 启动前端npm run dev启动后访问 http://localhost:5173。打开页面后按 F12 打开开发者工具切到 Network 面板刷新页面观察接口请求状态。如果接口 404检查代理路径和后端 Controller 请求映射如果接口报 CORS检查代理是否生效、后端是否重复配置跨域导致冲突。8. 核心业务功能实现思路下面把电影系统的几个核心功能拆开逐个说实现思路。这一段不贴整份项目代码只讲设计关键实际开发时对照项目代码调整。8.1 电影列表分页与筛选后端使用 MyBatis Plus 分页插件Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }接口接收参数pageNum、pageSize、categoryId、keyword。实现时使用 LambdaQueryWrapper 动态拼接查询条件LambdaQueryWrapperFilm wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(categoryId), Film::getCategoryId, categoryId); wrapper.like(StringUtils.hasText(keyword), Film::getTitle, keyword); wrapper.eq(Film::getStatus, 1); wrapper.orderByDesc(Film::getCreateTime);这里强调一个点如果 keyword 为空like条件不应该拼进 SQL否则会导致全表扫描且返回空。使用条件构造器时精确传入 condition 参数。8.2 登录注册与用户管理用户端注册接口接收用户名、密码、昵称等参数入库前用 BCrypt 加密。登录成功后生成 token 并返回用户基本信息。后台管理员的账号可以提前在数据库初始化或者由项目自带 SQL 脚本初始化。管理员接口与普通用户接口共用同一个用户表也行用 role 字段区分更严谨的做法是拆分 admin 表但毕设规模用 role 字段更常见。前端做权限控制时路由可以分成/login公开路由。/用户端页面。/admin管理员布局与页面。管理员路由在 beforeEach 中不仅检查 token还要检查本地存储的 role 是否为 admin。注意前端权限只能隐藏入口后端的接口级别权限才是真正的安全边界。8.3 轮播图与封面上传轮播图和电影封面都涉及文件上传。前端 Element Plus 的el-upload组件提供 action 地址通常指向上传接口const uploadUrl /api/admin/file/upload后端接收 MultipartFile保存到指定磁盘目录并返回文件访问 URL。为了能在网页中直接访问需要配置静态资源映射Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { String uploadPath System.getProperty(user.dir) /upload/; registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); } }在部署时不建议把上传目录放到项目 classpath 中这样重新打包会丢失。更稳妥的是在配置文件中指定独立目录比如/data/movie/upload。8.4 收藏与评论收藏和评论要关联用户 ID因此接口要求登录。登录后从请求头 token 中解析 userId而不是让前端把 userId 传过来避免越权风险。设计接口时建议POST /api/film/favorite参数 filmId。DELETE /api/film/favorite/{filmId}取消收藏。GET /api/film/favorite/list当前用户收藏列表。POST /api/film/comment参数 filmId、content。GET /api/film/{filmId}/comments评论列表。8.5 首页数据聚合首页往往需要同时展示多组数据。一个方案是前端并行请求多个接口另一个方案是后端提供一个聚合接口。对于电影网站首页推荐、最新、分类数据用/api/home/data一个接口返回更高效也可以减小前端请求数量。public class HomeDataVO { private ListBannerVO bannerList; private ListFilmVO hotFilmList; private ListFilmVO latestFilmList; private ListCategoryVO categoryList; }9. 接口 API 调用与批量任务设计电影网站系统虽然本身不是高并发项目但接口调用规范和批量任务设计是工程化的重点。9.1 接口调用约定后端接口尽量遵循 RESTful 风格。前端 API 模块对应后端的 Controller每个模块一个 JS 文件例如 film.js、user.js、category.js。这样接口地址改动时只调整一个文件。管理员端批量上架电影时Controller 接口通常接收 List 类型PostMapping(/admin/film/batch) public ResultVoid batchCreateFilm(RequestBody ListFilm filmList) { filmService.saveBatchFilm(filmList); return Result.ok(null); }为了使事务对多数据操作生效批量保存方法上要加Transactional注意方法必须是 public并且不能同类内部调用失效。9.2 Python 调用接口示例即使不启动前端也可以直接使用 Postman、curl 或 Python requests 来验证接口。这样可以快速判断问题定位在前端还是后端。import requests base_url http://localhost:8080 login_data { username: admin, password: 123456 } resp requests.post(f{base_url}/admin/login, jsonlogin_data, timeout10) print(登录返回:, resp.json()) token resp.json().get(data, {}).get(token) headers {Authorization: fBearer {token}} film_data { title: 测试电影, cover: https://example.com/test.jpg, categoryId: 1, description: 用于接口联调的测试数据, status: 1 } resp2 requests.post(f{base_url}/admin/film, jsonfilm_data, headersheaders, timeout10) print(新增电影返回:, resp2.json())这里只做演示接口路径需要根据你的后端 Controller 实际映射调整。9.3 批量任务设计建议如果要做电影数据的批量导入有三种常见方式管理页面上传 Excel后端解析并逐条校验入库。JSON 数组一次提交适合接口联调和小批量数据。定时任务扫描某个目录下的资源文件这种情况适合内部平台。三种方式在生产中都要做三件事幂等处理、失败日志、部分成功回滚或标记。批量导入过程中如果有一条数据分类不存在或缺少必填字段最好在返回结果中给出失败明细而不是直接抛异常中断全部任务。9.4 curl 快速验证curl -X POST http://localhost:8080/admin/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}响应中拿到 token 后再调受保护接口curl -X GET http://localhost:8080/admin/film/list?current1size10 \ -H Authorization: Bearer token把token替换成实际 token 即可。如果返回 401先确认 token 是否过期、请求头是否带对格式。如果返回 403往往是角色权限校验不通过。10. 开发调试中的资源占用与性能观察SpringBoot Vue3 项目对硬件要求很低但开发调试中仍有几个观察点。10.1 内存占用观察启动后端后SpringBoot 默认 JVM 内存根据本机配置自动调整。如果本机内存紧张可以手动限制java -jar movie-admin.jar --spring.profiles.activeprod -Xms256m -Xmx512m如果启动多个微服务每个服务建议单独限制内存。前端 Node 开发服务占用内存也不高但如果 node_modules 安装异常或运行多个终端也可能出现内存不足。10.2 接口响应时间的判断前后端分离项目中接口响应慢要先分清瓶颈在哪个环节Network 面板看接口耗时如果耗时高而在数据库执行很快可能是后端逻辑有循环查询。MyBatis Plus 开启 SQL 日志后每个查询都会打印在控制台可以观察是否有 N1 查询。如果首页同时查了轮播、分类、电影列表建议合并接口或加缓存减少网络往返。10.3 构建优化Vue3 项目打包后首屏加载大小可以通过路由懒加载来优化const Home () import(/views/Home.vue)这是 Vue3 Vue Router 联合常用的技术点。另一个常见问题是 Element Plus 全局引入导致包体积偏大可按需引入npm install unplugin-auto-import unplugin-vue-components配置由实际工程决定但思路是组件自动导入避免在 main.js 中全量注册 Element Plus。11. 常见问题与排查方法问题现象可能原因排查方式解决方案后端启动失败提示数据库连接失败MySQL 未启动、密码错误、数据库不存在检查 MySQL 服务状态和 application.yml启动 MySQL修正账号密码或建库后端启动失败提示端口占用8080 端口被其他进程占用netstat 查看端口占用关闭占用进程或修改 server.port前端启动失败提示 Node 版本过低Vite 版本与 Node 版本不兼容执行 node -v 查看版本升级 Node 到 18 或 20 LTS登录后调用接口返回 401token 过期或请求头未携带查看浏览器 Network 中请求头重新登录检查 Axios 请求拦截器页面请求接口返回 404代理路径或后端映射不匹配查看后端日志和 Network 请求 URL调整 Vite proxy rewrite 规则或 Controller 映射接口报 CORS 错误后端未开启跨域或前端未走代理确认使用的是代理还是直接请求开发环境用 Vite 代理生产环境由 Nginx 代理文件上传成功但图片不显示静态资源映射路径不对访问资源 URL 看是否能直接打开检查 addResourceHandlers 和文件存放路径中文乱码或评论 emoji 无法入库MySQL 表字符集不是 utf8mb4查看表结构字符集修改表和数据库字符集为 utf8mb4启动前端后页面空白路由配置错误或某个页面导入报错打开控制台查看报错根据报错文件修改 import 路径前端代码改了不生效开发服务未正确启动或浏览器缓存强制刷新或重启 npm run dev清缓存确认控制台编译成功SpringBoot 3 项目报 javax 包不存在JDK 8 代码在 JDK 17 运行查看异常堆栈使用 JDK 17 重编译或降级到 SpringBoot 2.7排查技巧任何接口行为异常先不猜直接看后端控制台日志。SpringBoot 默认日志已经足够定位 80% 的启动问题和接口异常。如果日志没输出 SQL再看 MyBatis Plus 是否开了 SQL 日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl12. 最佳实践与合规提醒12.1 工程化管理建议第一第一次跑通项目时不要追求修改很多功能。先把后端启动、前端启动、登录、电影列表、详情页、后台管理这几条主链路走通。主链路没问题后再去改功能这能避免把环境问题和代码问题混在一起。第二保留一套最小可运行配置。数据库脚本、后端配置、前端 .env 文件、README 都要放进版本管理。别人 Clone 项目后在 10 分钟内能启动这个项目才是可交付的。第三模型和配置文件分离。不要把 upload 目录和建议配置文件写死在代码里用 application-dev.yml、application-prod.yml 做环境隔离更合理。第四批量导入要做前置校验。批量上架电影前先校验完整表格数据再入库而不是逐条插入时才发现问题。第五接口服务要限制访问范围。生产环境不要把后端端口直接暴露到公网使用 Nginx 做反向代理只开放 80/443并对上传接口做大小和类型限制。12.2 授权与合规边界电影网站系统涉及影片、海报、预告片或评论内容时务必确认授权情况演示和本地学习使用官方公开的示例图片、海报和个人拍摄素材。不把爬取的收费视频、未授权影视资源、盗版影片链接集成进系统。如果系统面向公众开放需要在用户协议中明确禁止违法内容并保留内容审核能力。如果系统采集用户登录信息或上传文件要求遵循数据安全和个人信息保护要求测试阶段使用虚拟数据。如果后续接入真实在线视频要优先选择有正规版权的内容源。这类合规提醒不是套话。很多毕业设计项目因为演示视频或电影素材使用了未授权资源在公开演示和简历展示阶段遇到不必要的风险。建议把所有图片、封面换成程序生成的占位图或自己有权限的素材代码里不留下侵权链接。12.3 如何做二次开发如果你拿到这个项目的源码想把它改成自己的毕设或练手项目建议按这个顺序改换项目名和数据库名。改系统 Logo 和页面标题删除多余测试数据。增加一个与电影业务相关的小亮点功能比如电影榜单、每日推荐、词云标签避免和原项目完全一致。把自己实现的功能整理成 README 中的技术说明减少答辩时讲不清的点。13. 总结与下一步SpringBoot Vue3 的前后端分离电影网站系统适合用四个关键词概括双端分离、数据管理、鉴权联调、工程落地。它不像算法项目那样需要很高的数学基础也不像 AI 推理项目那样依赖显卡只要能理清表关系、接口约定和请求链路就拥有了一个可以不断扩展的 Web 项目底座。拿到项目后最先做的事不是看每一行代码而是先跑通两条链路。第一用户端首页到电影列表到登录到收藏第二管理员登录、新增电影、轮播图配置、用户列表。这两条链路覆盖了 JWT 鉴权、分页查询、文件上传、权限判断、数据关联这些 SpringBoot 和 Vue3 方向的高频考点。最容易踩的坑集中在三个方面数据库连接配置错误、SpringBoot 与 JDK 版本不匹配、前端代理与后端跨域配置冲突。这三个问题在环境检查阶段提前确认后面联调可以省下很多时间。下一步可以按业务需求扩展三块内容一是接入 OSS 或本地对象存储解决封面和预告片文件的长期保存问题二是引入 Redis 缓存首页热点数据和登录 token逐步脱离“毕设感”三是增加评论点赞、观影记录、每日推荐等交互功能让系统的完整度更高。本文适合先收藏实际开发时对照功能模块、接口设计表和问题排查清单来用。 SpringBoot+Vue3前后端分离电影网站系统实战解析
这次我们不聊 AI 绘画也不聊大模型推理。回到 Java 全栈开发看一个很典型的工程基于 SpringBoot Vue3 的前后端分离电影网站系统。这类项目在毕业设计、课程设计、Java 求职项目里出现频率非常高核心价值不在于“电影资源”本身而在于它覆盖了一条完整的前后端分离开发链路用户端与管理员端双端分离、JWT 登录鉴权、文件上传与回显、分类检索、轮播图管理、评论留言以及 Vue3 组合式 API Element Plus 后台界面的落地。这个系统的技术标签很明确SpringBoot 负责后端 Api 服务Vue3 Vite 负责前端页面MySQL 存业务数据MyBatis Plus 做数据访问。从实战角度看它适合准备 SpringBoot 面试项目、写 Vue3 毕设、或者想系统梳理前后端联调流程的开发者。同时我们也会把 SpringBoot 配置、Vue3 路由、Axios 请求封装、JWT 拦截器、跨域处理这些高频技术点串起来看。这篇文章会按四个层次展开先给项目功能与能力速览再讲系统模块设计然后走一遍环境准备、后端工程搭建、前端工程搭建和联调验证最后给接口调用与批量任务设计、常见排查思路和工程化管理建议。全文以可复现为主不写空概念。1. 核心能力速览能力项说明项目类型前后端分离的 Web 管理系统电影网站后端技术栈SpringBoot、MyBatis Plus、MySQL、JWT、Lombok前端技术栈Vue3、Vite、Vue Router、Pinia、Axios、Element Plus端口规划后端常见 8080前端 Vite 开发端口常见 5173需开启跨域核心功能用户端电影浏览与检索、电影详情、收藏与评论后台端电影管理、分类管理、轮播图管理、用户管理、管理员登录数据库MySQL 5.7 或 8.x具体版本看实际工程启动方式后端 SpringBoot 启动类 前端 npm run dev或前后端分别打包部署是否支持接口 API支持后端暴露 RESTful 接口前端通过 Axios 调用是否支持批量任务可在后台实现电影批量上架的接口设计与事务控制适合读者Java 后端入门、Vue3 前端入门、毕业设计开发、前后端联调学习者注意一点本文不会虚构某个源码仓库的完整目录和真实运行截图只给出一套通用的实现思路、配置模板和验证流程。你拿到的实际项目如果结构不同应对照具体代码调整路径与参数。2. 适用场景与使用边界这类电影网站系统最常用的场景有三个第一是毕业设计和课程设计。SpringBoot Vue3 是目前比较稳妥的组合既能体现后端接口设计能力又能展示前端工程化能力。功能上加入用户登录、轮播图、分类查询、电影详情、评论收藏再配上后台管理界面满足演示和答辩要求。第二是前后端分离项目练手。很多人从单体 JSP 项目转向前后端分离时最大的卡点不是语法而是理解不了前端如何调后端、token 如何存、接口 401 怎么办、跨域又是怎么回事。电影网站系统复杂度适中比图书管理丰富又比商城系统简单适合作为第二个或第三个练手项目。第三是简历项目素材准备。如果你把 JWT 登录、拦截器配置、文件上传、分页查询这些点真正吃透面试时可以围绕“遇到跨域如何处理”“token 过期怎么办”“分页插件原理是什么”展开回答比背简历要有说服力。但也要说清楚边界。这类系统本质是管理平台并不等于真正的视频点播平台。它通常存的是“电影信息 预告片/封面资源”或播放链接不涉及大规模流媒体分发如果涉及真实影片素材、用户上传内容和人脸实名信息必须注意版权授权、内容审核和数据隐私合规个人练习时也应该使用演示数据不要拿未授权资源做商业化发布。3. 系统功能模块设计在设计一个电影网站系统时建议按“用户端 管理端 公共服务”三层来拆。这样后端 Controller 不会堆到一起Vue3 前端页面也方便用路由做权限区分。3.1 用户端模块用户端是访客或注册用户看到的部分典型页面包括首页轮播图推荐、热门电影、最新电影、分类快速入口。电影列表按分类筛选、按名称搜索、分页展示。电影详情封面、导演、主演、简介、上映年份、播放/预告入口、收藏按钮。用户登录与注册基于 JWT登录后可以收藏电影和发表评论。个人中心查看我的收藏、我的评论。页面规划在 Vue3 里对应为router-view包裹的布局页例如Layout.vue中有顶部导航栏和右侧主内容区子页面通过children配置进入。3.2 后台管理端模块管理端设计为独立路由前缀例如/admin使用后台布局。常见功能如下仪表盘显示电影总数、用户总数、评论总数、分类数。电影管理新增、编辑、上下架、删除电影支持封面上传和批量上架。分类管理维护电影类型支持排序。轮播图管理设置首页展示位与跳转链接。用户管理查看注册用户、禁用或启用账号。管理员权限管理员登录与用户端登录分离后端做角色判断。3.3 数据库表设计参考后端表设计不需要特别复杂常用的核心表有表名核心字段userid、username、password、nickname、avatar、role、status、create_timefilm_categoryid、name、sort、statusfilmid、title、cover、video_url、director、actors、area、language、category_id、description、publish_time、status、create_timebannerid、image、title、target_url、sort、statususer_favoriteid、user_id、film_id、create_timefilm_commentid、user_id、film_id、content、create_time密码字段建议使用 BCrypt 加密库存放密文status 字段用于逻辑上下架。表结构以实际项目为准本文只给常规切分思路。4. 技术栈与版本选型要点SpringBoot 项目高频问题之一是版本匹配。SpringBoot 3.x 要求 JDK 17 及以上SpringBoot 2.7 可以配合 JDK 8 使用。如果你拿到项目源码后启动报错优先看 pom.xml 里的 spring-boot-starter-parent 版本和本机 JDK 是否匹配。一个常见的组合是组件示例版本区间说明JDK1.8 或 17与 SpringBoot 主版本对应SpringBoot2.7.x 或 3.x3.x 使用 jakarta.servlet 包MySQL5.7 或 8.0注意驱动坐标差异Vue3.4使用 Vite 创建Vite5.x需要 Node 18Element Plus2.xVue3 桌面端组件库MyBatis Plus3.5.x降低单表 CRUD 成本前端创建命令一般格式npm create vitelatest movie-web -- --template vue如果只想要一个可运行骨架这一步会生成包含 main.js、App.vue、vite.config.js 的 Vue3 项目。后面前端工程在此基础上增加 router、pinia、axios 封装和页面组件。5. 环境准备与前置条件在克隆或新建项目后先准备环境。下面是通用检查清单。5.1 后端环境JDK推荐 JDK 8 或 17对应 SpringBoot 版本。Maven3.6 或直接使用 IDE 自带的 Maven。MySQL本地安装或 Docker 运行。IDEIDEA 社区版也可以Ultimate 对 Spring 初始化支持更好。启动前检查 8080 端口是否被占用。Linux / macOS 上查看端口lsof -i:8080Windows PowerShell 上查看端口netstat -ano | findstr :80805.2 前端环境Node.js建议 18 或 20 LTSVite 5 需要 Node 18。npm 或 pnpm、yarn。前端开发端口默认 5173如果被占用 Vite 会自动换端口控制台会提示。5.3 准备数据库新建数据库例如CREATE DATABASE IF NOT EXISTS movie_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;然后在 application.yml 中确认数据库名、用户名、密码是否正确。最常踩的问题就是建库字符集不是 utf8mb4导致电影名或评论里的 emoji 无法入库。5.4 检查配置后端典型配置如下需要按实际环境替换数据源参数server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/movie_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 servlet: multipart: max-file-size: 100MB max-request-size: 200MB mybatis-plus: configuration: map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 06. 后端工程搭建与启动后端工程的核心任务是提供接口、管理数据、处理登录鉴权和文件存储。6.1 创建 SpringBoot 项目可以在 Spring Initializr 选择依赖Spring Web、MySQL Driver、Lombok然后在 pom.xml 中加入 MyBatis Plus 和 JWT 相关库。MyBatis Plus 坐标参考dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependencyJWT 相关代码通常使用 jjwt 库但要注意版本。使用较新的 jjwt 0.11.5 时依赖由三个模块组成api、impl、jackson。低版本 0.9.1 在较新 JDK 上可能会因为 javax.xml.bind 缺失而出问题。6.2 项目结构分层后端建议按标准分层com.example.movie ├── controller ├── service │ └── impl ├── mapper ├── entity ├── dto ├── vo ├── config ├── common └── utilsController 只做参数接收和结果封装业务逻辑放 Service数据库操作在 Mapper。这样代码虽然多几层但后续维护和答辩讲解都更容易。6.3 JWT 登录鉴权思路登录流程用户提交用户名密码后端校验通过后生成 token 返回给前端。前端把 token 存在 localStorage 或 Pinia 中并在每次请求的请求头里带Authorization: Bearer token。后端通过拦截器或过滤器校验 token。一个简单的 JWT 工具类核心方法public String generateToken(Integer userId, String username, String role) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }拦截器做 token 校验注意不要拦截登录接口否则属于自己把自己锁在外面。public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); return true; } catch (Exception e) { response.setStatus(401); return false; } } response.setStatus(401); return false; }在开发环境调试 Swagger 或接口文档时如果不想每次都带 token可以把 swagger 相关路径加进白名单。如果使用 Knife4j还需要注意 SpringBoot 3.x 下配置类路径发生了变化。6.4 跨域配置前后端分离开发时前端 http://localhost:5173 访问后端 http://localhost:8080浏览器会拦截跨域请求。推荐在后端配置全局跨域Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }如果使用 allowCredentials(true)allowedOrigins 不能设置为*需要改用 allowedOriginPatterns。6.5 封装统一返回结果前后端联调要约定统一格式例如{ code: 200, message: success, data: {} }对应的 Java 类可用泛型实现Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT ok(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); return result; } public static T ResultT error(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }统一返回结果的好处是前端 Axios 拦截器可以只判断一次 code不需要每个页面单独处理错误分支。6.6 启动后端在 IDEA 中找到主启动类右键 Run。如果启动成功控制台会出现 SpringBoot 启动日志。之后访问http://localhost:8080/api/ping如果返回 JSON说明后端基本可用。如果启动失败先看日志中的APPLICATION FAILED TO START提示重点排查数据源连接失败和端口被占用。7. 前端工程搭建与启动Vue3 前端工程不只是一个页面集合它要承担路由管理、登录状态保持、请求封装、组件复用和页面交互。7.1 安装依赖进入前端目录后安装依赖npm install如果安装速度慢可以切换为国内镜像后再次执行。在工程内新增 .npmrc 也是一种方式但以实际环境为准。7.2 目录规划src ├── api // 存放接口请求模块 ├── assets // 静态资源 ├── components // 公共组件 ├── layout // 布局组件 ├── router // 路由配置 ├── store // Pinia 状态 ├── views // 页面组件 │ ├── home │ ├── film │ ├── user │ └── admin ├── utils // 工具函数 ├── App.vue └── main.js7.3 路由配置Vue3 使用 Vue Router 4。路由配置中可以做登录守卫进入需要登录的页面之前检查本地有没有 token没有 token 则跳转到登录页。这个逻辑放在 router.beforeEach 中。7.4 Axios 请求封装Axios 封装是前端工程的关键。在 Vue3 项目中Axios 的使用方式与 Vue2 差别不大但建议用 ES Module 方式导出实例。一个基础封装要点如下设置 baseURL例如/api开发环境通过 Vite 代理转发到后端 8080。请求拦截器从 localStorage 或 Pinia 中取 token加入请求头。响应拦截器如果返回 code 非 200抛出提示如果 HTTP 状态是 401清除本地登录信息并跳转登录页。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { return Promise.reject(new Error(res.message || 请求失败)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request开发时最常见的跨域方案是前端 Vite 代理而不是在后端依赖 CORS。Vite 配置需要在 vite.config.js 中开启import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })这里假设后端接口前缀没有/api所以做了一次重写。如果你的后端接口本身带/api前缀就把 rewrite 去掉。7.5 Vue3 核心组合式 API 应用页面中使用 Vue3 组合式 API以电影列表为例template div classfilm-list el-card v-foritem in filmList :keyitem.id classfilm-card img :srcitem.cover alt封面 / h3{{ item.title }}/h3 span{{ item.categoryName }}/span /el-card /div /template script setup import { ref, onMounted } from vue import { getFilmList } from /api/film const filmList ref([]) const loadFilms async () { const res await getFilmList({ current: 1, size: 12 }) filmList.value res.data.records } onMounted(loadFilms) /script注意 Vue2 里常用的this.$route、this.$store写法在 Vue3 组合式 API 中要换成useRoute()、useStore()Pinia 为useUserStore()。computed在 Vue3 中需要显式导入这也是面试常问的一个点Vue3 的响应式系统基于 Proxy而 computed 是懒执行的计算属性。7.6 启动前端npm run dev启动后访问 http://localhost:5173。打开页面后按 F12 打开开发者工具切到 Network 面板刷新页面观察接口请求状态。如果接口 404检查代理路径和后端 Controller 请求映射如果接口报 CORS检查代理是否生效、后端是否重复配置跨域导致冲突。8. 核心业务功能实现思路下面把电影系统的几个核心功能拆开逐个说实现思路。这一段不贴整份项目代码只讲设计关键实际开发时对照项目代码调整。8.1 电影列表分页与筛选后端使用 MyBatis Plus 分页插件Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }接口接收参数pageNum、pageSize、categoryId、keyword。实现时使用 LambdaQueryWrapper 动态拼接查询条件LambdaQueryWrapperFilm wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(categoryId), Film::getCategoryId, categoryId); wrapper.like(StringUtils.hasText(keyword), Film::getTitle, keyword); wrapper.eq(Film::getStatus, 1); wrapper.orderByDesc(Film::getCreateTime);这里强调一个点如果 keyword 为空like条件不应该拼进 SQL否则会导致全表扫描且返回空。使用条件构造器时精确传入 condition 参数。8.2 登录注册与用户管理用户端注册接口接收用户名、密码、昵称等参数入库前用 BCrypt 加密。登录成功后生成 token 并返回用户基本信息。后台管理员的账号可以提前在数据库初始化或者由项目自带 SQL 脚本初始化。管理员接口与普通用户接口共用同一个用户表也行用 role 字段区分更严谨的做法是拆分 admin 表但毕设规模用 role 字段更常见。前端做权限控制时路由可以分成/login公开路由。/用户端页面。/admin管理员布局与页面。管理员路由在 beforeEach 中不仅检查 token还要检查本地存储的 role 是否为 admin。注意前端权限只能隐藏入口后端的接口级别权限才是真正的安全边界。8.3 轮播图与封面上传轮播图和电影封面都涉及文件上传。前端 Element Plus 的el-upload组件提供 action 地址通常指向上传接口const uploadUrl /api/admin/file/upload后端接收 MultipartFile保存到指定磁盘目录并返回文件访问 URL。为了能在网页中直接访问需要配置静态资源映射Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { String uploadPath System.getProperty(user.dir) /upload/; registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); } }在部署时不建议把上传目录放到项目 classpath 中这样重新打包会丢失。更稳妥的是在配置文件中指定独立目录比如/data/movie/upload。8.4 收藏与评论收藏和评论要关联用户 ID因此接口要求登录。登录后从请求头 token 中解析 userId而不是让前端把 userId 传过来避免越权风险。设计接口时建议POST /api/film/favorite参数 filmId。DELETE /api/film/favorite/{filmId}取消收藏。GET /api/film/favorite/list当前用户收藏列表。POST /api/film/comment参数 filmId、content。GET /api/film/{filmId}/comments评论列表。8.5 首页数据聚合首页往往需要同时展示多组数据。一个方案是前端并行请求多个接口另一个方案是后端提供一个聚合接口。对于电影网站首页推荐、最新、分类数据用/api/home/data一个接口返回更高效也可以减小前端请求数量。public class HomeDataVO { private ListBannerVO bannerList; private ListFilmVO hotFilmList; private ListFilmVO latestFilmList; private ListCategoryVO categoryList; }9. 接口 API 调用与批量任务设计电影网站系统虽然本身不是高并发项目但接口调用规范和批量任务设计是工程化的重点。9.1 接口调用约定后端接口尽量遵循 RESTful 风格。前端 API 模块对应后端的 Controller每个模块一个 JS 文件例如 film.js、user.js、category.js。这样接口地址改动时只调整一个文件。管理员端批量上架电影时Controller 接口通常接收 List 类型PostMapping(/admin/film/batch) public ResultVoid batchCreateFilm(RequestBody ListFilm filmList) { filmService.saveBatchFilm(filmList); return Result.ok(null); }为了使事务对多数据操作生效批量保存方法上要加Transactional注意方法必须是 public并且不能同类内部调用失效。9.2 Python 调用接口示例即使不启动前端也可以直接使用 Postman、curl 或 Python requests 来验证接口。这样可以快速判断问题定位在前端还是后端。import requests base_url http://localhost:8080 login_data { username: admin, password: 123456 } resp requests.post(f{base_url}/admin/login, jsonlogin_data, timeout10) print(登录返回:, resp.json()) token resp.json().get(data, {}).get(token) headers {Authorization: fBearer {token}} film_data { title: 测试电影, cover: https://example.com/test.jpg, categoryId: 1, description: 用于接口联调的测试数据, status: 1 } resp2 requests.post(f{base_url}/admin/film, jsonfilm_data, headersheaders, timeout10) print(新增电影返回:, resp2.json())这里只做演示接口路径需要根据你的后端 Controller 实际映射调整。9.3 批量任务设计建议如果要做电影数据的批量导入有三种常见方式管理页面上传 Excel后端解析并逐条校验入库。JSON 数组一次提交适合接口联调和小批量数据。定时任务扫描某个目录下的资源文件这种情况适合内部平台。三种方式在生产中都要做三件事幂等处理、失败日志、部分成功回滚或标记。批量导入过程中如果有一条数据分类不存在或缺少必填字段最好在返回结果中给出失败明细而不是直接抛异常中断全部任务。9.4 curl 快速验证curl -X POST http://localhost:8080/admin/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}响应中拿到 token 后再调受保护接口curl -X GET http://localhost:8080/admin/film/list?current1size10 \ -H Authorization: Bearer token把token替换成实际 token 即可。如果返回 401先确认 token 是否过期、请求头是否带对格式。如果返回 403往往是角色权限校验不通过。10. 开发调试中的资源占用与性能观察SpringBoot Vue3 项目对硬件要求很低但开发调试中仍有几个观察点。10.1 内存占用观察启动后端后SpringBoot 默认 JVM 内存根据本机配置自动调整。如果本机内存紧张可以手动限制java -jar movie-admin.jar --spring.profiles.activeprod -Xms256m -Xmx512m如果启动多个微服务每个服务建议单独限制内存。前端 Node 开发服务占用内存也不高但如果 node_modules 安装异常或运行多个终端也可能出现内存不足。10.2 接口响应时间的判断前后端分离项目中接口响应慢要先分清瓶颈在哪个环节Network 面板看接口耗时如果耗时高而在数据库执行很快可能是后端逻辑有循环查询。MyBatis Plus 开启 SQL 日志后每个查询都会打印在控制台可以观察是否有 N1 查询。如果首页同时查了轮播、分类、电影列表建议合并接口或加缓存减少网络往返。10.3 构建优化Vue3 项目打包后首屏加载大小可以通过路由懒加载来优化const Home () import(/views/Home.vue)这是 Vue3 Vue Router 联合常用的技术点。另一个常见问题是 Element Plus 全局引入导致包体积偏大可按需引入npm install unplugin-auto-import unplugin-vue-components配置由实际工程决定但思路是组件自动导入避免在 main.js 中全量注册 Element Plus。11. 常见问题与排查方法问题现象可能原因排查方式解决方案后端启动失败提示数据库连接失败MySQL 未启动、密码错误、数据库不存在检查 MySQL 服务状态和 application.yml启动 MySQL修正账号密码或建库后端启动失败提示端口占用8080 端口被其他进程占用netstat 查看端口占用关闭占用进程或修改 server.port前端启动失败提示 Node 版本过低Vite 版本与 Node 版本不兼容执行 node -v 查看版本升级 Node 到 18 或 20 LTS登录后调用接口返回 401token 过期或请求头未携带查看浏览器 Network 中请求头重新登录检查 Axios 请求拦截器页面请求接口返回 404代理路径或后端映射不匹配查看后端日志和 Network 请求 URL调整 Vite proxy rewrite 规则或 Controller 映射接口报 CORS 错误后端未开启跨域或前端未走代理确认使用的是代理还是直接请求开发环境用 Vite 代理生产环境由 Nginx 代理文件上传成功但图片不显示静态资源映射路径不对访问资源 URL 看是否能直接打开检查 addResourceHandlers 和文件存放路径中文乱码或评论 emoji 无法入库MySQL 表字符集不是 utf8mb4查看表结构字符集修改表和数据库字符集为 utf8mb4启动前端后页面空白路由配置错误或某个页面导入报错打开控制台查看报错根据报错文件修改 import 路径前端代码改了不生效开发服务未正确启动或浏览器缓存强制刷新或重启 npm run dev清缓存确认控制台编译成功SpringBoot 3 项目报 javax 包不存在JDK 8 代码在 JDK 17 运行查看异常堆栈使用 JDK 17 重编译或降级到 SpringBoot 2.7排查技巧任何接口行为异常先不猜直接看后端控制台日志。SpringBoot 默认日志已经足够定位 80% 的启动问题和接口异常。如果日志没输出 SQL再看 MyBatis Plus 是否开了 SQL 日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl12. 最佳实践与合规提醒12.1 工程化管理建议第一第一次跑通项目时不要追求修改很多功能。先把后端启动、前端启动、登录、电影列表、详情页、后台管理这几条主链路走通。主链路没问题后再去改功能这能避免把环境问题和代码问题混在一起。第二保留一套最小可运行配置。数据库脚本、后端配置、前端 .env 文件、README 都要放进版本管理。别人 Clone 项目后在 10 分钟内能启动这个项目才是可交付的。第三模型和配置文件分离。不要把 upload 目录和建议配置文件写死在代码里用 application-dev.yml、application-prod.yml 做环境隔离更合理。第四批量导入要做前置校验。批量上架电影前先校验完整表格数据再入库而不是逐条插入时才发现问题。第五接口服务要限制访问范围。生产环境不要把后端端口直接暴露到公网使用 Nginx 做反向代理只开放 80/443并对上传接口做大小和类型限制。12.2 授权与合规边界电影网站系统涉及影片、海报、预告片或评论内容时务必确认授权情况演示和本地学习使用官方公开的示例图片、海报和个人拍摄素材。不把爬取的收费视频、未授权影视资源、盗版影片链接集成进系统。如果系统面向公众开放需要在用户协议中明确禁止违法内容并保留内容审核能力。如果系统采集用户登录信息或上传文件要求遵循数据安全和个人信息保护要求测试阶段使用虚拟数据。如果后续接入真实在线视频要优先选择有正规版权的内容源。这类合规提醒不是套话。很多毕业设计项目因为演示视频或电影素材使用了未授权资源在公开演示和简历展示阶段遇到不必要的风险。建议把所有图片、封面换成程序生成的占位图或自己有权限的素材代码里不留下侵权链接。12.3 如何做二次开发如果你拿到这个项目的源码想把它改成自己的毕设或练手项目建议按这个顺序改换项目名和数据库名。改系统 Logo 和页面标题删除多余测试数据。增加一个与电影业务相关的小亮点功能比如电影榜单、每日推荐、词云标签避免和原项目完全一致。把自己实现的功能整理成 README 中的技术说明减少答辩时讲不清的点。13. 总结与下一步SpringBoot Vue3 的前后端分离电影网站系统适合用四个关键词概括双端分离、数据管理、鉴权联调、工程落地。它不像算法项目那样需要很高的数学基础也不像 AI 推理项目那样依赖显卡只要能理清表关系、接口约定和请求链路就拥有了一个可以不断扩展的 Web 项目底座。拿到项目后最先做的事不是看每一行代码而是先跑通两条链路。第一用户端首页到电影列表到登录到收藏第二管理员登录、新增电影、轮播图配置、用户列表。这两条链路覆盖了 JWT 鉴权、分页查询、文件上传、权限判断、数据关联这些 SpringBoot 和 Vue3 方向的高频考点。最容易踩的坑集中在三个方面数据库连接配置错误、SpringBoot 与 JDK 版本不匹配、前端代理与后端跨域配置冲突。这三个问题在环境检查阶段提前确认后面联调可以省下很多时间。下一步可以按业务需求扩展三块内容一是接入 OSS 或本地对象存储解决封面和预告片文件的长期保存问题二是引入 Redis 缓存首页热点数据和登录 token逐步脱离“毕设感”三是增加评论点赞、观影记录、每日推荐等交互功能让系统的完整度更高。本文适合先收藏实际开发时对照功能模块、接口设计表和问题排查清单来用。