這次我們不聊 AI 繪畫也不聊大模型推理。回到 Java 全棧開發(fā)看一個(gè)很典型的工程基于 SpringBoot Vue3 的前后端分離電影網(wǎng)站系統(tǒng)。這類項(xiàng)目在畢業(yè)設(shè)計(jì)、課程設(shè)計(jì)、Java 求職項(xiàng)目里出現(xiàn)頻率非常高核心價(jià)值不在于“電影資源”本身而在于它覆蓋了一條完整的前后端分離開發(fā)鏈路用戶端與管理員端雙端分離、JWT 登錄鑒權(quán)、文件上傳與回顯、分類檢索、輪播圖管理、評(píng)論留言以及 Vue3 組合式 API Element Plus 后臺(tái)界面的落地。這個(gè)系統(tǒng)的技術(shù)標(biāo)簽很明確SpringBoot 負(fù)責(zé)后端 Api 服務(wù)Vue3 Vite 負(fù)責(zé)前端頁面MySQL 存業(yè)務(wù)數(shù)據(jù)MyBatis Plus 做數(shù)據(jù)訪問。從實(shí)戰(zhàn)角度看它適合準(zhǔn)備 SpringBoot 面試項(xiàng)目、寫 Vue3 畢設(shè)、或者想系統(tǒng)梳理前后端聯(lián)調(diào)流程的開發(fā)者。同時(shí)我們也會(huì)把 SpringBoot 配置、Vue3 路由、Axios 請(qǐng)求封裝、JWT 攔截器、跨域處理這些高頻技術(shù)點(diǎn)串起來看。這篇文章會(huì)按四個(gè)層次展開先給項(xiàng)目功能與能力速覽再講系統(tǒng)模塊設(shè)計(jì)然后走一遍環(huán)境準(zhǔn)備、后端工程搭建、前端工程搭建和聯(lián)調(diào)驗(yàn)證最后給接口調(diào)用與批量任務(wù)設(shè)計(jì)、常見排查思路和工程化管理建議。全文以可復(fù)現(xiàn)為主不寫空概念。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型前后端分離的 Web 管理系統(tǒng)電影網(wǎng)站后端技術(shù)棧SpringBoot、MyBatis Plus、MySQL、JWT、Lombok前端技術(shù)棧Vue3、Vite、Vue Router、Pinia、Axios、Element Plus端口規(guī)劃后端常見 8080前端 Vite 開發(fā)端口常見 5173需開啟跨域核心功能用戶端電影瀏覽與檢索、電影詳情、收藏與評(píng)論后臺(tái)端電影管理、分類管理、輪播圖管理、用戶管理、管理員登錄數(shù)據(jù)庫MySQL 5.7 或 8.x具體版本看實(shí)際工程啟動(dòng)方式后端 SpringBoot 啟動(dòng)類 前端 npm run dev或前后端分別打包部署是否支持接口 API支持后端暴露 RESTful 接口前端通過 Axios 調(diào)用是否支持批量任務(wù)可在后臺(tái)實(shí)現(xiàn)電影批量上架的接口設(shè)計(jì)與事務(wù)控制適合讀者Java 后端入門、Vue3 前端入門、畢業(yè)設(shè)計(jì)開發(fā)、前后端聯(lián)調(diào)學(xué)習(xí)者注意一點(diǎn)本文不會(huì)虛構(gòu)某個(gè)源碼倉庫的完整目錄和真實(shí)運(yùn)行截圖只給出一套通用的實(shí)現(xiàn)思路、配置模板和驗(yàn)證流程。你拿到的實(shí)際項(xiàng)目如果結(jié)構(gòu)不同應(yīng)對(duì)照具體代碼調(diào)整路徑與參數(shù)。2. 適用場景與使用邊界這類電影網(wǎng)站系統(tǒng)最常用的場景有三個(gè)第一是畢業(yè)設(shè)計(jì)和課程設(shè)計(jì)。SpringBoot Vue3 是目前比較穩(wěn)妥的組合既能體現(xiàn)后端接口設(shè)計(jì)能力又能展示前端工程化能力。功能上加入用戶登錄、輪播圖、分類查詢、電影詳情、評(píng)論收藏再配上后臺(tái)管理界面滿足演示和答辯要求。第二是前后端分離項(xiàng)目練手。很多人從單體 JSP 項(xiàng)目轉(zhuǎn)向前后端分離時(shí)最大的卡點(diǎn)不是語法而是理解不了前端如何調(diào)后端、token 如何存、接口 401 怎么辦、跨域又是怎么回事。電影網(wǎng)站系統(tǒng)復(fù)雜度適中比圖書管理豐富又比商城系統(tǒng)簡單適合作為第二個(gè)或第三個(gè)練手項(xiàng)目。第三是簡歷項(xiàng)目素材準(zhǔn)備。如果你把 JWT 登錄、攔截器配置、文件上傳、分頁查詢這些點(diǎn)真正吃透面試時(shí)可以圍繞“遇到跨域如何處理”“token 過期怎么辦”“分頁插件原理是什么”展開回答比背簡歷要有說服力。但也要說清楚邊界。這類系統(tǒng)本質(zhì)是管理平臺(tái)并不等于真正的視頻點(diǎn)播平臺(tái)。它通常存的是“電影信息 預(yù)告片/封面資源”或播放鏈接不涉及大規(guī)模流媒體分發(fā)如果涉及真實(shí)影片素材、用戶上傳內(nèi)容和人臉實(shí)名信息必須注意版權(quán)授權(quán)、內(nèi)容審核和數(shù)據(jù)隱私合規(guī)個(gè)人練習(xí)時(shí)也應(yīng)該使用演示數(shù)據(jù)不要拿未授權(quán)資源做商業(yè)化發(fā)布。3. 系統(tǒng)功能模塊設(shè)計(jì)在設(shè)計(jì)一個(gè)電影網(wǎng)站系統(tǒng)時(shí)建議按“用戶端 管理端 公共服務(wù)”三層來拆。這樣后端 Controller 不會(huì)堆到一起Vue3 前端頁面也方便用路由做權(quán)限區(qū)分。3.1 用戶端模塊用戶端是訪客或注冊用戶看到的部分典型頁面包括首頁輪播圖推薦、熱門電影、最新電影、分類快速入口。電影列表按分類篩選、按名稱搜索、分頁展示。電影詳情封面、導(dǎo)演、主演、簡介、上映年份、播放/預(yù)告入口、收藏按鈕。用戶登錄與注冊基于 JWT登錄后可以收藏電影和發(fā)表評(píng)論。個(gè)人中心查看我的收藏、我的評(píng)論。頁面規(guī)劃在 Vue3 里對(duì)應(yīng)為router-view包裹的布局頁例如Layout.vue中有頂部導(dǎo)航欄和右側(cè)主內(nèi)容區(qū)子頁面通過children配置進(jìn)入。3.2 后臺(tái)管理端模塊管理端設(shè)計(jì)為獨(dú)立路由前綴例如/admin使用后臺(tái)布局。常見功能如下儀表盤顯示電影總數(shù)、用戶總數(shù)、評(píng)論總數(shù)、分類數(shù)。電影管理新增、編輯、上下架、刪除電影支持封面上傳和批量上架。分類管理維護(hù)電影類型支持排序。輪播圖管理設(shè)置首頁展示位與跳轉(zhuǎn)鏈接。用戶管理查看注冊用戶、禁用或啟用賬號(hào)。管理員權(quán)限管理員登錄與用戶端登錄分離后端做角色判斷。3.3 數(shù)據(jù)庫表設(shè)計(jì)參考后端表設(shè)計(jì)不需要特別復(fù)雜常用的核心表有表名核心字段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 字段用于邏輯上下架。表結(jié)構(gòu)以實(shí)際項(xiàng)目為準(zhǔn)本文只給常規(guī)切分思路。4. 技術(shù)棧與版本選型要點(diǎn)SpringBoot 項(xiàng)目高頻問題之一是版本匹配。SpringBoot 3.x 要求 JDK 17 及以上SpringBoot 2.7 可以配合 JDK 8 使用。如果你拿到項(xiàng)目源碼后啟動(dòng)報(bào)錯(cuò)優(yōu)先看 pom.xml 里的 spring-boot-starter-parent 版本和本機(jī) JDK 是否匹配。一個(gè)常見的組合是組件示例版本區(qū)間說明JDK1.8 或 17與 SpringBoot 主版本對(duì)應(yīng)SpringBoot2.7.x 或 3.x3.x 使用 jakarta.servlet 包MySQL5.7 或 8.0注意驅(qū)動(dòng)坐標(biāo)差異Vue3.4使用 Vite 創(chuàng)建Vite5.x需要 Node 18Element Plus2.xVue3 桌面端組件庫MyBatis Plus3.5.x降低單表 CRUD 成本前端創(chuàng)建命令一般格式npm create vitelatest movie-web -- --template vue如果只想要一個(gè)可運(yùn)行骨架這一步會(huì)生成包含 main.js、App.vue、vite.config.js 的 Vue3 項(xiàng)目。后面前端工程在此基礎(chǔ)上增加 router、pinia、axios 封裝和頁面組件。5. 環(huán)境準(zhǔn)備與前置條件在克隆或新建項(xiàng)目后先準(zhǔn)備環(huán)境。下面是通用檢查清單。5.1 后端環(huán)境JDK推薦 JDK 8 或 17對(duì)應(yīng) SpringBoot 版本。Maven3.6 或直接使用 IDE 自帶的 Maven。MySQL本地安裝或 Docker 運(yùn)行。IDEIDEA 社區(qū)版也可以Ultimate 對(duì) Spring 初始化支持更好。啟動(dòng)前檢查 8080 端口是否被占用。Linux / macOS 上查看端口lsof -i:8080Windows PowerShell 上查看端口netstat -ano | findstr :80805.2 前端環(huán)境Node.js建議 18 或 20 LTSVite 5 需要 Node 18。npm 或 pnpm、yarn。前端開發(fā)端口默認(rèn) 5173如果被占用 Vite 會(huì)自動(dòng)換端口控制臺(tái)會(huì)提示。5.3 準(zhǔn)備數(shù)據(jù)庫新建數(shù)據(jù)庫例如CREATE DATABASE IF NOT EXISTS movie_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;然后在 application.yml 中確認(rèn)數(shù)據(jù)庫名、用戶名、密碼是否正確。最常踩的問題就是建庫字符集不是 utf8mb4導(dǎo)致電影名或評(píng)論里的 emoji 無法入庫。5.4 檢查配置后端典型配置如下需要按實(shí)際環(huán)境替換數(shù)據(jù)源參數(shù)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. 后端工程搭建與啟動(dòng)后端工程的核心任務(wù)是提供接口、管理數(shù)據(jù)、處理登錄鑒權(quán)和文件存儲(chǔ)。6.1 創(chuàng)建 SpringBoot 項(xiàng)目可以在 Spring Initializr 選擇依賴Spring Web、MySQL Driver、Lombok然后在 pom.xml 中加入 MyBatis Plus 和 JWT 相關(guān)庫。MyBatis Plus 坐標(biāo)參考dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependencyJWT 相關(guān)代碼通常使用 jjwt 庫但要注意版本。使用較新的 jjwt 0.11.5 時(shí)依賴由三個(gè)模塊組成api、impl、jackson。低版本 0.9.1 在較新 JDK 上可能會(huì)因?yàn)?javax.xml.bind 缺失而出問題。6.2 項(xiàng)目結(jié)構(gòu)分層后端建議按標(biāo)準(zhǔn)分層com.example.movie ├── controller ├── service │ └── impl ├── mapper ├── entity ├── dto ├── vo ├── config ├── common └── utilsController 只做參數(shù)接收和結(jié)果封裝業(yè)務(wù)邏輯放 Service數(shù)據(jù)庫操作在 Mapper。這樣代碼雖然多幾層但后續(xù)維護(hù)和答辯講解都更容易。6.3 JWT 登錄鑒權(quán)思路登錄流程用戶提交用戶名密碼后端校驗(yàn)通過后生成 token 返回給前端。前端把 token 存在 localStorage 或 Pinia 中并在每次請(qǐng)求的請(qǐng)求頭里帶Authorization: Bearer token。后端通過攔截器或過濾器校驗(yàn) token。一個(gè)簡單的 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 校驗(yàn)注意不要攔截登錄接口否則屬于自己把自己鎖在外面。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; }在開發(fā)環(huán)境調(diào)試 Swagger 或接口文檔時(shí)如果不想每次都帶 token可以把 swagger 相關(guān)路徑加進(jìn)白名單。如果使用 Knife4j還需要注意 SpringBoot 3.x 下配置類路徑發(fā)生了變化。6.4 跨域配置前后端分離開發(fā)時(shí)前端 http://localhost:5173 訪問后端 http://localhost:8080瀏覽器會(huì)攔截跨域請(qǐng)求。推薦在后端配置全局跨域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 不能設(shè)置為*需要改用 allowedOriginPatterns。6.5 封裝統(tǒng)一返回結(jié)果前后端聯(lián)調(diào)要約定統(tǒng)一格式例如{ code: 200, message: success, data: {} }對(duì)應(yīng)的 Java 類可用泛型實(shí)現(xiàn)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; } }統(tǒng)一返回結(jié)果的好處是前端 Axios 攔截器可以只判斷一次 code不需要每個(gè)頁面單獨(dú)處理錯(cuò)誤分支。6.6 啟動(dòng)后端在 IDEA 中找到主啟動(dòng)類右鍵 Run。如果啟動(dòng)成功控制臺(tái)會(huì)出現(xiàn) SpringBoot 啟動(dòng)日志。之后訪問http://localhost:8080/api/ping如果返回 JSON說明后端基本可用。如果啟動(dòng)失敗先看日志中的APPLICATION FAILED TO START提示重點(diǎn)排查數(shù)據(jù)源連接失敗和端口被占用。7. 前端工程搭建與啟動(dòng)Vue3 前端工程不只是一個(gè)頁面集合它要承擔(dān)路由管理、登錄狀態(tài)保持、請(qǐng)求封裝、組件復(fù)用和頁面交互。7.1 安裝依賴進(jìn)入前端目錄后安裝依賴npm install如果安裝速度慢可以切換為國內(nèi)鏡像后再次執(zhí)行。在工程內(nèi)新增 .npmrc 也是一種方式但以實(shí)際環(huán)境為準(zhǔn)。7.2 目錄規(guī)劃src ├── api // 存放接口請(qǐng)求模塊 ├── assets // 靜態(tài)資源 ├── components // 公共組件 ├── layout // 布局組件 ├── router // 路由配置 ├── store // Pinia 狀態(tài) ├── views // 頁面組件 │ ├── home │ ├── film │ ├── user │ └── admin ├── utils // 工具函數(shù) ├── App.vue └── main.js7.3 路由配置Vue3 使用 Vue Router 4。路由配置中可以做登錄守衛(wèi)進(jìn)入需要登錄的頁面之前檢查本地有沒有 token沒有 token 則跳轉(zhuǎn)到登錄頁。這個(gè)邏輯放在 router.beforeEach 中。7.4 Axios 請(qǐng)求封裝Axios 封裝是前端工程的關(guān)鍵。在 Vue3 項(xiàng)目中Axios 的使用方式與 Vue2 差別不大但建議用 ES Module 方式導(dǎo)出實(shí)例。一個(gè)基礎(chǔ)封裝要點(diǎn)如下設(shè)置 baseURL例如/api開發(fā)環(huán)境通過 Vite 代理轉(zhuǎn)發(fā)到后端 8080。請(qǐng)求攔截器從 localStorage 或 Pinia 中取 token加入請(qǐng)求頭。響應(yīng)攔截器如果返回 code 非 200拋出提示如果 HTTP 狀態(tài)是 401清除本地登錄信息并跳轉(zhuǎn)登錄頁。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 || 請(qǐng)求失敗)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request開發(fā)時(shí)最常見的跨域方案是前端 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/, ) } } } })這里假設(shè)后端接口前綴沒有/api所以做了一次重寫。如果你的后端接口本身帶/api前綴就把 rewrite 去掉。7.5 Vue3 核心組合式 API 應(yīng)用頁面中使用 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 中需要顯式導(dǎo)入這也是面試常問的一個(gè)點(diǎn)Vue3 的響應(yīng)式系統(tǒng)基于 Proxy而 computed 是懶執(zhí)行的計(jì)算屬性。7.6 啟動(dòng)前端npm run dev啟動(dòng)后訪問 http://localhost:5173。打開頁面后按 F12 打開開發(fā)者工具切到 Network 面板刷新頁面觀察接口請(qǐng)求狀態(tài)。如果接口 404檢查代理路徑和后端 Controller 請(qǐng)求映射如果接口報(bào) CORS檢查代理是否生效、后端是否重復(fù)配置跨域?qū)е聸_突。8. 核心業(yè)務(wù)功能實(shí)現(xiàn)思路下面把電影系統(tǒng)的幾個(gè)核心功能拆開逐個(gè)說實(shí)現(xiàn)思路。這一段不貼整份項(xiàng)目代碼只講設(shè)計(jì)關(guān)鍵實(shí)際開發(fā)時(shí)對(duì)照項(xiàng)目代碼調(diào)整。8.1 電影列表分頁與篩選后端使用 MyBatis Plus 分頁插件Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }接口接收參數(shù)pageNum、pageSize、categoryId、keyword。實(shí)現(xiàn)時(shí)使用 LambdaQueryWrapper 動(dòng)態(tài)拼接查詢條件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);這里強(qiáng)調(diào)一個(gè)點(diǎn)如果 keyword 為空like條件不應(yīng)該拼進(jìn) SQL否則會(huì)導(dǎo)致全表掃描且返回空。使用條件構(gòu)造器時(shí)精確傳入 condition 參數(shù)。8.2 登錄注冊與用戶管理用戶端注冊接口接收用戶名、密碼、昵稱等參數(shù)入庫前用 BCrypt 加密。登錄成功后生成 token 并返回用戶基本信息。后臺(tái)管理員的賬號(hào)可以提前在數(shù)據(jù)庫初始化或者由項(xiàng)目自帶 SQL 腳本初始化。管理員接口與普通用戶接口共用同一個(gè)用戶表也行用 role 字段區(qū)分更嚴(yán)謹(jǐn)?shù)淖龇ㄊ遣鸱?admin 表但畢設(shè)規(guī)模用 role 字段更常見。前端做權(quán)限控制時(shí)路由可以分成/login公開路由。/用戶端頁面。/admin管理員布局與頁面。管理員路由在 beforeEach 中不僅檢查 token還要檢查本地存儲(chǔ)的 role 是否為 admin。注意前端權(quán)限只能隱藏入口后端的接口級(jí)別權(quán)限才是真正的安全邊界。8.3 輪播圖與封面上傳輪播圖和電影封面都涉及文件上傳。前端 Element Plus 的el-upload組件提供 action 地址通常指向上傳接口const uploadUrl /api/admin/file/upload后端接收 MultipartFile保存到指定磁盤目錄并返回文件訪問 URL。為了能在網(wǎng)頁中直接訪問需要配置靜態(tài)資源映射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); } }在部署時(shí)不建議把上傳目錄放到項(xiàng)目 classpath 中這樣重新打包會(huì)丟失。更穩(wěn)妥的是在配置文件中指定獨(dú)立目錄比如/data/movie/upload。8.4 收藏與評(píng)論收藏和評(píng)論要關(guān)聯(lián)用戶 ID因此接口要求登錄。登錄后從請(qǐng)求頭 token 中解析 userId而不是讓前端把 userId 傳過來避免越權(quán)風(fēng)險(xiǎn)。設(shè)計(jì)接口時(shí)建議POST /api/film/favorite參數(shù) filmId。DELETE /api/film/favorite/{filmId}取消收藏。GET /api/film/favorite/list當(dāng)前用戶收藏列表。POST /api/film/comment參數(shù) filmId、content。GET /api/film/{filmId}/comments評(píng)論列表。8.5 首頁數(shù)據(jù)聚合首頁往往需要同時(shí)展示多組數(shù)據(jù)。一個(gè)方案是前端并行請(qǐng)求多個(gè)接口另一個(gè)方案是后端提供一個(gè)聚合接口。對(duì)于電影網(wǎng)站首頁推薦、最新、分類數(shù)據(jù)用/api/home/data一個(gè)接口返回更高效也可以減小前端請(qǐng)求數(shù)量。public class HomeDataVO { private ListBannerVO bannerList; private ListFilmVO hotFilmList; private ListFilmVO latestFilmList; private ListCategoryVO categoryList; }9. 接口 API 調(diào)用與批量任務(wù)設(shè)計(jì)電影網(wǎng)站系統(tǒng)雖然本身不是高并發(fā)項(xiàng)目但接口調(diào)用規(guī)范和批量任務(wù)設(shè)計(jì)是工程化的重點(diǎn)。9.1 接口調(diào)用約定后端接口盡量遵循 RESTful 風(fēng)格。前端 API 模塊對(duì)應(yīng)后端的 Controller每個(gè)模塊一個(gè) JS 文件例如 film.js、user.js、category.js。這樣接口地址改動(dòng)時(shí)只調(diào)整一個(gè)文件。管理員端批量上架電影時(shí)Controller 接口通常接收 List 類型PostMapping(/admin/film/batch) public ResultVoid batchCreateFilm(RequestBody ListFilm filmList) { filmService.saveBatchFilm(filmList); return Result.ok(null); }為了使事務(wù)對(duì)多數(shù)據(jù)操作生效批量保存方法上要加Transactional注意方法必須是 public并且不能同類內(nèi)部調(diào)用失效。9.2 Python 調(diào)用接口示例即使不啟動(dòng)前端也可以直接使用 Postman、curl 或 Python requests 來驗(yàn)證接口。這樣可以快速判斷問題定位在前端還是后端。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: 用于接口聯(lián)調(diào)的測試數(shù)據(jù), status: 1 } resp2 requests.post(f{base_url}/admin/film, jsonfilm_data, headersheaders, timeout10) print(新增電影返回:, resp2.json())這里只做演示接口路徑需要根據(jù)你的后端 Controller 實(shí)際映射調(diào)整。9.3 批量任務(wù)設(shè)計(jì)建議如果要做電影數(shù)據(jù)的批量導(dǎo)入有三種常見方式管理頁面上傳 Excel后端解析并逐條校驗(yàn)入庫。JSON 數(shù)組一次提交適合接口聯(lián)調(diào)和小批量數(shù)據(jù)。定時(shí)任務(wù)掃描某個(gè)目錄下的資源文件這種情況適合內(nèi)部平臺(tái)。三種方式在生產(chǎn)中都要做三件事冪等處理、失敗日志、部分成功回滾或標(biāo)記。批量導(dǎo)入過程中如果有一條數(shù)據(jù)分類不存在或缺少必填字段最好在返回結(jié)果中給出失敗明細(xì)而不是直接拋異常中斷全部任務(wù)。9.4 curl 快速驗(yàn)證curl -X POST http://localhost:8080/admin/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}響應(yīng)中拿到 token 后再調(diào)受保護(hù)接口curl -X GET http://localhost:8080/admin/film/list?current1size10 \ -H Authorization: Bearer token把token替換成實(shí)際 token 即可。如果返回 401先確認(rèn) token 是否過期、請(qǐng)求頭是否帶對(duì)格式。如果返回 403往往是角色權(quán)限校驗(yàn)不通過。10. 開發(fā)調(diào)試中的資源占用與性能觀察SpringBoot Vue3 項(xiàng)目對(duì)硬件要求很低但開發(fā)調(diào)試中仍有幾個(gè)觀察點(diǎn)。10.1 內(nèi)存占用觀察啟動(dòng)后端后SpringBoot 默認(rèn) JVM 內(nèi)存根據(jù)本機(jī)配置自動(dòng)調(diào)整。如果本機(jī)內(nèi)存緊張可以手動(dòng)限制java -jar movie-admin.jar --spring.profiles.activeprod -Xms256m -Xmx512m如果啟動(dòng)多個(gè)微服務(wù)每個(gè)服務(wù)建議單獨(dú)限制內(nèi)存。前端 Node 開發(fā)服務(wù)占用內(nèi)存也不高但如果 node_modules 安裝異?；蜻\(yùn)行多個(gè)終端也可能出現(xiàn)內(nèi)存不足。10.2 接口響應(yīng)時(shí)間的判斷前后端分離項(xiàng)目中接口響應(yīng)慢要先分清瓶頸在哪個(gè)環(huán)節(jié)Network 面板看接口耗時(shí)如果耗時(shí)高而在數(shù)據(jù)庫執(zhí)行很快可能是后端邏輯有循環(huán)查詢。MyBatis Plus 開啟 SQL 日志后每個(gè)查詢都會(huì)打印在控制臺(tái)可以觀察是否有 N1 查詢。如果首頁同時(shí)查了輪播、分類、電影列表建議合并接口或加緩存減少網(wǎng)絡(luò)往返。10.3 構(gòu)建優(yōu)化Vue3 項(xiàng)目打包后首屏加載大小可以通過路由懶加載來優(yōu)化const Home () import(/views/Home.vue)這是 Vue3 Vue Router 聯(lián)合常用的技術(shù)點(diǎn)。另一個(gè)常見問題是 Element Plus 全局引入導(dǎo)致包體積偏大可按需引入npm install unplugin-auto-import unplugin-vue-components配置由實(shí)際工程決定但思路是組件自動(dòng)導(dǎo)入避免在 main.js 中全量注冊 Element Plus。11. 常見問題與排查方法問題現(xiàn)象可能原因排查方式解決方案后端啟動(dòng)失敗提示數(shù)據(jù)庫連接失敗MySQL 未啟動(dòng)、密碼錯(cuò)誤、數(shù)據(jù)庫不存在檢查 MySQL 服務(wù)狀態(tài)和 application.yml啟動(dòng) MySQL修正賬號(hào)密碼或建庫后端啟動(dòng)失敗提示端口占用8080 端口被其他進(jìn)程占用netstat 查看端口占用關(guān)閉占用進(jìn)程或修改 server.port前端啟動(dòng)失敗提示 Node 版本過低Vite 版本與 Node 版本不兼容執(zhí)行 node -v 查看版本升級(jí) Node 到 18 或 20 LTS登錄后調(diào)用接口返回 401token 過期或請(qǐng)求頭未攜帶查看瀏覽器 Network 中請(qǐng)求頭重新登錄檢查 Axios 請(qǐng)求攔截器頁面請(qǐng)求接口返回 404代理路徑或后端映射不匹配查看后端日志和 Network 請(qǐng)求 URL調(diào)整 Vite proxy rewrite 規(guī)則或 Controller 映射接口報(bào) CORS 錯(cuò)誤后端未開啟跨域或前端未走代理確認(rèn)使用的是代理還是直接請(qǐng)求開發(fā)環(huán)境用 Vite 代理生產(chǎn)環(huán)境由 Nginx 代理文件上傳成功但圖片不顯示靜態(tài)資源映射路徑不對(duì)訪問資源 URL 看是否能直接打開檢查 addResourceHandlers 和文件存放路徑中文亂碼或評(píng)論 emoji 無法入庫MySQL 表字符集不是 utf8mb4查看表結(jié)構(gòu)字符集修改表和數(shù)據(jù)庫字符集為 utf8mb4啟動(dòng)前端后頁面空白路由配置錯(cuò)誤或某個(gè)頁面導(dǎo)入報(bào)錯(cuò)打開控制臺(tái)查看報(bào)錯(cuò)根據(jù)報(bào)錯(cuò)文件修改 import 路徑前端代碼改了不生效開發(fā)服務(wù)未正確啟動(dòng)或?yàn)g覽器緩存強(qiáng)制刷新或重啟 npm run dev清緩存確認(rèn)控制臺(tái)編譯成功SpringBoot 3 項(xiàng)目報(bào) javax 包不存在JDK 8 代碼在 JDK 17 運(yùn)行查看異常堆棧使用 JDK 17 重編譯或降級(jí)到 SpringBoot 2.7排查技巧任何接口行為異常先不猜直接看后端控制臺(tái)日志。SpringBoot 默認(rèn)日志已經(jīng)足夠定位 80% 的啟動(dòng)問題和接口異常。如果日志沒輸出 SQL再看 MyBatis Plus 是否開了 SQL 日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl12. 最佳實(shí)踐與合規(guī)提醒12.1 工程化管理建議第一第一次跑通項(xiàng)目時(shí)不要追求修改很多功能。先把后端啟動(dòng)、前端啟動(dòng)、登錄、電影列表、詳情頁、后臺(tái)管理這幾條主鏈路走通。主鏈路沒問題后再去改功能這能避免把環(huán)境問題和代碼問題混在一起。第二保留一套最小可運(yùn)行配置。數(shù)據(jù)庫腳本、后端配置、前端 .env 文件、README 都要放進(jìn)版本管理。別人 Clone 項(xiàng)目后在 10 分鐘內(nèi)能啟動(dòng)這個(gè)項(xiàng)目才是可交付的。第三模型和配置文件分離。不要把 upload 目錄和建議配置文件寫死在代碼里用 application-dev.yml、application-prod.yml 做環(huán)境隔離更合理。第四批量導(dǎo)入要做前置校驗(yàn)。批量上架電影前先校驗(yàn)完整表格數(shù)據(jù)再入庫而不是逐條插入時(shí)才發(fā)現(xiàn)問題。第五接口服務(wù)要限制訪問范圍。生產(chǎn)環(huán)境不要把后端端口直接暴露到公網(wǎng)使用 Nginx 做反向代理只開放 80/443并對(duì)上傳接口做大小和類型限制。12.2 授權(quán)與合規(guī)邊界電影網(wǎng)站系統(tǒng)涉及影片、海報(bào)、預(yù)告片或評(píng)論內(nèi)容時(shí)務(wù)必確認(rèn)授權(quán)情況演示和本地學(xué)習(xí)使用官方公開的示例圖片、海報(bào)和個(gè)人拍攝素材。不把爬取的收費(fèi)視頻、未授權(quán)影視資源、盜版影片鏈接集成進(jìn)系統(tǒng)。如果系統(tǒng)面向公眾開放需要在用戶協(xié)議中明確禁止違法內(nèi)容并保留內(nèi)容審核能力。如果系統(tǒng)采集用戶登錄信息或上傳文件要求遵循數(shù)據(jù)安全和個(gè)人信息保護(hù)要求測試階段使用虛擬數(shù)據(jù)。如果后續(xù)接入真實(shí)在線視頻要優(yōu)先選擇有正規(guī)版權(quán)的內(nèi)容源。這類合規(guī)提醒不是套話。很多畢業(yè)設(shè)計(jì)項(xiàng)目因?yàn)檠菔疽曨l或電影素材使用了未授權(quán)資源在公開演示和簡歷展示階段遇到不必要的風(fēng)險(xiǎn)。建議把所有圖片、封面換成程序生成的占位圖或自己有權(quán)限的素材代碼里不留下侵權(quán)鏈接。12.3 如何做二次開發(fā)如果你拿到這個(gè)項(xiàng)目的源碼想把它改成自己的畢設(shè)或練手項(xiàng)目建議按這個(gè)順序改換項(xiàng)目名和數(shù)據(jù)庫名。改系統(tǒng) Logo 和頁面標(biāo)題刪除多余測試數(shù)據(jù)。增加一個(gè)與電影業(yè)務(wù)相關(guān)的小亮點(diǎn)功能比如電影榜單、每日推薦、詞云標(biāo)簽避免和原項(xiàng)目完全一致。把自己實(shí)現(xiàn)的功能整理成 README 中的技術(shù)說明減少答辯時(shí)講不清的點(diǎn)。13. 總結(jié)與下一步SpringBoot Vue3 的前后端分離電影網(wǎng)站系統(tǒng)適合用四個(gè)關(guān)鍵詞概括雙端分離、數(shù)據(jù)管理、鑒權(quán)聯(lián)調(diào)、工程落地。它不像算法項(xiàng)目那樣需要很高的數(shù)學(xué)基礎(chǔ)也不像 AI 推理項(xiàng)目那樣依賴顯卡只要能理清表關(guān)系、接口約定和請(qǐng)求鏈路就擁有了一個(gè)可以不斷擴(kuò)展的 Web 項(xiàng)目底座。拿到項(xiàng)目后最先做的事不是看每一行代碼而是先跑通兩條鏈路。第一用戶端首頁到電影列表到登錄到收藏第二管理員登錄、新增電影、輪播圖配置、用戶列表。這兩條鏈路覆蓋了 JWT 鑒權(quán)、分頁查詢、文件上傳、權(quán)限判斷、數(shù)據(jù)關(guān)聯(lián)這些 SpringBoot 和 Vue3 方向的高頻考點(diǎn)。最容易踩的坑集中在三個(gè)方面數(shù)據(jù)庫連接配置錯(cuò)誤、SpringBoot 與 JDK 版本不匹配、前端代理與后端跨域配置沖突。這三個(gè)問題在環(huán)境檢查階段提前確認(rèn)后面聯(lián)調(diào)可以省下很多時(shí)間。下一步可以按業(yè)務(wù)需求擴(kuò)展三塊內(nèi)容一是接入 OSS 或本地對(duì)象存儲(chǔ)解決封面和預(yù)告片文件的長期保存問題二是引入 Redis 緩存首頁熱點(diǎn)數(shù)據(jù)和登錄 token逐步脫離“畢設(shè)感”三是增加評(píng)論點(diǎn)贊、觀影記錄、每日推薦等交互功能讓系統(tǒng)的完整度更高。本文適合先收藏實(shí)際開發(fā)時(shí)對(duì)照功能模塊、接口設(shè)計(jì)表和問題排查清單來用。