簡介一份基于Spring Boot框架的醫(yī)院急診系統(tǒng)完整源代碼采用Java Vue MySQL技術(shù)棧適用于畢業(yè)設(shè)計(jì)、課程設(shè)計(jì)或希望學(xué)習(xí)前后端分離開發(fā)的Java工程師。項(xiàng)目已通過測(cè)試可正常運(yùn)行重點(diǎn)覆蓋急診掛號(hào)、分診、就診記錄等常見業(yè)務(wù)模塊后端基于JDK1.8與Spring Boot構(gòu)建前端使用Vue組件化開發(fā)數(shù)據(jù)庫腳本與配置齊全。壓縮包共含852個(gè)文件大小約17.7MB其中Java源碼、Vue頁面、HTML/CSS/JS等前端資源以及SQL腳本、說明文檔和部署腳本合理分類便于直接導(dǎo)入Eclipse/IDEA與Navicat快速上手。附帶的說明文檔對(duì)環(huán)境要求、部署步驟與常見問題做了整理能大幅降低搭建門檻。目前已有68人學(xué)習(xí)下載對(duì)于需要快速獲取一套可運(yùn)行醫(yī)療管理系統(tǒng)參考實(shí)現(xiàn)的人來說是實(shí)用且完整的素材。1. 一套醫(yī)院急診系統(tǒng)能跑多遠(yuǎn)先說清楚這個(gè)項(xiàng)目到底是什么拿到這套基于 springboot 的醫(yī)院急診系統(tǒng)源碼第一件事不是急著啟動(dòng)而是想清楚它解決的是什么問題。急診的業(yè)務(wù)特點(diǎn)是時(shí)間敏感、角色多、狀態(tài)變化頻繁護(hù)士登記、分診分級(jí)、醫(yī)生接診、開單、收費(fèi)、留觀轉(zhuǎn)床每個(gè)動(dòng)作都有嚴(yán)格先后順序。SpringBoot 負(fù)責(zé)把后端服務(wù)快速組織起來Vue 負(fù)責(zé)在前端把這些流程和表單鋪開MySQL 負(fù)責(zé)把每一次狀態(tài)變更落庫。這個(gè)組合適合畢設(shè)、中小醫(yī)院信息化改造的起步點(diǎn)以及想完整走一遍 Java Vue 全棧開發(fā)的從業(yè)者。它不追求高并發(fā)重點(diǎn)是把急診流程中的狀態(tài)管理做扎實(shí)。這一點(diǎn)想明白后面看代碼、改功能都會(huì)順手很多。2. 技術(shù)選型為什么是這套組合SpringBoot、Vue、MySQL 各解決什么問題2.1 后端SpringBoot 解決的三個(gè)實(shí)際問題先講一個(gè)容易忽略的事實(shí)急診系統(tǒng)這類管理項(xiàng)目絕大多數(shù)后端代碼都是“圍繞一張主表的增刪改查”真正的復(fù)雜度在于流程節(jié)點(diǎn)和狀態(tài)約束。SpringBoot 被選中不是因?yàn)樾阅芴旎ò甯叨且驗(yàn)樗馨堰@些約束快速落地、結(jié)構(gòu)還清晰主要解決三個(gè)實(shí)際問題。第一是約定大于配置。以前做 SSHStruts Spring Hibernate或者原生 SpringMVC搭一個(gè)可用工程要配一堆 XML數(shù)據(jù)源、事務(wù)、映射文件各管一段新人接手上手成本很高。SpringBoot 把默認(rèn)配置收斂到 application.yml打開就能看到端口、數(shù)據(jù)庫連接、MyBatis 掃描路徑改起來不靠玄學(xué)這對(duì)二開和交接非常友好。第二是內(nèi)嵌 Tomcat部署成本低。醫(yī)院內(nèi)網(wǎng)環(huán)境經(jīng)常沒有獨(dú)立的中間件運(yùn)維SpringBoot 打出的可執(zhí)行 jar 直接 java -jar 就能跑不需要單獨(dú)裝 Tomcat、改 server.xml。這個(gè)特點(diǎn)對(duì)中小醫(yī)院信息科或者教學(xué)演示場(chǎng)景來說比任何微服務(wù)架構(gòu)都實(shí)在。第三是 starter 生態(tài)成熟。mybatis-spring-boot-starter、spring-boot-starter-web、spring-boot-starter-security 這些依賴把常用能力打包好版本由 parent 統(tǒng)一管理省去手動(dòng)對(duì)齊依賴版本的血淚經(jīng)驗(yàn)。項(xiàng)目里常見還會(huì)引入 druid 連接池、lombok、hutool 這類工具都是圍繞“少寫重復(fù)代碼”這個(gè)目標(biāo)。需要提醒的是SpringBoot 2.x 和 3.x 差異很大看源碼包里的 pom.xml 時(shí)先確認(rèn) spring-boot-starter-parent 版本再去配 JDK。否則會(huì)出現(xiàn)一大堆“類找不到”的翻車情況這個(gè)在第 5 章展開。2.2 前端Vue 組件化開發(fā)與開發(fā)環(huán)境代理Vue 在同類源碼里出鏡率極高的原因是它把急診工作臺(tái)這類“信息密集頁”拆得很舒服。護(hù)士分診臺(tái)要展示候診列表、患者詳情、分診級(jí)別選擇醫(yī)生工作臺(tái)要同時(shí)關(guān)注在診患者、歷史病歷、床位狀態(tài)。如果用 JSP 做這類頁面最后往往會(huì)變成一大坨服務(wù)端拼出來的 HTML改一處樣式牽全身。用 Vue 可以把頁面拆成組件患者列表表格一個(gè)組件分診表單一個(gè)組件狀態(tài)標(biāo)簽一個(gè)組件。每個(gè)組件只維護(hù)自己的數(shù)據(jù)和事件代碼量不減少但維護(hù)邊界清楚很多。需要先看 package.json 確定是 Vue 2 還是 Vue 3。老一點(diǎn)的急診系統(tǒng)源碼大量是 Vue 2 Element UI新一些的會(huì)直接上 Vue 3 Element Plus。這里補(bǔ)一個(gè)“不要盲目升級(jí)”的點(diǎn)如果源碼本身是 Vue 2別為了趕新把它整體升到 Vue 3。Element UI 和 Element Plus 的組件 API 不兼容升級(jí)工作量不亞于重寫前端。二次開發(fā)時(shí)版本跟著源碼走不要跟著“最新網(wǎng)絡(luò)熱詞”走。開發(fā)階段還有個(gè)必配項(xiàng)是跨域代理。前后端分離時(shí)前端跑 8080 端口后端跑 8081 端口瀏覽器直接請(qǐng)求后端接口會(huì)被跨域攔掉。常見做法是在 vue.config.js 里配置 devServer.proxy// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }這段配置的意思是前端開發(fā)服務(wù)器把所有以 /api 開頭的請(qǐng)求轉(zhuǎn)發(fā)到 8081 端口的后端服務(wù)并把路徑前綴去掉。比如前端請(qǐng)求 /api/login后端實(shí)際收到的是 /login。pathRewrite 參數(shù)必須和后端 Controller 的 RequestMapping 對(duì)上很多項(xiàng)目啟動(dòng)后接口 404就是這里前綴沒對(duì)齊。2.3 數(shù)據(jù)庫MySQL 為急診業(yè)務(wù)預(yù)留的時(shí)間與狀態(tài)約束MySQL 在這個(gè)項(xiàng)目里承擔(dān)的是業(yè)務(wù)狀態(tài)落庫的核心角色。急診系統(tǒng)表面上表不少但核心邏輯非常聚焦患者來診后圍繞一次“來診記錄”不斷更新狀態(tài)。所以建表時(shí)首先要有一張類似 emergency_visit 的主記錄表而不是把狀態(tài)散落到各個(gè)業(yè)務(wù)表里。這種設(shè)計(jì)的好處是把流程主線拎出來?？创a時(shí)優(yōu)先看這張表的狀態(tài)字段從 0 變到幾、由哪個(gè)接口觸發(fā)就能理解整個(gè)系統(tǒng)。MySQL 8.0 是目前這類源碼的主流配置它支持窗口函數(shù)、支持更好的 utf8mb4 字符集。如果你做二開字符集一定在建庫時(shí)就寫成 utf8mb4不要用默認(rèn)的 utf8才能保證患者姓名里的生僻字不亂碼。急診業(yè)務(wù)還有一個(gè)特點(diǎn)是時(shí)間字段特別多來診時(shí)間、分診時(shí)間、接診時(shí)間、轉(zhuǎn)歸時(shí)間。這些字段不僅要存還要建索引因?yàn)榉衷\臺(tái)最常見的查詢就是“今天來了哪些人、按時(shí)間排序”沒有索引數(shù)據(jù)量一上來就卡。另外夾一句Java 開發(fā)工程師面試題里經(jīng)常問“數(shù)據(jù)庫物理外鍵到底建不建”這類項(xiàng)目普遍選擇邏輯外鍵也就是只在業(yè)務(wù)層做關(guān)聯(lián)約束數(shù)據(jù)庫層面不加 FOREIGN KEY。原因很簡單急診業(yè)務(wù)高頻率更新一張主表物理外鍵在多表關(guān)聯(lián)寫入時(shí)容易造成額外的鎖開銷中小系統(tǒng)用邏輯外鍵更靈活。3. 把項(xiàng)目跑起來JDK、Maven、Node 與 MySQL 環(huán)境的組合配置3.1 版本搭配表JDK、SpringBoot、Node、MySQL 怎么配對(duì)這類源碼最容易在環(huán)境環(huán)節(jié)翻車原因不是操作難而是版本組合不對(duì)。第一件事是打開 pom.xml 看 spring-boot-starter-parent 的版本再?zèng)Q定本地 JDK 和 Maven 版本順序不能反過來。我用過的兩套穩(wěn)定組合整理如下成員組合 A老項(xiàng)目常見組合 B新項(xiàng)目常見JDK1.817 或 21SpringBoot2.7.x3.xMaven3.6.3 以上3.9.xMySQL5.7 或 8.08.0Node.js14 到 1618 以上VueVue 2.6 / 2.7Vue 3UI 庫Element UIElement Plus我一般會(huì)建議先按組合 A 來跑老項(xiàng)目不要一上來就裝 JDK 17 去打開一個(gè) SpringBoot 2.x 項(xiàng)目。SpringBoot 2.7.x 在 JDK 17 上勉強(qiáng)能運(yùn)行但某些版本反射報(bào)錯(cuò)很隱蔽你會(huì)在啟動(dòng)日志里看到一個(gè)完全看不懂的堆棧。反過來SpringBoot 3.x 強(qiáng)制要求 JDK 17用 JDK 8 直接啟動(dòng)失敗。所以這個(gè)表不是隨便列的是方向性問題。3.2 先用說明文檔和 SQL 腳本把數(shù)據(jù)庫建起來壓縮包里通常有一個(gè) sql 文件比如 hospital_emergency.sql以及一份說明文檔。先把數(shù)據(jù)庫建好再啟動(dòng)后端順序可以避免后端一啟動(dòng)就因連不上庫報(bào)紅。打開命令行工具進(jìn)入 sql 文件所在目錄執(zhí)行mysql -u root -p --default-character-setutf8登錄后創(chuàng)建數(shù)據(jù)庫并導(dǎo)入腳本CREATE DATABASE hospital_emergency DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE hospital_emergency; SOURCE /你的絕對(duì)路徑/hospital_emergency.sql;說明一下參數(shù)mysql 命令的 --default-character-setutf8 保證客戶端向服務(wù)端發(fā)送 SQL 時(shí)按 UTF-8 編碼傳輸防止中文表備注和初始數(shù)據(jù)亂碼CREATE DATABASE 語句里顯式指定 utf8mb4是防止 MySQL 8 默認(rèn)字符集在部分服務(wù)器上仍是 latin1。導(dǎo)入完成后執(zhí)行 SHOW TABLES;能看到十幾張核心表說明腳本執(zhí)行成功。接著修改后端的數(shù)據(jù)庫配置。打開 src/main/resources/application.yml把數(shù)據(jù)源信息改成你剛創(chuàng)建的庫spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hospital_emergency?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密碼url 里有三個(gè)參數(shù)很關(guān)鍵characterEncodingutf8 對(duì)應(yīng)入庫字符集useSSLfalse 能繞開 MySQL 8 默認(rèn) SSL 導(dǎo)致的握手報(bào)錯(cuò)serverTimezoneAsia/Shanghai 是為了解決 JDBC 連接時(shí)區(qū)差 8 小時(shí)的問題。這三個(gè)參數(shù)缺一個(gè)都有可能在后端日志里看到不同風(fēng)格的報(bào)錯(cuò)屬于最常見的坑位。3.3 后端與前端的最小啟動(dòng)命令環(huán)境配置好后啟動(dòng)項(xiàng)目是最簡單的但也別直接雙擊 jar 完事。最好先在 IDEA 里打開后端工程讓它自動(dòng)通過 Maven 拉取依賴。IDEA 的配置注意兩點(diǎn)Maven 的 settings.xml 指向你自己的本地倉庫JDK 版本和 pom 對(duì)齊兩個(gè)都對(duì)了再點(diǎn)啟動(dòng)。后端完整啟動(dòng)命令就一條在項(xiàng)目根目錄下執(zhí)行mvn spring-boot:run如果只想部署運(yùn)行可以先打包再啟動(dòng)mvn clean package -DskipTests java -jar target/hospital-emergency-0.0.1-SNAPSHOT.jarmvn spring-boot:run 的好處是開發(fā)時(shí)改了代碼可以直接熱重啟缺點(diǎn)是終端日志會(huì)被斷點(diǎn)調(diào)試干擾。java -jar 適合確認(rèn)打包產(chǎn)物能跑。這里注意 -DskipTests 只是跳過測(cè)試執(zhí)行不會(huì)跳過測(cè)試代碼編譯如果測(cè)試類本身有語法問題還是會(huì)失敗。前端啟動(dòng)稍微麻煩一點(diǎn)因?yàn)橐劝惭b npm 依賴npm install npm run devnpm install 如果網(wǎng)絡(luò)不穩(wěn)定可以把 registry 臨時(shí)切到國內(nèi)鏡像npm install --registryhttps://registry.npmmirror.com這里不建議直接永久改全局 registry因?yàn)楣_倉庫和某些私有源混用時(shí)版本解析會(huì)出現(xiàn)意想不到的“無法找到依賴”問題屬于不必要的冒險(xiǎn)。npm run dev 執(zhí)行后終端會(huì)打印一個(gè)本地訪問地址一般是 http://localhost:8080瀏覽器打開看到登錄頁環(huán)境配置這一步就過關(guān)了。4. 看懂核心代碼急診接診流程的狀態(tài)流轉(zhuǎn)與接口分層4.1 emergency_visit 表時(shí)間、分診級(jí)別與狀態(tài)字段怎么設(shè)計(jì)想快速摸清一套源碼的骨架不要從 Controller 看起先從核心表開始。急診系統(tǒng)核心表通常是 emergency_visit表結(jié)構(gòu)長這樣CREATE TABLE emergency_visit ( id BIGINT PRIMARY KEY AUTO_INCREMENT, patient_id BIGINT NOT NULL COMMENT 患者ID, arrival_time DATETIME NOT NULL COMMENT 來診時(shí)間, triage_level VARCHAR(10) DEFAULT NULL COMMENT 分診級(jí)別I/II/III/IV, status TINYINT NOT NULL DEFAULT 0 COMMENT 狀態(tài)0登記 1分診完成 2待就診 3就診中 4留觀 5離院, doctor_id BIGINT DEFAULT NULL COMMENT 接診醫(yī)生ID, department_id BIGINT DEFAULT NULL COMMENT 就診科室ID, bed_no VARCHAR(32) DEFAULT NULL COMMENT 留觀床位號(hào), create_time DATETIME NOT NULL, update_time DATETIME NOT NULL, version INT DEFAULT 0 COMMENT 樂觀鎖版本號(hào), KEY idx_arrival_time (arrival_time), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT急診來診記錄表;這張表最有價(jià)值的設(shè)計(jì)是三字段組合arrival_time 用于分診臺(tái)按時(shí)間排序triage_level 記錄病情分級(jí)status 記錄流程當(dāng)前走到哪一步。status 用 TINYINT 而不是 VARCHAR因?yàn)樵?Java 里可以用枚舉或常量類映射避免“已離院”和“已出院”這種在數(shù)據(jù)庫里寫兩套的臟數(shù)據(jù)問題。version 字段是給樂觀鎖用的下面一節(jié)會(huì)講到。另外分診級(jí)別 I 到 IV 不是隨便寫的。I 級(jí)是瀕?；颊弑仨毩⒓磽尵菼I 級(jí)是危重III 級(jí)是急癥IV 級(jí)是非急癥。這套分級(jí)標(biāo)準(zhǔn)在急診科是基本功代碼里 triage_level 字典也會(huì)按這個(gè)設(shè)計(jì)二開時(shí)不要改它的含義否則分診臺(tái)頁面和護(hù)理記錄會(huì)對(duì)不上。4.2 后端 Service 的狀態(tài)流轉(zhuǎn)校驗(yàn)與事務(wù)處理很多增刪改查項(xiàng)目的問題不是代碼不會(huì)寫而是狀態(tài)流轉(zhuǎn)沒約束。比如一條已經(jīng)“離院”的記錄又被某個(gè)接口改回了“就診中”這在急診系統(tǒng)里是醫(yī)療記錄事故。所以核心 Service 里通常會(huì)有一個(gè)狀態(tài)流轉(zhuǎn)校驗(yàn)邏輯。我一般會(huì)這樣寫public static final int STATUS_REGISTERED 0; public static final int STATUS_TRIAGED 1; public static final int STATUS_WAITING 2; public static final int STATUS_IN_CONSULT 3; public static final int STATUS_OBSERVATION 4; public static final int STATUS_DISCHARGED 5; private static final MapInteger, SetInteger TRANSITIONS new HashMap(); static { TRANSITIONS.put(STATUS_REGISTERED, Set.of(STATUS_TRIAGED)); TRANSITIONS.put(STATUS_TRIAGED, Set.of(STATUS_WAITING)); TRANSITIONS.put(STATUS_WAITING, Set.of(STATUS_IN_CONSULT)); TRANSITIONS.put(STATUS_IN_CONSULT, Set.of(STATUS_OBSERVATION, STATUS_DISCHARGED)); TRANSITIONS.put(STATUS_OBSERVATION, Set.of(STATUS_DISCHARGED)); } Transactional(rollbackFor Exception.class) public boolean updateStatus(Long visitId, int targetStatus, Long operatorId) { EmergencyVisit visit visitMapper.selectById(visitId); if (visit null) { throw new BusinessException(來診記錄不存在); } SetInteger allowed TRANSITIONS.get(visit.getStatus()); if (allowed null || !allowed.contains(targetStatus)) { throw new BusinessException(不允許從當(dāng)前狀態(tài)流轉(zhuǎn)到目標(biāo)狀態(tài): visit.getStatus() - targetStatus); } int updated visitMapper.optimisticUpdateStatus(visitId, visit.getVersion(), targetStatus); if (updated 0) { throw new BusinessException(數(shù)據(jù)已被其他人修改請(qǐng)刷新后重試); } return true; }這段代碼在絕大多數(shù)同類源碼里都會(huì)以類似的形態(tài)出現(xiàn)。TRANSITIONS 這個(gè) Map 本質(zhì)是一張狀態(tài)機(jī)表它把允許的流轉(zhuǎn)路徑集中管理而不是散落在各個(gè) Service 方法里。Transactional 保證了狀態(tài)更新和后續(xù)的日志記錄在同一個(gè)事務(wù)里一旦失敗整體回滾。optimisticUpdateStatus 是樂觀鎖更新執(zhí)行時(shí)會(huì)在 SQL 里帶上 version 條件UPDATE emergency_visit SET status #{targetStatus}, version version 1 WHERE id #{visitId} AND version #{visitVersion}這里有一個(gè)容易翻車的點(diǎn)如果不做樂觀鎖兩個(gè)護(hù)士同時(shí)在分診臺(tái)操作同一條記錄后提交的人會(huì)把前一個(gè)人的狀態(tài)覆蓋掉。加了 version 條件后后提交的人更新行數(shù)為 0系統(tǒng)提示“數(shù)據(jù)已被其他人修改”這就是避免數(shù)據(jù)錯(cuò)亂的關(guān)鍵防線。4.3 前端路由與 axios 攔截把頁面和接口接起來前端部分先看 router 配置再看接口請(qǐng)求封裝。老一點(diǎn)的項(xiàng)目用的是 vue-router 的路由表新項(xiàng)目可能會(huì)改成動(dòng)態(tài)路由。這個(gè)源碼的常見形態(tài)是靜態(tài)路由 登錄后根據(jù)角色控制按鈕級(jí)權(quán)限而不是后端動(dòng)態(tài)下發(fā)路由?？绰酚晌募芸焖僦老到y(tǒng)有哪些頁面登錄頁、分診臺(tái)、醫(yī)生工作臺(tái)、收費(fèi)管理、床位管理、系統(tǒng)管理。axios 的封裝一般集中在 request.js 里核心是請(qǐng)求攔截器和響應(yīng)攔截器// request.js import axios from axios import { Message } from element-ui import router from /router 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 || 請(qǐng)求失敗) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } Message.error(error.message || 網(wǎng)絡(luò)異常) return Promise.reject(error) } ) export default service注意 baseURL 寫的是 /api這和 2.2 節(jié)里 vue.config.js 的代理前綴是配套的。開發(fā)環(huán)境通過 devServer 轉(zhuǎn)發(fā)到后端生產(chǎn)環(huán)境則需要后端接口本身就帶 /api 前綴或者再把請(qǐng)求路徑處理一下。這是前后端分離項(xiàng)目最容易對(duì)不上的地方。Authorization 攜帶 token 是一種主流方式后端用攔截器或 Spring Security 驗(yàn)證這個(gè) header。響應(yīng)攔截器里統(tǒng)一判斷 code 字段遇到 401 就清掉本地 token 并跳回登錄頁。這個(gè)設(shè)計(jì)保證后端接口返回未登錄狀態(tài)時(shí)前端不會(huì)停留在半死不活的白屏頁面上。5. 急診系統(tǒng)最常見的 5 個(gè)坑從啟動(dòng)失敗到數(shù)據(jù)錯(cuò)亂5.1 MySQL 8 連不上SSL 握手失敗與 allowPublicKeyRetrieval現(xiàn)象后端啟動(dòng)控制臺(tái)報(bào) Communications link failure或者提示 Public Key Retrieval is not allowed有些版本直接拋 SSLConnectionError。原因MySQL 8 默認(rèn)使用 caching_sha2_password 認(rèn)證插件客戶端第一次連接時(shí)需要從服務(wù)端獲取 RSA 公鑰而 JDBC 驅(qū)動(dòng)默認(rèn)不允許這個(gè)行為同時(shí) MySQL 8 默認(rèn)開啟了 SSL 連接本地開發(fā)環(huán)境經(jīng)常沒有配置證書兩件事疊加就成了啟動(dòng)報(bào)錯(cuò)。解決在 JDBC 連接串上顯式關(guān)閉 SSL 并允許公鑰檢索修改 application.yml 的 urljdbc:mysql://localhost:3306/hospital_emergency?useSSLfalseallowPublicKeyRetrievaltruecharacterEncodingutf8serverTimezoneAsia/Shanghai其中 allowPublicKeyRetrievaltrue 適用于內(nèi)網(wǎng)開發(fā)環(huán)境生產(chǎn)環(huán)境安全性要求高時(shí)可以改用服務(wù)器上的 CA 證書或者確認(rèn)網(wǎng)絡(luò)加密方式后再關(guān)掉。這個(gè)參數(shù)屬于“開發(fā)環(huán)境后悔藥”別隨意搬到公網(wǎng)環(huán)境。5.2 SpringBoot 版本太高javax 被替換成 jakarta 后的連鎖報(bào)錯(cuò)現(xiàn)象項(xiàng)目在別人電腦上好好的自己本地從 SpringBoot 官網(wǎng)模板新建工程然后把源碼的代碼復(fù)制進(jìn)來啟動(dòng)直接報(bào)符號(hào)找不到 javax.servlet.Filter或者大量紅色 import 報(bào)錯(cuò)。原因SpringBoot 3.x 把 Java EE 的包命名從 javax.* 遷移到了 jakarta.*Servlet API、持久化 API 都換了根包名。網(wǎng)上很多舊教程和舊代碼還是 javax 開頭版本一對(duì)不上就翻車。解決不升級(jí)。打開 pom.xml看 spring-boot-starter-parent 里的版本號(hào)如果是 2.x本地 JDK 用 1.8并把 IDE 里項(xiàng)目的 Language Level 調(diào)成 8。如果確實(shí)要用 SpringBoot 3.x把項(xiàng)目里所有 javax.servlet、javax.persistence 之類的 import 全改成 jakarta.servlet、jakarta.persistence同時(shí)檢查 druid 等中間件版本是否支持 SpringBoot 3。沒有金剛鉆別攬這個(gè)瓷器活。5.3 Vue 路由白屏打包進(jìn) static 后刷新就 404 的原因現(xiàn)象前端開發(fā)模式一切正常npm run build 之后把 dist 目錄扔進(jìn) SpringBoot 的 static 目錄后端啟動(dòng)瀏覽器打開首頁是空白的或者直接報(bào) 404。原因vue-router 默認(rèn)使用 history 模式路由路徑會(huì)變成真實(shí)的 URL 路徑比如 /workbench。SpringBoot 對(duì)靜態(tài)資源的處理是“按文件查找”它找不到 /workbench 這個(gè)物理文件就回落到 404而不是自動(dòng)返回 index.html。開發(fā)模式下刷新沒事是因?yàn)?devServer 做了 historyApiFallback生產(chǎn)環(huán)境沒有這層處理。解決最省事的方式是把 vue-router 切回 hash 模式URL 變成 /#/workbench所有內(nèi)容都在 index.html 內(nèi)部解析不經(jīng)過后端的路徑匹配。改一行const router new VueRouter({ mode: hash, routes })如果非要保留 history 模式需要在后端加一個(gè)轉(zhuǎn)發(fā)配置讓所有非靜態(tài)資源路徑都進(jìn) index.html。這里給出一種常規(guī)寫法Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}).setViewName(forward:/index.html); } }這段配置的意思是所有不帶文件擴(kuò)展名的路徑請(qǐng)求都直接轉(zhuǎn)發(fā)到 index.html由前端路由接管。需要注意這個(gè)寫法會(huì)影響后端接口路徑嗎不會(huì)因?yàn)?controller 的映射優(yōu)先于 view controller 匹配。但如果你把前后端接口也放在同一域名下建議接口統(tǒng)一加 /api 前綴避免轉(zhuǎn)發(fā)規(guī)則誤傷接口。5.4 Navicat 導(dǎo)入 SQL 亂碼字符集在連接層就被帶偏了現(xiàn)象用 Navicat 打開 SQL 文件并執(zhí)行建表成功但表注釋、初始數(shù)據(jù)里的中文全是問號(hào)或者報(bào)錯(cuò) Incorrect string value。原因Navicat 新建查詢時(shí)連接的字符集默認(rèn)可能不是 utf8mb4而 SQL 文件本身是 UTF-8 編碼。執(zhí)行時(shí)連接層把字節(jié)按照錯(cuò)誤的字符集解釋寫入到表里就成了亂碼。更隱蔽的是Windows 記事本另存為 UTF-8 時(shí)可能帶 BOM 頭BOM 會(huì)讓第一條 SQL 語句報(bào)語法錯(cuò)誤。解決不要雙擊運(yùn)行 SQL 文件。先在 Navicat 里右鍵數(shù)據(jù)庫連接選擇“編輯連接”在高級(jí)設(shè)置里把編碼改為 utf8mb4然后新建數(shù)據(jù)庫時(shí)也明確選擇字符集 utf8mb4最后手動(dòng)打開 SQL 文件全選執(zhí)行。如果 SQL 文件是 GBK 編碼的先轉(zhuǎn)成 UTF-8 無 BOM 再導(dǎo)入不要偷懶。命令行導(dǎo)入時(shí)一定要帶 --default-character-setutf8這個(gè)參數(shù)在前面第 3 章也強(qiáng)調(diào)過它是亂碼場(chǎng)景的第一道防線。5.5 數(shù)據(jù)源配置沒生效多環(huán)境 profile 與配置優(yōu)先級(jí)現(xiàn)象明明在 application.yml 里把端口改成了 8081啟動(dòng)日志卻還是 8080或者數(shù)據(jù)庫連接的庫名和配置里不一樣像是被“黑匣子”蓋住了。原因SpringBoot 支持多環(huán)境 profile項(xiàng)目里可能同時(shí)存在 application-dev.yml、application-prod.yml其中 application-dev.yml 里的配置覆蓋了主配置。IDEA 啟動(dòng)時(shí)也可能自動(dòng)激活了 dev profile而你又沒看啟動(dòng)日志里的這條提示“The following profiles are active: dev”。解決遇到配置不生效先看啟動(dòng)日志最前面幾行有沒有打印激活的 profile再檢查 resources 目錄下是否存在其他 application-*.yml 文件。如果是 IDEA 里多了一個(gè) active profile 參數(shù)把啟動(dòng)配置里的 VM options 和 Environment variables 檢查清楚。強(qiáng)制指定環(huán)境可以在啟動(dòng)時(shí)加參數(shù)java -jar hospital-emergency.jar --spring.profiles.activeprod另外要記住 SpringBoot 配置優(yōu)先級(jí)外部命令行參數(shù)大于外部配置文件大于 jar 包內(nèi)的配置文件。很多人改了 jar 包里的 yml 不生效是因?yàn)椴渴鹉夸浵露嗔艘粋€(gè) application.yml那個(gè)文件優(yōu)先級(jí)更高。這個(gè)規(guī)則不復(fù)雜但確實(shí)能解釋很多“改了沒反應(yīng)”的詭異現(xiàn)象。6. 一個(gè)讓部署更順的技巧把 Vue 構(gòu)建產(chǎn)物收進(jìn) SpringBoot 做單端口發(fā)布6.1 dist 目錄的復(fù)制與靜態(tài)資源映射很多項(xiàng)目開發(fā)時(shí)跑兩個(gè)端口部署時(shí)又加一臺(tái) Nginx 做轉(zhuǎn)發(fā)成本不高但維護(hù)面變大。對(duì)于醫(yī)院急診系統(tǒng)這種并發(fā)不高、要快速交付的場(chǎng)景我更推薦單端口方案Vue 打包成靜態(tài)文件扔進(jìn) SpringBoot 的 src/main/resources/static后端打包成一個(gè) jar。這樣運(yùn)維只需要關(guān)心一個(gè)進(jìn)程、一個(gè)端口。正式操作分三步。第一步前端執(zhí)行 npm run build生成 dist 目錄里面是 index.html 和一堆帶哈希的 js、css 文件。第二步把 dist 目錄里的所有內(nèi)容復(fù)制到后端項(xiàng)目 src/main/resources/static 下。第三步重新打包后端并啟動(dòng)mvn clean package -DskipTests java -jar target/hospital-emergency-0.0.1-SNAPSHOT.jar啟動(dòng)后瀏覽器訪問 http://IP:8080/ 就能看到登錄頁。這個(gè)方案的關(guān)鍵前提是前端路由必須使用 hash 模式原因在第 5.3 節(jié)已經(jīng)說過history 模式在單 jar 部署下會(huì)頻繁 404。復(fù)制后還要檢查 index.html 里引用的 css 和 js 路徑是不是相對(duì)路徑如果打包時(shí)配置了絕對(duì)路徑 /assets/訪問時(shí)也會(huì)找不到。如果前端請(qǐng)求的是 /api 前綴后端接口也最好保持 /api 前綴這樣靜態(tài)資源和接口在同一域名下不沖突。我一般會(huì)在后端 application.yml 里增加一個(gè)全局前綴或者直接在 Controller 的 RequestMapping 上統(tǒng)一寫 /api。這個(gè)細(xì)節(jié)決定了部署后前端請(qǐng)求會(huì)不會(huì)被靜態(tài)資源轉(zhuǎn)發(fā)規(guī)則誤傷屬于吃過虧才記得住的操作。6.2 同源部署后的驗(yàn)證順序部署完成后不要直接點(diǎn)登錄。按下面順序過一遍能提前發(fā)現(xiàn)大多數(shù)隱藏問題步驟操作預(yù)期結(jié)果1瀏覽器強(qiáng)制刷新訪問根路徑能看到登錄頁控制臺(tái)無 4042打開 Network 面板看登錄接口請(qǐng)求路徑是 /api/login返回 JSON3登錄后刷新頁面停留在當(dāng)前頁面不跳回登錄頁4操作一次分診流轉(zhuǎn)數(shù)據(jù)庫狀態(tài)字段按預(yù)期變化5打開一個(gè)新的無痕窗口未登錄訪問被攔截跳轉(zhuǎn)登錄頁第 3 步最容易暴露路由問題登錄后正常跳轉(zhuǎn)一刷新就白屏或 404這幾乎可以斷定是 history 路由模式?jīng)]有切換屬于第 5.3 節(jié)的坑位。第 5 步驗(yàn)證的是后端攔截器對(duì)未登錄請(qǐng)求的處理很多項(xiàng)目登錄頁能出但 token 失效后不會(huì)跳轉(zhuǎn)卡在一個(gè)報(bào)錯(cuò)頁面上。做這類項(xiàng)目我的一個(gè)習(xí)慣是拿到源碼后先不急著改業(yè)務(wù)先用最小配置把前后端跑通再對(duì)核心表畫一張狀態(tài)流轉(zhuǎn)圖然后才動(dòng)手改代碼。狀態(tài)流轉(zhuǎn)圖可以幫助你在改接口時(shí)看清邊界避免把后端的規(guī)則寫死在前端頁面上。希望這個(gè)思路能幫你在接手這套醫(yī)院急診系統(tǒng)時(shí)少走一些我當(dāng)年走過的彎路。本文還有配套的精品資源點(diǎn)擊獲取