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