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