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