做學(xué)生選課系統(tǒng)說到底是把一條條課程數(shù)據(jù)、一個個學(xué)生身份、一節(jié)節(jié)時間資源串起來把誰在什么時間選了哪門課這件事管明白。這篇博文圍繞SpringBootVueVueMyBatisMySQL這套企業(yè)級前后端分離架構(gòu)完整拆解一個學(xué)生選課管理系統(tǒng)的源碼設(shè)計、數(shù)據(jù)庫建模、后端接口實現(xiàn)、前端頁面交互以及真實部署中會遇到的坑。無論你是正在做畢業(yè)設(shè)計、課程設(shè)計還是想快速上手SpringBoot后端Vue前端的全棧開發(fā)套路這篇內(nèi)容都能幫你少走不少彎路。先說結(jié)論這套系統(tǒng)跑通不難但要把選課容量、防重復(fù)選、退課名額釋放、角色權(quán)限控制這些細節(jié)做干凈還是有不少門道。下面我按實際開發(fā)順序從技術(shù)選型、數(shù)據(jù)庫設(shè)計、后端核心邏輯、前端對接一直講到部署排錯把每個環(huán)節(jié)的關(guān)鍵代碼和思路都梳理出來。1. 系統(tǒng)整體設(shè)計與思路拆解1.1 為什么選SpringBootVueMyBatisMySQL這套組合學(xué)生選課系統(tǒng)不算復(fù)雜但勝在功能典型用戶登錄、角色權(quán)限、數(shù)據(jù)列表、增刪改查、業(yè)務(wù)狀態(tài)流轉(zhuǎn)這些幾乎是所有管理系統(tǒng)的共性需求。選這套技術(shù)棧不是因為它最花哨而是因為它足夠標準踩坑資料多、上手成本低、維護成本也低。SpringBoot解決了傳統(tǒng)SSH/SSM項目配置繁瑣的問題。不用再寫一堆XML配置文件起步依賴自動管理jar包版本內(nèi)嵌Tomcat讓項目直接通過main方法就能啟動。對初學(xué)者來說最大的感受就是原來啟動一個Web項目可以這么快。Vue負責(zé)前端頁面。菜鳥教程式的漸進式框架組件化開發(fā)讓頁面拆成獨立的.vue文件路由控制頁面跳轉(zhuǎn)配合Element UI這樣的組件庫表格、表單、彈窗、分頁這些后端管理系統(tǒng)最常見的交互半天就能搭出像模像樣的界面。前后端分離的好處也很明顯前后端各干各的接口約定好調(diào)試互不干擾。Vue 3也可以但考慮到生態(tài)成熟度和學(xué)校主流教材Vue 2 Element UI仍然是不少畢設(shè)項目的穩(wěn)妥選擇。MyBatis作為持久層框架最大的優(yōu)勢是SQL可以完全自己控制。選課系統(tǒng)里有大量涉及多表關(guān)聯(lián)、條件統(tǒng)計、動態(tài)查詢的場景比如查某個學(xué)生已選的課程列表、查某門課的已選人數(shù)、按學(xué)院/學(xué)分/上課時間篩選課程。這些SQL寫起來靈活調(diào)試也直觀比全自動ORM更容易排查問題。MySQL作為數(shù)據(jù)存儲端免費開源性能足夠和SpringBoot、MyBatis的兼容性也經(jīng)過了大量項目驗證。整套組合下來就是一個經(jīng)典到不能再經(jīng)典的中小規(guī)模管理系統(tǒng)標配。1.2 角色權(quán)限與功能模塊的劃分邏輯這個系統(tǒng)的核心角色有三種管理員、教師、學(xué)生。為什么分成三種而不是一張用戶表通吃從業(yè)務(wù)上來講三種角色的操作邊界完全不同。學(xué)生注冊/登錄、瀏覽課程列表、按條件查詢課程、選課、退課、查看已選課程、查看個人成績教師登錄、發(fā)布課程、修改課程信息、查看選課學(xué)生名單、錄入學(xué)生成績管理員學(xué)生管理、教師管理、課程管理、選課數(shù)據(jù)統(tǒng)計、系統(tǒng)公告如果用一張user表加一個role字段去區(qū)分倒也能跑但代碼里到處都要加if (role 1)的判斷邏輯會越來越亂。更合理的做法是獨立出一個角色字段配合后端攔截器做權(quán)限校驗——每個接口在進入Controller之前先判斷登錄用戶角色不符合直接返回403。前端再根據(jù)角色動態(tài)渲染菜單和按鈕做到后端兜底、前端體驗的雙重安全。在實際源碼里用戶表sys_user通常保留username和password再用role字段區(qū)分角色。也有項目把學(xué)生、教師、管理員拆成三張獨立表但這樣登錄邏輯就要分別處理反而麻煩?；诮巧膯伪碜侄螀^(qū)分更符合中小型系統(tǒng)的簡潔原則。1.3 版本選型與踩過的版本坑版本選型看著不起眼但在實際開發(fā)中坑不少。這里直接給出一套我驗證過的穩(wěn)定組合照著用基本不會出幺蛾子。組件推薦版本說明JDK1.8兼容性最好網(wǎng)上資料最多不推薦強上JDK 17Spring Boot2.7.x穩(wěn)定版和JDK 8完美配合自帶Tomcat 9MyBatis Starter2.1.x或者2.3.x由Spring Boot 2.7.x自動管理版本MySQL8.0.x 或 5.7建議8.0注意時區(qū)參數(shù)Maven3.6.3避免太老版本導(dǎo)致依賴解析失敗Node.js14.x或16.x跑Vue 2項目的工程化環(huán)境Vue2.6.x Element UI 2.15.x前端框架組件庫穩(wěn)定Axios0.21.x前端HTTP請求庫版本適配是我踩過最慘的坑最開始用Spring Boot 3.0 JDK 17結(jié)果MyBatis的starter版本不兼容、第三方工具類全是基于javax包的而Spring Boot 3把javax換成了jakarta一堆代碼改到頭大。后來全部回退到2.7.x JDK 8幾分鐘就全部跑通了。老實說做這種管理系統(tǒng)真的沒必要追求最新版本——穩(wěn)定跑通、資料好查才是第一位的。2. 數(shù)據(jù)庫設(shè)計與持久層實現(xiàn)2.1 核心表結(jié)構(gòu)與建表SQL數(shù)據(jù)庫是整個系統(tǒng)的地基表設(shè)計好不好直接決定后面SQL寫起來痛不痛苦。核心表歸納下來是五張用戶表、課程表、選課記錄表、成績表、公告表可選。學(xué)生和教師統(tǒng)一放在sys_user表里通過role字段區(qū)分。核心字段要包括id、username、password、real_name、role、create_time。密碼存儲我不建議用明文用MD5加鹽或者BCrypt加密安全性高出一大截。課程表是course字段包括id、course_name、teacher_id、credit、capacity、selected_count、class_time、location。其中selected_count表示已選人數(shù)這個字段在并發(fā)選課的場景下需要謹慎處理后面會專門講。選課記錄表用sc命名student_course主鍵設(shè)計為聯(lián)合主鍵(user_id, course_id)防止同一個人選同一門課兩次這是數(shù)據(jù)庫層面最樸素也最有效的防重復(fù)手段。下面是精簡版的建表SQLCREATE DATABASE IF NOT EXISTS course_system DEFAULT CHARACTER SET utf8mb4; USE course_system; CREATE TABLE sys_user ( id BIGINT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, real_name VARCHAR(50), role TINYINT NOT NULL DEFAULT 2 COMMENT 0-管理員 1-教師 2-學(xué)生, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE course ( id BIGINT AUTO_INCREMENT PRIMARY KEY, course_name VARCHAR(100) NOT NULL, teacher_id BIGINT NOT NULL, credit INT DEFAULT 2, capacity INT DEFAULT 60, selected_count INT DEFAULT 0, class_time VARCHAR(100) COMMENT 上課時間如 周一3-4節(jié), location VARCHAR(100), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE sc ( user_id BIGINT NOT NULL, course_id BIGINT NOT NULL, score DECIMAL(5,2), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (user_id, course_id), CONSTRAINT fk_sc_user FOREIGN KEY (user_id) REFERENCES sys_user(id), CONSTRAINT fk_sc_course FOREIGN KEY (course_id) REFERENCES course(id) );幾個關(guān)鍵細節(jié)解釋一下第一字符集必須用utf8mb4不然用戶在備注里輸入個emoji表情就會報Data too long或亂碼。第二聯(lián)合主鍵是防重復(fù)選課的底線就算后端代碼有漏洞數(shù)據(jù)庫也會攔住重復(fù)插入。第三成績字段直接放進選課表里教師錄入成績其實就是更新sc表的score字段不需要單獨建一張成績表。2.2 MyBatis核心SQL寫法與動態(tài)查詢MyBatis的XML配置和注解方式我都有用過選課系統(tǒng)這種多表查詢頻繁的項目更推薦XML方式。注解方式適合簡單SQL一旦SQL超過三行、里面還有動態(tài)條件可讀性會直線下降。XML把SQL集中管理后期排查問題也方便。課程列表查詢是最典型的場景學(xué)生進入選課頁面需要看到課程列表、授課教師姓名、當(dāng)前已選人數(shù)/容量。這里必然涉及course表和sys_user表的聯(lián)查。select idselectCourseList resultTypecom.example.vo.CourseVO SELECT c.id, c.course_name, c.credit, c.capacity, c.selected_count, c.class_time, c.location, u.real_name AS teacher_name FROM course c LEFT JOIN sys_user u ON c.teacher_id u.id where if testcourseName ! null and courseName ! AND c.course_name LIKE CONCAT(%, #{courseName}, %) /if if testteacherName ! null and teacherName ! AND u.real_name LIKE CONCAT(%, #{teacherName}, %) /if /where ORDER BY c.id /select這段SQL用到了MyBatis動態(tài)SQL的ifwhere標簽。where標簽有個小細節(jié)值得注意它會自動去掉第一個多余的AND/OR避免代碼里拼SQL時還要糾結(jié)前面要不要加WHERE的經(jīng)典問題。這是MyBatis相比直接JDBC拼接SQL的巨大優(yōu)勢。除了動態(tài)條件查詢已選課程列表也是高頻SQL。核心邏輯就是通過sc表反查course表select idselectSelectedCourses resultTypecom.example.vo.CourseVO SELECT c.id, c.course_name, c.credit, c.capacity, c.selected_count, c.class_time, c.location, u.real_name AS teacher_name FROM sc JOIN course c ON sc.course_id c.id JOIN sys_user u ON c.teacher_id u.id WHERE sc.user_id #{userId} /select這里有一個很容易踩的映射問題數(shù)據(jù)庫字段是course_name而Java實體屬性是courseName直接查詢返回的結(jié)果會是null。解決方案是在MyBatis全局配置中開啟駝峰映射mybatis: configuration: map-underscore-to-camel-case: true這個配置我已經(jīng)不知道救了多少人不開它聯(lián)查出來的字段全是空值排查半天往往就是這個原因。2.3 選課容量與并發(fā)控制的常見設(shè)計選課系統(tǒng)最容易出問題的場景就是并發(fā)選課高峰時期多個學(xué)生同時對同一門課發(fā)起選課請求如果代碼沒有做好并發(fā)控制課程容量只有60人結(jié)果選了65人進去數(shù)據(jù)就臟了。最簡單的方案是先查再插的事務(wù)控制選中課程之前查一下selected_count小于capacity就插入選課記錄同時把selected_count加1。但在高并發(fā)下兩個請求同時查到count59然后同時插入最后一個課程就多了一個人。解決辦法有幾個方向第一種是數(shù)據(jù)庫層面的樂觀鎖。在course表加一個version字段更新時帶著version條件影響行數(shù)為0說明version被改了就提示選課人數(shù)已滿。update idincreaseSelectedCount UPDATE course SET selected_count selected_count 1, version version 1 WHERE id #{courseId} AND version #{version} AND selected_count lt; capacity /update這里一定要在WHERE條件里加上selected_count capacity通過數(shù)據(jù)庫行鎖的機制保證只有在未滿員的情況下才會加人數(shù)。Java代碼中判斷update返回的受影響行數(shù)為1就表示搶占成功繼續(xù)執(zhí)行插入選課記錄的SQL為0就說明課程滿了或version沖突直接返回選課失敗。第二種是直接給課程行加鎖SELECT ... FOR UPDATE。這種方式在編寫上更直觀但死鎖風(fēng)險需要仔細測試性能也有一定消耗。對畢設(shè)和中小型系統(tǒng)來說樂觀鎖條件更新的方案最穩(wěn)妥。我的建議是在線程并發(fā)量不夸張的場景下直接把容量判斷和更新人數(shù)合并為一條UPDATE語句配合insert選課記錄再用一個事務(wù)包起來基本就夠用了。如果選課系統(tǒng)真的要支撐上千人同時搶課那就要引入Redis分布式鎖或消息隊列了但這就超出了學(xué)生選課系統(tǒng)的范疇了。3. 后端核心邏輯與接口實現(xiàn)3.1 登錄認證與權(quán)限攔截的實現(xiàn)思路登錄認證幾乎是所有管理系統(tǒng)的第一道門檻選課系統(tǒng)也不例外。常規(guī)做法有兩種Session方式和JWT Token方式。Session方式是傳統(tǒng)方案登錄成功后將用戶信息存入Session后續(xù)請求通過Cookie攜帶SessionID來識別身份。實現(xiàn)簡單但前后端分離時Session共享和跨域Cookie處理比較麻煩。前后端分離的項目更推薦JWTJSON Web Token方案。用戶登錄成功后后端簽發(fā)一個包含用戶ID、用戶名、角色、過期時間的Token字符串前端拿到后存在localStorage里之后每次請求在請求頭加上Authorization: Bearer 。后端通過攔截器或Spring Security解析Token識別當(dāng)前登錄用戶身份和角色。對于學(xué)生選課系統(tǒng)我認為直接從簡單入手即可不引入Spring Security這種重型框架而是利用SpringBoot的HandlerInterceptor實現(xiàn)一個自定義攔截器。核心邏輯如下public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token null || token.isEmpty()) { response.setStatus(401); return false; } try { // 解析token把userId和role放進request屬性方便后續(xù)Controller使用 Claims claims JwtUtil.parseToken(token.replace(Bearer , )); request.setAttribute(userId, claims.get(userId)); request.setAttribute(role, claims.get(role)); return true; } catch (Exception e) { response.setStatus(401); return false; } } }這里把Token解析出的userId和role塞進request屬性后續(xù)Controller方法里直接用RequestAttribute就可以取出來非常方便。角色權(quán)限校驗還可以再寫一個RoleInterceptor按不同接口路徑匹配不同角色實現(xiàn)思路類似都是繼承HandlerInterceptor然后重寫preHandle。為了減少代碼侵入登錄接口本身不需要攔截可以用WebMvcConfigurer的addInterceptors方法配置攔截路徑白名單registry.addInterceptor(authInterceptor()) .addPathPatterns(/api/**) .excludePathPatterns(/api/auth/login, /api/auth/register);這個白名單的設(shè)計要仔細。比如教師錄入成績的接口必須要求老師權(quán)限學(xué)生選課接口必須要求student角色。如果權(quán)限控制做得比較粗會出現(xiàn)學(xué)生直接調(diào)管理員的接口刪課程雖然前端頁面沒這個按鈕但接口是裸奔的——所以一定要在服務(wù)端校驗角色不能只靠前端隱藏按鈕。3.2 選課接口的完整處理流程選課是系統(tǒng)的核心接口邏輯上要比普通接口多幾步。我把它拆成四個關(guān)鍵步驟第一步從Token或請求參數(shù)中獲取當(dāng)前學(xué)生ID。注意學(xué)生ID不能從前端傳來的JSON里讀取否則學(xué)號是A的同學(xué)可以偽造請求幫學(xué)號是B的同學(xué)選課。必須通過Token解析出來的身份來確定用戶。第二步校驗課程狀態(tài)。查出課程信息確認課程存在、已選人數(shù)小于容量。同時校驗選課時間是否在系統(tǒng)開放時間內(nèi)如果有的話。第三步執(zhí)行選課。插入sc記錄。這一步要利用數(shù)據(jù)庫的聯(lián)合主鍵防重復(fù)。第四步更新課程已選人數(shù)。樂觀鎖UPDATE。如果用事務(wù)統(tǒng)一管理核心代碼大致是這樣Service public class CourseServiceImpl implements CourseService { Autowired private CourseMapper courseMapper; Autowired private ScMapper scMapper; Transactional(rollbackFor Exception.class) Override public Result selectCourse(Long userId, Long courseId) { // 1. 判斷是否已經(jīng)選過 int existCount scMapper.countByUserIdAndCourseId(userId, courseId); if (existCount 0) { return Result.error(你已選過該課程請勿重復(fù)選擇); } // 2. 樂觀鎖占坑只有未滿才更新成功 int rows courseMapper.increaseSelectedCount(courseId); if (rows 0) { return Result.error(該課程人數(shù)已滿選課失敗); } // 3. 插入選課記錄 scMapper.insert(userId, courseId); return Result.success(選課成功); } }這里有個小細節(jié)步驟1和步驟2在并發(fā)情況下可能會有間隙但并不影響最終一致性。因為即使兩個請求同時通過步驟1步驟2的樂觀鎖UPDATE只會有一個成功另一個rows0直接報滿。所以在高并發(fā)下偶爾會有學(xué)生明明沒選過卻提示人數(shù)已滿這并不會造成數(shù)據(jù)錯誤屬于可接受的業(yè)務(wù)提示。退課接口的邏輯就相反了先刪除sc記錄再把course表的selected_count減1。刪除時也要判斷記錄是否存在不要出現(xiàn)刪除0行卻返回成功的情況。3.3 Service層與Controller層的職責(zé)劃分很多新手寫代碼喜歡把業(yè)務(wù)邏輯全堆在Controller里一個接口對應(yīng)一個方法幾十行邏輯塞進去雖然能跑但后期維護極其痛苦。我更推薦嚴格分層Controller層只做三件事接收參數(shù)、調(diào)用Service、返回統(tǒng)一結(jié)果封裝。Controller里不寫任何if-else業(yè)務(wù)判斷。Service層負責(zé)核心業(yè)務(wù)邏輯事務(wù)管理、業(yè)務(wù)流程編排、業(yè)務(wù)規(guī)則校驗。像選課、退課、成績錄入這些核心操作都放在Service里。Mapper層DAO層只負責(zé)數(shù)據(jù)庫交互一個方法對應(yīng)一條SQL不做業(yè)務(wù)處理。統(tǒng)一結(jié)果返回結(jié)構(gòu)也很重要。所有接口統(tǒng)一返回Result對象一般包含code、message、data三個字段。前端根據(jù)code判斷請求成功與否避免出現(xiàn)HTTP 200但業(yè)務(wù)失敗還要解析data里的值來猜的情況。public class Result { private Integer code; // 200 成功500 業(yè)務(wù)失敗401 未登錄 private String message; private Object data; public static Result success(Object data) { Result r new Result(); r.setCode(200); r.setData(data); return r; } public static Result error(String message) { Result r new Result(); r.setCode(500); r.setMessage(message); return r; } }這個Result類看著簡單實際使用中價值非常大。前端Axios攔截器可以直接根據(jù)code做統(tǒng)一錯誤提示不用每個接口單獨寫一遍你已選過該課程人數(shù)已滿這類提示邏輯。4. 前端Vue實現(xiàn)與接口對接4.1 前端工程結(jié)構(gòu)與路由設(shè)計Vue前端項目一般用Vue CLI或Vite創(chuàng)建。以Vue 2為例工程創(chuàng)建命令vue create course-system-frontend創(chuàng)建完成后在項目根目錄安裝Element UI和Axiosnpm install element-ui -S npm install axios -Smain.js中引入Element UIimport Vue from vue import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css import App from ./App.vue import router from ./router Vue.use(ElementUI) new Vue({ router, render: h h(App) }).$mount(#app)路由設(shè)計上按角色劃分模塊。為了減少首屏加載時間用Vue Router的懶加載模式。路由懶加載按需加載對應(yīng)的組件頁面比較多時能顯著提高首屏速度。在路由守衛(wèi)中做登錄校驗是前端控制訪問權(quán)限最直接的方式?jīng)]有token就跳轉(zhuǎn)到登錄頁有token但角色不匹配就跳轉(zhuǎn)到對應(yīng)角色的首頁。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() return } if (!token) { next(/login) return } next() })另外導(dǎo)航守衛(wèi)里還可以根據(jù)當(dāng)前用戶的role動態(tài)生成菜單。比如管理員路由包含用戶管理學(xué)生路由沒有這個菜單。雖然真正的權(quán)限控制要靠后端攔截器但前端動態(tài)菜單能讓界面更清爽。4.2 Axios請求封裝與攔截器設(shè)計前端所有接口請求都建議封裝在統(tǒng)一模塊中而不是每個頁面直接調(diào)用axios.get。這樣在統(tǒng)一處理Token、統(tǒng)一處理錯誤碼、統(tǒng)一加載狀態(tài)時能省掉大量重復(fù)代碼。先封裝一個request.js模塊import axios from axios import { Message } from element-ui import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) // 請求攔截器自動攜帶token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) // 響應(yīng)攔截器統(tǒng)一處理業(yè)務(wù)錯誤碼 request.interceptors.response.use( response { const res response.data if (res.code 200) { return res } else if (res.code 401) { localStorage.removeItem(token) router.push(/login) return Promise.reject(new Error(未登錄或登錄已過期)) } else { Message.error(res.message || 請求失敗) return Promise.reject(new Error(res.message)) } }, error { Message.error(網(wǎng)絡(luò)連接異常) return Promise.reject(error) } ) export default request封裝好之后頁面里調(diào)用接口就非常干凈了import request from /utils/request export function selectCourse(courseId) { return request.post(/course/select, { courseId }) } export function getCourseList(params) { return request.get(/course/list, { params }) }這種封裝最大的價值在于新增一個接口時只需寫一行函數(shù)定義接口異常統(tǒng)一彈Message提示代碼可讀性也高很多。實際開發(fā)中我還發(fā)現(xiàn)一個細節(jié)baseURL用/api這種相對路徑開發(fā)時通過Vue CLI的proxy配置將/api轉(zhuǎn)發(fā)到后端localhost:8080避免跨域。部署時再用Nginx反向代理到后端服務(wù)前端代碼里不需要寫死IP和端口非常靈活。4.3 選課頁面的核心交互實現(xiàn)選課頁面是最核心的前端頁面用Element UI的Table組件展示課程列表加上搜索條件和分頁。table的核心列設(shè)計一般包括課程名稱、授課教師、學(xué)分、上課時間、上課地點、容量、已選人數(shù)、操作按鈕。操作按鈕需要根據(jù)狀態(tài)顯示不同的文字和樣式如果已選顯示已選并且置灰如果滿員顯示已滿否則顯示選課。具體實現(xiàn)時課程列表接口返回的數(shù)據(jù)里包含一個字段isSelected這是后端在當(dāng)前用戶登錄狀態(tài)下特別查詢返回的方便前端直接判斷按鈕狀態(tài)。el-table :datacourseList v-loadingloading el-table-column propcourseName label課程名稱 width200/el-table-column el-table-column propteacherName label教師 width150/el-table-column el-table-column propcredit label學(xué)分 width80/el-table-column el-table-column propclassTime label上課時間 width180/el-table-column el-table-column propcapacity label容量 width80/el-table-column el-table-column propselectedCount label已選人數(shù) width100/el-table-column el-table-column label操作 width150 template slot-scopescope el-button typeprimary sizesmall :disabledscope.row.selectedCount scope.row.capacity || scope.row.isSelected clickhandleSelect(scope.row) {{ scope.row.isSelected ? 已選 : 選課 }}/el-button /template /el-table-column /el-table選課按鈕點擊后調(diào)用后端接口成功會刷新列表并彈成功提示失敗則彈錯誤消息。我在實際開發(fā)中遇到一個體驗問題選課成功后如果不刷新列表isSelected還是舊的false需要重新拉一遍課程列表。這個小細節(jié)處理好之后選課成功和已選狀態(tài)切換就很絲滑了。頁面加載時調(diào)用分頁接口getCourseList({ pageNum: this.pageNum, pageSize: this.pageSize, courseName: this.keyword }) .then(res { this.courseList res.data.list this.total res.data.total })這里分頁參數(shù)和后端保持一致后端使用PageHelper插件可以非常方便地實現(xiàn)分頁查詢設(shè)置PageHelper.startPage(pageNum, pageSize)之后緊接著的SQL查詢就會自動拼接LIMIT語句同時返回的總條數(shù)也會被攔截器自動處理。4.4 我的課程頁面與成績查看功能學(xué)生選完課后需要有一個我的課程頁面來查看已選課程列表。這個頁面的表格和選課頁面類似但操作按鈕變成退課和查看成績。退課操作需要一個二次確認彈窗用Element UI的MessageBox做確認防止學(xué)生誤點this.$confirm(確定要退掉這門課程嗎, 提示, { confirmButtonText: 確定退課, cancelButtonText: 取消, type: warning }).then(() { cancelCourse(courseId).then(() { this.$message.success(退課成功) this.loadCourses() }) })教師端查看選課學(xué)生名單和錄入成績頁面交互邏輯類似只是數(shù)據(jù)源不同。錄入成績用el-input-number或者el-input做成可編輯的單元格或者彈窗表單提交后調(diào)用錄入成績接口。5. 項目部署運行與常見問題排查5.1 本地從零啟動完整流程假如你拿到一套完整的源碼怎么把它跑起來我按實操順序整理一下。第一步準備環(huán)境。安裝JDK 8、Maven 3.6、MySQL 8.0、Node.js 14并配置好環(huán)境變量。第二步導(dǎo)入數(shù)據(jù)庫。用Navicat或其他MySQL客戶端執(zhí)行項目提供的前置SQL腳本。如果沒有現(xiàn)成腳本就按前面的建表SQL手動建庫建表再插入幾條測試數(shù)據(jù)。第三步修改配置文件。打開后端項目的application.yml檢查這幾項數(shù)據(jù)庫地址、端口、賬號密碼。很多新手啟動報錯80%是這一步驟出了問題。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/course_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.entity configuration: map-underscore-to-camel-case: true注意url里一定要加上serverTimezoneAsia/Shanghai否則MySQL 8.0會報時區(qū)錯誤。第四步啟動后端。在項目根目錄執(zhí)行mvn spring-boot:run等待控制臺出現(xiàn)Started Application in x.xxx seconds字樣就說明后端啟動成功。第五步啟動前端。前端項目目錄下安裝依賴并啟動開發(fā)服務(wù)器npm install npm run serve控制臺會出現(xiàn)訪問地址通常是http://localhost:8081。默認端口如果沖突在vue.config.js里配置devServer.port同時配置代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }到這里瀏覽器打開前端地址注冊一個學(xué)生賬號就能體驗完整的選課流程了。5.2 常見問題速查表我把反復(fù)遇到的幾類問題整理成表格按照排查優(yōu)先級排列問題現(xiàn)象根本原因解決辦法啟動后端報錯ConnectException: Connection refusedMySQL沒啟動或端口不對檢查MySQL服務(wù)狀態(tài)確認3306端口可連接報錯Unknown database course_system數(shù)據(jù)庫沒創(chuàng)建或名字不一致執(zhí)行建庫SQL核對application.yml里的庫名報錯Public Key Retrieval is not allowedMySQL 8.0連接參數(shù)缺少allowPublicKeyRetrieval在JDBC URL中追加allowPublicKeyRetrievaltrue前端訪問后端接口報404代理路徑或接口路徑不匹配檢查vue.config.js的proxy配置和請求的baseURL前端接口返回數(shù)據(jù)里外鍵字段為null沒有開啟駝峰映射在mybatis配置中設(shè)置map-underscore-to-camel-casetrue中文亂碼數(shù)據(jù)庫字符集不是utf8mb4修改庫/表字符集為utf8mb4端口被占用8080被其他程序占用換端口或殺死占用進程Maven依賴下載失敗網(wǎng)絡(luò)問題或倉庫源問題配置阿里云鏡像倉庫這些坑基本覆蓋了我在實際部署中遇到過的情況。其中Public Key Retrieval is not allowed是MySQL 8.0特有的很多人在MySQL 5.7上能跑通的連接配置到8.0就報這個錯解決方案就是URL添加上面說的參數(shù)或者修改MySQL用戶的加密方式。5.3 容易忽略但很實用的幾個細節(jié)第一個是IDE的Maven配置。很多學(xué)生遇到依賴下載失敗其實不是代碼問題而是Maven用了默認的中央倉庫國內(nèi)訪問不穩(wěn)定。在settings.xml中配置阿里云鏡像基本能解決mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共倉庫/name urlhttps://maven.aliyun.com/repository/public/url /mirror第二個是Lombok的使用。Lombok能省掉大量getter/setter代碼但需要IDEA插件支持而且IDEA版本和Lombok版本存在兼容性問題。如果實體類上加了Data但項目里調(diào)用getId()卻編譯報錯多半是IDEA的Lombok插件沒裝或版本不對。第三個是前端npm install時報node-sass安裝失敗。老項目里常遇到node-sass它與Node版本綁定Node版本太高太低都會掛。2025年的視角下建議優(yōu)先選sassdart-sass而不是node-sass或者在項目依賴里把node-sass替換成sass。這也是很多Vue 2舊項目的一個歷史包袱。第四個無關(guān)技術(shù)但非常關(guān)鍵密碼處理。我見過很多畢設(shè)項目把用戶密碼明文存在數(shù)據(jù)庫里甚至登錄驗證直接SELECT * FROM user WHERE password xxx這非常危險。至少也要做MD5鹽存儲或者直接使用BCrypt。這個習(xí)慣不光是項目要求更是未來工作的職業(yè)底線。6. 二次擴展與項目進階方向如果源碼跑通之后想加點亮點讓系統(tǒng)在答辯或?qū)嶋H使用中更有說服力這幾個方向我建議優(yōu)先考慮。第一個是引入Redis做課程緩存和選課計數(shù)器。課程列表是查詢頻率最高的接口用Redis緩存課程列表數(shù)據(jù)可以顯著降低數(shù)據(jù)庫壓力。選課人數(shù)也可以直接在Redis里做原子自增INCR命令選課成功后異步同步到MySQL這樣并發(fā)支持能力會上一個檔次。實際項目里這個方案很常見能讓面試官覺得你理解了緩存和數(shù)據(jù)庫的一致性問題。第二個是使用Spring Boot的定時任務(wù)實現(xiàn)選課開放與關(guān)閉。比如在配置表中設(shè)置選課開始時間和結(jié)束時間然后寫一個定時任務(wù)自動切換課程狀態(tài)。這比手動在代碼里判斷當(dāng)前時間要優(yōu)雅得多也更接近真實教務(wù)系統(tǒng)的行為。第三個是增加數(shù)據(jù)導(dǎo)出功能。學(xué)生成績單、選課名單用Hutool或Easy Excel直接導(dǎo)出成Excel文件。這個功能很多系統(tǒng)都沒有但實際使用中需求量很大尤其是教師端導(dǎo)出選課學(xué)生名單屬于加分項。第四個是引入Logback日志配置。把操作日志、異常日志按級別輸出到文件方便線上問題排查。畢設(shè)答辯時面試官問系統(tǒng)出了異常你怎么排查拿出日志文件來談會顯得專業(yè)得多。我自己實際做完這套系統(tǒng)之后的體會是技術(shù)本身并不難難的是把邊界情況想全、把每個按鈕的狀態(tài)判斷清楚、把每條SQL在各種場景下都驗證到位。選課系統(tǒng)麻雀雖小五臟俱全做完它你對SpringBoot、Vue、MyBatis、MySQL整套技術(shù)棧的理解會從學(xué)過變成會做這種轉(zhuǎn)變才是最值錢的部分。最后再分享一個小技巧開發(fā)階段用Postman把每個接口的請求參數(shù)和返回結(jié)果整理成文檔前端對接時會給對方省下大量溝通成本。接口文檔不規(guī)范導(dǎo)致的前后端扯皮是我見過最消耗項目進度的事情沒有之一。把接口定義清楚、狀態(tài)碼約定好你會發(fā)現(xiàn)整個開發(fā)過程順暢太多了。