從教學(xué)管理痛點出發(fā)我把這套SpringBootVue教育輔助系統(tǒng)完整拆給你看如果你在學(xué)校信息中心、培訓(xùn)機構(gòu)或者自己做獨立開發(fā)大概率遇到過這樣的場景排課靠Excel選課靠人工統(tǒng)計成績錄入要手動匯總學(xué)生請假還要紙質(zhì)審批流轉(zhuǎn)到教務(wù)處。一套能真正跑起來的教學(xué)輔助系統(tǒng)往往比想象中的更剛需。最近我基于SpringBootVue的前后端分離架構(gòu)整理并重建了一套教學(xué)輔助系統(tǒng)功能覆蓋用戶登錄認(rèn)證、課程管理、選課退課、成績錄入、公告發(fā)布、班級管理等核心教育場景。這篇文章不是簡單的項目介紹而是把我研究這套JavaWeb源碼時的設(shè)計思路、核心實現(xiàn)、部署過程和踩坑記錄全部整理出來希望對正在做畢業(yè)設(shè)計、課程設(shè)計或者剛接觸前后端分離項目的開發(fā)者有幫助。這套系統(tǒng)最大的價值在于它的工程結(jié)構(gòu)完整且克制后端用SpringBoot搭建RESTful API前端用Vue實現(xiàn)單頁應(yīng)用數(shù)據(jù)庫采用MySQL鑒權(quán)用JWT沒有引入太多花哨的中間件非常適合用來理解一個真實JavaWeb教育項目從0到1的構(gòu)建脈絡(luò)。如果你正在找springboot和vue結(jié)合的項目案例或者想學(xué)習(xí)javaweb項目完整案例mysql版本如何組織表結(jié)構(gòu)和接口設(shè)計這套系統(tǒng)是一個很好的參考樣本。下面我從設(shè)計思路、核心實現(xiàn)、前端細(xì)節(jié)、部署實操和問題排查五個維度逐層拆解。1. 項目整體設(shè)計與技術(shù)選型思路1.1 為什么選擇SpringBootVue而不是傳統(tǒng)JSP模式早幾年的JavaWeb教學(xué)項目主流方案是JSPServletTomcat所有頁面由后端渲染前端和后端代碼耦合在一個war包里。這種模式對小型Demo來說確實簡單但一旦業(yè)務(wù)復(fù)雜起來痛點非常明顯前端工程師沒法獨立開發(fā)后端每次改頁面都要重新打包部署接口和頁面邏輯糾纏在一起維護成本極高。SpringBootVue的前后端分離方案正好解決這些問題。SpringBoot負(fù)責(zé)提供純JSON接口Vue負(fù)責(zé)頁面渲染和數(shù)據(jù)交互兩者通過HTTP通信互不干擾。開發(fā)階段用Vue自帶的devServer做代理轉(zhuǎn)發(fā)生產(chǎn)階段將Vue打包后的dist目錄交給Nginx或者SpringBoot靜態(tài)資源映射來托管整個鏈路非常清晰。我在實際使用中最大的感受是前后端分離之后調(diào)試接口和調(diào)整頁面變成了兩條獨立的流水線后端可以用Postman測接口前端可以Mock數(shù)據(jù)調(diào)頁面效率提升非常明顯。1.2 教學(xué)輔助系統(tǒng)的核心業(yè)務(wù)模塊拆解在動手寫代碼之前我習(xí)慣先把業(yè)務(wù)模塊畫清楚。這套系統(tǒng)我拆成了六個核心模塊每個模塊對應(yīng)一組獨立的Controller、Service、Mapper接口用戶認(rèn)證模塊登錄、注冊、JWT簽發(fā)與校驗、退出登錄角色分管理員、教師、學(xué)生三種。課程管理模塊課程信息維護、課程列表查詢、課程狀態(tài)管理可選/已滿/已結(jié)課管理員有全部操作權(quán)限教師可以維護自己名下的課程。選課退課模塊學(xué)生查看可選課程、提交選課、退課選課名額校驗防止超選。成績管理模塊教師錄入成績、修改成績學(xué)生查詢自己的成績管理員查看整體成績統(tǒng)計。公告管理模塊發(fā)布教學(xué)通知、置頂公告、按時間線展示公告列表。班級與學(xué)生管理模塊管理員維護班級信息、導(dǎo)入學(xué)生賬號、重置密碼等。這樣一個模塊化設(shè)計的好處是每個功能點都有明確的分層歸屬新人拿到源碼后能很快定位到相關(guān)的Java類和Vue組件學(xué)習(xí)成本大幅降低。如果你自己在設(shè)計類似系統(tǒng)我也建議先把角色和權(quán)限矩陣畫出來再動工寫代碼不然后面改起來會很痛苦。1.3 開發(fā)環(huán)境與版本選型參考我在本地復(fù)現(xiàn)這套系統(tǒng)時使用的環(huán)境如下也推薦你用相近的版本組合能少踩很多版本兼容性的坑組件版本說明JDK1.8SpringBoot 2.x的穩(wěn)定基礎(chǔ)SpringBoot2.7.x穩(wěn)定版社區(qū)資料豐富MyBatis-Plus3.5.x增強ORM自帶分頁插件和自動填充MySQL5.7 或 8.0生產(chǎn)常用版本均可Vue2.6.x 配合Vue CLI 4.x本源碼采用Vue2生態(tài)成熟Element-UI2.15.x配合Vue2使用最穩(wěn)妥Node.js14.x 或 16.x版本過高會導(dǎo)致依賴安裝報錯Maven3.6.x后端依賴管理IDEA2022.x 以上開發(fā)IDE其中SpringBoot版本是一個很值得注意的點如果你使用springboot 3.x那么javax包會全部改為jakarta很多舊源碼直接運行會報包找不到。我建議先按項目的原始版本跑通再去考慮升級這樣能省掉不少排查環(huán)境問題的時間。2. 后端核心實現(xiàn)從登錄鑒權(quán)到業(yè)務(wù)接口2.1 JWT登錄鑒權(quán)的完整閉環(huán)登錄鑒權(quán)是絕大部分JavaWeb項目的第一道門檻這套系統(tǒng)采用JWT方案。JWT的機制可以理解為用戶登錄成功之后后端生成一串包含用戶身份信息的加密字符串返回給前端前端后續(xù)每次請求都把這個字符串放在請求頭里后端通過攔截器解析并驗證用戶身份整個過程不需要在服務(wù)端保存會話數(shù)據(jù)非常適合前后端分離的場景。后端的關(guān)鍵實現(xiàn)在于兩點一是JWT工具類負(fù)責(zé)生成和解析Token二是攔截器負(fù)責(zé)攔截需要認(rèn)證的請求。以登錄接口為例用戶提交用戶名和密碼后UserService會先調(diào)用MyBatis-Plus的LambdaQueryWrapper去數(shù)據(jù)庫比對密碼若匹配則生成Token返回否則拋出自定義業(yè)務(wù)異常。生成Token的核心代碼如下public String generateToken(Long userId, String username, String role) { // 設(shè)置過期時間這里設(shè)置24小時 Date expireDate new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000); return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(expireDate) .signWith(SignatureAlgorithm.HS256, secretKey) .compact(); }解析Token的代碼如下public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(secretKey) .parseClaimsJws(token) .getBody(); }有個容易被忽略的細(xì)節(jié)JWT的secretKey一定不要硬編碼在代碼里我實際開發(fā)中是放在application.yml配置文件中并通過Value注解注入這樣不同環(huán)境的密鑰可以獨立配置避免安全隱患。還有一點是Token過期處理前端axios攔截器中如果收到401狀態(tài)碼應(yīng)自動跳轉(zhuǎn)到登錄頁并清除本地用戶信息這個聯(lián)動邏輯我會在后面的前端部分詳細(xì)講。2.2 攔截器實現(xiàn)與角色權(quán)限控制有了JWT解析能力之后還需要有攔截器來統(tǒng)一校驗不然每個接口都寫一段Token解析代碼會非常冗余。我在這套系統(tǒng)中定義了一個JwtInterceptor實現(xiàn)HandlerInterceptor接口的preHandle方法Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行登錄、注冊等白名單接口 if (handler instanceof HandlerMethod) { String token request.getHeader(Authorization); if (token null || token.isEmpty()) { throw new BusinessException(401, 未登錄或Token已失效); } // 校驗并解析Token Claims claims jwtUtil.parseToken(token.replace(Bearer , )); // 將用戶信息存入ThreadLocal方便后續(xù)獲取當(dāng)前用戶 UserContext.set(claims); } return true; } }為什么這里要加handler instanceof HandlerMethod的判斷因為如果沒有這個判斷當(dāng)請求的是一個靜態(tài)資源或者對應(yīng)用路徑的Resource處理器時攔截器也一樣會試圖解析Token造成不必要的報錯。這個小坑我踩過一次排查了半天才明白是攔截器攔截了靜態(tài)資源導(dǎo)致的。更細(xì)的權(quán)限控制我這里建議配合自定義注解來做比如定義RequireRole(ADMIN)在攔截器中讀取HandlerMethod上的注解再對比JWT中的role字段不一致就返回403。這套方案比單獨寫三個攔截器要靈活得多新增加接口時只要在方法上加上對應(yīng)注解權(quán)限控制就完成了。2.3 基于MyBatis-Plus的表結(jié)構(gòu)與自動建表技巧數(shù)據(jù)庫設(shè)計這部分我使用的是MySQL數(shù)據(jù)庫名定義為edu_assistant。核心表包括sys_user用戶表、sys_role角色表、course課程表、course_selection選課表、score成績表、notice公告表、classes班級表。這里重點說下選課表它其實是一個中間關(guān)聯(lián)表字段包含選課ID、學(xué)生ID、課程ID、選課時間同時設(shè)置了唯一索引student_id, course_id從數(shù)據(jù)庫層面杜絕重復(fù)選課。關(guān)于建表一個很實用的技巧是配合MyBatis-Plus的自動建表能力。雖然MyBatis-Plus本身不直接支持自動建表但可以通過在配置中掃描實體類結(jié)合TableName注解和TableField注解在系統(tǒng)啟動時執(zhí)行DDL語句。如果你的表還不存在可以寫一個簡單的SchemaInitializer在ApplicationRunner中判斷表是否存在若不存在則執(zhí)行建表SQL。這個小功能對于快速部署項目非常友好我經(jīng)常在演示項目中使用。Component public class DatabaseInitializer implements ApplicationRunner { Autowired private JdbcTemplate jdbcTemplate; Override public void run(ApplicationArguments args) { String checkTableSql SELECT COUNT(*) FROM information_schema.TABLES WHERE TABLE_SCHEMAedu_assistant AND TABLE_NAMEsys_user; Integer count jdbcTemplate.queryForObject(checkTableSql, Integer.class); if (count null || count 0) { // 執(zhí)行建表腳本 jdbcTemplate.execute(CREATE TABLE sys_user (...)); } } }這個屬于錦上添花的方案實際項目中更常用的做法是維護一份schema.sql腳本在部署時手動導(dǎo)入數(shù)據(jù)庫。源碼中一般會附帶的editor.sql就是這種腳本直接導(dǎo)入就可以了。但自動建表適合給不懂?dāng)?shù)據(jù)庫的人演示用省去導(dǎo)入步驟。2.4 選課與成績模塊的業(yè)務(wù)邏輯邊界選課模塊有一個常見的坑就是超選問題。假設(shè)一門課的容量是50人兩個學(xué)生同時提交選課請求如果沒有做并發(fā)控制可能兩個請求都查到了當(dāng)前選課人數(shù)為49然后都執(zhí)行插入就變成51人。解決方式有兩種一種是悲觀鎖在事務(wù)中SELECT ... FOR UPDATE鎖定課程記錄另一種是樂觀鎖在課程表中加一個version字段更新時比較version是否一致。這套系統(tǒng)里的實現(xiàn)相對簡單在選課Service中加入事務(wù)并在插入前先做一個update操作來占住名額Transactional public void selectCourse(Long studentId, Long courseId) { // 先扣減課程剩余名額返回受影響的行數(shù) int updated courseMapper.reduceRemainCount(courseId); if (updated 0) { throw new BusinessException(500, 課程已滿選課失敗); } // 插入選課記錄 courseSelectionMapper.insert(new CourseSelection(studentId, courseId)); }這里的關(guān)鍵點是先執(zhí)行update再插入而不是先查詢再插入因為update語句本身會被行鎖保護在高并發(fā)下能有效避免超賣問題。這也是我在實際處理庫存類業(yè)務(wù)時比較推薦的做法簡單有效不用引入分布式鎖。成績模塊相對簡單但要注意的一個設(shè)計是成績等級的自動劃分。教師錄入的是百分制分?jǐn)?shù)系統(tǒng)可以根據(jù)分?jǐn)?shù)段自動映射為優(yōu)秀、良好、中等、及格、不及格幾個等級這個邏輯在Service層做一個工具方法即可不需要前端參與。如果你后續(xù)要擴展教師端成績分析功能比如班級平均分、最高分、各分?jǐn)?shù)段占比直接基于成績表做聚合查詢就行。3. 前端Vue實現(xiàn)細(xì)節(jié)從環(huán)境搭建到組件封裝3.1 Vue環(huán)境配置與項目初始化前端部分我先說說環(huán)境配置因為這里是最容易讓新手卡住的地方。Vue項目的開發(fā)依賴Node.js環(huán)境我強烈建議安裝Node.js 14或16版本不要用最新的20否則安裝依賴時很容易遇到node-sass編譯失敗、依賴版本不兼容等問題。如果你用的是nvm管理Node版本切換起來會非常方便。# 查看當(dāng)前Node和npm版本 node -v npm -v # 安裝Vue CLI腳手架 npm install -g vue/cli4.5.15 # 創(chuàng)建項目 vue create edu-frontend創(chuàng)建項目的時候建議選擇Manually select features然后勾選Router、Vuex、CSS Pre-processors。如果直接用默認(rèn)的Default預(yù)設(shè)后續(xù)可能需要自己手動安裝router和vuex反而多一步操作。項目創(chuàng)建完成后別忘了安裝UI組件庫和HTTP請求庫npm install element-ui axiosVue安裝依賴時我遇到過不少次因為鏡像地址訪問緩慢導(dǎo)致安裝失敗的情況解決辦法是切換到npm淘寶鏡像源npm config set registry https://registry.npmmirror.com這樣速度會快很多安裝依賴的體驗會好不少。如果你還是遇到卡在安裝某個依賴上可以刪除node_modules和package-lock.json再重新執(zhí)行npm install。3.2 基于Vue Router的前端路由與權(quán)限控制前端路由權(quán)限控制是很多初學(xué)者容易忽略但又非常重要的部分。這套系統(tǒng)的菜單是根據(jù)用戶角色動態(tài)渲染的學(xué)生登錄后看不到成績管理菜單教師登錄后看不到用戶管理菜單管理員則擁有全部權(quán)限。實現(xiàn)思路是在Vue Router中定義路由時給每個路由增加meta信息比如{ path: /admin/users, name: UserManage, component: () import(/views/admin/UserManage.vue), meta: { title: 用戶管理, roles: [ADMIN] } }然后在路由守衛(wèi)beforeEach中判斷當(dāng)前用戶的角色是否在路由meta.roles中如果不在則跳轉(zhuǎn)到401頁面或首頁。router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (!token to.path ! /login) { next(/login); return; } const userRole store.getters.role; if (to.meta.roles to.meta.roles.indexOf(userRole) -1) { next(/403); return; } next(); });路由懶加載也值得提一下() import(/views/xxx.vue)這種方式會讓每個頁面單獨打包成一個chunk首屏加載速度明顯更快推薦所有項目都用這種寫法。前端路由參數(shù)傳遞也是高頻使用點比如課程詳情頁需要知道點擊的是哪門課可以用this.$route.params.id或者this.$router.push({ path: /course/detail, query: { id: courseId } })。query方式的參數(shù)會出現(xiàn)在URL上刷新后參數(shù)不丟失params方式如果不用動態(tài)路由匹配刷新后參數(shù)會丟失這也是一個容易踩到的坑。3.3 axios請求封裝與統(tǒng)一異常處理axios封裝是我的Vue項目中必做的一個環(huán)節(jié)沒有封裝直接在每個頁面里寫axios.get會導(dǎo)致代碼大量重復(fù)而且后端返回結(jié)構(gòu)不統(tǒng)一時每個頁面都要做異常處理極容易漏處理。我習(xí)慣這樣封裝創(chuàng)建api/request.js通過axios.create創(chuàng)建一個配置了baseURL和超時時間的實例然后添加請求攔截器和響應(yīng)攔截器。請求攔截器把本地存儲的token加在請求頭上service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; });響應(yīng)攔截器統(tǒng)一處理后端返回的錯誤碼比如401跳轉(zhuǎn)登錄頁、500彈出錯誤提示等service.interceptors.response.use( response { const res response.data; if (res.code 200) { return res; } Message.error(res.msg || 請求失敗); return Promise.reject(new Error(res.msg || 請求失敗)); }, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } Message.error(網(wǎng)絡(luò)請求異常); return Promise.reject(error); } );這樣一來業(yè)務(wù)頁面里只需要調(diào)用封裝的api方法不用再關(guān)心錯誤處理整體代碼會清爽很多。另外建議把每個模塊的接口單獨建一個js文件比如api/course.js、api/score.js按模塊維護URL避免所有接口都堆在頁面里。3.4 課程視頻播放場景用video.js實現(xiàn)m3u8流播放這套教學(xué)輔助系統(tǒng)里有一個和課程內(nèi)容展示相關(guān)的功能在線播放教學(xué)視頻。在實際項目中教學(xué)視頻往往以HLS流媒體格式提供也就是說視頻地址是一個.m3u8的索引文件。在Vue中播放m3u8推薦使用video.js配合videojs-contrib-hls插件這樣兼容性比較好。npm install video.js videojs-contrib-hls然后在組件中引入并初始化播放器import videojs from video.js; import video.js/dist/video-js.css; import videojs-contrib-hls; mounted() { this.player videojs(this.$refs.videoPlayer, { sources: [{ src: this.videoUrl, type: application/x-mpegURL }], controls: true, autoplay: false, preload: auto }); }, beforeDestroy() { if (this.player) { this.player.dispose(); } }需要特別注意的是播放m3u8時視頻源必須允許跨域訪問否則瀏覽器會直接攔截視頻請求頁面會一直黑屏。如果視頻服務(wù)器是單獨的域名記得在視頻服務(wù)端加好CORS響應(yīng)頭或者通過后端代理轉(zhuǎn)發(fā)視頻請求這是實際部署中非常容易踩坑的地方。還有一個細(xì)節(jié)是播放器銷毀在組件銷毀時一定要調(diào)用player.dispose()釋放播放器實例否則切換到其他頁面后視頻的音頻可能還在后臺繼續(xù)播放這個小問題排查起來讓人很抓狂。4. 本地部署與服務(wù)器發(fā)布完整實操4.1 后端環(huán)境準(zhǔn)備與數(shù)據(jù)庫初始化拿這套源碼在本地跑起來我建議按順序操作。先處理數(shù)據(jù)庫打開Navicat或者命令行客戶端創(chuàng)建一個edu_assistant數(shù)據(jù)庫設(shè)置好字符集為utf8mb4然后將源碼中附帶的SQL腳本導(dǎo)入。為什么要用utf8mb4而不是utf8因為utf8mb4能完整支持中文和emoji表情而且MySQL 8.0默認(rèn)字符集就是utf8mb4保持一致能避免不少亂碼問題。導(dǎo)入完成后修改后端application.yml配置文件核心配置有三塊數(shù)據(jù)庫連接信息、Redis連接信息如果用到了緩存和JWT密鑰。數(shù)據(jù)庫配置示例spring: datasource: url: jdbc:mysql://localhost:3306/edu_assistant?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8用IDEA打開后端項目后點擊Maven側(cè)邊欄的Reload All Maven Projects等待依賴下載完成。如果下載速度慢可以在Maven的settings.xml中配置阿里云鏡像。依賴加載完畢后直接運行主啟動類Application確認(rèn)控制臺輸出SpringBoot啟動成功的日志并且沒有報數(shù)據(jù)庫連接錯誤后端就算是跑通了。4.2 前端本地啟動與跨域代理配置前端部分在項目根目錄執(zhí)行npm install安裝依賴然后執(zhí)行npm run serve啟動開發(fā)服務(wù)器。但是這里有個關(guān)鍵問題Vue開發(fā)服務(wù)器默認(rèn)運行在localhost:8080后端接口運行在localhost:8081跨域問題會直接攔截請求所以需要配置vue.config.js中的devServer代理module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }這里的規(guī)則是前端所有以/api開頭的請求都會被代理轉(zhuǎn)發(fā)到后端8081端口同時去掉/api前綴。比如前端請求/api/user/login實際后端收到的是/user/login。這樣在開發(fā)階段就繞過了跨域限制不需要后端單獨開啟CORS。4.3 云服務(wù)器部署的整體思路部署到云服務(wù)器其實核心就三件事后端打包、前端打包、配置Nginx反代。后端打包用Maven的package命令執(zhí)行mvn clean package -DskipTests在target目錄下生成一個jar包。然后用java -jar edu-assistant.jar啟動。如果想把啟動過程放到后臺可以用nohup命令nohup java -jar edu-assistant.jar --server.port8081 app.log 21 前端打包執(zhí)行npm run build生成dist目錄把dist目錄上傳到服務(wù)器。然后配置Nginx將80端口的請求分發(fā)到前端靜態(tài)資源和后端接口server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }這里說一下try_files的作用Vue是單頁應(yīng)用路由切換是通過前端history模式實現(xiàn)的如果用戶直接訪問/course/detail這樣的路徑Nginx需要把請求重新導(dǎo)向到index.html讓Vue自己解析路由try_files就是干這個事情的。不加這一行刷新非首頁路徑時經(jīng)常會報404開發(fā)部署時十個人有八個會踩這個坑。4.4 Windows服務(wù)器上Tomcat或Apache的搭配發(fā)布除了Linux服務(wù)器有些學(xué)?；蛘邌挝坏腤indows服務(wù)器也會用來部署JavaWeb項目。雖然SpringBoot內(nèi)嵌了Tomcat直接用java -jar可以跑但如果你的服務(wù)器上已經(jīng)部署了其他JavaWeb應(yīng)用有獨立的Tomcat也可以把SpringBoot項目打成war包發(fā)布到Tomcat的webapps目錄下。打成war包需要兩步一是pom.xml中把打包方式改為packagingwar/packaging二是主啟動類繼承SpringBootServletInitializer并重寫configure方法SpringBootApplication public class EduApplication extends SpringBootServletInitializer { Override protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { return builder.sources(EduApplication.class); } }演示一下Windows Server上ApacheTomcat搭配發(fā)布的方式用Apache作為前端入口處理靜態(tài)資源比如Vue打包后的dist目錄動態(tài)請求轉(zhuǎn)發(fā)給Tomcat的8080端口Tomcat負(fù)責(zé)執(zhí)行SpringBoot的war包。Apache通過mod_proxy模塊進行反向代理配置上比Linux Nginx稍顯繁瑣但在老牌Windows服務(wù)器環(huán)境里還是很常見的。至于Redis如果系統(tǒng)用到了Redis做緩存或Token存儲在Windows服務(wù)器上需要手動安裝Redis的Windows版本或者使用Memurai這類兼容方案。我給這個系統(tǒng)做擴展時就在后臺接入了Redis來緩存課程列表熱點數(shù)據(jù)設(shè)置10分鐘過期時間實測接口響應(yīng)從200ms降到了30ms以內(nèi)效果非常明顯。5. 常見問題與排查技巧實錄5.1 前端安裝依賴報錯處理跑Vue項目中npm install階段大概率會遇到問題最常見的有node-sass安裝失敗、模塊版本不兼容、peerDependencies沖突等。我遇到最多的是node-sass的安裝失敗因為node-sass需要根據(jù)Node版本編譯原生模塊Node版本太新或者太舊都會導(dǎo)致安裝時報錯。解決辦法是改用sassdart-sass在package.json中替換依賴然后重新安裝npm uninstall node-sass npm install sass --save-dev另外如果npm install報ERESOLVE錯誤說明依賴樹有沖突可以試試npm install --legacy-peer-deps這個參數(shù)會按照npm舊版本的解析邏輯跳過peerDependencies檢查很多時候能一次性裝通。5.2 SpringBoot啟動報數(shù)據(jù)庫連接失敗的排查后端啟動時最常見的錯誤是Access denied for user rootlocalhost或者Communications link failure。第一種是用戶名密碼錯誤或者用戶沒有遠(yuǎn)程訪問權(quán)限本地測試時建議直接使用root賬號并確認(rèn)密碼無誤第二種是數(shù)據(jù)庫地址無法訪問先把jdbc:mysql://localhost:3306/edu_assistant中的localhost和端口號核對一遍然后確認(rèn)MySQL服務(wù)有沒有啟動。一個很容易被忽略的點是MySQL驅(qū)動版本和MySQL服務(wù)版本的匹配。如果你的MySQL是8.0版本但pom.xml中引用的mysql-connector-java是5.x的啟動時會有時區(qū)相關(guān)的報錯。這時候應(yīng)該使用MySQL官方的Connector/J 8.x同時把驅(qū)動類改為com.mysql.cj.jdbc.DriverURL參數(shù)中加上serverTimezoneAsia/Shanghai問題就能解決。5.3 接口請求404或跨域問題的快速定位聯(lián)調(diào)階段經(jīng)常遇到前端訪問接口返回404或者被CORS策略攔截。如果是404先確認(rèn)請求的URL路徑和后端Controller的RequestMapping是否完全一致特別要注意路徑上有沒有斜杠差異比如/user/login和/user/login/在SpringBoot中雖然能兼容但在某些嚴(yán)格配置下可能不匹配。如果是CORS跨域錯誤開發(fā)環(huán)境優(yōu)先檢查vue.config.js中的代理配置是否正確因為一旦配置了代理瀏覽器看到的請求是同源的不應(yīng)該出現(xiàn)CORS錯誤。如果出現(xiàn)了多半是代理沒有生效npm run serve之后沒有重啟或者路徑?jīng)]有以/api開頭。生產(chǎn)環(huán)境則需要在Nginx中正確配置proxy_pass讓前端路徑和后端路徑的映射關(guān)系對應(yīng)上。還有一個WebSocket相關(guān)的坑如果某些功能用到了WebSocket比如在線考試防切屏提示代理配置需要額外處理proxy_set_header Upgrade $http_upgrade;和proxy_set_header Connection upgrade;否則WebSocket連接建立失敗前端會一直報連接錯誤。5.4 內(nèi)存溢出和接口超時的排查思路在服務(wù)器上跑了一段時間后如果發(fā)現(xiàn)系統(tǒng)變慢或者拋出OutOfMemoryError優(yōu)先考慮做兩點一是給JVM設(shè)置合理的堆內(nèi)存參數(shù)比如-Xms256m -Xmx512m二是排查代碼中是否有慢SQL或者數(shù)據(jù)量大的查詢沒有做分頁。如果教學(xué)輔助系統(tǒng)里學(xué)生選課記錄超過幾萬條查詢選課列表的時候用全表掃描速度會慢到讓人崩潰一定要給表加上合適的索引比如選課表的(student_id, course_id)聯(lián)合索引。線上環(huán)境排查CPU飆高的問題我一般會先用top命令看哪個進程占用CPU高再用jstack導(dǎo)出線程快照看是否有線程長時間處于Runnable狀態(tài)。很多時候都是死循環(huán)或者某個接口在頻繁執(zhí)行大查詢導(dǎo)致的定位到具體代碼后再優(yōu)化。5.5 一套實用的問題排查速查表現(xiàn)象可能原因快速排查方法前端npm install卡住網(wǎng)絡(luò)問題/鏡像慢切換npm源為國內(nèi)鏡像后端啟動報驅(qū)動類找不到pom中依賴版本問題改用mysql-connector-j 8.x接口返回401Token過期/未攜帶檢查請求頭Authorization部署到服務(wù)器后前端白屏靜態(tài)資源路徑錯誤檢查dist上傳位置和Nginx root刷新頁面404缺少try_files配置在Nginx中配置fallback到index.html視頻無法播放跨域或m3u8地址不可達(dá)檢查CORS和視頻服務(wù)狀態(tài)選課人數(shù)超限并發(fā)問題改用update扣減名額方案這套速查表是我實際開發(fā)中逐步積累下來的能覆蓋大多數(shù)JavaWeb前后端分離項目的常規(guī)問題。遇到問題先對照排查一遍大部分情況都能解決剩下的再通過日志深入了解。寫在最后我的實際體會與擴展建議我復(fù)盤這套SpringBootVue教學(xué)輔助系統(tǒng)的源碼時最大的感受是結(jié)構(gòu)清晰的項目比功能堆砌的項目更有學(xué)習(xí)價值。它沒有引入過多復(fù)雜的中間件核心鏈路是SpringBootMyBatis-PlusJWTVueElement-UI每一環(huán)都是JavaWeb技術(shù)棧中最主流、資料最多的選擇。如果你是一名學(xué)生可以用它完成畢業(yè)設(shè)計并借此講清楚前后端交互原理如果你是一名初級開發(fā)者可以用它理解真實項目中的用戶角色、事務(wù)處理和部署流程。如果后續(xù)要擴展我建議優(yōu)先考慮兩個方向一是引入Flowable工作流引擎來替換現(xiàn)在的公告審批和請假審批讓流程可視化這部分在熱詞中也提到了springboot使用flowable是一個進階好方向另一個是接入Redis緩存課程列表和驗證碼順便學(xué)習(xí)緩存穿透、緩存擊穿這些經(jīng)典問題的應(yīng)對方案。教學(xué)輔助系統(tǒng)的業(yè)務(wù)邊界還可以擴大到在線考試、作業(yè)提交、學(xué)生考勤等場景底層這套用戶角色和課程體系已經(jīng)具備了較好的擴展基礎(chǔ)。實際動手做一遍踩過幾個坑之后你對SpringBootVue這套組合的理解會遠(yuǎn)超看一百篇教程的效果。項目不算大但五臟俱全把它吃透足以應(yīng)付絕大多數(shù)教育類JavaWeb項目的開發(fā)需求。