開發(fā)實戰(zhàn)：從零搭建到部署全流程)
最近把一個疫情隔離管理系統(tǒng)從零到一完整做了一遍技術(shù)棧就是標(biāo)題里那套——SpringBoot2 Vue3 MyBatis-Plus MySQL8.0。說實話這類系統(tǒng)放在平時看起來不復(fù)雜無非就是人員登記、健康監(jiān)測、房間管理、物資管理幾塊業(yè)務(wù)但真正從設(shè)計表結(jié)構(gòu)到前后端聯(lián)調(diào)再到打包部署、寫文檔準(zhǔn)備交付整個過程里踩過的坑遠(yuǎn)比想象中多。這篇文章不聊虛的就把我做這個項目的完整思路、表結(jié)構(gòu)設(shè)計、后端核心封裝、前端頁面交互、環(huán)境部署實測記錄以及那些文檔里絕對不會寫的排查經(jīng)驗全部攤開講清楚。項目源碼附帶的說明文檔我看了寫得中規(guī)中矩但還不夠細(xì)所以我決定自己重新整理一篇記錄更接近真實開發(fā)過程的經(jīng)驗。不管你是準(zhǔn)備拿這個項目做課程設(shè)計、畢業(yè)設(shè)計還是單純想練手SpringBoot2 Vue3的組合玩法這篇內(nèi)容都能幫你省下不少摸索時間?；A(chǔ)要求不高會一點Java和JavaScript語法就能跟上我會把關(guān)鍵代碼和配置直接貼出來你照著做就能跑起來。1. 業(yè)務(wù)梳理與技術(shù)選型背后的邏輯1.1 這個系統(tǒng)到底解決什么問題疫情隔離管理這個場景核心痛點在于信息分散。隔離人員入住登記靠紙質(zhì)表格每日體溫監(jiān)測靠人工匯報房間占用情況靠打電話問物資消耗靠月底盤庫存。一旦人數(shù)上來數(shù)據(jù)一多管理就完全失控。所以這個系統(tǒng)的定位就是把這些分散操作集中到一個平臺里讓不同角色在各自權(quán)限范圍內(nèi)完成自己的工作。管理員負(fù)責(zé)全局配置和數(shù)據(jù)查看醫(yī)護(hù)人員負(fù)責(zé)錄入隔離人員的健康監(jiān)測信息普通用戶或隔離人員則可以通過系統(tǒng)查看自己的狀態(tài)和通知。核心業(yè)務(wù)流程其實只有一條人員登記入駐、分配房間、每日健康記錄、到期解除隔離。圍繞這條鏈路再延伸出物資管理、公告通知、數(shù)據(jù)統(tǒng)計等輔助模塊。1.2 技術(shù)棧選型不追新選成熟為什么選SpringBoot2而不是SpringBoot3我的考慮很簡單。SpringBoot2.7.x配合JDK8是當(dāng)前最穩(wěn)定的企業(yè)級組合網(wǎng)上資料多遇到問題基本一搜就有答案。SpringBoot3強(qiáng)制要求JDK17如果你的電腦只裝了JDK8那就要多一道環(huán)境配置的檻。對于課程設(shè)計和畢業(yè)設(shè)計這種場景穩(wěn)定性優(yōu)先于新版本特性另外MyBatis-Plus對SpringBoot2.x的支持也是最成熟的代碼生成器、分頁插件、條件構(gòu)造器都是直接可用。Vue3選擇了Composition API Element Plus的組合。Vue3對比Vue2最大的變化就是組合式API邏輯復(fù)用更清晰配合Vite構(gòu)建速度極快開發(fā)體驗比webpack時代好太多。Element Plus是Vue3生態(tài)里最完整的UI組件庫后臺管理系統(tǒng)的表格、表單、彈窗、標(biāo)簽頁都能一站解決。MySQL8.0在這個項目里其實發(fā)揮了幾個關(guān)鍵特性。默認(rèn)字符集是utf8mb4中文存儲不會出現(xiàn)亂碼問題窗口函數(shù)和公共表表達(dá)式這些新特性雖然在這個項目里沒用上但以后做數(shù)據(jù)分析報表擴(kuò)展時直接就能用另外MySQL8.0對JSON字段類型支持很好后面如果要擴(kuò)展自定義字段也方便。最重要的是學(xué)校機(jī)房和企業(yè)內(nèi)部環(huán)境現(xiàn)在普遍裝的就是8.0選它意味著部署不折騰。1.3 軟件架構(gòu)與核心模塊劃分整個系統(tǒng)采用經(jīng)典前后端分離架構(gòu)。后端提供RESTful API前端通過HTTP請求調(diào)用兩者之間通過JSON交換數(shù)據(jù)。后端SpringBoot負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)庫操作前端Vue3負(fù)責(zé)頁面渲染和用戶交互。系統(tǒng)功能模塊我劃分為六大塊模塊核心功能設(shè)計說明用戶管理登錄注冊、角色分配、賬號維護(hù)采用JWT做無狀態(tài)認(rèn)證角色分管理員/醫(yī)護(hù)人員/普通用戶人員管理隔離人員登記、解除、查詢核心業(yè)務(wù)入口包含入住和解除兩個關(guān)鍵動作房間管理樓棟/房間信息維護(hù)、分配狀態(tài)房間狀態(tài)驅(qū)動分配邏輯空閑/占用/消殺三種狀態(tài)健康監(jiān)測體溫記錄、異常標(biāo)記、連續(xù)監(jiān)控按人員維度記錄每日健康數(shù)據(jù)支持歷史曲線查詢物資管理物資出入庫、庫存預(yù)警核心是庫存臺賬的準(zhǔn)確性預(yù)警閾值可配置公告管理通知發(fā)布、列表查看面向所有角色支持按發(fā)布時間排序模塊之間的依賴關(guān)系也很清晰人員管理依賴房間管理來確定入住房間健康監(jiān)測依賴人員管理來確定記錄歸屬統(tǒng)計報表又依賴前面所有模塊的數(shù)據(jù)。設(shè)計時把公共字段創(chuàng)建時間、更新時間、邏輯刪除標(biāo)記統(tǒng)一放進(jìn)基礎(chǔ)實體類避免每個表都重復(fù)寫一遍。2. 數(shù)據(jù)庫設(shè)計與初始化腳本要點2.1 核心表結(jié)構(gòu)設(shè)計數(shù)據(jù)庫是整套系統(tǒng)的地基。我在設(shè)計表結(jié)構(gòu)的時候一切都是圍繞“業(yè)務(wù)狀態(tài)如何流轉(zhuǎn)”來做的。最終確定的六張核心表是用戶表、隔離人員表、房間表、健康記錄表、物資表、公告表。這里挑幾張關(guān)鍵表詳細(xì)說一下。隔離人員表是最復(fù)雜的一張表它承載了整條業(yè)務(wù)主線的狀態(tài)。字段包括姓名、證件類型、證件號碼、手機(jī)號、來源地、入住時間、計劃解除時間、實際解除時間、入住房間號、狀態(tài)。其中狀態(tài)字段是關(guān)鍵設(shè)計我用了tinyint類型的status0表示待入住1表示隔離中2表示已解除。為什么不直接用字符串因為后端做狀態(tài)條件查詢時整型比較比字符串匹配效率更高而且配合MyBatis-Plus的枚舉類型就能在Java代碼里做統(tǒng)一轉(zhuǎn)換。房間表的設(shè)計重點在狀態(tài)字段和編號規(guī)則。房間編號我采用了“樓棟號-樓層-房間號”的組合格式比如2-3-05表示2棟3層05號房。這樣設(shè)計的好處是前端展示時不用額外拼接后端做樓棟統(tǒng)計時也能通過模糊查詢實現(xiàn)。健康記錄表相對簡單但索引設(shè)計很關(guān)鍵。由于系統(tǒng)要按人員查歷史記錄我創(chuàng)建了聯(lián)合索引人員ID記錄日期否則數(shù)據(jù)量上來之后按人員查詢會全表掃描。物資表的重點在于庫存字段的約束檢查。庫存不能為負(fù)數(shù)我在數(shù)據(jù)庫層直接加了CHECK (quantity 0)的約束在應(yīng)用層用事務(wù)控制出入庫操作的原子性雙保險。2.2 建庫建表與初始化數(shù)據(jù)腳本示例數(shù)據(jù)庫名稱定義為isolation_db字符集指定為utf8mb4。我個人習(xí)慣在MySQL8.0上把排序規(guī)則設(shè)為utf8mb4_unicode_ci這個排序規(guī)則對中文文本比較友好。CREATE DATABASE IF NOT EXISTS isolation_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;用戶表建表語句我直接給出來注意密碼字段不要用varchar(50)因為BCrypt加密后的密碼長度是60位長度不夠會導(dǎo)致認(rèn)證失敗CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 主鍵ID, username VARCHAR(50) NOT NULL UNIQUE COMMENT 登錄賬號, password VARCHAR(100) NOT NULL COMMENT BCrypt加密后的密碼, nickname VARCHAR(50) COMMENT 用戶昵稱, role VARCHAR(20) NOT NULL DEFAULT USER COMMENT 角色: ADMIN/DOCTOR/USER, status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài): 1啟用 0禁用, create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, deleted TINYINT NOT NULL DEFAULT 0 COMMENT 邏輯刪除標(biāo)記, INDEX idx_username (username) ) ENGINEInnoDB COMMENT系統(tǒng)用戶表;這里有一個非常容易被忽略的坑MySQL8.0默認(rèn)的認(rèn)證插件是caching_sha2_password而很多老版本驅(qū)動只支持mysql_native_password。如果你在連接數(shù)據(jù)庫時報認(rèn)證插件錯誤要么改用8.0對應(yīng)的驅(qū)動版本要么在建用戶時指定認(rèn)證插件。我的做法是在項目初始化時統(tǒng)一使用mysql-connector-j8.0.x版本代碼里指定驅(qū)動為com.mysql.cj.jdbc.Driver。2.3 初始化管理員的正確姿勢初始數(shù)據(jù)里必須要有一個管理員賬號。我用BCrypt加密工具生成密碼串而不是明文存入數(shù)據(jù)庫。具體做法是寫一個CommandLineRunner在SpringBoot啟動時檢測sys_user表是否為空如果為空就自動插入默認(rèn)管理員。Component public class AdminInitializer implements CommandLineRunner { Autowired private SysUserMapper userMapper; Override public void run(String... args) { Long count userMapper.selectCount(null); if (count 0) return; SysUser admin new SysUser(); admin.setUsername(admin); admin.setPassword(new BCryptPasswordEncoder().encode(admin123)); admin.setNickname(系統(tǒng)管理員); admin.setRole(ADMIN); userMapper.insert(admin); log.info(默認(rèn)管理員賬號已創(chuàng)建: admin / admin123); } }這樣設(shè)計的好處是別人拿到源碼后不需要手動執(zhí)行SQL插入數(shù)據(jù)就能啟動系統(tǒng)體驗會好很多。3. 后端核心實現(xiàn)SpringBoot2 MyBatis-Plus的實戰(zhàn)技巧3.1 項目骨架與統(tǒng)一結(jié)果封裝后端項目的標(biāo)準(zhǔn)包結(jié)構(gòu)是這樣的controller、service、mapper、entity、common、config。controller只做參數(shù)接收和結(jié)果響應(yīng)service寫業(yè)務(wù)邏輯mapper就是MyBatis-Plus的BaseMapper接口entity對應(yīng)數(shù)據(jù)庫表common放通用工具類和結(jié)果封裝config放配置類。所有接口返回統(tǒng)一的數(shù)據(jù)結(jié)構(gòu)這是前后端協(xié)作質(zhì)量提升的關(guān)鍵一步。封裝的返回體包含三個字段code狀態(tài)碼、message提示信息、data業(yè)務(wù)數(shù)據(jù)。Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.message 操作成功; result.data data; return result; } public static T ResultT error(String message) { ResultT result new Result(); result.code 500; result.message message; return result; } }統(tǒng)一的返回格式解決了前后端溝通成本問題。前端axios攔截器只需要判斷code是否為200再決定是走業(yè)務(wù)邏輯還是彈出錯誤提示代碼邏輯會非常干凈。3.2 基于MyBatis-Plus的通用CRUD服務(wù)封裝MyBatis-Plus這個框架最大的價值不是幫你寫SQL而是幫你省掉那些無狀態(tài)的單表增刪改查代碼?；贐aseMapper接口你不需要寫任何SQL就能完成單表的插入、更新、條件查詢、分頁查詢。但如果每個Service都重復(fù)寫一套selectList、insert、updateById那也沒有真正省事。我的做法是封裝一個通用Service接口和實現(xiàn)類把常見的CRUD操作抽象出來。這個思路在項目里效果非常明顯六個業(yè)務(wù)模塊的Service層加起來不到兩百行業(yè)務(wù)代碼。public interface CommonServiceT { boolean save(T entity); boolean update(T entity); boolean removeById(Long id); T getById(Long id); ListT list(WrapperT queryWrapper); IPageT page(PageT page, WrapperT queryWrapper); }通用實現(xiàn)類基于IServiceT來做業(yè)務(wù)模塊的Service只需要繼承這個通用實現(xiàn)類再補(bǔ)充各自獨有的業(yè)務(wù)方法即可。值得注意的是通用CRUD雖然方便但只適合單表簡單操作。多表關(guān)聯(lián)或復(fù)雜統(tǒng)計我會在mapper里寫自定義SQL使用Select注解或XML文件實現(xiàn)。千萬不要所有業(yè)務(wù)都用通用CRUD硬套比如物資出庫時要同時扣減庫存并新增出入庫記錄這種就必須用事務(wù)方法處理。3.3 分頁查詢的正確打開方式MyBatis-Plus分頁需要先配置分頁插件這個步驟容易漏漏了之后你會發(fā)現(xiàn)page方法返回的數(shù)據(jù)永遠(yuǎn)是全量的。Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }配置完成后Service層調(diào)用分頁前端只需要傳遞當(dāng)前頁碼pageNum和每頁條數(shù)pageSize兩個參數(shù)即可。分頁插件會自動生成count查詢和limit語句你不需要手動寫SQL。除了分頁MyBatis-Plus的LambdaQueryWrapper也很好用。比如做人員列表的條件查詢姓名和狀態(tài)都可能為空用條件構(gòu)造器配合StringUtils.hasText()判斷就能避免拼接SQL時空條件的坑。LambdaQueryWrapperIsolationPerson wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(personName), IsolationPerson::getName, personName) .eq(personStatus ! null, IsolationPerson::getStatus, personStatus) .orderByDesc(IsolationPerson::getCreateTime);用LambdaQueryWrapper還有一層好處就是編譯期能檢查字段名字段寫錯了會直接編譯報錯不會等到運(yùn)行期才告警這一點對開發(fā)效率影響非常大。3.4 登錄鑒權(quán)與角色權(quán)限的控制實現(xiàn)認(rèn)證方案我選了JWT無狀態(tài)方案沒有用Session主要考慮到前后端分離架構(gòu)下Session跨域處理麻煩而JWT天然無狀態(tài)前端存儲token每次請求在請求頭里攜帶即可。流程是這樣用戶登錄成功后后端生成token返回給前端前端后續(xù)請求在請求頭中加入Authorization: Bearer token后端攔截器解析token獲取用戶ID和角色放行或拒絕請求。生成token我用的是hutool工具包的JWTUtil省去手寫JJWT的繁瑣代碼。token里只放user id和role兩個字段過期時間設(shè)置為24小時。public class JwtUtils { private static final String SECRET your-secret-key; public static String generateToken(Long userId, String role) { return JWT.create() .setPayload(userId, userId) .setPayload(role, role) .setExpiresAt(DateUtil.offsetHour(new Date(), 24)) .setKey(SECRET.getBytes()) .sign(); } public static JWTValidator validateToken(String token) { return JWTValidator.of(token).validateAlgorithm(JWTSignerUtil.hs256(SECRET.getBytes())); } }權(quán)限控制通過攔截器實現(xiàn)攔截所有/api/**請求白名單放行登錄接口。攔截器里解析token后把用戶信息放入ThreadLocal后續(xù)Service層就能直接獲取當(dāng)前操作人是誰。說實話JWT的坑也有。最典型的問題是token無法主動失效如果用戶修改了密碼舊token在24小時內(nèi)仍然有效。我的解決方案是引入一個token_version字段用戶修改密碼時版本號加1JWT中攜帶版本號攔截器對比數(shù)據(jù)庫中的版本號不一致就拒絕訪問。這個設(shè)計在文檔里沒有但我覺得對于真實交付系統(tǒng)來說很必要。3.5 核心業(yè)務(wù)狀態(tài)流轉(zhuǎn)的實現(xiàn)隔離人員從登記到解除狀態(tài)流轉(zhuǎn)必須嚴(yán)謹(jǐn)。我的設(shè)計是狀態(tài)字段加上操作時間的聯(lián)動。登記入住時如果房間為空閑就同時執(zhí)行三個操作更新人員狀態(tài)為隔離中更新房間狀態(tài)為占用寫入一條操作日志。這三個操作必須在一個事務(wù)里否則就會出現(xiàn)人員已登記但房間沒被占用的數(shù)據(jù)不一致問題。Transactional(rollbackFor Exception.class) public ResultVoid checkIn(CheckInRequest request) { // 校驗房間狀態(tài) Room room roomMapper.selectById(request.getRoomId()); if (!FREE.equals(room.getStatus())) { return Result.error(該房間當(dāng)前不可用); } // 登記入住 IsolationPerson person new IsolationPerson(); person.setName(request.getName()); person.setRoomNo(room.getRoomNo()); person.setStatus(1); person.setCheckInTime(LocalDateTime.now()); isolationPersonMapper.insert(person); // 占用房間 room.setStatus(OCCUPIED); roomMapper.updateById(room); // 寫日志 OperationLog log new OperationLog(); log.setContent(人員【 person.getName() 】入住房間【 room.getRoomNo() 】); operationLogMapper.insert(log); return Result.success(null); }Transactional注解強(qiáng)調(diào)了事務(wù)邊界。如果這里不加事務(wù)第二步房間更新失敗后第一步已經(jīng)寫入了數(shù)據(jù)庫后面再做解除隔離、統(tǒng)計報表數(shù)據(jù)就會錯亂。這類狀態(tài)型業(yè)務(wù)一定要把事務(wù)放在Service層在Controller層加事務(wù)注解是無效的因為事務(wù)要通過Spring代理生效Controller交給Service調(diào)用的入口在代理對象內(nèi)部多層的調(diào)用鏈容易出現(xiàn)代理失效。解除隔離的流程同理需要同時更新人員狀態(tài)為已解除、房間狀態(tài)為消殺中、生成解除記錄。我把解除邏輯和登記邏輯做了對稱設(shè)計保證狀態(tài)流轉(zhuǎn)閉環(huán)。4. 前端實現(xiàn)Vue3 Element Plus怎么把后臺頁面做順手4.1 Vite初始化與項目目錄劃分前端我用Vite創(chuàng)建Vue3項目命令是npm create vitelatest isolation-admin -- --template vue。選Vite不選webpack的原因很直接Vite的開發(fā)服務(wù)器冷啟動幾乎秒開熱更新速度也快Vue3官方推薦的腳手架就是Vite。項目目錄結(jié)構(gòu)我按后端模塊做了對應(yīng)劃分views下面每個模塊一個文件夾每個文件夾里放index.vue和對應(yīng)的子組件。這樣維護(hù)起來非常直觀后端的接口路徑和前端頁面的目錄結(jié)構(gòu)一一對應(yīng)。src/ ├── api/ # 接口請求封裝 ├── assets/ # 靜態(tài)資源 ├── components/ # 通用組件 ├── router/ # 路由配置 ├── stores/ # Pinia狀態(tài)管理 ├── views/ # 頁面組件 │ ├── login/ │ ├── dashboard/ │ ├── person/ │ ├── room/ │ ├── health/ │ ├── material/ │ └── notice/ └── utils/ # 工具方法4.2 路由守衛(wèi)與權(quán)限控制后臺管理系統(tǒng)的路由不能隨便訪問沒登錄的人直接訪問首頁必須被攔截跳轉(zhuǎn)到登錄頁。這個邏輯放在路由守衛(wèi)里實現(xiàn)。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } })除了登錄狀態(tài)角色權(quán)限我用了前端按鈕級控制。比如只有管理員能看系統(tǒng)用戶管理頁面醫(yī)護(hù)人員只能看到健康管理和自己的工作臺。方案是在Pinia的userStore里存當(dāng)前用戶的role然后頁面上通過v-if判斷是否渲染特定按鈕或菜單項。后端的接口也要做同樣的權(quán)限校驗前端控制只是提升體驗真正保證安全的是后端。4.3 Axios封裝與接口管理的設(shè)計思路前端請求必須有統(tǒng)一的攔截器這是我在項目里花時間最多但收益最大的部分。攔截器主要做三件事請求頭注入token、響應(yīng)統(tǒng)一處理、錯誤統(tǒng)一提示。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) { return res } else { ElMessage.error(res.message) return Promise.reject(new Error(res.message)) } }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } else { ElMessage.error(網(wǎng)絡(luò)請求異常請稍后重試) } return Promise.reject(error) })這里重點說下401處理。JWT過期后后端攔截器會返回401狀態(tài)碼前端此時要做的就是清掉本地token并跳回登錄頁。如果不在這個統(tǒng)一攔截器里處理那每個頁面都要單獨判斷登錄失效代碼量會成倍增加。統(tǒng)一攔截器一次性解決這個問題這也是后端返回狀態(tài)碼要統(tǒng)一的原因。接口管理上我把每個接口導(dǎo)出為獨立的函數(shù)頁面上只關(guān)心中間調(diào)用邏輯不關(guān)心URL拼接。這種把接口層、頁面組件層、狀態(tài)管理層分離的做法在系統(tǒng)功能擴(kuò)展時會非常受益。比如以后后端接口地址變了只需要改api目錄下對應(yīng)文件就行頁面代碼完全不用動。4.4 核心頁面的交互設(shè)計以人員登記與健康上報為例人員登記頁面是這個系統(tǒng)里最復(fù)雜的表單。字段有姓名、證件號、手機(jī)號、來源地、房間選擇、計劃解除時間。表單驗證直接用Element Plus的表單校驗規(guī)則手機(jī)上必須符合11位數(shù)字證件號按身份證格式做正則校驗。房間選擇用級聯(lián)選擇器實現(xiàn)先選樓棟再選樓層最后選具體房間。關(guān)鍵點是房間下拉框的數(shù)據(jù)應(yīng)該只顯示空閑狀態(tài)的前端實時請求房間列表根據(jù)status字段過濾。房間列表數(shù)據(jù)量一般不大直接查詢?nèi)吭僭谇岸诉^濾也能接受但更標(biāo)準(zhǔn)的做法是后端提供room/freeList接口只返回空閑房間。健康上報頁面的重點在于連續(xù)記錄。前端做成一個日期選擇器加表單的結(jié)構(gòu)用戶選擇日期填報體溫、是否咳嗽、是否乏力。后端保存時會自動關(guān)聯(lián)當(dāng)前人員和登錄用戶不需要前端傳用戶ID。這個細(xì)節(jié)很重要如果前端能把用戶ID傳給后端攻擊者就能偽造別人的健康記錄。所以后端一定要從token里取用戶信息不能相信前端傳過來的任何用戶標(biāo)識。數(shù)據(jù)統(tǒng)計頁面我用了ECharts繪制體溫趨勢折線圖和每日新增隔離人員柱狀圖。ECharts的Vue3封裝庫叫vue-echarts使用起來非常方便。要注意的是ECharts圖表的容器必須有明確高度否則圖表初始化后高度為0什么都看不到。這個是ECharts最常見的坑比配置項出錯還多。4.5 前端聯(lián)調(diào)的跨域問題處理開發(fā)階段前端跑在5173端口后端跑在8080端口兩者之間跨域。最方便的方案是在Vite的配置文件里配代理而不是在后端開CORS。代理的好處是前端請求的URL是相對路徑后面部署到同一域名下時不需要改任何代碼。server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }后端也可以配置CorsFilter但我在項目里還是推薦用Vite代理。原因很簡單開發(fā)環(huán)境用代理生產(chǎn)環(huán)境把前端打包后的dist目錄和后端jar包放在一起由SpringBoot統(tǒng)一提供靜態(tài)資源服務(wù)天然就沒有跨域問題。前后端分離部署另說但課程設(shè)計和畢設(shè)項目一般都部署在一臺機(jī)器上代理方案最省心。5. 環(huán)境準(zhǔn)備與部署實測記錄5.1 MySQL8.0安裝與初始化記錄我這次用的是在Docker中安裝MySQL8.0的方式部署起來非常干凈。Docker安裝MySQL8.0的關(guān)鍵參數(shù)是端口映射、root密碼、數(shù)據(jù)目錄掛載。docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDyourpassword \ -e TZAsia/Shanghai \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0這個命令有幾個值得注意的地方。-e TZAsia/Shanghai指定時區(qū)不加的話MySQL默認(rèn)使用UTC時區(qū)這樣會導(dǎo)致數(shù)據(jù)庫存儲的當(dāng)前時間和北京時間差8個小時。數(shù)據(jù)目錄掛載到宿主機(jī)是為了容器刪除重建時數(shù)據(jù)不丟失。當(dāng)然如果你本機(jī)已經(jīng)裝了MySQL直接用本機(jī)的也可以。我的建議是裝原生版還是Docker版看你自己情況關(guān)鍵是數(shù)據(jù)庫版本必須是8.0因為MyBatis-Plus的DbType.MYSQL和driver的配置都跟版本強(qiáng)相關(guān)。初始化數(shù)據(jù)庫時執(zhí)行建表腳本然后記得確認(rèn)用戶表權(quán)限。如果用的是root用戶連接一般沒問題但如果新建了專門用戶需要授權(quán)CREATE USER isolation% IDENTIFIED BY isolation123; GRANT ALL PRIVILEGES ON isolation_db.* TO isolation%; FLUSH PRIVILEGES;5.2 后端配置文件實測清單后端配置文件application.yml是項目能跑起來的命脈我把關(guān)鍵配置項逐項列出來。首先是數(shù)據(jù)源配置MySQL8.0的driver-class-name是com.mysql.cj.jdbc.Driver不是老版的com.mysql.jdbc.Driver寫錯就啟動失敗。URL里必須帶serverTimezoneAsia/Shanghai否則連接會報時區(qū)錯誤。server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/isolation_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: yourpassword jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0mybatis-plus.configuration.log-impl這里我開了SQL日志打印開發(fā)階段能直觀看到每條執(zhí)行的SQL語句排查問題非常方便。等打包上線前可以注釋掉避免日志刷屏。邏輯刪除配置也很關(guān)鍵deleted字段配合邏輯刪除配置后MyBatis-Plus在執(zhí)行delete操作時會自動轉(zhuǎn)為update語句更新deleted為1查詢時會自動加上deleted0條件。這個機(jī)制避免了物理刪除導(dǎo)致的歷史數(shù)據(jù)無法追溯問題。5.3 前端打包與服務(wù)集成開發(fā)完成后前端需要打包成靜態(tài)資源然后放到后端工程里統(tǒng)一提供服務(wù)這樣整個系統(tǒng)只需要啟動一個Java進(jìn)程就能訪問。npm run build構(gòu)建完成后dist目錄下就是打包產(chǎn)物。把dist目錄里的內(nèi)容復(fù)制到SpringBoot項目的src/main/resources/static目錄下重新打包后端即可。mvn clean package -DskipTests java -jar target/isolation-system.jar啟動成功后訪問http://localhost:8080就能看到登錄頁面。前端靜態(tài)資源交給SpringBoot托管后路由需要做處理。Vue Router默認(rèn)使用history模式直接訪問/person會返回404。我的做法是使用hash模式URL帶#號雖然不太美觀但最大的好處是不需要額外的服務(wù)器配置。畢設(shè)答辯階段演示系統(tǒng)時hash模式是最穩(wěn)妥的選擇。部署過程中實測需要特別留意的就是jar包運(yùn)行時不能直接雙擊打開要用命令行java -jar啟動。如果想在服務(wù)器后臺運(yùn)行用nohup java -jar target/isolation-system.jar app.log 21 把日志輸出到文件中方便排查問題。6. 常見問題與排查技巧實錄6.1 MySQL8.0連接報錯實戰(zhàn)排查我在聯(lián)調(diào)階段遇到最多的問題就是數(shù)據(jù)庫連接失敗?？偟膩碚f有三類錯誤最典型。第一類是Public Key Retrieval is not allowed解決方案是連接URL加allowPublicKeyRetrievaltrue另外把useSSLfalse也加上測試環(huán)境能省很多麻煩。第二類是Unknown database isolation_db說明數(shù)據(jù)庫沒創(chuàng)建或名字拼錯在SQL客戶端中執(zhí)行SHOW DATABASES;確認(rèn)。第三類是Access denied for user說明用戶名密碼錯誤或授權(quán)不到位重新授權(quán)即可。時區(qū)錯誤也是高頻問題錯誤信息里包含serverTimezone字樣。出現(xiàn)這個問題說明連接URL里沒帶時區(qū)參數(shù)在上面5.2節(jié)的配置里已經(jīng)解決了。6.2 MyBatis-Plus的常見誤用第一個坑是分頁插件沒配置查出的數(shù)據(jù)不是分頁結(jié)果而是全表數(shù)據(jù)。這屬于配置遺漏加上PaginationInnerInterceptor就好了。第二個坑是邏輯刪除配置了但實體類字段名不匹配提示找不到deleted字段檢查實體類是否標(biāo)注了TableLogic注解或全局配置中l(wèi)ogic-delete-field是否和實體字段名一致。第三個坑是條件構(gòu)造器直接new QueryWrapper后暴露SQL注入風(fēng)險我建議統(tǒng)一使用LambdaQueryWrapper或LambdaUpdateWrapper用方法引用代替字符串列名既安全又能編譯期發(fā)現(xiàn)問題。還有一個小技巧MyBatis-Plus的selectCount方法傳入null參數(shù)表示查詢?nèi)淼珱]人管的話清空表數(shù)據(jù)很危險。我對這個項目中所有統(tǒng)計類操作都顯式傳入條件構(gòu)造器而且加上了deleted0條件避免把邏輯刪除的數(shù)據(jù)也算進(jìn)去。6.3 前后端跨域與鑒權(quán)聯(lián)調(diào)問題前端頁面打開后接口報跨域首選方案就是檢查Vite的proxy配置確認(rèn)target地址是否正確端口是否對應(yīng)后端實際啟動端口其次確認(rèn)后端Controller的RequestMapping前綴是否和proxy的/api前綴一致不一致會導(dǎo)致代理轉(zhuǎn)發(fā)后404。另外還要檢查SpringBoot的context-path設(shè)置如果配置了context-path后端接口的實際訪問路徑會變長代理也要相應(yīng)調(diào)整。登錄接口調(diào)用成功但拿不到用戶信息優(yōu)先檢查后端攔截器排除名單是否寫對。如果攔截器攔截了/api/user/login登錄請求直接401那問題就很明顯。JWT解析報錯通常是密鑰不一致導(dǎo)致的檢查前端拿到的token和后端生成token時用的密鑰是否匹配。6.4 前端開發(fā)調(diào)試的那些坑Vue3開發(fā)過程中最容易出問題的是響應(yīng)式數(shù)據(jù)的誤用。如果你的數(shù)據(jù)在頁面中修改后視圖不更新多半是用普通變量代替了ref或reactive這是Vue3響應(yīng)式原理的基本功。另外在Composition API中直接在setup函數(shù)里寫setTimeout并修改數(shù)據(jù)對象屬性不需要額外處理響應(yīng)式但如果用了解構(gòu)賦值把響應(yīng)式對象拆成普通變量那修改就失效了。表格數(shù)據(jù)加載不出來時先用瀏覽器開發(fā)者工具的Network面板看接口是否返回正常數(shù)據(jù)重點看后端返回的data字段結(jié)構(gòu)是否符合el-table的prop綁定。常見錯誤是后端返回字段名是createTime前端綁定的是create_time兩者不一致導(dǎo)致表格列全空。Element Plus組件庫版本要注意和Vue版本匹配。Element Plus不支持Vue2必須用Vue3項目。如果引入后頁面空白且控制臺報組件未注冊錯誤檢查是否忘記了app.use(ElementPlus)。7. 這套源碼里的隱藏價值與后續(xù)擴(kuò)展建議說實話這套系統(tǒng)最值得研究的部分不是功能有多花哨而是它完整展示了SpringBoot2 Vue3從零搭建一個后端管理系統(tǒng)的標(biāo)準(zhǔn)流程。表結(jié)構(gòu)設(shè)計、統(tǒng)一結(jié)果封裝、通用CRUD抽象、JWT鑒權(quán)、前端路由守衛(wèi)、Axios攔截器這些都是以后不管做什么管理類系統(tǒng)都會反復(fù)用到的技術(shù)點。把這套源碼吃透你就能舉一反三。如果后續(xù)想給這個項目加分我個人建議優(yōu)先擴(kuò)展三個方向。第一個是Excel導(dǎo)入導(dǎo)出功能人員批量登記、健康記錄導(dǎo)出用EasyExcel就能實現(xiàn)這個功能在答辯演示時非常出效果。第二個是ECharts大屏展示把隔離人員趨勢、房間占用率、物資消耗匯總做成可視化看板整個系統(tǒng)的檔次一下就上去了。第三個是Redis緩存優(yōu)化給用戶權(quán)限和房間列表加上緩存提升接口響應(yīng)速度。技術(shù)學(xué)習(xí)這塊做完整個項目之后我的最大感受是一定要自己動手把整個流程走通一遍?？磩e人分享的crud封裝、分頁配置、jwt攔截器看的時候覺得很簡單真正動手時才發(fā)現(xiàn)一堆細(xì)節(jié)問題。特別是事務(wù)邊界放在哪一層、Vite代理怎么配、靜態(tài)資源如何統(tǒng)一部署這些問題只有自己操作一次才能真正記住。最后再分享一個小技巧項目開發(fā)過程中每完成一個模塊記得把運(yùn)行效果截圖保存下來。無論是寫課程設(shè)計文檔還是答辯PPT這些截圖都是最有說服力的素材。另外數(shù)據(jù)庫設(shè)計文檔用Navicat或DataGrip導(dǎo)出一份Word版連注釋一起導(dǎo)出這個文檔比你自己重新畫表結(jié)構(gòu)快得多而且格式規(guī)范導(dǎo)師看了也會覺得你做得扎實。 SpringBoot2+Vue3疫情隔離管理系統(tǒng)開發(fā)實戰(zhàn)：從零搭建到部署全流程
最近把一個疫情隔離管理系統(tǒng)從零到一完整做了一遍技術(shù)棧就是標(biāo)題里那套——SpringBoot2 Vue3 MyBatis-Plus MySQL8.0。說實話這類系統(tǒng)放在平時看起來不復(fù)雜無非就是人員登記、健康監(jiān)測、房間管理、物資管理幾塊業(yè)務(wù)但真正從設(shè)計表結(jié)構(gòu)到前后端聯(lián)調(diào)再到打包部署、寫文檔準(zhǔn)備交付整個過程里踩過的坑遠(yuǎn)比想象中多。這篇文章不聊虛的就把我做這個項目的完整思路、表結(jié)構(gòu)設(shè)計、后端核心封裝、前端頁面交互、環(huán)境部署實測記錄以及那些文檔里絕對不會寫的排查經(jīng)驗全部攤開講清楚。項目源碼附帶的說明文檔我看了寫得中規(guī)中矩但還不夠細(xì)所以我決定自己重新整理一篇記錄更接近真實開發(fā)過程的經(jīng)驗。不管你是準(zhǔn)備拿這個項目做課程設(shè)計、畢業(yè)設(shè)計還是單純想練手SpringBoot2 Vue3的組合玩法這篇內(nèi)容都能幫你省下不少摸索時間?；A(chǔ)要求不高會一點Java和JavaScript語法就能跟上我會把關(guān)鍵代碼和配置直接貼出來你照著做就能跑起來。1. 業(yè)務(wù)梳理與技術(shù)選型背后的邏輯1.1 這個系統(tǒng)到底解決什么問題疫情隔離管理這個場景核心痛點在于信息分散。隔離人員入住登記靠紙質(zhì)表格每日體溫監(jiān)測靠人工匯報房間占用情況靠打電話問物資消耗靠月底盤庫存。一旦人數(shù)上來數(shù)據(jù)一多管理就完全失控。所以這個系統(tǒng)的定位就是把這些分散操作集中到一個平臺里讓不同角色在各自權(quán)限范圍內(nèi)完成自己的工作。管理員負(fù)責(zé)全局配置和數(shù)據(jù)查看醫(yī)護(hù)人員負(fù)責(zé)錄入隔離人員的健康監(jiān)測信息普通用戶或隔離人員則可以通過系統(tǒng)查看自己的狀態(tài)和通知。核心業(yè)務(wù)流程其實只有一條人員登記入駐、分配房間、每日健康記錄、到期解除隔離。圍繞這條鏈路再延伸出物資管理、公告通知、數(shù)據(jù)統(tǒng)計等輔助模塊。1.2 技術(shù)棧選型不追新選成熟為什么選SpringBoot2而不是SpringBoot3我的考慮很簡單。SpringBoot2.7.x配合JDK8是當(dāng)前最穩(wěn)定的企業(yè)級組合網(wǎng)上資料多遇到問題基本一搜就有答案。SpringBoot3強(qiáng)制要求JDK17如果你的電腦只裝了JDK8那就要多一道環(huán)境配置的檻。對于課程設(shè)計和畢業(yè)設(shè)計這種場景穩(wěn)定性優(yōu)先于新版本特性另外MyBatis-Plus對SpringBoot2.x的支持也是最成熟的代碼生成器、分頁插件、條件構(gòu)造器都是直接可用。Vue3選擇了Composition API Element Plus的組合。Vue3對比Vue2最大的變化就是組合式API邏輯復(fù)用更清晰配合Vite構(gòu)建速度極快開發(fā)體驗比webpack時代好太多。Element Plus是Vue3生態(tài)里最完整的UI組件庫后臺管理系統(tǒng)的表格、表單、彈窗、標(biāo)簽頁都能一站解決。MySQL8.0在這個項目里其實發(fā)揮了幾個關(guān)鍵特性。默認(rèn)字符集是utf8mb4中文存儲不會出現(xiàn)亂碼問題窗口函數(shù)和公共表表達(dá)式這些新特性雖然在這個項目里沒用上但以后做數(shù)據(jù)分析報表擴(kuò)展時直接就能用另外MySQL8.0對JSON字段類型支持很好后面如果要擴(kuò)展自定義字段也方便。最重要的是學(xué)校機(jī)房和企業(yè)內(nèi)部環(huán)境現(xiàn)在普遍裝的就是8.0選它意味著部署不折騰。1.3 軟件架構(gòu)與核心模塊劃分整個系統(tǒng)采用經(jīng)典前后端分離架構(gòu)。后端提供RESTful API前端通過HTTP請求調(diào)用兩者之間通過JSON交換數(shù)據(jù)。后端SpringBoot負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)庫操作前端Vue3負(fù)責(zé)頁面渲染和用戶交互。系統(tǒng)功能模塊我劃分為六大塊模塊核心功能設(shè)計說明用戶管理登錄注冊、角色分配、賬號維護(hù)采用JWT做無狀態(tài)認(rèn)證角色分管理員/醫(yī)護(hù)人員/普通用戶人員管理隔離人員登記、解除、查詢核心業(yè)務(wù)入口包含入住和解除兩個關(guān)鍵動作房間管理樓棟/房間信息維護(hù)、分配狀態(tài)房間狀態(tài)驅(qū)動分配邏輯空閑/占用/消殺三種狀態(tài)健康監(jiān)測體溫記錄、異常標(biāo)記、連續(xù)監(jiān)控按人員維度記錄每日健康數(shù)據(jù)支持歷史曲線查詢物資管理物資出入庫、庫存預(yù)警核心是庫存臺賬的準(zhǔn)確性預(yù)警閾值可配置公告管理通知發(fā)布、列表查看面向所有角色支持按發(fā)布時間排序模塊之間的依賴關(guān)系也很清晰人員管理依賴房間管理來確定入住房間健康監(jiān)測依賴人員管理來確定記錄歸屬統(tǒng)計報表又依賴前面所有模塊的數(shù)據(jù)。設(shè)計時把公共字段創(chuàng)建時間、更新時間、邏輯刪除標(biāo)記統(tǒng)一放進(jìn)基礎(chǔ)實體類避免每個表都重復(fù)寫一遍。2. 數(shù)據(jù)庫設(shè)計與初始化腳本要點2.1 核心表結(jié)構(gòu)設(shè)計數(shù)據(jù)庫是整套系統(tǒng)的地基。我在設(shè)計表結(jié)構(gòu)的時候一切都是圍繞“業(yè)務(wù)狀態(tài)如何流轉(zhuǎn)”來做的。最終確定的六張核心表是用戶表、隔離人員表、房間表、健康記錄表、物資表、公告表。這里挑幾張關(guān)鍵表詳細(xì)說一下。隔離人員表是最復(fù)雜的一張表它承載了整條業(yè)務(wù)主線的狀態(tài)。字段包括姓名、證件類型、證件號碼、手機(jī)號、來源地、入住時間、計劃解除時間、實際解除時間、入住房間號、狀態(tài)。其中狀態(tài)字段是關(guān)鍵設(shè)計我用了tinyint類型的status0表示待入住1表示隔離中2表示已解除。為什么不直接用字符串因為后端做狀態(tài)條件查詢時整型比較比字符串匹配效率更高而且配合MyBatis-Plus的枚舉類型就能在Java代碼里做統(tǒng)一轉(zhuǎn)換。房間表的設(shè)計重點在狀態(tài)字段和編號規(guī)則。房間編號我采用了“樓棟號-樓層-房間號”的組合格式比如2-3-05表示2棟3層05號房。這樣設(shè)計的好處是前端展示時不用額外拼接后端做樓棟統(tǒng)計時也能通過模糊查詢實現(xiàn)。健康記錄表相對簡單但索引設(shè)計很關(guān)鍵。由于系統(tǒng)要按人員查歷史記錄我創(chuàng)建了聯(lián)合索引人員ID記錄日期否則數(shù)據(jù)量上來之后按人員查詢會全表掃描。物資表的重點在于庫存字段的約束檢查。庫存不能為負(fù)數(shù)我在數(shù)據(jù)庫層直接加了CHECK (quantity 0)的約束在應(yīng)用層用事務(wù)控制出入庫操作的原子性雙保險。2.2 建庫建表與初始化數(shù)據(jù)腳本示例數(shù)據(jù)庫名稱定義為isolation_db字符集指定為utf8mb4。我個人習(xí)慣在MySQL8.0上把排序規(guī)則設(shè)為utf8mb4_unicode_ci這個排序規(guī)則對中文文本比較友好。CREATE DATABASE IF NOT EXISTS isolation_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;用戶表建表語句我直接給出來注意密碼字段不要用varchar(50)因為BCrypt加密后的密碼長度是60位長度不夠會導(dǎo)致認(rèn)證失敗CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 主鍵ID, username VARCHAR(50) NOT NULL UNIQUE COMMENT 登錄賬號, password VARCHAR(100) NOT NULL COMMENT BCrypt加密后的密碼, nickname VARCHAR(50) COMMENT 用戶昵稱, role VARCHAR(20) NOT NULL DEFAULT USER COMMENT 角色: ADMIN/DOCTOR/USER, status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài): 1啟用 0禁用, create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, deleted TINYINT NOT NULL DEFAULT 0 COMMENT 邏輯刪除標(biāo)記, INDEX idx_username (username) ) ENGINEInnoDB COMMENT系統(tǒng)用戶表;這里有一個非常容易被忽略的坑MySQL8.0默認(rèn)的認(rèn)證插件是caching_sha2_password而很多老版本驅(qū)動只支持mysql_native_password。如果你在連接數(shù)據(jù)庫時報認(rèn)證插件錯誤要么改用8.0對應(yīng)的驅(qū)動版本要么在建用戶時指定認(rèn)證插件。我的做法是在項目初始化時統(tǒng)一使用mysql-connector-j8.0.x版本代碼里指定驅(qū)動為com.mysql.cj.jdbc.Driver。2.3 初始化管理員的正確姿勢初始數(shù)據(jù)里必須要有一個管理員賬號。我用BCrypt加密工具生成密碼串而不是明文存入數(shù)據(jù)庫。具體做法是寫一個CommandLineRunner在SpringBoot啟動時檢測sys_user表是否為空如果為空就自動插入默認(rèn)管理員。Component public class AdminInitializer implements CommandLineRunner { Autowired private SysUserMapper userMapper; Override public void run(String... args) { Long count userMapper.selectCount(null); if (count 0) return; SysUser admin new SysUser(); admin.setUsername(admin); admin.setPassword(new BCryptPasswordEncoder().encode(admin123)); admin.setNickname(系統(tǒng)管理員); admin.setRole(ADMIN); userMapper.insert(admin); log.info(默認(rèn)管理員賬號已創(chuàng)建: admin / admin123); } }這樣設(shè)計的好處是別人拿到源碼后不需要手動執(zhí)行SQL插入數(shù)據(jù)就能啟動系統(tǒng)體驗會好很多。3. 后端核心實現(xiàn)SpringBoot2 MyBatis-Plus的實戰(zhàn)技巧3.1 項目骨架與統(tǒng)一結(jié)果封裝后端項目的標(biāo)準(zhǔn)包結(jié)構(gòu)是這樣的controller、service、mapper、entity、common、config。controller只做參數(shù)接收和結(jié)果響應(yīng)service寫業(yè)務(wù)邏輯mapper就是MyBatis-Plus的BaseMapper接口entity對應(yīng)數(shù)據(jù)庫表common放通用工具類和結(jié)果封裝config放配置類。所有接口返回統(tǒng)一的數(shù)據(jù)結(jié)構(gòu)這是前后端協(xié)作質(zhì)量提升的關(guān)鍵一步。封裝的返回體包含三個字段code狀態(tài)碼、message提示信息、data業(yè)務(wù)數(shù)據(jù)。Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.message 操作成功; result.data data; return result; } public static T ResultT error(String message) { ResultT result new Result(); result.code 500; result.message message; return result; } }統(tǒng)一的返回格式解決了前后端溝通成本問題。前端axios攔截器只需要判斷code是否為200再決定是走業(yè)務(wù)邏輯還是彈出錯誤提示代碼邏輯會非常干凈。3.2 基于MyBatis-Plus的通用CRUD服務(wù)封裝MyBatis-Plus這個框架最大的價值不是幫你寫SQL而是幫你省掉那些無狀態(tài)的單表增刪改查代碼?；贐aseMapper接口你不需要寫任何SQL就能完成單表的插入、更新、條件查詢、分頁查詢。但如果每個Service都重復(fù)寫一套selectList、insert、updateById那也沒有真正省事。我的做法是封裝一個通用Service接口和實現(xiàn)類把常見的CRUD操作抽象出來。這個思路在項目里效果非常明顯六個業(yè)務(wù)模塊的Service層加起來不到兩百行業(yè)務(wù)代碼。public interface CommonServiceT { boolean save(T entity); boolean update(T entity); boolean removeById(Long id); T getById(Long id); ListT list(WrapperT queryWrapper); IPageT page(PageT page, WrapperT queryWrapper); }通用實現(xiàn)類基于IServiceT來做業(yè)務(wù)模塊的Service只需要繼承這個通用實現(xiàn)類再補(bǔ)充各自獨有的業(yè)務(wù)方法即可。值得注意的是通用CRUD雖然方便但只適合單表簡單操作。多表關(guān)聯(lián)或復(fù)雜統(tǒng)計我會在mapper里寫自定義SQL使用Select注解或XML文件實現(xiàn)。千萬不要所有業(yè)務(wù)都用通用CRUD硬套比如物資出庫時要同時扣減庫存并新增出入庫記錄這種就必須用事務(wù)方法處理。3.3 分頁查詢的正確打開方式MyBatis-Plus分頁需要先配置分頁插件這個步驟容易漏漏了之后你會發(fā)現(xiàn)page方法返回的數(shù)據(jù)永遠(yuǎn)是全量的。Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }配置完成后Service層調(diào)用分頁前端只需要傳遞當(dāng)前頁碼pageNum和每頁條數(shù)pageSize兩個參數(shù)即可。分頁插件會自動生成count查詢和limit語句你不需要手動寫SQL。除了分頁MyBatis-Plus的LambdaQueryWrapper也很好用。比如做人員列表的條件查詢姓名和狀態(tài)都可能為空用條件構(gòu)造器配合StringUtils.hasText()判斷就能避免拼接SQL時空條件的坑。LambdaQueryWrapperIsolationPerson wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(personName), IsolationPerson::getName, personName) .eq(personStatus ! null, IsolationPerson::getStatus, personStatus) .orderByDesc(IsolationPerson::getCreateTime);用LambdaQueryWrapper還有一層好處就是編譯期能檢查字段名字段寫錯了會直接編譯報錯不會等到運(yùn)行期才告警這一點對開發(fā)效率影響非常大。3.4 登錄鑒權(quán)與角色權(quán)限的控制實現(xiàn)認(rèn)證方案我選了JWT無狀態(tài)方案沒有用Session主要考慮到前后端分離架構(gòu)下Session跨域處理麻煩而JWT天然無狀態(tài)前端存儲token每次請求在請求頭里攜帶即可。流程是這樣用戶登錄成功后后端生成token返回給前端前端后續(xù)請求在請求頭中加入Authorization: Bearer token后端攔截器解析token獲取用戶ID和角色放行或拒絕請求。生成token我用的是hutool工具包的JWTUtil省去手寫JJWT的繁瑣代碼。token里只放user id和role兩個字段過期時間設(shè)置為24小時。public class JwtUtils { private static final String SECRET your-secret-key; public static String generateToken(Long userId, String role) { return JWT.create() .setPayload(userId, userId) .setPayload(role, role) .setExpiresAt(DateUtil.offsetHour(new Date(), 24)) .setKey(SECRET.getBytes()) .sign(); } public static JWTValidator validateToken(String token) { return JWTValidator.of(token).validateAlgorithm(JWTSignerUtil.hs256(SECRET.getBytes())); } }權(quán)限控制通過攔截器實現(xiàn)攔截所有/api/**請求白名單放行登錄接口。攔截器里解析token后把用戶信息放入ThreadLocal后續(xù)Service層就能直接獲取當(dāng)前操作人是誰。說實話JWT的坑也有。最典型的問題是token無法主動失效如果用戶修改了密碼舊token在24小時內(nèi)仍然有效。我的解決方案是引入一個token_version字段用戶修改密碼時版本號加1JWT中攜帶版本號攔截器對比數(shù)據(jù)庫中的版本號不一致就拒絕訪問。這個設(shè)計在文檔里沒有但我覺得對于真實交付系統(tǒng)來說很必要。3.5 核心業(yè)務(wù)狀態(tài)流轉(zhuǎn)的實現(xiàn)隔離人員從登記到解除狀態(tài)流轉(zhuǎn)必須嚴(yán)謹(jǐn)。我的設(shè)計是狀態(tài)字段加上操作時間的聯(lián)動。登記入住時如果房間為空閑就同時執(zhí)行三個操作更新人員狀態(tài)為隔離中更新房間狀態(tài)為占用寫入一條操作日志。這三個操作必須在一個事務(wù)里否則就會出現(xiàn)人員已登記但房間沒被占用的數(shù)據(jù)不一致問題。Transactional(rollbackFor Exception.class) public ResultVoid checkIn(CheckInRequest request) { // 校驗房間狀態(tài) Room room roomMapper.selectById(request.getRoomId()); if (!FREE.equals(room.getStatus())) { return Result.error(該房間當(dāng)前不可用); } // 登記入住 IsolationPerson person new IsolationPerson(); person.setName(request.getName()); person.setRoomNo(room.getRoomNo()); person.setStatus(1); person.setCheckInTime(LocalDateTime.now()); isolationPersonMapper.insert(person); // 占用房間 room.setStatus(OCCUPIED); roomMapper.updateById(room); // 寫日志 OperationLog log new OperationLog(); log.setContent(人員【 person.getName() 】入住房間【 room.getRoomNo() 】); operationLogMapper.insert(log); return Result.success(null); }Transactional注解強(qiáng)調(diào)了事務(wù)邊界。如果這里不加事務(wù)第二步房間更新失敗后第一步已經(jīng)寫入了數(shù)據(jù)庫后面再做解除隔離、統(tǒng)計報表數(shù)據(jù)就會錯亂。這類狀態(tài)型業(yè)務(wù)一定要把事務(wù)放在Service層在Controller層加事務(wù)注解是無效的因為事務(wù)要通過Spring代理生效Controller交給Service調(diào)用的入口在代理對象內(nèi)部多層的調(diào)用鏈容易出現(xiàn)代理失效。解除隔離的流程同理需要同時更新人員狀態(tài)為已解除、房間狀態(tài)為消殺中、生成解除記錄。我把解除邏輯和登記邏輯做了對稱設(shè)計保證狀態(tài)流轉(zhuǎn)閉環(huán)。4. 前端實現(xiàn)Vue3 Element Plus怎么把后臺頁面做順手4.1 Vite初始化與項目目錄劃分前端我用Vite創(chuàng)建Vue3項目命令是npm create vitelatest isolation-admin -- --template vue。選Vite不選webpack的原因很直接Vite的開發(fā)服務(wù)器冷啟動幾乎秒開熱更新速度也快Vue3官方推薦的腳手架就是Vite。項目目錄結(jié)構(gòu)我按后端模塊做了對應(yīng)劃分views下面每個模塊一個文件夾每個文件夾里放index.vue和對應(yīng)的子組件。這樣維護(hù)起來非常直觀后端的接口路徑和前端頁面的目錄結(jié)構(gòu)一一對應(yīng)。src/ ├── api/ # 接口請求封裝 ├── assets/ # 靜態(tài)資源 ├── components/ # 通用組件 ├── router/ # 路由配置 ├── stores/ # Pinia狀態(tài)管理 ├── views/ # 頁面組件 │ ├── login/ │ ├── dashboard/ │ ├── person/ │ ├── room/ │ ├── health/ │ ├── material/ │ └── notice/ └── utils/ # 工具方法4.2 路由守衛(wèi)與權(quán)限控制后臺管理系統(tǒng)的路由不能隨便訪問沒登錄的人直接訪問首頁必須被攔截跳轉(zhuǎn)到登錄頁。這個邏輯放在路由守衛(wèi)里實現(xiàn)。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else if (!token) { next(/login) } else { next() } })除了登錄狀態(tài)角色權(quán)限我用了前端按鈕級控制。比如只有管理員能看系統(tǒng)用戶管理頁面醫(yī)護(hù)人員只能看到健康管理和自己的工作臺。方案是在Pinia的userStore里存當(dāng)前用戶的role然后頁面上通過v-if判斷是否渲染特定按鈕或菜單項。后端的接口也要做同樣的權(quán)限校驗前端控制只是提升體驗真正保證安全的是后端。4.3 Axios封裝與接口管理的設(shè)計思路前端請求必須有統(tǒng)一的攔截器這是我在項目里花時間最多但收益最大的部分。攔截器主要做三件事請求頭注入token、響應(yīng)統(tǒng)一處理、錯誤統(tǒng)一提示。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) { return res } else { ElMessage.error(res.message) return Promise.reject(new Error(res.message)) } }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } else { ElMessage.error(網(wǎng)絡(luò)請求異常請稍后重試) } return Promise.reject(error) })這里重點說下401處理。JWT過期后后端攔截器會返回401狀態(tài)碼前端此時要做的就是清掉本地token并跳回登錄頁。如果不在這個統(tǒng)一攔截器里處理那每個頁面都要單獨判斷登錄失效代碼量會成倍增加。統(tǒng)一攔截器一次性解決這個問題這也是后端返回狀態(tài)碼要統(tǒng)一的原因。接口管理上我把每個接口導(dǎo)出為獨立的函數(shù)頁面上只關(guān)心中間調(diào)用邏輯不關(guān)心URL拼接。這種把接口層、頁面組件層、狀態(tài)管理層分離的做法在系統(tǒng)功能擴(kuò)展時會非常受益。比如以后后端接口地址變了只需要改api目錄下對應(yīng)文件就行頁面代碼完全不用動。4.4 核心頁面的交互設(shè)計以人員登記與健康上報為例人員登記頁面是這個系統(tǒng)里最復(fù)雜的表單。字段有姓名、證件號、手機(jī)號、來源地、房間選擇、計劃解除時間。表單驗證直接用Element Plus的表單校驗規(guī)則手機(jī)上必須符合11位數(shù)字證件號按身份證格式做正則校驗。房間選擇用級聯(lián)選擇器實現(xiàn)先選樓棟再選樓層最后選具體房間。關(guān)鍵點是房間下拉框的數(shù)據(jù)應(yīng)該只顯示空閑狀態(tài)的前端實時請求房間列表根據(jù)status字段過濾。房間列表數(shù)據(jù)量一般不大直接查詢?nèi)吭僭谇岸诉^濾也能接受但更標(biāo)準(zhǔn)的做法是后端提供room/freeList接口只返回空閑房間。健康上報頁面的重點在于連續(xù)記錄。前端做成一個日期選擇器加表單的結(jié)構(gòu)用戶選擇日期填報體溫、是否咳嗽、是否乏力。后端保存時會自動關(guān)聯(lián)當(dāng)前人員和登錄用戶不需要前端傳用戶ID。這個細(xì)節(jié)很重要如果前端能把用戶ID傳給后端攻擊者就能偽造別人的健康記錄。所以后端一定要從token里取用戶信息不能相信前端傳過來的任何用戶標(biāo)識。數(shù)據(jù)統(tǒng)計頁面我用了ECharts繪制體溫趨勢折線圖和每日新增隔離人員柱狀圖。ECharts的Vue3封裝庫叫vue-echarts使用起來非常方便。要注意的是ECharts圖表的容器必須有明確高度否則圖表初始化后高度為0什么都看不到。這個是ECharts最常見的坑比配置項出錯還多。4.5 前端聯(lián)調(diào)的跨域問題處理開發(fā)階段前端跑在5173端口后端跑在8080端口兩者之間跨域。最方便的方案是在Vite的配置文件里配代理而不是在后端開CORS。代理的好處是前端請求的URL是相對路徑后面部署到同一域名下時不需要改任何代碼。server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }后端也可以配置CorsFilter但我在項目里還是推薦用Vite代理。原因很簡單開發(fā)環(huán)境用代理生產(chǎn)環(huán)境把前端打包后的dist目錄和后端jar包放在一起由SpringBoot統(tǒng)一提供靜態(tài)資源服務(wù)天然就沒有跨域問題。前后端分離部署另說但課程設(shè)計和畢設(shè)項目一般都部署在一臺機(jī)器上代理方案最省心。5. 環(huán)境準(zhǔn)備與部署實測記錄5.1 MySQL8.0安裝與初始化記錄我這次用的是在Docker中安裝MySQL8.0的方式部署起來非常干凈。Docker安裝MySQL8.0的關(guān)鍵參數(shù)是端口映射、root密碼、數(shù)據(jù)目錄掛載。docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORDyourpassword \ -e TZAsia/Shanghai \ -v /opt/mysql-data:/var/lib/mysql \ mysql:8.0這個命令有幾個值得注意的地方。-e TZAsia/Shanghai指定時區(qū)不加的話MySQL默認(rèn)使用UTC時區(qū)這樣會導(dǎo)致數(shù)據(jù)庫存儲的當(dāng)前時間和北京時間差8個小時。數(shù)據(jù)目錄掛載到宿主機(jī)是為了容器刪除重建時數(shù)據(jù)不丟失。當(dāng)然如果你本機(jī)已經(jīng)裝了MySQL直接用本機(jī)的也可以。我的建議是裝原生版還是Docker版看你自己情況關(guān)鍵是數(shù)據(jù)庫版本必須是8.0因為MyBatis-Plus的DbType.MYSQL和driver的配置都跟版本強(qiáng)相關(guān)。初始化數(shù)據(jù)庫時執(zhí)行建表腳本然后記得確認(rèn)用戶表權(quán)限。如果用的是root用戶連接一般沒問題但如果新建了專門用戶需要授權(quán)CREATE USER isolation% IDENTIFIED BY isolation123; GRANT ALL PRIVILEGES ON isolation_db.* TO isolation%; FLUSH PRIVILEGES;5.2 后端配置文件實測清單后端配置文件application.yml是項目能跑起來的命脈我把關(guān)鍵配置項逐項列出來。首先是數(shù)據(jù)源配置MySQL8.0的driver-class-name是com.mysql.cj.jdbc.Driver不是老版的com.mysql.jdbc.Driver寫錯就啟動失敗。URL里必須帶serverTimezoneAsia/Shanghai否則連接會報時區(qū)錯誤。server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/isolation_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: yourpassword jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0mybatis-plus.configuration.log-impl這里我開了SQL日志打印開發(fā)階段能直觀看到每條執(zhí)行的SQL語句排查問題非常方便。等打包上線前可以注釋掉避免日志刷屏。邏輯刪除配置也很關(guān)鍵deleted字段配合邏輯刪除配置后MyBatis-Plus在執(zhí)行delete操作時會自動轉(zhuǎn)為update語句更新deleted為1查詢時會自動加上deleted0條件。這個機(jī)制避免了物理刪除導(dǎo)致的歷史數(shù)據(jù)無法追溯問題。5.3 前端打包與服務(wù)集成開發(fā)完成后前端需要打包成靜態(tài)資源然后放到后端工程里統(tǒng)一提供服務(wù)這樣整個系統(tǒng)只需要啟動一個Java進(jìn)程就能訪問。npm run build構(gòu)建完成后dist目錄下就是打包產(chǎn)物。把dist目錄里的內(nèi)容復(fù)制到SpringBoot項目的src/main/resources/static目錄下重新打包后端即可。mvn clean package -DskipTests java -jar target/isolation-system.jar啟動成功后訪問http://localhost:8080就能看到登錄頁面。前端靜態(tài)資源交給SpringBoot托管后路由需要做處理。Vue Router默認(rèn)使用history模式直接訪問/person會返回404。我的做法是使用hash模式URL帶#號雖然不太美觀但最大的好處是不需要額外的服務(wù)器配置。畢設(shè)答辯階段演示系統(tǒng)時hash模式是最穩(wěn)妥的選擇。部署過程中實測需要特別留意的就是jar包運(yùn)行時不能直接雙擊打開要用命令行java -jar啟動。如果想在服務(wù)器后臺運(yùn)行用nohup java -jar target/isolation-system.jar app.log 21 把日志輸出到文件中方便排查問題。6. 常見問題與排查技巧實錄6.1 MySQL8.0連接報錯實戰(zhàn)排查我在聯(lián)調(diào)階段遇到最多的問題就是數(shù)據(jù)庫連接失敗?？偟膩碚f有三類錯誤最典型。第一類是Public Key Retrieval is not allowed解決方案是連接URL加allowPublicKeyRetrievaltrue另外把useSSLfalse也加上測試環(huán)境能省很多麻煩。第二類是Unknown database isolation_db說明數(shù)據(jù)庫沒創(chuàng)建或名字拼錯在SQL客戶端中執(zhí)行SHOW DATABASES;確認(rèn)。第三類是Access denied for user說明用戶名密碼錯誤或授權(quán)不到位重新授權(quán)即可。時區(qū)錯誤也是高頻問題錯誤信息里包含serverTimezone字樣。出現(xiàn)這個問題說明連接URL里沒帶時區(qū)參數(shù)在上面5.2節(jié)的配置里已經(jīng)解決了。6.2 MyBatis-Plus的常見誤用第一個坑是分頁插件沒配置查出的數(shù)據(jù)不是分頁結(jié)果而是全表數(shù)據(jù)。這屬于配置遺漏加上PaginationInnerInterceptor就好了。第二個坑是邏輯刪除配置了但實體類字段名不匹配提示找不到deleted字段檢查實體類是否標(biāo)注了TableLogic注解或全局配置中l(wèi)ogic-delete-field是否和實體字段名一致。第三個坑是條件構(gòu)造器直接new QueryWrapper后暴露SQL注入風(fēng)險我建議統(tǒng)一使用LambdaQueryWrapper或LambdaUpdateWrapper用方法引用代替字符串列名既安全又能編譯期發(fā)現(xiàn)問題。還有一個小技巧MyBatis-Plus的selectCount方法傳入null參數(shù)表示查詢?nèi)淼珱]人管的話清空表數(shù)據(jù)很危險。我對這個項目中所有統(tǒng)計類操作都顯式傳入條件構(gòu)造器而且加上了deleted0條件避免把邏輯刪除的數(shù)據(jù)也算進(jìn)去。6.3 前后端跨域與鑒權(quán)聯(lián)調(diào)問題前端頁面打開后接口報跨域首選方案就是檢查Vite的proxy配置確認(rèn)target地址是否正確端口是否對應(yīng)后端實際啟動端口其次確認(rèn)后端Controller的RequestMapping前綴是否和proxy的/api前綴一致不一致會導(dǎo)致代理轉(zhuǎn)發(fā)后404。另外還要檢查SpringBoot的context-path設(shè)置如果配置了context-path后端接口的實際訪問路徑會變長代理也要相應(yīng)調(diào)整。登錄接口調(diào)用成功但拿不到用戶信息優(yōu)先檢查后端攔截器排除名單是否寫對。如果攔截器攔截了/api/user/login登錄請求直接401那問題就很明顯。JWT解析報錯通常是密鑰不一致導(dǎo)致的檢查前端拿到的token和后端生成token時用的密鑰是否匹配。6.4 前端開發(fā)調(diào)試的那些坑Vue3開發(fā)過程中最容易出問題的是響應(yīng)式數(shù)據(jù)的誤用。如果你的數(shù)據(jù)在頁面中修改后視圖不更新多半是用普通變量代替了ref或reactive這是Vue3響應(yīng)式原理的基本功。另外在Composition API中直接在setup函數(shù)里寫setTimeout并修改數(shù)據(jù)對象屬性不需要額外處理響應(yīng)式但如果用了解構(gòu)賦值把響應(yīng)式對象拆成普通變量那修改就失效了。表格數(shù)據(jù)加載不出來時先用瀏覽器開發(fā)者工具的Network面板看接口是否返回正常數(shù)據(jù)重點看后端返回的data字段結(jié)構(gòu)是否符合el-table的prop綁定。常見錯誤是后端返回字段名是createTime前端綁定的是create_time兩者不一致導(dǎo)致表格列全空。Element Plus組件庫版本要注意和Vue版本匹配。Element Plus不支持Vue2必須用Vue3項目。如果引入后頁面空白且控制臺報組件未注冊錯誤檢查是否忘記了app.use(ElementPlus)。7. 這套源碼里的隱藏價值與后續(xù)擴(kuò)展建議說實話這套系統(tǒng)最值得研究的部分不是功能有多花哨而是它完整展示了SpringBoot2 Vue3從零搭建一個后端管理系統(tǒng)的標(biāo)準(zhǔn)流程。表結(jié)構(gòu)設(shè)計、統(tǒng)一結(jié)果封裝、通用CRUD抽象、JWT鑒權(quán)、前端路由守衛(wèi)、Axios攔截器這些都是以后不管做什么管理類系統(tǒng)都會反復(fù)用到的技術(shù)點。把這套源碼吃透你就能舉一反三。如果后續(xù)想給這個項目加分我個人建議優(yōu)先擴(kuò)展三個方向。第一個是Excel導(dǎo)入導(dǎo)出功能人員批量登記、健康記錄導(dǎo)出用EasyExcel就能實現(xiàn)這個功能在答辯演示時非常出效果。第二個是ECharts大屏展示把隔離人員趨勢、房間占用率、物資消耗匯總做成可視化看板整個系統(tǒng)的檔次一下就上去了。第三個是Redis緩存優(yōu)化給用戶權(quán)限和房間列表加上緩存提升接口響應(yīng)速度。技術(shù)學(xué)習(xí)這塊做完整個項目之后我的最大感受是一定要自己動手把整個流程走通一遍?？磩e人分享的crud封裝、分頁配置、jwt攔截器看的時候覺得很簡單真正動手時才發(fā)現(xiàn)一堆細(xì)節(jié)問題。特別是事務(wù)邊界放在哪一層、Vite代理怎么配、靜態(tài)資源如何統(tǒng)一部署這些問題只有自己操作一次才能真正記住。最后再分享一個小技巧項目開發(fā)過程中每完成一個模塊記得把運(yùn)行效果截圖保存下來。無論是寫課程設(shè)計文檔還是答辯PPT這些截圖都是最有說服力的素材。另外數(shù)據(jù)庫設(shè)計文檔用Navicat或DataGrip導(dǎo)出一份Word版連注釋一起導(dǎo)出這個文檔比你自己重新畫表結(jié)構(gòu)快得多而且格式規(guī)范導(dǎo)師看了也會覺得你做得扎實。