SpringBoot2 Vue3 MyBatis-Plus MySQL8.0 這套技術(shù)棧過去兩年幾乎成了Java Web教學(xué)管理系統(tǒng)的“標(biāo)準(zhǔn)答案”。項目源碼我前后看過不下二十套大多數(shù)的問題不是功能不夠而是代碼組織太亂根本沒法教學(xué)。這套系統(tǒng)源碼算是我見到的少數(shù)把“教學(xué)屬性”和“工程規(guī)范”平衡得不錯的項目今天就從技術(shù)選型、代碼結(jié)構(gòu)、前后端聯(lián)調(diào)和部署落地四個維度拆一拆講清楚這套系統(tǒng)值不值得借鑒以及你自己要搭一套類似的應(yīng)該注意什么。1. 為什么這套技術(shù)棧會成為教學(xué)管理系統(tǒng)的主流選擇先說結(jié)論SpringBoot2 Vue3 MyBatis-Plus MySQL8.0不是性能最優(yōu)解也不是技術(shù)最前沿的組合但它是教學(xué)場景下投入產(chǎn)出比最高的一套方案。我見過很多學(xué)校和企業(yè)培訓(xùn)項目用SSHStruts2 Spring Hibernate或者JSP Servlet的老框架代碼能跑但是學(xué)生看完之后完全不知道外面企業(yè)實際在用什么。1.1 前后端分離是教學(xué)系統(tǒng)最該有的姿態(tài)傳統(tǒng)的JSP項目前端頁面嵌在后端工程里改一個按鈕樣式都要重啟Tomcat。這套系統(tǒng)采用Vue3 SpringBoot的前后端完全分離架構(gòu)前端是獨立的工程通過HTTP接口和后端通信這一點的教學(xué)價值非常大——它讓學(xué)生從一開始就建立起“接口即契約”的認(rèn)知。前端工程用Vite構(gòu)建開發(fā)環(huán)境下通過代理轉(zhuǎn)發(fā)解決跨域問題生產(chǎn)環(huán)境通過Nginx反向代理統(tǒng)一入口。這種模式是目前中小型團隊最標(biāo)準(zhǔn)的開發(fā)協(xié)作方式前端同學(xué)只管頁面和交互后端同學(xué)只管接口和數(shù)據(jù)處理兩邊通過Swagger或者YApi維護接口文檔互不阻塞。1.2 MyBatis-Plus把數(shù)據(jù)訪問層的教學(xué)成本降到了最低如果用的是原生MyBatis學(xué)生光寫Mapper XML就要崩潰尤其是多表關(guān)聯(lián)查詢和動態(tài)SQL能直接勸退一批初學(xué)者。MyBatis-Plus的核心價值在于單表CRUD完全不用寫SQL內(nèi)置的BaseMapper提供了基礎(chǔ)的增刪改查方法分頁查詢用Page對象一封裝就行。這套系統(tǒng)的用戶表、角色表、課程表這類基礎(chǔ)實體的數(shù)據(jù)訪問層代碼量比原生MyBatis少了一半以上。學(xué)生在理解了ORM基本思想后可以直接把精力放在業(yè)務(wù)邏輯上而不是糾結(jié)SQL怎么拼接。1.3 MySQL8.0帶來的新特性值得在教學(xué)中重點展示MySQL5.7在不少老項目中還在用但8.0的窗口函數(shù)、公用表表達式CTE、默認(rèn)字符集utf8mb4這些特性在報表統(tǒng)計類的教學(xué)模塊中非常實用。這套系統(tǒng)選擇MySQL8.0不是趕時髦而是課程管理、成績分析這類模塊確實用得上。舉個例子成績排名功能如果用5.7的寫法得用用戶變量模擬行號SQL寫出來又長又繞。8.0里直接一個ROW_NUMBER() OVER (PARTITION BY course_id ORDER BY score DESC)就搞定了語義清晰學(xué)生一看就懂。2. 后端代碼結(jié)構(gòu)拆解SpringBoot2工程是怎么組織起來的拿到這套源碼的第一件事建議先看包結(jié)構(gòu)。好的包結(jié)構(gòu)本身就是一份教學(xué)文檔它告訴學(xué)習(xí)者一個企業(yè)級項目應(yīng)該怎么劃分職責(zé)邊界。2.1 分層次的包結(jié)構(gòu)是后端代碼的第一課這套系統(tǒng)的后端包結(jié)構(gòu)遵循了標(biāo)準(zhǔn)的三層架構(gòu) 領(lǐng)域劃分com.example.teachingsystem ├── controller # 控制層接收請求、參數(shù)校驗、返回結(jié)果 ├── service # 業(yè)務(wù)層核心業(yè)務(wù)邏輯 │ ├── impl # 業(yè)務(wù)實現(xiàn)類 │ └── ... ├── mapper # 數(shù)據(jù)訪問層繼承BaseMapper的接口 ├── entity # 實體類對應(yīng)數(shù)據(jù)庫表 ├── dto # 數(shù)據(jù)傳輸對象接口入?yún)⒑统鰠?├── vo # 視圖對象前端頁面展示數(shù)據(jù) ├── config # 配置類攔截器、跨域、Swagger等 ├── common # 通用類統(tǒng)一返回結(jié)果、異常處理、工具類 └── TeachingApplication.java # SpringBoot啟動類這種結(jié)構(gòu)看起來簡單但很多自學(xué)框架的人就是栽在這上面。有人把業(yè)務(wù)邏輯全寫在Controller里一個接口方法幾百行有人實體類和DTO混用數(shù)據(jù)庫字段直接暴露給前端。這套系統(tǒng)在這一點上做了良好的示范Controller只做參數(shù)接收和結(jié)果包裝業(yè)務(wù)邏輯下沉到Service層數(shù)據(jù)訪問統(tǒng)一走Mapper。2.2 統(tǒng)一返回結(jié)果和全局異常處理這兩個類值得單獨拎出來講前后端分離的項目最忌諱的就是每個接口返回的數(shù)據(jù)格式都不一樣。前端拿到的數(shù)據(jù)有時候是{code: 0, data: {...}}有時候是{success: true, result: [...]}聯(lián)調(diào)的時候光對齊字段就能耗掉半天。這套系統(tǒng)定義了一個統(tǒng)一的Result類結(jié)構(gòu)固定為public class ResultT { private Integer code; // 狀態(tài)碼200成功500失敗 private String message; // 提示信息 private T data; // 返回數(shù)據(jù) }所有Controller的返回值都包裝成這個對象前端在封裝Axios請求的時候只需要在攔截器里統(tǒng)一處理一次就能拿到真正需要的數(shù)據(jù)。這種約定雖然簡單但是能避免大量聯(lián)調(diào)時的低級溝通成本。全局異常處理用的是RestControllerAdvice注解業(yè)務(wù)異常、參數(shù)校驗異常、系統(tǒng)異常分別處理返回對應(yīng)的錯誤碼和提示信息。沒有這個類的話后端一旦報錯前端拿到的就是一堆看不懂的堆棧信息用戶直接看到500頁面體驗非常糟糕。2.3 權(quán)限設(shè)計基于Spring Security JWT的登錄態(tài)管理教學(xué)管理系統(tǒng)的權(quán)限模型一般分三種角色管理員、教師、學(xué)生。這套系統(tǒng)的權(quán)限控制采用了Spring Security JWT的方案沒有用Session這一點很符合當(dāng)下前后端分離項目的實際情況。用戶登錄成功后后端生成一個JWT令牌返回給前端前端存儲在本地之后每次請求都在請求頭里帶上Authorization: Bearer token。后端通過攔截器解析令牌識別用戶身份和角色再根據(jù)角色判斷是否有權(quán)限訪問對應(yīng)的接口。JWT方案的教學(xué)意義在于學(xué)生能理解無狀態(tài)認(rèn)證的基本原理也能理解Token過期、刷新、注銷這些實際生產(chǎn)環(huán)境必須考慮的問題。我記得這套源碼里Token的過期時間設(shè)置的是兩小時還預(yù)留了刷新接口考慮得比較周全。3. 前端Vue3工程的實現(xiàn)思路與常見坑位3.1 組合式APIComposition API讓組件邏輯更集中這套系統(tǒng)的前端用的是Vue3的組合式API沒有沿襲Vue2的選項式API寫法。以課程管理頁面為例課程列表的加載、搜索條件的響應(yīng)式數(shù)據(jù)、分頁切換事件全都在setup函數(shù)中通過ref、reactive、onMounted組織在一起。相比Vue2的data、methods、computed分塊書寫這種寫法最大的好處是與某個功能相關(guān)的代碼聚在一起修改或排查問題時不用在多個選項間來回跳轉(zhuǎn)。我見過一些Vue3項目表面上是Vue3寫法還是Vue2那套選項式API——能用但完全沒有發(fā)揮出Vue3的優(yōu)勢。這套系統(tǒng)的做法值得學(xué)習(xí)新代碼統(tǒng)一用組合式API自定義業(yè)務(wù)邏輯抽到hooks目錄下比如useUserList、useCourseManage組件里只保留和模板渲染直接相關(guān)的邏輯代碼可讀性大大提升。3.2 路由守衛(wèi)和動態(tài)權(quán)限菜單的實現(xiàn)邏輯后臺管理系統(tǒng)幾乎都有一個需求不同角色登錄后看到的菜單不一樣。學(xué)生登錄看不到用戶管理教師登錄看不到選課審核。這套系統(tǒng)的實現(xiàn)路徑是用戶登錄成功后后端返回當(dāng)前用戶的角色和權(quán)限標(biāo)識前端根據(jù)權(quán)限標(biāo)識動態(tài)生成路由表用router.addRoute動態(tài)注冊路由守衛(wèi)beforeEach中判斷登錄狀態(tài)和頁面權(quán)限未登錄跳轉(zhuǎn)登錄頁無權(quán)限跳轉(zhuǎn)403頁面這個邏輯說起來簡單但實現(xiàn)上有幾個容易出問題的地方。一是刷新頁面后路由表丟失需要在App.vue的onMounted或者路由守衛(wèi)里重新拉取用戶信息并重新生成路由二是動態(tài)路由和靜態(tài)路由的合并順序必須先添加靜態(tài)路由再添加動態(tài)路由否則首次訪問動態(tài)頁面會匹配到404。3.3 Element Plus的二次封裝減少重復(fù)代碼這套系統(tǒng)用的是Element Plus組件庫但并沒有直接在頁面里堆組件而是做了二次封裝。比如分頁組件原生的Pagination組件每次使用都要寫一堆:current-page、:total、current-change綁定這套系統(tǒng)把它封裝成了Pagination組件內(nèi)部封裝好分頁參數(shù)頁面里只需要傳一個數(shù)據(jù)和回調(diào)函數(shù)template div el-table :datatableData.../el-table Pagination :totaltotal :pagequeryParams.pageNum :limitqueryParams.pageSize paginationhandleQuery / /div /template這種封裝的思路比組件本身更有教學(xué)價值。學(xué)生學(xué)完之后會意識到組件封裝不是為了炫技而是為了減少重復(fù)勞動讓頁面代碼更簡潔。4. MySQL8.0中的核心表設(shè)計與數(shù)據(jù)訪問優(yōu)化4.1 三張核心表的結(jié)構(gòu)設(shè)計與字段規(guī)范教學(xué)管理系統(tǒng)最核心的業(yè)務(wù)表是這幾張用戶表user、課程表course、選課表student_course。這套系統(tǒng)的表結(jié)構(gòu)設(shè)計比較規(guī)范幾個關(guān)鍵點值得學(xué)習(xí)用戶表的主鍵用的是bigint類型的自增id用戶名字段設(shè)置了唯一索引。密碼字段存的是BCrypt加密后的密文絕對不是明文這一點很多學(xué)生自己做項目時會忽略——他們圖省事直接把密碼明文存了這是非常嚴(yán)重的隱患。課程表和選課表之間通過外鍵邏輯關(guān)聯(lián)注意是邏輯關(guān)聯(lián)沒有物理外鍵選課表用user_id和course_id的組合字段建立了唯一索引防止學(xué)生重復(fù)選同一門課。這個設(shè)計很巧妙不用在代碼里先查再插而是直接把唯一索引當(dāng)作最后的防線數(shù)據(jù)庫層面就攔截了重復(fù)數(shù)據(jù)。所有表都包含create_time和update_time兩個時間字段MyBatis-Plus的字段填充功能可以自動賦值不需要代碼里手動set。這個細(xì)節(jié)在實際開發(fā)中非常常用幾乎每個業(yè)務(wù)表都要有記錄創(chuàng)建和修改時間的需求非常適合作為教學(xué)的入門案例。4.2 MyBatis-Plus的實用特性分頁插件和條件構(gòu)造器MyBatis-Plus的分頁插件是使用頻率最高的功能之一。這套系統(tǒng)的分頁查詢實現(xiàn)方式是public PageCourseVO getCoursePage(CourseQuery query) { PageCourseVO page new Page(query.getPageNum(), query.getPageSize()); LambdaQueryWrapperCourse wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(query.getCourseName()), Course::getCourseName, query.getCourseName()) .eq(query.getTeacherId() ! null, Course::getTeacherId, query.getTeacherId()) .orderByDesc(Course::getCreateTime); return courseMapper.selectPage(page, wrapper); }條件構(gòu)造器最方便的地方在于like和eq方法的第一個參數(shù)是布爾表達式條件不成立時這個查詢條件自動忽略。這樣就不用在代碼里寫一大堆if語句判斷是否拼接條件代碼干凈很多。需要注意分頁插件的配置在MyBatis-Plus高版本中需要新建一個配置類注入MybatisPlusInterceptor并添加PaginationInnerInterceptor。少了這步配置selectPage會返回全表數(shù)據(jù)頁面上看起來就像“分頁失效”了這是新手最常踩的坑。5. 環(huán)境搭建、常見報錯和部署避坑實錄5.1 從零搭建開發(fā)環(huán)境的完整流程我按照這套源碼的文檔在一臺全新的電腦上從零搭建環(huán)境整個過程大概需要四步安裝JDK 1.8或11SpringBoot2對JDK版本要求不高8以上都能跑。需要注意環(huán)境變量JAVA_HOME的配置如果電腦上有多個JDK版本Maven打包時會崩報什么錯都有非常折磨人。安裝Maven 3.6源碼中帶的pom.xml依賴較多第一次編譯需要下載大量jar包建議在Maven的settings.xml里配置阿里云鏡像源否則等的時間足夠泡一碗面。安裝MySQL8.0這塊的坑最多。MySQL8.0默認(rèn)的認(rèn)證插件是caching_sha2_password而某些老版本的數(shù)據(jù)庫連接驅(qū)動不支持這個插件會報Unable to load authentication plugin caching_sha2_password。解決方法是換用mysql-connector-java 8.0.x版本的驅(qū)動或者創(chuàng)建用戶時指定mysql_native_password認(rèn)證方式。項目里的application.yml還需要注意修改數(shù)據(jù)庫名、用戶名、密碼這三個配置連在一起的一處寫錯啟動就會報連接失敗。安裝Node.js 16前端工程需要Node環(huán)境Vite對Node版本有要求太老版本的Node跑不起來。安裝完成后在根目錄下載依賴npm install。5.2 數(shù)據(jù)庫初始化最容易漏掉的細(xì)節(jié)這套系統(tǒng)在sql目錄下提供了一份完整的建表腳本但如果你直接把腳本全部執(zhí)行很可能會遇到兩個問題一個是時區(qū)問題。數(shù)據(jù)庫連接串里SpringBoot2默認(rèn)會配合參數(shù)serverTimezoneAsia/Shanghai否則插入時間和當(dāng)前時間差8個小時。如果你在執(zhí)行建表腳本時發(fā)現(xiàn)create_time存的時間不對先檢查連接串的時區(qū)參數(shù)再檢查MySQL的全局時區(qū)配置。另一個是字符集問題。建庫的時候最好顯式指定utf8mb4字符集CREATE DATABASE teaching CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci。如果不指定在Linux環(huán)境下默認(rèn)字符集可能是latin1存中文直接亂碼或者報Incorrect string value錯誤。5.3 前后端聯(lián)調(diào)時Nginx和跨域問題的兩種解法開發(fā)模式下前端通過Vite的代理解決跨域配置在vite.config.js里server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }生產(chǎn)模式下把前端打包后的dist目錄交給Nginx托管然后配置反向代理server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # 解決Vue Router history模式刷新404問題 } location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files這一行特別關(guān)鍵。Vue Router用history模式時直接訪問/course/list這樣的路徑Nginx找不到對應(yīng)的物理文件會返回404。加上try_files $uri $uri/ /index.html之后所有路徑都會回退到入口頁面路由再由前端接管問題解決。5.4 項目文檔里沒寫但必須注意的日常維護點這套系統(tǒng)帶了完整的設(shè)計文檔這一點在課程設(shè)計或者畢業(yè)設(shè)計場景下非常加分——我們當(dāng)年答辯老師第一句話就是“你的項目文檔呢”。但有幾個文檔里沒細(xì)說、實際運行時要注意的維護點JWT密鑰泄漏問題源碼里的JWT簽名密鑰是硬編碼在配置里的如果部署到公網(wǎng)環(huán)境一定要改成環(huán)境變量注入否則任何人都可以用你的密鑰偽造登錄令牌。Maven打包后靜態(tài)資源路徑問題后端打包成jar包后如果前端文件也放進src/main/resources/static目錄訪問路徑必須帶/static前綴否則出現(xiàn)404。Tomcat端口沖突開發(fā)機上如果裝了多個服務(wù)8080端口經(jīng)常被占啟動報Port 8080 was already in use。找到占用進程殺掉或者在application.yml里換一個端口。6. 從源碼到可用系統(tǒng)的二次開發(fā)思路這套系統(tǒng)把基礎(chǔ)功能做得很完整用戶登錄注冊、角色權(quán)限管理、課程管理、選課管理、成績管理、公告管理每一塊都有對應(yīng)的前后端代碼。但如果你想把它真正用在自己的場景里有幾塊內(nèi)容值得二次開發(fā)。第一個是數(shù)據(jù)統(tǒng)計模塊。源碼中的首頁數(shù)據(jù)看板比較基礎(chǔ)展示的是用戶總數(shù)、課程總數(shù)這些靜態(tài)數(shù)字。如果你想讓首頁更有說服力可以基于MySQL8.0的窗口函數(shù)做一個“近7天選課趨勢”“各學(xué)院選課排行”這類動態(tài)圖表后端提供接口前端用ECharts渲染這個組合在畢設(shè)答辯中是非常亮眼的亮點。第二個是文件上傳功能。教學(xué)系統(tǒng)經(jīng)常需要教師上傳課件、學(xué)生提交作業(yè)源碼里在這塊只實現(xiàn)了最簡單的單文件上傳存儲在本地磁盤。如果用戶量上來需要改造為按日期分目錄存儲、限制文件大小、校驗文件類型、支持圖片預(yù)覽和Office在線預(yù)覽甚至接入對象存儲服務(wù)。第三個是消息通知。真正好用的教學(xué)系統(tǒng)應(yīng)該有選課成功通知、成績發(fā)布通知、課程變動通知?？梢砸隬ebSocket實現(xiàn)服務(wù)端消息推送也可以簡化一點用數(shù)據(jù)庫輪詢的方式做消息中心每次進入系統(tǒng)拉取未讀消息。這些二次開發(fā)的方向比直接改原有功能更有教學(xué)價值。學(xué)生能從“會跑demo”進階到“會設(shè)計功能模塊”這才是源碼學(xué)習(xí)最重要的收獲。這套SpringBoot2 Vue3 MyBatis-Plus MySQL8.0的教學(xué)管理系統(tǒng)代碼組織和業(yè)務(wù)覆蓋都做得不錯配合完整文檔很適合作為課程設(shè)計參考或者作為學(xué)習(xí)前后端分離開發(fā)第一個完整項目來精讀。上手時建議先看文檔里的系統(tǒng)設(shè)計部分了解功能邊界和技術(shù)方案再對照表結(jié)構(gòu)和實體類理解數(shù)據(jù)模型接著是后端Service層的業(yè)務(wù)邏輯最后是前端頁面如何調(diào)用接口、組織數(shù)據(jù)。按這個順序讀源碼效率會高很多。