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