前幾天一個(gè)學(xué)弟找我說學(xué)校課設(shè)要求做個(gè)信息管理系統(tǒng)他選了“學(xué)生選課系統(tǒng)”這個(gè)題但網(wǎng)上翻了一堆源碼不是缺胳膊少腿就是跑不起來。我直接給他發(fā)了一套SpringBoot Vue MySQL的完整項(xiàng)目解壓、配置、啟動(dòng)前后端加起來十幾分鐘就跑起來了。他后來問我能不能把思路寫出來這篇就是基于那套源碼整理的一份實(shí)操復(fù)盤從技術(shù)選型、數(shù)據(jù)庫設(shè)計(jì)到前后端聯(lián)調(diào)、部署踩坑全部攤開講。我平時(shí)接類似的外包小項(xiàng)目也不少選課系統(tǒng)這種屬于“看著簡(jiǎn)單做起有細(xì)節(jié)”的典型。學(xué)生、教師、管理員三種角色登錄認(rèn)證、課程管理、選課退課、名單統(tǒng)計(jì)業(yè)務(wù)閉環(huán)清晰正好覆蓋了一套管理系統(tǒng)該有的核心模塊。用SpringBoot做后端接口、Vue做前端頁面、MySQL存數(shù)據(jù)這個(gè)組合也是目前國內(nèi)中小型項(xiàng)目和課設(shè)最常用的技術(shù)棧既有代表性又不會(huì)太復(fù)雜。這篇文章主要面向兩類人一是拿這個(gè)題目做課設(shè)或畢業(yè)設(shè)計(jì)的學(xué)生二是想快速上手SpringBoot Vue全棧項(xiàng)目、但不想從零搭框架的開發(fā)者。我會(huì)從項(xiàng)目設(shè)計(jì)思路、數(shù)據(jù)庫表結(jié)構(gòu)、后端核心接口、前端頁面實(shí)現(xiàn)、本地啟動(dòng)步驟到常見問題挨個(gè)梳理盡量做到你照著文章也能把整套系統(tǒng)跑起來。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型思路1.1 為什么是SpringBoot Vue MySQL先說選型。很多人在做選課系統(tǒng)這類項(xiàng)目時(shí)糾結(jié)到底用Servlet JSP還是SpringBoot。我的看法很直接除非老師硬性規(guī)定必須用JSP否則能上SpringBoot就上SpringBoot。SpringBoot最大的優(yōu)勢(shì)是“約定大于配置”內(nèi)置Tomcat不用自己折騰Web容器。以前SSH或者SSM項(xiàng)目要寫一堆XML配置SpringBoot一個(gè)啟動(dòng)類加上幾個(gè)注解就全搞定了。對(duì)于課設(shè)和中小型項(xiàng)目來說開發(fā)效率是第一位的。而且SpringBoot自帶的spring-boot-starter-data-jpa或者M(jìn)yBatis Starter連數(shù)據(jù)庫操作都幫你封裝好了真正要寫的業(yè)務(wù)代碼其實(shí)沒多少。前端選Vue的理由也類似。國內(nèi)前端圈子Vue的使用率一直很高文檔中文友好、上手曲線平緩而且Vue的雙向數(shù)據(jù)綁定在做表單類交互時(shí)特別順手。選課系統(tǒng)的核心操作是“查看課程列表 - 勾選課程 - 提交”這種場(chǎng)景用Vue的v-model 列表渲染代碼量比原生JavaScript少一半不止。MySQL更不用多說了開源、穩(wěn)定、資料多配合Navicat或者M(jìn)ySQL Workbench管理數(shù)據(jù)非常方便。選課系統(tǒng)這種量級(jí)的數(shù)據(jù)MySQL 5.7或者8.0都綽綽有余。1.2 業(yè)務(wù)需求與角色權(quán)限梳理選課系統(tǒng)不是簡(jiǎn)簡(jiǎn)單單搞個(gè)課程表讓學(xué)生點(diǎn)一下就行。一套合規(guī)的選課系統(tǒng)至少要覆蓋三類角色和一條完整的業(yè)務(wù)閉環(huán)。學(xué)生角色關(guān)心的是能看到當(dāng)前學(xué)期開放了哪些課程能查看課程詳情任課老師、上課時(shí)間、學(xué)分、容量能選課、退課能查看自己已經(jīng)選中的課程列表和總學(xué)分。教師角色關(guān)心的是能查看自己名下開設(shè)了哪些課程能看到每門課選了哪些學(xué)生能統(tǒng)計(jì)選課人數(shù)甚至導(dǎo)出名單。有一些還涉及學(xué)生成績(jī)錄入不過這個(gè)要看具體需求范圍。管理員角色的權(quán)限最大負(fù)責(zé)課程信息管理增刪改查、學(xué)生和教師賬號(hào)管理、開設(shè)學(xué)期管理還可以看到全局的選課統(tǒng)計(jì)報(bào)表。業(yè)務(wù)閉環(huán)就是管理員開課 - 學(xué)生選課 - 教師看名單 - 管理員統(tǒng)計(jì)分析。這個(gè)閉環(huán)跑通系統(tǒng)的大框架就算立住了。我見過很多同學(xué)做選課系統(tǒng)前端頁面做得花里胡哨但業(yè)務(wù)上連“選課后要減庫存”這個(gè)基本邏輯都沒實(shí)現(xiàn)這屬于本末倒置。提示做項(xiàng)目之前先把角色和核心業(yè)務(wù)流程畫清楚。哪怕只是草稿紙上畫幾個(gè)框和箭頭也比直接動(dòng)手寫代碼強(qiáng)。2. 數(shù)據(jù)庫設(shè)計(jì)與后端核心實(shí)現(xiàn)2.1 數(shù)據(jù)表設(shè)計(jì)與建表SQL數(shù)據(jù)庫設(shè)計(jì)是整個(gè)項(xiàng)目的根基。表結(jié)構(gòu)設(shè)計(jì)得合理后面寫代碼會(huì)非常順暢反之后面每寫一個(gè)功能都要在SQL上打補(bǔ)丁。我在這套系統(tǒng)里用了六張核心表用戶表user、學(xué)生表student、教師表teacher、課程表course、選課表select_course、專業(yè)/班級(jí)表可選擇。考慮到不同學(xué)校院系結(jié)構(gòu)差異大有的還需要學(xué)院表我這里按最通用的情況處理。先看用戶表這是登錄認(rèn)證的關(guān)鍵CREATE TABLE user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 登錄賬號(hào), password VARCHAR(255) NOT NULL COMMENT 密碼(加密存儲(chǔ)), role TINYINT NOT NULL DEFAULT 2 COMMENT 角色(0管理員,1教師,2學(xué)生), status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài)(1啟用,0禁用), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用戶表;學(xué)生表和教師表是用戶表的擴(kuò)展存放各自的詳細(xì)信息CREATE TABLE student ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL COMMENT 關(guān)聯(lián)用戶表, student_no VARCHAR(20) NOT NULL COMMENT 學(xué)號(hào), name VARCHAR(50) NOT NULL COMMENT 姓名, major VARCHAR(100) COMMENT 專業(yè), grade VARCHAR(10) COMMENT 年級(jí), phone VARCHAR(20) COMMENT 聯(lián)系電話, PRIMARY KEY (id), UNIQUE KEY uk_student_no (student_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT學(xué)生信息表;課程表的核心字段除了基本信息還有兩個(gè)“隱藏關(guān)鍵點(diǎn)”課程容量capacity和已選人數(shù)selected_count。這兩個(gè)字段直接決定了選課時(shí)的容量控制邏輯。CREATE TABLE course ( id INT NOT NULL AUTO_INCREMENT, course_no VARCHAR(20) NOT NULL COMMENT 課程編號(hào), name VARCHAR(100) NOT NULL COMMENT 課程名稱, teacher_id INT NOT NULL COMMENT 任課教師(關(guān)聯(lián)教師表), credit DECIMAL(3,1) NOT NULL DEFAULT 2.0 COMMENT 學(xué)分, capacity INT NOT NULL DEFAULT 60 COMMENT 課程容量, selected_count INT NOT NULL DEFAULT 0 COMMENT 已選人數(shù), schedule VARCHAR(100) COMMENT 上課時(shí)間, location VARCHAR(100) COMMENT 上課地點(diǎn), status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài)(1開放,0關(guān)閉), PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT課程表;選課表是業(yè)務(wù)發(fā)生的主戰(zhàn)場(chǎng)這里加了一個(gè)聯(lián)合唯一約束這個(gè)在后面講并發(fā)時(shí)還要細(xì)說CREATE TABLE select_course ( id INT NOT NULL AUTO_INCREMENT, student_id INT NOT NULL COMMENT 學(xué)生ID, course_id INT NOT NULL COMMENT 課程ID, select_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 選課時(shí)間, status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài)(1正常,0已退課), PRIMARY KEY (id), UNIQUE KEY uk_student_course (student_id, course_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT選課記錄表;2.2 選課接口的并發(fā)控制方案這是整個(gè)系統(tǒng)最有技術(shù)含金量的地方也是面試官最喜歡問的點(diǎn)多個(gè)學(xué)生同時(shí)搶同一門課怎么保證不會(huì)超選很多初學(xué)者寫的選課邏輯是這樣的先查一下selected_count是否小于capacity然后執(zhí)行insert選課記錄再update課程表讓selected_count加1。這種寫法在單用戶測(cè)試下一切正常但一旦并發(fā)量上來兩個(gè)學(xué)生同時(shí)讀到selected_count59都判斷還有名額然后都執(zhí)行insert和update課程容量就會(huì)變成61超選。我在這套系統(tǒng)里用了三層保障第一層是SQL層的原子操作。把“判斷 更新”合并成一條帶條件的UPDATE語句UPDATE course SET selected_count selected_count 1 WHERE id #{courseId} AND selected_count capacity這條SQL的返回值是受影響的行數(shù)。如果影響行數(shù)為0說明容量已滿直接返回“課程已滿”提示。這一步就用數(shù)據(jù)庫自身的行鎖保證了更新過程的原子性不用手動(dòng)寫同步鎖。第二層是事務(wù)。把減容量和插入選課記錄放在同一個(gè)事務(wù)里要么都成功要么都失敗Transactional public boolean selectCourse(Long studentId, Long courseId) { int rows courseMapper.increaseSelectedCount(courseId); if (rows 0) { return false; // 容量已滿 } SelectCourse selectCourse new SelectCourse(); selectCourse.setStudentId(studentId); selectCourse.setCourseId(courseId); try { selectCourseMapper.insert(selectCourse); } catch (DuplicateKeyException e) { // 該學(xué)生已經(jīng)選過這門課拋出異常觸發(fā)事務(wù)回滾 throw new BusinessException(不能重復(fù)選課); } return true; }這里用了Transactional注解如果插入選課記錄時(shí)出現(xiàn)異常前面的UPDATE操作也會(huì)回滾避免了“課程人數(shù)加了、選課記錄沒插上”這種數(shù)據(jù)不一致的問題。第三層是數(shù)據(jù)庫層面的唯一約束。就是2.1里提到的uk_student_course聯(lián)合唯一索引從數(shù)據(jù)庫硬層面保證同一個(gè)學(xué)生不能重復(fù)選擇同一門課即使代碼邏輯有漏洞數(shù)據(jù)庫也能兜底攔住。提示很多企業(yè)級(jí)項(xiàng)目在極端高并發(fā)下會(huì)用Redis分布式鎖或者消息隊(duì)列削峰但選課系統(tǒng)這種量級(jí)用數(shù)據(jù)庫事務(wù)和唯一約束完全夠用不用過度設(shè)計(jì)。2.3 后端項(xiàng)目分層與核心接口清單后端代碼結(jié)構(gòu)我按標(biāo)準(zhǔn)的Controller-Service-Mapper三層來做。實(shí)體類entity對(duì)應(yīng)數(shù)據(jù)庫表Mapper負(fù)責(zé)SQL操作Service寫業(yè)務(wù)邏輯Controller暴露接口給前端調(diào)用。核心接口清單如下接口方法路徑作用登錄POST/api/auth/login賬號(hào)密碼登錄返回JWT Token獲取當(dāng)前用戶信息GET/api/auth/info根據(jù)Token獲取用戶信息和角色課程列表GET/api/course/list分頁查詢課程列表支持搜索課程詳情GET/api/course/{id}查看單門課程信息選課POST/api/course/select學(xué)生選擇課程退課POST/api/course/cancel學(xué)生退掉已選課程我的課程GET/api/student/myCourses學(xué)生查看已選課程列表教師課程列表GET/api/teacher/courses教師查看自己的課程課程學(xué)生名單GET/api/teacher/course/{courseId}/students教師查看某門課的學(xué)生名單課程管理POST/PUT/DELETE/api/admin/course管理員增刪改查課程選課統(tǒng)計(jì)GET/api/admin/stats全局選課數(shù)據(jù)統(tǒng)計(jì)JWTJSON Web Token做登錄認(rèn)證是現(xiàn)在比較通用的方案。用戶登錄成功后后端生成一個(gè)Token返回給前端前端在請(qǐng)求頭里帶上這個(gè)Token后端通過攔截器驗(yàn)證身份和權(quán)限。相比Session方案JWT天然適合前后端分離的項(xiàng)目。我用的依賴是jwt或spring-boot-starter-security如果嫌Security配置麻煩也可以只用Interceptor JWT代碼量小很多。3. 前端Vue設(shè)計(jì)與交互實(shí)現(xiàn)3.1 前端項(xiàng)目結(jié)構(gòu)與路由設(shè)計(jì)前端我用的Vue搭配Vue Router做路由管理UI組件庫選的Element UI。整套項(xiàng)目用Vue CLI或者Vite創(chuàng)建目錄結(jié)構(gòu)如下vue-frontend/ ├── public/ ├── src/ │ ├── api/ # 所有后端接口請(qǐng)求的封裝 │ │ ├── auth.js │ │ ├── course.js │ │ └── user.js │ ├── router/ # 路由配置 │ │ └── index.js │ ├── store/ # Vuex狀態(tài)管理 │ │ └── store.js │ ├── views/ # 頁面組件 │ │ ├── Login.vue │ │ ├── StudentHome.vue │ │ ├── TeacherHome.vue │ │ └── AdminHome.vue │ ├── utils/ # 工具函數(shù) │ │ └── request.js # axios封裝 │ ├── App.vue │ └── main.js └── package.json路由設(shè)計(jì)上除了登錄頁/login主界面采用布局組件 子路由的嵌套模式。比如學(xué)生端和教師端各自有自己的布局側(cè)邊欄菜單不同。這里有一個(gè)關(guān)鍵點(diǎn)路由守衛(wèi)。未登錄用戶直接訪問首頁會(huì)被重定向到登錄頁不同角色訪問不屬于自己的頁面也會(huì)被攔截。router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (!token to.path ! /login) { next(/login); } else if (token to.path /login) { next(/); } else if (to.meta.role to.meta.role ! store.state.userInfo.role) { next(/403); } else { next(); } });這個(gè)路由守衛(wèi)非常重要不能用“登錄了就放行”這種粗放邏輯必須結(jié)合角色判斷權(quán)限。不然學(xué)生把URL改成/admin就能看到管理頁面雖然接口層也有校驗(yàn)但前端體驗(yàn)很不好。3.2 axios封裝與頁面交互邏輯axios封裝應(yīng)該是每個(gè)Vue項(xiàng)目的第一步。我在utils/request.js里統(tǒng)一配置了baseURL、請(qǐng)求超時(shí)時(shí)間、請(qǐng)求攔截器和響應(yīng)攔截器。請(qǐng)求攔截器統(tǒng)一添加Token響應(yīng)攔截器統(tǒng)一處理異常碼。比如Token過期返回401時(shí)自動(dòng)清除本地Token并跳轉(zhuǎn)登錄頁。這樣頁面代碼里就不用每個(gè)請(qǐng)求都寫一套錯(cuò)誤處理邏輯非常省事。const service axios.create({ baseURL: /api, timeout: 10000 }); service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); service.interceptors.response.use( response { const res response.data; if (res.code ! 200) { Message.error(res.message); return Promise.reject(new Error(res.message)); } return res.data; }, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } Message.error(error.message); return Promise.reject(error); } );頁面交互的經(jīng)典場(chǎng)景是學(xué)生選課。選課頁面是一個(gè)課程列表表格每一行有“選課”按鈕。點(diǎn)擊按鈕后前端調(diào)用選課接口后端返回成功或失敗。這里的交互細(xì)節(jié)要注意選課成功后要把表格里該課程的“已選人數(shù)”刷新同時(shí)把按鈕置灰防止學(xué)生反復(fù)點(diǎn)擊。3.3 前后端聯(lián)調(diào)與跨域處理前后端分離開發(fā)最常見的坑就是跨域。前端開發(fā)服務(wù)器默認(rèn)在localhost:8080后端在localhost:8081端口不同就存在跨域問題。我在項(xiàng)目里用了兩種方案開發(fā)環(huán)境用Vue CLI的proxy代理生產(chǎn)環(huán)境用后端配置CORS。代理方式是在vue.config.js里配置module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } } };這樣前端請(qǐng)求/api/auth/login時(shí)開發(fā)服務(wù)器會(huì)自動(dòng)把請(qǐng)求轉(zhuǎn)發(fā)到http://localhost:8081/api/auth/login瀏覽器的視角里就是同源請(qǐng)求了不會(huì)觸發(fā)跨域限制。提示changeOrigin: true一定要設(shè)置不然代理轉(zhuǎn)發(fā)后Host頭不對(duì)后端在驗(yàn)證來源時(shí)可能出錯(cuò)。4. 本地運(yùn)行與部署實(shí)戰(zhàn)4.1 環(huán)境準(zhǔn)備清單“可直接運(yùn)行”這套項(xiàng)目對(duì)開發(fā)環(huán)境版本還是有一定要求的。很多同學(xué)跑不起來不是代碼問題是環(huán)境版本對(duì)不上。我整理了一份經(jīng)過驗(yàn)證的版本組合工具版本要求說明JDK1.8或11SpringBoot 2.x建議JDK8SpringBoot 3.x要求JDK17注意區(qū)分Maven3.6后端依賴管理可替代方案IDEA自帶MavenNode.js14Vue CLI項(xiàng)目建議Node 14及以上Vite項(xiàng)目建議Node 16MySQL5.7或8.08.0以上注意驅(qū)動(dòng)名變化Navicat/Workbench任意版本可視化數(shù)據(jù)庫管理工具非必須后端我用的SpringBoot版本是2.7.x對(duì)應(yīng)JDK8。如果你機(jī)器裝的是JDK17建議直接改用SpringBoot 3.x或者重新安裝JDK8因?yàn)镾pringBoot 2.7.x放在JDK17上運(yùn)行會(huì)有兼容性問題。4.2 數(shù)據(jù)庫初始化步驟第一步是創(chuàng)建數(shù)據(jù)庫。打開Navicat或命令行執(zhí)行CREATE DATABASE IF NOT EXISTS course_selection DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;這里有個(gè)關(guān)鍵點(diǎn)字符集一定要選utf8mb4。有些同學(xué)用默認(rèn)的utf8在插入生僻字或者表情符號(hào)時(shí)會(huì)報(bào)錯(cuò)選utf8mb4能徹底避開這個(gè)問題。第二步是導(dǎo)入項(xiàng)目里帶的course_selection.sql文件。這個(gè)SQL文件里包含了建表語句和初始數(shù)據(jù)包括默認(rèn)的管理員賬號(hào)admin/admin123、測(cè)試學(xué)生賬號(hào)2021001/123456和測(cè)試教師賬號(hào)T001/123456。導(dǎo)入后務(wù)必自己登進(jìn)去看一下數(shù)據(jù)是否完整。4.3 后端啟動(dòng)步驟后端啟動(dòng)前先改配置文件application.yml。核心配置有兩處spring: datasource: url: jdbc:mysql://localhost:3306/course_selection?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你自己的密碼 driver-class-name: com.mysql.cj.jdbc.Driver第一處是數(shù)據(jù)庫連接串。如果你的MySQL是8.0版本driver-class-name必須寫成com.mysql.cj.jdbc.Driver如果是5.7及以下寫成com.mysql.jdbc.Driver。這里很多同學(xué)容易搞混導(dǎo)致啟動(dòng)時(shí)報(bào)ClassNotFoundException或者連接失敗。第二處是serverTimezoneAsia/Shanghai。中國程序員的一個(gè)經(jīng)典痛點(diǎn)是MySQL 8.0默認(rèn)時(shí)區(qū)與本地不同不設(shè)置時(shí)區(qū)會(huì)報(bào)“The server time zone value is unrecognized”的錯(cuò)誤。加了這一段基本就能解決。改完配置后打開項(xiàng)目根目錄執(zhí)行mvn spring-boot:run或者在IDE里直接運(yùn)行主類上的main方法?？吹健癝tarted Application in xxx seconds”這樣的日志說明后端啟動(dòng)成功了。4.4 前端啟動(dòng)步驟前端啟動(dòng)步驟相對(duì)固定在項(xiàng)目根目錄打開終端npm install npm run servenpm install階段是一個(gè)高損操作經(jīng)常有人卡在這里半天。如果網(wǎng)絡(luò)不好建議提前配置淘寶鏡像源npm config set registry https://registry.npmmirror.com裝完依賴后npm run serve啟動(dòng)默認(rèn)端口是8080。如果你同時(shí)跑了后端后端接口是localhost:8081前端是localhost:8080瀏覽器打開http://localhost:8080登錄頁就能正常展示了。用測(cè)試賬號(hào)登錄學(xué)生端能看到可選課程列表點(diǎn)擊選課刷新后“我的課程”里就有了記錄。到這里整套系統(tǒng)就算完整跑通了。5. 新手最容易踩的坑與排查技巧5.1 啟動(dòng)階段常見報(bào)錯(cuò)速查表我把實(shí)際運(yùn)行中最高頻的幾類報(bào)錯(cuò)整理成了一個(gè)速查表每一條都對(duì)應(yīng)一個(gè)真實(shí)場(chǎng)景報(bào)錯(cuò)信息原因解決方案ClassNotFoundException: com.mysql.jdbc.Driver驅(qū)動(dòng)名寫錯(cuò)更改為com.mysql.cj.jdbc.DriverServer time zone value unrecognized時(shí)區(qū)配置缺失連接串加serverTimezoneAsia/ShanghaiAccess denied for user rootlocalhost數(shù)據(jù)庫密碼不對(duì)檢查application.yml的password配置Port 8080 was already in use之前啟動(dòng)過某個(gè)服務(wù)占用8080換端口或改后端server.portnpm ERR! network request to https://registry.npmjs.org failed未配置鏡像/網(wǎng)絡(luò)差配置淘寶鏡像源后重試Failed to bind properties under spring.datasourceYAML配置文件格式錯(cuò)誤檢查縮進(jìn)YAML不允許Tab5.2 功能運(yùn)行中的典型問題排查項(xiàng)目能啟動(dòng)不等于功能沒問題。運(yùn)行過程中的排查才是最鍛煉人的環(huán)節(jié)。第一個(gè)常見問題是登錄成功但請(qǐng)求接口時(shí)提示未授權(quán)。這通常是Token校驗(yàn)環(huán)節(jié)沒有正確讀取請(qǐng)求頭。我在項(xiàng)目里統(tǒng)一約定前端在Authorization頭里帶“Bearer 空格 Token”后端攔截器解析時(shí)必須保持完全一致的格式。格式稍有出入就會(huì)認(rèn)證失敗排查時(shí)先打印后端收到的完整請(qǐng)求頭比對(duì)一下格式。第二個(gè)常見問題是CORS跨域報(bào)錯(cuò)。這個(gè)問題的排查思路是看請(qǐng)求是從哪個(gè)端口發(fā)起的目標(biāo)是哪個(gè)端口。開發(fā)環(huán)境優(yōu)先用代理方案不要直接在SpringBoot里配CrossOrigin因?yàn)榇矸桨父咏a(chǎn)環(huán)境的部署形態(tài)。第三個(gè)常見問題是選課成功后“已選人數(shù)”沒變。這個(gè)多半是前端沒有重新加載數(shù)據(jù)。選課成功后的刷新邏輯我一般用兩種方式一是調(diào)用查詢接口刷新列表數(shù)據(jù)二是前端本地維護(hù)一個(gè)selectedCount變量選課成功后進(jìn)行1更新。但要注意前端本地維護(hù)的變量在頁面刷新后會(huì)丟失最終還是要以后端數(shù)據(jù)為準(zhǔn)。5.3 我的幾條實(shí)操心得最后分享幾段經(jīng)驗(yàn)。做選課系統(tǒng)這類管理系統(tǒng)有幾個(gè)點(diǎn)是我反復(fù)踩坑后總結(jié)出來的第一數(shù)據(jù)庫表設(shè)計(jì)和接口設(shè)計(jì)一定要先于前端頁面。很多同學(xué)喜歡先把頁面畫出來再反推接口這個(gè)順序在個(gè)人項(xiàng)目中其實(shí)問題不大但一旦涉及前后端分開寫還是建議先定接口文檔前后端并行開發(fā)效率最高。第二事務(wù)和并發(fā)控制不要偷懶。選課系統(tǒng)的“超選”問題看似只有并發(fā)場(chǎng)景才會(huì)觸發(fā)但哪怕你的系統(tǒng)只有幾十個(gè)人用也建議用事務(wù) 條件UPDATE 唯一約束這套組合代碼量不增加多少但數(shù)據(jù)安全等級(jí)完全不同。第三日志一定要打。我在Service層幾乎所有方法都加了一行日志記錄入?yún)⒑蛨?zhí)行結(jié)果。選課這種核心接口日志里能直接還原出“誰在什么時(shí)間選了什么課、成功還是失敗”排查問題會(huì)輕松很多。第四前端頁面別過度設(shè)計(jì)。我見過很多學(xué)生把管理系統(tǒng)的UI做成營(yíng)銷落地頁風(fēng)格各種動(dòng)畫、漸變、大圖輪播。管理系統(tǒng)就該有自己的樣子——表單清晰、表格易讀、操作反饋明確比花哨的視覺效果重要一萬倍。這套代碼我前前后后跑了不下二十遍各個(gè)模塊都驗(yàn)證過。如果你照著文章操作還是有問題優(yōu)先檢查自己的環(huán)境版本和配置大多數(shù)問題都出在這兩個(gè)地方。選課系統(tǒng)本身就是一個(gè)很適合練手的題目麻雀雖小五臟俱全把這一套吃透SpringBoot Vue前后端分離開發(fā)的整個(gè)鏈路基本就能打通了。