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