每到畢業(yè)設計或者課程設計截止前的那個月我收到最多的私信就一句話“有沒有一個 SpringBoot Vue 的項目數(shù)據(jù)庫、后端、前端都配好拿到手就能跑的那種” 說實話市面上流傳最廣、被用得最多的正是“學院個人信息管理系統(tǒng)”這一類——SpringBoot 提供后端接口Vue 寫管理頁面MySQL 負責數(shù)據(jù)存儲幾乎成了畢設和課設的標準模板。這篇就針對這套源碼做一次完整拆解內容包括它到底有哪些功能模塊、數(shù)據(jù)庫大概長什么樣、從零開始怎么一步步把前端后端數(shù)據(jù)庫全部跑通以及我在本地調試這類項目時踩過的那些真實坑。不管你是準備拿它當畢設、課設還是單純想學習前后端分離項目的標準寫法照著這篇走能省下不少時間。1. 項目整體設計與技術棧選型邏輯1.1 為什么偏偏是 SpringBoot Vue MySQL很多人在選題時會糾結“我這個系統(tǒng)用什么技術好”。以學院個人信息管理系統(tǒng)這種典型后臺管理場景來說SpringBoot Vue MySQL 不只是流行而是它確實匹配這類業(yè)務的特點。先說為什么不是更老的 JSP Servlet。以前的傳統(tǒng)項目里Java 代碼和 HTML 混在一起業(yè)務邏輯稍微復雜一點改一個頁面可能要翻遍幾十個 JSP 文件前后端分工也分不清楚。后來 SSMSpring SpringMVC MyBatis雖然把分層做好了一些但 XML 配置一堆光配置文件就能勸退新手。SpringBoot 的核心價值在于“約定大于配置”。它把原來 SSM 里復雜的 XML 配置收斂成了application.yml幾個關鍵項內嵌 Tomcat最后java -jar就能啟動。對信息管理系統(tǒng)這種 CRUD 比重很大的項目來說SpringBoot 的自動配置和生態(tài)支持能省掉大量樣板代碼。前端這邊Vue 的組件化開發(fā)方式和后臺管理頁面的需求天然契合——左側菜單、頂部導航、表格、表單、彈窗都能拆成組件復用。Vue 的上手曲線也比較平緩只要會 JavaScript 基礎看幾天就能開始寫頁面。MySQL 就更不用說了免費、跨平臺、資料多安裝也是傻瓜式。有人會問“為什么不加 Redis 做緩存為什么要用微服務架構”對這種規(guī)模的系統(tǒng)來說沒有必要。個人信息管理系統(tǒng)的核心是登錄認證、增刪改查、分頁搜索單庫單表完全夠用強行引入復雜技術反而增加出問題的概率答辯時還可能被問住。技術選型不是越炫越好而是匹配業(yè)務規(guī)模能穩(wěn)定交工才是首要目標。1.2 系統(tǒng)功能模塊拆解這類學院個人信息管理系統(tǒng)往下拆就是一套標準的后臺管理模板。我順手整理一下典型模塊方便你對號入座不同源碼的命名可能不同但思路是一樣的登錄與權限模塊區(qū)分管理員、教師、學生三種角色不同角色登錄后看到不同菜單、執(zhí)行不同操作。核心點在于用戶表、角色字段和路由守衛(wèi)。學生信息管理新增、編輯、刪除學生檔案按學號、姓名、專業(yè)等關鍵字模糊查詢分頁展示列表。教師信息管理結構和學生管理類似管理教師工號、職稱、所屬院系、聯(lián)系方式等。院系與專業(yè)管理維護學院、系部、專業(yè)的層級關系給其他模塊提供下拉選項。課程管理可選課程名稱、學分、任課教師以及課程與教師、選課學生之間的關聯(lián)。公告管理后臺發(fā)布學院公告前端在首頁或公告列表展示。個人信息中心登錄用戶修改自己的基礎資料、修改密碼。把模塊再往底層拆幾乎都是同一套操作表格展示、表單提交、刪除確認、條件查詢、分頁。這也是為什么這類項目適合用來學習它把一個后臺管理系統(tǒng)最通用、最典型的開發(fā)套路完整演示了一遍。1.3 數(shù)據(jù)庫表結構與設計思路數(shù)據(jù)庫設計是整個項目的地基。我以最常見的表結構為例說明設計邏輯。用戶登錄相關的數(shù)據(jù)會單獨建一張sys_user表存用戶ID、賬號、密碼、角色、狀態(tài)字段。為什么要單獨拆出來因為登錄信息和業(yè)務信息比如學生姓名、住址的更新頻率不一樣賬號密碼屬于高安全敏感數(shù)據(jù)把它和業(yè)務表分開在做權限控制、修改密碼時能避免動到其他字段。業(yè)務表一般包括tb_student學生信息表學號、姓名、性別、出生日期、籍貫、手機號、所屬專業(yè)、班級、入學年份。tb_teacher教師信息表工號、姓名、性別、職稱、學歷、所屬院系、手機號。tb_department院系列表院系ID、院系名稱、院系編碼。tb_course課程表課程ID、課程名稱、學分、開課院系、任課教師ID。關聯(lián)關系上tb_student.department_id指向tb_department.idtb_course.teacher_id指向tb_teacher.id。這種外鍵關聯(lián)在查詢時通過 JOIN 或 MyBatis 關聯(lián)查詢拿完整信息。設計要點是“業(yè)務表盡量不存冗余名稱字段只存關聯(lián)ID”否則以后院系改名所有學生數(shù)據(jù)里的舊名稱都成了臟數(shù)據(jù)。還有個安全細節(jié)必須提密碼字段絕對不要存明文。我看過不少課程設計源碼sys_user表里直接明文密碼作為演示沒問題但如果是畢業(yè)設計答辯老師問一句“項目里密碼怎么存的為什么這么做”你總不能說“為了方便測試”。正確做法是用 BCrypt 加密或者至少 MD5 鹽。這類項目源碼里通常會帶一個 SQL 初始化腳本里面預置了管理員賬號導入數(shù)據(jù)庫后默認密碼是加密后的值注意區(qū)分。2. 環(huán)境準備與版本匹配啟動前先解決四個關鍵問題2.1 JDK 和 Maven 版本選擇最常見的第一道坎你會發(fā)現(xiàn)很多源碼在本地跑不起來不是代碼問題而是環(huán)境版本不對。最典型的就是 SpringBoot 版本和 JDK 版本不匹配。SpringBoot 2.x 要求 JDK 8 及以上而 SpringBoot 3.x 強制要求 JDK 17。如果你下載的源碼是 SpringBoot 2.x 系列但電腦上裝的是 JDK 17 甚至 JDK 21啟動時大概率會報類似Unsupported class file major version或java.lang.NoSuchMethodError的錯。反過來也常見你裝了新版本 JDK又想強行把項目的 SpringBoot 從 2.x 升級到 3.x結果導致各種依賴不兼容改到懷疑人生。我的建議很務實如果是拿這個項目交作業(yè)、做畢設不要追求環(huán)境最新直接用 JDK 8 Maven 3.6.3 最穩(wěn)妥這套組合能覆蓋絕大多數(shù) SpringBoot 2.x 的老項目。Maven 這塊裝完以后第一件事不是建項目而是改conf/settings.xml把中央倉庫換成阿里云鏡像。否則第一次執(zhí)行mvn clean install時下載 Spring 全家桶的依賴可能等上半小時還超時。鏡像配置很簡單找到mirrors標簽補充一段直接把倉庫地址指向https://maven.aliyun.com/repository/public就行。2.2 Node.js 與 Vue 版本對應先分清是 Vue2 還是 Vue3前端啟動前先打開前端目錄下的package.json看dependencies里vue字段的版本號版本號是2.x.x這是 Vue2 項目建議用 Node.js 14 到 16 版本。版本號是3.x.x這是 Vue3 項目建議用 Node.js 16 到 18 版本。Node 版本太高或太低都會引發(fā)問題。尤其是老項目用到的node-sass在 Node 17 環(huán)境下經常編譯失敗報錯信息五花八門最后定位到都是環(huán)境不兼容。所以我建議機器上裝一個 nvmNode Version Manager隨時切換 Node 版本。這是投入產出比極高的工具一個 nvm 能省下無數(shù)重裝 Node 的時間。還有 npm 下載依賴的問題。國內直接 npm install 大概率卡在reify階段或者報網絡超時這不是項目的問題是 registry 源的問題。執(zhí)行一行命令切到淘寶鏡像npm config set registry https://registry.npmmirror.com設置完后再執(zhí)行npm install速度會快得讓你懷疑人生。2.3 MySQL 安裝與初始化密碼、字符集、時區(qū)三大坑數(shù)據(jù)庫部分我用過 5.7 和 8.0 兩個大版本對這類項目來說都能跑。真正坑人的是細節(jié)。第一個坑MySQL 8.0 默認的密碼加密規(guī)則是caching_sha2_password如果你用的數(shù)據(jù)庫驅動版本偏老連接時會報Public Key Retrieval is not allowed。解決辦法有兩個要么換新版本的 mysql-connector-java要么在連接串上顯式加上allowPublicKeyRetrievaltrue。第二個坑時區(qū)。后端啟動后連接數(shù)據(jù)庫如果報The server time zone value ?D1ú±ê×?ê±?? is unrecognized大概率是連接串沒指定時區(qū)。URL 里加上serverTimezoneAsia/Shanghai就解決了。第三個坑建庫和建表時字符集。很多老 SQL 腳本是不帶建庫語句的需要你手動創(chuàng)建數(shù)據(jù)庫。如果數(shù)據(jù)庫默認字符集不是 utf8mb4中文字段能插進去但是查詢結果有可能變成問號或者亂碼。穩(wěn)妥做法是建庫時指定CREATE DATABASE IF NOT EXISTS school_info DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;在數(shù)據(jù)庫初始化階段把這些底子打好后面啟動項目的體驗會順暢很多。3. 源碼運行全流程從解壓到頁面出現(xiàn)的實操記錄3.1 后端啟動正確姿勢拿到源碼后目錄通常分成兩大部分一個后端目錄一個前端目錄。優(yōu)先啟動后端因為前端頁面登錄時依賴后端接口返回數(shù)據(jù)。打開 IDEA選擇File - Open選中后端目錄等待 Maven 自動解析依賴。首次加載時間取決于網絡速度和機器性能正常情況 3 到 10 分鐘。如果 IDEA 識別不了項目檢查是不是把 Maven 項目的 pom.xml 文件正確導入了注意別手滑選了“當作普通文件夾打開”。依賴加載完成后找到src/main/resources/application.yml重點改三塊內容spring: datasource: url: jdbc:mysql://localhost:3306/school_info?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的數(shù)據(jù)庫密碼數(shù)據(jù)庫用戶名密碼一定要改成你本地 MySQL 的實際賬號。然后確認數(shù)據(jù)庫是否已經建好并導入 SQL。一般源碼目錄里會有一個sql/或db/文件夾里面放著.sql文件。用 Navicat、MySQL Workbench 或者命令行執(zhí)行mysql -u root -p school_info.sql或者進入 MySQL 后執(zhí)行source命令導入。一切就緒后找到啟動類類名通常帶Application后綴比如SchoolInfoApplication.java。右鍵運行看到控制臺輸出Tomcat started on port(s): 8080后端就起來了。這里有一個實測的經驗IDEA 運行時如果報 Lombok 相關的錯誤比如java: package lombok does not exist先確認你有沒有安裝 Lombok 插件并且檢查Settings - Build, Execution, Deployment - Compiler - Annotation Processors是否勾選了Enable annotation processing。這個問題對新手極其常見。3.2 前端啟動正確姿勢前端目錄打開后第一步同樣是看package.json的scripts字段確認啟動命令。Vue CLI 項目通常是npm run serveVite 項目通常也是類似寫法。安裝依賴npm install這一步如果報錯不要急著反復重試。先看報錯日志的最后幾行定位是網絡問題、node-sass 編譯問題還是依賴版本沖突問題。把 node_modules 目錄刪除換 Node 版本后再試往往比繼續(xù)在當前環(huán)境下硬扛更有效。依賴裝完后啟動npm run serve控制臺會顯示本地訪問地址常見的是http://localhost:8080或者http://localhost:8081。瀏覽器打開后能看到登錄頁面就算前端 OK。如果頁面打開是空白的或者控制臺一堆報錯大概率是依賴沒裝全或者 Node 版本不匹配。這里我必須提醒一個端口沖突的問題。很多后端項目默認端口是 8080前端 devServer 默認也是 8080。如果兩個同時啟動必然有一個起不來。解決辦法是改后端端口推薦在application.yml里加server: port: 9090或者改前端 devServer 端口Vue CLI 在vue.config.js中配置devServer.port。這類項目的常規(guī)做法是前端 8080后端 9090 或者 8081具體看你現(xiàn)有源碼的配置。3.3 前后端連通從登錄請求驗證完整鏈路前后端都啟動后打開前端登錄頁輸入 SQL 腳本里預置的賬號密碼。常見默認賬號是admin / 123456但也有的源碼用admin / admin最準確的做法是去 SQL 文件里搜INSERT INTO sys_user看初始數(shù)據(jù)。點擊登錄觀察瀏覽器開發(fā)者工具F12的 Network 面板請求狀態(tài) 200并且返回了 token 或者登錄成功標識說明全套鏈路已經通了。請求 404說明前端請求的接口路徑跟后端暴露的路徑不一致。檢查前端 API 封裝文件里的baseURL和后端控制器的RequestMapping。請求 500說明后端代碼或者數(shù)據(jù)庫層面掛了切到后端控制臺看堆棧信息定位具體報錯行。請求 CORS error說明跨域配置沒生效需要檢查后端是否有跨域過濾器或者前端是否配置了代理轉發(fā)。這個排查順序很重要先看狀態(tài)碼再看請求路徑最后看后端日志一層層縮小范圍比瞎猜高效得多。這也是我做任何前后端聯(lián)調都堅持的排查習慣。4. 核心業(yè)務實現(xiàn)解析登錄認證、分頁查詢與數(shù)據(jù)規(guī)范4.1 登錄認證與權限校驗是怎么串起來的以 JWT 方案為例這類源碼的登錄流程一般是用戶在前端提交賬號密碼后端收到后先查sys_user表校驗密碼是否正確。密碼匹配后后端生成一個 JWT 字符串返回給前端。前端把 token 存進 localStorage 或者 sessionStorage之后每次發(fā)請求都在請求頭里帶上Authorization: Bearer token。后端有一個攔截器或者過濾器負責統(tǒng)一鑒權。它做的事很簡單檢查請求路徑是否需要登錄如果需要就從 token 里解析用戶信息。解析成功就放行解析失敗直接返回 401 或者業(yè)務錯誤碼。這樣一個閉環(huán)的好處是哪怕有人繞過前端頁面直接用 Postman 調接口沒有合法 token 也拿不到數(shù)據(jù)。前端這邊Vue 路由配合beforeEach導航守衛(wèi)做訪問控制。進入頁面前判斷有沒有 token沒有就重定向到登錄頁有 token 再根據(jù)角色字段判斷能不能進對應的管理菜單。管理員能看到用戶管理、教師管理、院系管理這些敏感功能普通學生登錄后只能看到自己的基本信息和公告這種菜單級別的權限控制是這類項目的標配。4.2 列表分頁與條件搜索后臺管理系統(tǒng)的靈魂后臺管理系統(tǒng)百分之八十的操作都是看表格、查數(shù)據(jù)、改數(shù)據(jù)。分頁接口的設計自然就成了核心。后端接口一般接收這幾個參數(shù)pageNum當前頁、pageSize每頁條數(shù)、keyword搜索關鍵字、departmentId之類的篩選條件。如果用 MyBatis-Plus分頁查詢可以簡化為PageUser page new Page(pageNum, pageSize); LambdaQueryWrapperStudent wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(keyword), Student::getName, keyword); PageStudent result studentMapper.selectPage(page, wrapper);返回給前端的 JSON 結構通常是{ records: [{ id: 1, name: 張三, major: 計算機科學與技術 }], total: 86, current: 1, size: 10 }前端拿到records渲染表格拿到total用來計算分頁組件的總頁數(shù)。搜索功能的實現(xiàn)也很直觀搜索框綁定的關鍵字變量在查詢按鈕點擊后拼進請求參數(shù)后端用like或者concat實現(xiàn)模糊匹配。我見過很多新手在寫分頁時后端只返回了當前頁的數(shù)據(jù)沒返回total導致前端分頁組件永遠只顯示一頁。這是很容易被忽略的前后端聯(lián)調細節(jié)如果你改項目時發(fā)現(xiàn)分頁數(shù)字不對先確認接口返回結構里有沒有total字段。4.3 統(tǒng)一返回結果與 axios 封裝能“直接跑”的關鍵原因為什么要強調統(tǒng)一響應結構因為前后端分離項目里前后端是兩撥人在不同時間開發(fā)的如果沒有約定后端返回data、message、status三個字段前端又期待另一種字段名聯(lián)調時全是溝通成本。這類項目通用的做法是后端封裝一個Result類public class ResultT { private Integer code; private String msg; private T data; }所有控制器方法都返回Result.success(data)或Result.error(參數(shù)錯誤)。前端 axios 請求封裝里也統(tǒng)一處理響應res.code 200業(yè)務成功把res.data直接丟給頁面。res.code 401未登錄或 token 過期跳轉登錄頁。res.code 500后端異常彈出錯誤提示。這樣做的好處是頁面組件不需要在每次請求時重復寫錯誤處理邏輯這也是源碼能夠“開箱即用”的原因之一。因為骨架已經把所有網絡請求的公共邏輯都定好了。還有一個容易翻車的點跨域。開發(fā)階段最常見的方案是 Vue 的 devServer 代理在vue.config.js里配置devServer: { proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } }頁面里發(fā)的請求寫/api/login經過代理轉發(fā)到后端的http://localhost:9090/api/login。這種方式比后端配置 CORS 更簡單也更貼近生產環(huán)境的部署方式。5. 踩坑實錄為什么到了你的電腦上還是跑不起來5.1 數(shù)據(jù)庫連接類問題速查這一節(jié)必須寫因為“跑不起來”的原因里數(shù)據(jù)庫相關的問題能占一半以上。我把最常見的幾種情況整理成了下面的表報錯信息大概率原因解決方法Cant connect to MySQL server (10061)MySQL 服務沒啟動Windows 服務里啟動 MySQL或者命令行net start mysqlAccess denied for user rootlocalhost密碼錯誤或賬號權限不足核對application.yml里的用戶名密碼Unknown database xxx庫名沒對上檢查建庫腳本和連接串里的庫名是否一致Public Key Retrieval is not allowedMySQL 8.0 加密規(guī)則問題連接串加allowPublicKeyRetrievaltrueTable xxx doesnt existSQL 腳本沒導入成功重新完整導入 SQL確認沒有中途報錯The server time zone value is unrecognized連接串缺時區(qū)參數(shù)URL 加serverTimezoneAsia/Shanghai5.2 前端依賴安裝與啟動問題前端部分的坑比后端更隱蔽因為 Node.js 生態(tài)的版本兼容性遠比 Java 世界復雜。我舉幾個實際遇到過的例子npm install 裝到一半卡死。這不是項目問題絕大多數(shù)是網絡問題。先切淘寶鏡像再試一次如果還不行就把node_modules整個刪除刪掉package-lock.json如果有重新 install。如果你的項目里有node-sass除了換 Node 版本幾乎沒有更治本的方案畢竟那個包編譯失敗是真的難受。npm run serve 報Failed to load tsconfig vue/tsconfig/tsconfig.web.json。這類錯誤常見于 Vue3 TypeScript 模板項目。原因是項目引用了vue/tsconfig這個包但安裝依賴時不完整或者項目移動后目錄結構變了。解決方式是重新完整安裝依賴確認vue/tsconfig出現(xiàn)在package.json的devDependencies中而不是只存在某個中間態(tài)。如果依然加載不到檢查tsconfig里extends的路徑是否和 node_modules 中的實際路徑一致。端口被占用。啟動前端時提示Port 8080 was already in use。在命令行執(zhí)行netstat -ano | findstr 8080找到占用進程的 PID再到任務管理器結束它。更省事的方式是直接改端口不過改了前端端口就要確認代理配置也跟著改否則頁面打開了接口也訪問不到。5.3 后端啟動失敗從“綠色按鈕”到“紅色報錯”IDEA 里點綠色運行按鈕三秒鐘后紅色報錯這種體驗很打擊人。后端啟動失敗的根因其實就幾類。Maven 依賴沒下載完。觀察 IDEA 右下角有沒有進度條或者左側 Maven 面板里有沒有紅色波浪線的依賴。如果是因為網絡問題沒拉完去settings.xml確認鏡像配好了然后執(zhí)行mvn clean install等 BUILD SUCCESS 再啟動。Lombok 處理不了。前面提過java: package lombok does not exist在 IDEA 2020 之后的版本里經常出現(xiàn)原因就是注釋處理器沒開啟。這個配置在Settings - Build, Execution, Deployment - Compiler - Annotation Processors勾選后可以順便執(zhí)行一次Build - Rebuild Project。Java 版本不匹配。這個我單獨強調一下因為“SpringBoot 版本太高”和“JDK 版本太高”是我也反復踩過的坑。SpringBoot 3.x 用 JDK 17如果你本地只有 JDK 8啟動時一定報錯反過來老項目用 JDK 8 但裝了高版本 JDK 也會報錯?？磮箦e信息最前面的幾行通常就會提示版本問題別一上來就懷疑是代碼邏輯。5.4 “可直接運行”的真正含義標題里寫著“可直接運行”但說句實在話任何源碼都省不了環(huán)境準備這一步。SQL 要導入連接配置要改依賴要下載前后端要分別啟動這些流程缺一不可?！翱芍苯舆\行”真正省掉的是“從零開始寫代碼”的工作量而不是“準備運行環(huán)境”的工作量。所以拿到項目以后正確的順序永遠是先讀一遍 README 文件然后按順序執(zhí)行建庫導數(shù)據(jù) - 改配置 - 啟動后端 - 啟動前端。很多人在第一步跳過了 README直接啟動然后被各種報錯打回原形回頭又來問為什么跑不通。經驗之談是如果源碼目錄里都沒有 README先把項目結構摸一遍?？辞迥男┦呛蠖四夸?、哪些是前端目錄、SQL 文件在哪再動手。這個過程花不了十分鐘但能幫你提前避開大半問題。6. 二次開發(fā)從“能跑”到“能答辯、能寫進簡歷”6.1 低成本高回報的功能增強方向很多同學拿到這種源碼跑通以后任務就結束了。但實際上一個跑通的基礎模板只是合格線要讓項目在答辯或者簡歷中有亮點有幾個改動方向值得做第一個是給登錄接口加驗證碼。實現(xiàn)一個簡單的圖片驗證碼在 SpringBoot 里并不難用 Hutool 工具類或者 Google 的 Kaptcha 都能快速集成。這個功能看起來小但答辯時屬于“安全設計”的亮點而且面試時能講出一套完整的驗證碼校驗流程。第二個是操作日志。做一個sys_operation_log表用 AOP 切面記錄誰在什么時間做了什么操作比如“管理員 admin 修改了學生張三的基本信息”。這個功能幾乎所有后臺系統(tǒng)都需要代碼量也不大但能體現(xiàn)出你對系統(tǒng)可維護性的思考。第三個是 Excel 導入導出。對管理系統(tǒng)來說批量導入學生信息、導出成績單是非常常見的需求用 EasyExcel 庫封裝一個導入導出工具類頁面放兩個按鈕。這一塊只要實現(xiàn)過一遍以后簡歷上寫“具備 Excel 導入導出開發(fā)經驗”都不心虛。第四個是密碼強度與個人信息修改。默認項目里用戶中心往往只有一個修改密碼入口你可以擴展成完善個人資料、更換頭像等功能既能增加頁面數(shù)量也能讓模塊更完整。6.2 從本地運行到有條理地交付把項目跑起來只是第一步真正拉開差距的是你有沒有把它整理成一份像樣的交付物。我見過太多人的畢業(yè)設計就是幾個文件夾堆在一起沒有 README沒有數(shù)據(jù)庫腳本說明沒有端口說明答辯老師打開電腦看的時候一臉茫然。建議拿到源碼后按這個思路重新整理一遍新建一個項目總目錄里面分backend、frontend、sql、docs四個子目錄README 里寫清楚項目簡介、技術棧、環(huán)境要求、啟動步驟、默認賬號、接口說明。有 Git 的話順手提交到代碼倉庫每次改動都有歷史記錄。如果想把項目部署到遠程服務器上展示可以用 Docker 把前后端分別打成鏡像后端容器和前端容器通過端口映射跑起來。注意生產環(huán)境里前端一般把打包后的文件交給 Nginx 托管后端接口地址通過 Nginx 的反向代理轉發(fā)跨域問題也一并解決。這一步做完你的項目就完成了從“課設作品”到“完整系統(tǒng)”的升級。7. 寫在最后的個人體會這類學院個人信息管理系統(tǒng)的源碼我已經接觸過很多份自己也帶過不少同學跑通、改造。我最深的感受是先讓它跑起來再讀懂它最后才談改造。很多同學第一步就卡在環(huán)境配置上然后開始懷疑代碼有問題其實大部分時候代碼沒毛病是你的環(huán)境跟它不對付。所以拿到項目后不要著急改業(yè)務邏輯先把數(shù)據(jù)庫導進去把后端啟動起來再把前端啟動起來等登錄成功的那一刻你就擁有了一個可以自由折騰的基地。在這個基礎上再加功能、再調整樣式心里都有底。如果你準備拿這個項目做畢設建議多花點時間把登錄鑒權和分頁查詢這兩條鏈路徹底看明白因為答辯的時候老師最愛問的就是這兩塊。最后祝所有趕工期的朋友都能順利跑通、順利答辯。