簡(jiǎn)介這套酒店管理系統(tǒng)是一份面向畢業(yè)設(shè)計(jì)與課程設(shè)計(jì)的完整實(shí)戰(zhàn)源碼采用 SpringBoot3 與 Vue.js3 搭建前后端分離架構(gòu)后端借助 SpringBoot3 簡(jiǎn)化配置、快速構(gòu)建 REST 服務(wù)前端通過(guò) Vue.js3 實(shí)現(xiàn)組件化頁(yè)面與響應(yīng)式交互配合 MySQL8 保證數(shù)據(jù)一致性與事務(wù)處理。系統(tǒng)覆蓋房間預(yù)訂、客戶管理、訂單管理、房?jī)r(jià)設(shè)定、員工管理等典型業(yè)務(wù)用戶前臺(tái)負(fù)責(zé)預(yù)訂與支付管理后臺(tái)完成訂單維護(hù)和參數(shù)設(shè)置完整呈現(xiàn)從需求分析、系統(tǒng)設(shè)計(jì)到編碼實(shí)現(xiàn)、測(cè)試部署的開發(fā)鏈路。資源包共 7 個(gè)文件整體約為 77.48MB包含項(xiàng)目源碼壓縮包、數(shù)據(jù)庫(kù) SQL 腳本、開題報(bào)告與任務(wù)書文檔以及操作錄屏 mp4。目前已有 69 人學(xué)習(xí)下載。其中文檔與錄屏尤其適合邊看邊操作既能為畢業(yè)設(shè)計(jì)的開題、答辯提供材料支撐也能幫助初學(xué)者按步驟搭建后臺(tái)管理和用戶前臺(tái)在此項(xiàng)目基礎(chǔ)上進(jìn)行功能擴(kuò)展與二次開發(fā)。1. 酒店管理系統(tǒng)選 SpringBoot3Vue.js3給 2025 屆畢設(shè)的一條現(xiàn)實(shí)路線這幾天陸續(xù)有學(xué)弟學(xué)妹來(lái)問(wèn)同一個(gè)問(wèn)題酒店管理系統(tǒng)做畢業(yè)設(shè)計(jì)用 SpringBoot3 和 Vue.js3 到底行不行我的回答一直很直接——行而且這是目前性價(jià)比最高的一條路線。酒店管理系統(tǒng)表面看是典型的增刪改查但把房間預(yù)訂、入住退房、賬單結(jié)算這些環(huán)節(jié)串起來(lái)之后并發(fā)控制、權(quán)限校驗(yàn)、跨域聯(lián)調(diào)、日志排查全都會(huì)輪到難度剛好卡在能講出深度、又不至于做不完的位置。選 SpringBoot3 而不是 SpringBoot2是因?yàn)?2025 年這個(gè)時(shí)間點(diǎn)JDK17 SpringBoot3 已經(jīng)成了多數(shù)新項(xiàng)目的默認(rèn)組合網(wǎng)上那些基于 SpringBoot2 Vue2 的舊教程大多不能直接照抄照著做反而容易在包名和依賴上卡住。Vue.js3 配合 Vite 開發(fā)效率比 Vue2 Vue CLI 高出一截組合式 API 寫業(yè)務(wù)也順手許多。這套技術(shù)棧拿去做別的管理系統(tǒng)題目一樣能復(fù)用不算白學(xué)。這篇筆記會(huì)沿著一條可實(shí)現(xiàn)的主線拆開前后端骨架怎么搭、數(shù)據(jù)庫(kù)怎么設(shè)計(jì)、后端核心接口怎么寫、Vue3 前端怎么接、哪些坑每年都有一批人踩以及答辯前用什么方法把系統(tǒng)驗(yàn)到敢上臺(tái)。適合已經(jīng)選了酒店管理系統(tǒng)這個(gè)題、準(zhǔn)備真的把項(xiàng)目跑起來(lái)再去答辯的同學(xué)也適合想快速評(píng)估這個(gè)題目工作量的朋友。2. 搭前后端骨架SpringBoot3 項(xiàng)目初始化與數(shù)據(jù)庫(kù)設(shè)計(jì)2.1 技術(shù)棧選型JDK17、SpringBoot3 與 Vue3 的版本配套先說(shuō)版本配套這是最容易翻車的起點(diǎn)。SpringBoot3 要求 JDK17 起所以不要一上來(lái)就照抄 SpringBoot2 教程里的 Java8 配置。以我手頭常用的組合為例后端 JDK17 SpringBoot 3.2.x MyBatis-Plus 3.5.5 及以上 MySQL 8.x前端 Node.js 18 以上 Vite Vue3 Element Plus Pinia Axios。這個(gè)組合在 2025 年做畢設(shè)是夠得著、講得清的。為什么要強(qiáng)調(diào)3.5.5 及以上的 MyBatis-Plus因?yàn)?SpringBoot3 把包名前綴從 javax 換成了 jakarta舊版 MyBatis-Plus 內(nèi)部依賴的 mybatis-spring 還是老坐標(biāo)直接引進(jìn)來(lái)會(huì)在啟動(dòng)階段報(bào) NoClassDefFoundError。這類版本問(wèn)題在答辯前兩周集中爆發(fā)基本都是當(dāng)初圖省事復(fù)制了舊依賴導(dǎo)致的。新舊技術(shù)棧的差異可以用下面這張對(duì)比表理清答辯被問(wèn)到為什么不用舊版時(shí)也方便遞話對(duì)比項(xiàng)SpringBoot2 舊鏈路SpringBoot3 這套影響JDK 要求Java 8 即可最低 Java 17環(huán)境不對(duì)則編譯直接失敗Servlet 包名javax.servletjakarta.servlet舊代碼 import 全部報(bào)紅依賴管理Spring Boot 2.xSpring Boot 3.x版本號(hào)不能混用MyBatis-Plus 坐標(biāo)mybatis-plus-boot-startermybatis-plus-spring-boot3-starter引錯(cuò)坐標(biāo)啟動(dòng)報(bào)錯(cuò)前端構(gòu)建Vue CLI / WebpackVite配置方式完全不同另一個(gè)常被忽略的選擇是 MySQL 8。雖然 MariaDB、PostgreSQL 也能跑但絕大多數(shù)畢業(yè)設(shè)計(jì)相關(guān)的教程、同學(xué)的互助、老師的常規(guī)提問(wèn)都基于 MySQL遇到問(wèn)題時(shí)搜到答案的概率高得多。數(shù)據(jù)庫(kù)引擎和字符集用默認(rèn)即可記得把默認(rèn)字符集設(shè)成 utf8mb4防止錄入客人姓名或備注時(shí)遇到 emoji 直接報(bào) Incorrect string value。2.2 后端骨架pom.xml 關(guān)鍵依賴與 application.yml 參數(shù)說(shuō)明創(chuàng)建項(xiàng)目我習(xí)慣直接在 IDEA 里用 Spring Initializr勾選 Spring Web 和 LombokJava 版本選 17然后手動(dòng)補(bǔ)依賴。最小可跑的 pom.xml 里核心依賴是這樣的parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version3.2.5/version relativePath/ /parent properties java.version17/java.version /properties dependencies !-- Web 依賴SpringBoot3 內(nèi)置 MVC 與 Tomcat -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis-Plus 的 SpringBoot3 專用坐標(biāo)注意不是 mybatis-plus-boot-starter -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-spring-boot3-starter/artifactId version3.5.5/version /dependency !-- MySQL 8 驅(qū)動(dòng)SpringBoot3 自動(dòng)管理版本 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- JWT 用 jjwt 0.12 系列API 與 0.9/0.11 差別很大 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.12.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.12.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.12.5/version scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies這里把三個(gè) jjwt 依賴都寫上是因?yàn)?jjwt 從 0.12 開始把 API、實(shí)現(xiàn)和 JSON 序列化拆成了三個(gè)模塊漏掉 jjwt-jackson 會(huì)在解析 token 時(shí)報(bào) Jackson 相關(guān)的類找不到。MyBatis-Plus 用 3.5.5 這個(gè)下限值我實(shí)際用過(guò)沒(méi)問(wèn)題如果你新建項(xiàng)目時(shí)已經(jīng)有了更新的小版本直接往上走也行。接著是 application.yml。數(shù)據(jù)源相關(guān)的幾個(gè)參數(shù)一定要按自己的環(huán)境改我一般這樣寫server: port: 8080 spring: application: name: hotel-management datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hotel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的數(shù)據(jù)庫(kù)密碼 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpldriver-class-name 必須寫成 com.mysql.cj.jdbc.Driver舊教程里的 com.mysql.jdbc.Driver 在 MySQL 8 驅(qū)動(dòng)里已經(jīng)移除了。連接串里的 serverTimezoneAsia/Shanghai 是止血用的不加它LocalDateTime 字段存進(jìn)數(shù)據(jù)庫(kù)常常差 8 小時(shí)后面避坑章節(jié)再展開。mybatis-plus 的 map-underscore-to-camel-case 建議打開這樣數(shù)據(jù)庫(kù)里的 room_type_name 能自動(dòng)映射到實(shí)體類的 roomTypeName少寫一堆 TableField。log-impl 配成 StdOutImpl 是為了開發(fā)期在控制臺(tái)直接看到 SQL項(xiàng)目快答辯時(shí)可以去掉因?yàn)槿罩玖坑悬c(diǎn)吵。2.3 數(shù)據(jù)庫(kù)設(shè)計(jì)酒店管理系統(tǒng)從房型到賬單的數(shù)據(jù)流轉(zhuǎn)數(shù)據(jù)庫(kù)是這類系統(tǒng)的地基。地面上的房間、房型、訂單、賬單如果關(guān)系沒(méi)理清后期寫接口會(huì)處處別扭。我建議按一條完整入住鏈路來(lái)設(shè)計(jì)客人先預(yù)訂某個(gè)房型到店后分配到具體房間離店時(shí)按房型價(jià)格和入住天數(shù)結(jié)算。順著鏈路核心表可以控制在七張以內(nèi)。表名作用關(guān)鍵字段狀態(tài)設(shè)計(jì)sys_user后臺(tái)登錄賬號(hào)id, username, password, real_name, rolestatus 1啟用 0禁用room_type房型及基礎(chǔ)價(jià)格id, type_name, price, bed_count, area無(wú)room具體房間id, room_no, room_type_id, floor, status0空閑 1已預(yù)訂 2入住 3維修customer住客資料id, name, phone, id_card無(wú)booking預(yù)訂單id, room_type_id, customer_name, customer_phone, check_in_date, check_out_date, statuspending confirmed checked_in cancelledcheck_in_record入住登記id, booking_id, room_id, actual_check_in, actual_check_out無(wú)bill賬單id, check_in_record_id, nights, total_amount, pay_timeunpaid paidroom_type 和 room 為什么要拆兩張表因?yàn)榇蟠卜渴且粋€(gè)類別而301 房間、302 房間是具體資源。預(yù)訂時(shí)只需要鎖定房型入住時(shí)才綁定具體房間。如果把房型信息直接塞進(jìn) room 表改一次價(jià)格要批量更新幾十個(gè)房間后患無(wú)窮。預(yù)訂和入住的狀態(tài)也值得多說(shuō)一句。我見過(guò)很多半成品系統(tǒng)把狀態(tài)做成布爾值入住狀態(tài) 0/1 看著簡(jiǎn)單但已預(yù)訂但未入住這種中間態(tài)就沒(méi)法表示。所以 room 表用 0 到 3 四個(gè)值booking 表用字符串枚舉雖然多寫幾行判斷但業(yè)務(wù)流程完整。建表時(shí)一個(gè)容易后悔的細(xì)節(jié)是字段類型。價(jià)格用 DECIMAL(10,2) 而不是 DOUBLE金額用浮點(diǎn)算會(huì)出現(xiàn) 0.10.2 不等于 0.3 的問(wèn)題賬單金額對(duì)不上時(shí)那叫一個(gè)難受。日期字段預(yù)訂用 DATE 就夠入住登記里的時(shí)間才需要 DATETIME。2.4 前端骨架Vite 創(chuàng)建 Vue3 工程與代理配置前端骨架我用 Vite 創(chuàng)建命令是 npm create vuelatest交互式選項(xiàng)里選 Vue3 和 JavaScriptRouter 和 Pinia 都勾上然后用 npm 安裝 Element Plus 和 Axios。目錄結(jié)構(gòu)我習(xí)慣保持這樣my-hotel-frontend/ ├── src/ │ ├── api/ # 所有請(qǐng)求封裝按模塊拆文件 │ ├── assets/ │ ├── components/ # 公共組件 │ ├── router/ # 路由與守衛(wèi) │ ├── stores/ # Pinia 狀態(tài) │ ├── views/ # 頁(yè)面 │ │ ├── LoginView.vue │ │ ├── RoomView.vue │ │ ├── BookingView.vue │ │ └── DashboardView.vue │ ├── App.vue │ └── main.js └── vite.config.jsview 層按業(yè)務(wù)模塊命名不用 Component 的思路去拆路由和頁(yè)面一一對(duì)應(yīng)答辯時(shí)講結(jié)構(gòu)也省事。vite.config.js 里一定要提前配好代理否則前端 5173 端口向后端 8080 發(fā)請(qǐng)求會(huì)被瀏覽器跨域策略攔掉import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })代理的作用是讓瀏覽器以為請(qǐng)求是同源的前端代碼里所有接口都寫成 /api/...不用寫完整域名。這個(gè)配置在開發(fā)期能省掉一半跨域煩惱但注意它只在開發(fā)服務(wù)器模式下生效打包后部署到 Nginx 時(shí)需要另配 location 轉(zhuǎn)發(fā)這個(gè)區(qū)別答辯老師偶爾會(huì)問(wèn)。3. 后端核心模塊落地登錄鑒權(quán)、預(yù)訂并發(fā)與日志配置3.1 JWT 登錄鑒權(quán)SpringBoot3 下的攔截器注冊(cè)方式酒店管理系統(tǒng)的后臺(tái)不可能裸奔至少要有登錄和登錄校驗(yàn)。主流做法是用 JWT登錄成功后后端簽發(fā)一個(gè) token前端存到 localStorage之后每個(gè)請(qǐng)求在 Authorization 頭里帶回來(lái)。相比 sessionJWT 不需要在服務(wù)端存登錄狀態(tài)對(duì)畢設(shè)來(lái)說(shuō)實(shí)現(xiàn)簡(jiǎn)單答辯也能講清無(wú)狀態(tài)認(rèn)證的思路。先寫一個(gè)生成和解析 token 的工具類以 jjwt 0.12 的 API 為例import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.security.Keys; import javax.crypto.SecretKey; import java.nio.charset.StandardCharsets; import java.util.Date; public class JwtUtil { private static final String SECRET_KEY hotel-management-2025-secret-key-must-be-long-enough; private static final long EXPIRE_TIME 24 * 60 * 60 * 1000L; public static String createToken(String username, String role) { SecretKey key Keys.hmacShaKeyFor(SECRET_KEY.getBytes(StandardCharsets.UTF_8)); return Jwts.builder() .subject(username) .claim(role, role) .issuedAt(new Date()) .expiration(new Date(System.currentTimeMillis() EXPIRE_TIME)) .signWith(key) .compact(); } public static Claims parseToken(String token) { SecretKey key Keys.hmacShaKeyFor(SECRET_KEY.getBytes(StandardCharsets.UTF_8)); return Jwts.parser() .verifyWith(key) .build() .parseSignedClaims(token) .getPayload(); } }這里提醒一下jjwt 0.9 時(shí)代常用的 setSigningKey 在 0.12 里已經(jīng)廢棄換成 verifyWith。網(wǎng)上很多中文教程還在用舊 API照抄會(huì)得到一堆編譯錯(cuò)誤這也是我把 jjwt 版本單獨(dú)拿出來(lái)強(qiáng)調(diào)的原因。密鑰字符串要足夠長(zhǎng)HS256 算法對(duì)長(zhǎng)度有校驗(yàn)太短會(huì)拋 WeakKeyException。攔截器負(fù)責(zé)統(tǒng)一校驗(yàn)Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String header request.getHeader(Authorization); if (StringUtils.hasText(header) header.startsWith(Bearer )) { try { Claims claims JwtUtil.parseToken(header.substring(7)); request.setAttribute(username, claims.getSubject()); request.setAttribute(role, claims.get(role)); return true; } catch (Exception e) { // token 過(guò)期或非法統(tǒng)一按未登錄處理 } } response.setStatus(401); response.setContentType(application/json;charsetUTF-8); response.getWriter().write({\code\:401,\message\:\未登錄或登錄已過(guò)期\}); return false; } }SpringBoot3 里注冊(cè)攔截器的方式是實(shí)現(xiàn) WebMvcConfigurer注意是實(shí)現(xiàn)接口不是繼承 WebMvcConfigurationSupport后者會(huì)覆蓋掉 Spring MVC 的自動(dòng)配置導(dǎo)致靜態(tài)資源和默認(rèn)配置失效。這是 SpringBoot2 時(shí)代的老坑現(xiàn)在依然有人踩Configuration public class WebConfig implements WebMvcConfigurer { Autowired private JwtInterceptor jwtInterceptor; Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/auth/login); } }excludePathPatterns 里要把登錄接口、以及留給接口文檔的 /v3/api-docs 和 /swagger-ui/** 都排除掉否則接口文檔頁(yè)面也進(jìn)不來(lái)。3.2 預(yù)訂與入住的并發(fā)控制事務(wù)和條件更新怎么配合酒店管理系統(tǒng)最容易出問(wèn)題的不是 CRUD而是同一間房被兩個(gè)人同時(shí)訂走。雖然畢設(shè)演示時(shí)很難制造出真實(shí)并發(fā)但答辯老師一定會(huì)問(wèn)你怎么保證一間房不會(huì)被重復(fù)分配答案就這一句話用條件更新保證原子性而不是先查再改。先查再改的問(wèn)題在于兩個(gè)請(qǐng)求同時(shí)查到房間狀態(tài)是 0空閑然后都執(zhí)行更新房間就可能被開出兩張單。正確做法是把判斷狀態(tài)和更新狀態(tài)合并成一條 SQL讓數(shù)據(jù)庫(kù)來(lái)保證原子性。Transactional(rollbackFor Exception.class) public void checkIn(Long bookingId, Long roomId) { Booking booking bookingMapper.selectById(bookingId); if (booking null || !confirmed.equals(booking.getStatus())) { throw new BizException(預(yù)訂不存在或狀態(tài)異常); } // 關(guān)鍵只有狀態(tài)是空閑(0)時(shí)才能改成入住(2)影響行數(shù)為 0 說(shuō)明被別人搶了 int rows roomMapper.updateStatusIfStatusIs(roomId, 2, 0); if (rows 0) { throw new BizException(該房間當(dāng)前不可用請(qǐng)刷新后重試); } CheckInRecord record new CheckInRecord(); record.setBookingId(bookingId); record.setRoomId(roomId); record.setCustomerName(booking.getCustomerName()); record.setCustomerPhone(booking.getCustomerPhone()); record.setCheckInDate(LocalDate.now()); checkInRecordMapper.insert(record); bookingMapper.updateStatus(bookingId, checked_in); }對(duì)應(yīng)的 Mapper 方法要這樣寫Update(UPDATE room SET status #{targetStatus} WHERE id #{roomId} AND status #{expectStatus}) int updateStatusIfStatusIs(Param(roomId) Long roomId, Param(targetStatus) Integer targetStatus, Param(expectStatus) Integer expectStatus);updateStatusIfStatusIs 返回的 int 是受影響行數(shù)。只有當(dāng)房間還是空閑狀態(tài)時(shí)更新才會(huì)成功返回 1如果別的請(qǐng)求已經(jīng)把房間占了條件不成立返回 0。再用 Transactional 把整個(gè)方法包起來(lái)中途任何一步拋異常前面的更新都會(huì)回滾。這個(gè)方法規(guī)模不大但它是這個(gè)系統(tǒng)里最值得在答辯時(shí)展開講的一塊比堆十個(gè)增刪改查接口有價(jià)值得多。預(yù)訂階段同理可以根據(jù)日期范圍先去統(tǒng)計(jì)該房型在目標(biāo)時(shí)間段內(nèi)的空閑房間數(shù)再插入預(yù)訂記錄。如果是自用系統(tǒng)不需要那么嚴(yán)謹(jǐn)可以簡(jiǎn)化成預(yù)訂時(shí)不鎖房間、入住時(shí)再校驗(yàn)但你要能說(shuō)清楚為什么可以簡(jiǎn)化而不是沒(méi)想過(guò)這個(gè)問(wèn)題。3.3 logback-spring.xml 落地按天滾動(dòng)日志與 log4j2 的選擇日志配置在畢設(shè)里常常被忽略但聯(lián)調(diào)階段你會(huì)感謝它。SpringBoot3 默認(rèn)的日志實(shí)現(xiàn)是 Logback配置文件名用 logback-spring.xml 而不是 logback.xml區(qū)別在于前者支持 springProfile 標(biāo)簽可以按開發(fā)、生產(chǎn)環(huán)境切換日志級(jí)別后者不行。我給這類管理系統(tǒng)的配置一般長(zhǎng)這樣?xml version1.0 encodingUTF-8? configuration property nameLOG_HOME value./logs/ appender nameCONSOLE classch.qos.logback.core.ConsoleAppender encoder pattern%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n/pattern /encoder /appender appender nameFILE classch.qos.logback.core.rolling.RollingFileAppender file${LOG_HOME}/hotel.log/file rollingPolicy classch.qos.logback.core.rolling.TimeBasedRollingPolicy fileNamePattern${LOG_HOME}/hotel-%d{yyyy-MM-dd}.log/fileNamePattern maxHistory30/maxHistory /rollingPolicy encoder pattern%d{yyyy-MM-dd HH:mm:ss} %-5level [%thread] %logger - %msg%n/pattern /encoder /appender root levelINFO appender-ref refCONSOLE/ appender-ref refFILE/ /root logger namecom.yourcompany.hotel levelDEBUG/ /configurationpattern 里的 %d 是時(shí)間%-5level 是日志級(jí)別%logger{36} 是類名縮寫%msg 是消息內(nèi)容。關(guān)鍵參數(shù)是 fileNamePattern 里的 %d{yyyy-MM-dd}它讓日志按天滾動(dòng)每天生成一個(gè)文件maxHistory 保留 30 天。這樣聯(lián)調(diào)時(shí)想看某天的報(bào)錯(cuò)直接去 logs 目錄找對(duì)應(yīng)日期的文件。你可能在檢索時(shí)會(huì)看到 springboot3 log4j2 的相關(guān)討論。Log4j2 確實(shí)是一個(gè)可選項(xiàng)優(yōu)點(diǎn)是基于 LMAX Disruptor 的異步性能但需要先在 pom 里排除 spring-boot-starter-logging再加入 spring-boot-starter-log4j2然后寫 log4j2-spring.xml。對(duì)酒店管理系統(tǒng)這個(gè)量級(jí)Log4j2 的性能優(yōu)勢(shì)根本用不出來(lái)反而多兩處配置失誤的風(fēng)險(xiǎn)。我的建議是老老實(shí)實(shí)用 Logback把時(shí)間花在把日志級(jí)別調(diào)對(duì)、把 SQL 打出來(lái)這類真的能幫你 debug的事情上。如果為了簡(jiǎn)歷上多寫一行熟悉 Log4j2而強(qiáng)行換答辯時(shí)被問(wèn)到配置細(xì)節(jié)反而容易露怯。3.4 接口文檔springdoc-openapi 替代 Swagger2 的遷移給后端寫接口文檔能直接生成可在線調(diào)試的頁(yè)面答辯演示時(shí)打開 Swagger UI 秀一下比翻代碼講接口直觀得多。但注意 SpringBoot3 下不能再用 springfox 那套 Swagger2它的底層停留在 javax 時(shí)代啟動(dòng)就會(huì)失敗。現(xiàn)在主流做法是用 springdoc 的 starterdependency groupIdorg.springdoc/groupId artifactIdspringdoc-openapi-starter-webmvc-ui/artifactId version2.6.0/version /dependency依賴加進(jìn)去后在 application.yml 里補(bǔ)兩行springdoc: api-docs: enabled: true swagger-ui: path: /swagger-ui.html啟動(dòng)后訪問(wèn) http://localhost:8080/swagger-ui.html 就能看到頁(yè)面。注解也換了原來(lái)的 Api 換成 TagApiOperation 換成 OperationApiParam 換成 Parameter。寫接口時(shí)順手加這些注解工作量不大但生成的文檔可讀性完全不一樣。有一個(gè)細(xì)節(jié)要留意如果攔截器把 /api/** 全部攔了springdoc 的接口文檔路徑不在放行名單里頁(yè)面就打不開。我在 3.1 提過(guò)要在 excludePathPatterns 里放行 /v3/api-docs 和 /swagger-ui/**這里再?gòu)?qiáng)調(diào)一次因?yàn)檫@兩類問(wèn)題經(jīng)常一起出現(xiàn)排查時(shí)容易繞圈子。4. Vue3 前端落地登錄態(tài)、房間管理頁(yè)與預(yù)訂聯(lián)調(diào)4.1 Axios 攔截器讓每個(gè)請(qǐng)求自動(dòng)帶上 Token前端接入后端的第一步不是寫頁(yè)面而是把請(qǐng)求層封裝好。所有接口請(qǐng)求統(tǒng)一走一個(gè) Axios 實(shí)例在攔截器里做兩件事請(qǐng)求發(fā)出前帶上 token響應(yīng)返回時(shí)統(tǒng)一處理業(yè)務(wù)碼和 401。// src/api/request.js import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) // 請(qǐng)求攔截器把登錄后存的 token 塞進(jìn)請(qǐng)求頭 request.interceptors.request.use(config { const token localStorage.getItem(hotel_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 響應(yīng)攔截器統(tǒng)一處理業(yè)務(wù)碼和登錄過(guò)期 request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 請(qǐng)求失敗) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(hotel_token) router.push(/login) ElMessage.warning(登錄已過(guò)期請(qǐng)重新登錄) } else { ElMessage.error(error.response?.data?.message || 網(wǎng)絡(luò)異常) } return Promise.reject(error) } ) export default requestbaseURL 寫成 /api 而不是 http://localhost:8080是為了配合上一章 Vite 代理的工作方式。后端返回結(jié)構(gòu)約定成{ code, message, data }三件套前端攔截器里統(tǒng)一判斷 code頁(yè)面上就不再需要每個(gè)請(qǐng)求都寫一遍錯(cuò)誤提示。token 放 localStorage 對(duì)畢設(shè)系統(tǒng)足夠不用擔(dān)心 XSS 那層攻擊答辯能說(shuō)清這個(gè)取舍就行。4.2 Element Plus 房間管理頁(yè)表格加彈窗的最小實(shí)現(xiàn)房間管理頁(yè)是這類系統(tǒng)最標(biāo)準(zhǔn)的 CRUD 頁(yè)面用 Element Plus 的 table dialog 就能完成。下面這個(gè)示例是去掉大量樣式后的核心骨架template el-table :datarooms border stripe el-table-column proproomNo label房間號(hào) width120/ el-table-column proproomTypeName label房型/ el-table-column propfloor label樓層 width80/ el-table-column label狀態(tài) width100 template #default{ row } el-tag :typetagType(row.status) {{ statusLabel(row.status) }} /el-tag /template /el-table-column el-table-column label操作 width160 template #default{ row } el-button link typeprimary clickopenDialog(row)編輯/el-button el-button link typedanger clickremoveRoom(row)刪除/el-button /template /el-table-column /el-table el-button typeprimary clickopenDialog()新增房間/el-button el-dialog v-modeldialogVisible :titleform.id ? 編輯房間 : 新增房間 width500px el-form :modelform label-width80px el-form-item label房間號(hào) el-input v-modelform.roomNo/ /el-form-item el-form-item label房型 el-select v-modelform.roomTypeId placeholder選擇房型 el-option v-fort in roomTypes :keyt.id :labelt.typeName :valuet.id/ /el-select /el-form-item el-form-item label樓層 el-input-number v-modelform.floor :min1/ /el-form-item /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksaveRoom保存/el-button /template /el-dialog /template script setup import { ref, onMounted } from vue import { listRoomsApi, saveRoomApi, deleteRoomApi } from /api/room const rooms ref([]) const dialogVisible ref(false) const form ref({}) const statusLabel (s) ({ 0: 空閑, 2: 入住, 3: 維修 }[s] ?? 已預(yù)訂) const tagType (s) (s 0 ? success : s 2 ? danger : warning) async function loadRooms() { const res await listRoomsApi() rooms.value res.data } function openDialog(row) { form.value row ? { ...row } : { roomNo: , roomTypeId: null, floor: 1 } dialogVisible.value true } async function saveRoom() { await saveRoomApi(form.value) dialogVisible.value false await loadRooms() } async function removeRoom(row) { await deleteRoomApi(row.id) await loadRooms() } onMounted(loadRooms) /script有兩個(gè) Vue3 的細(xì)節(jié)容易出錯(cuò)。第一表格數(shù)據(jù)用 ref 管理而不是 reactive因?yàn)榻涌诜祷睾笾苯咏o rooms.value 賦值ref 能保持響應(yīng)式reactive 直接賦值新數(shù)組會(huì)斷開響應(yīng)鏈接頁(yè)面不更新。第二彈窗編輯時(shí)用{ ...row }展開對(duì)象避免直接修改表格里的原數(shù)據(jù)否則用戶取消編輯表格里也已經(jīng)變了。4.3 Pinia 管登錄態(tài)路由守衛(wèi)與刷新恢復(fù)登錄態(tài)管理我推薦 PiniaVue3 官方狀態(tài)庫(kù)比 Vuex 少一層樣板代碼。核心思路是token 存在 Pinia 里同時(shí)同步到 localStorage頁(yè)面刷新后從 localStorage 恢復(fù)。// src/stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(hotel_token) || , userInfo: null }), actions: { setToken(token) { this.token token localStorage.setItem(hotel_token, token) }, setUserInfo(info) { this.userInfo info }, logout() { this.token this.userInfo null localStorage.removeItem(hotel_token) } } })路由守衛(wèi)負(fù)責(zé)擋住未登錄的訪問(wèn)// src/router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from /stores/user router.beforeEach((to) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.token) { return { path: /login } } return true })這里把 token 是否存在的判斷放在 Pinia 的 state 里而不是每次都讀 localStorage好處是登錄和注銷動(dòng)作都收斂到 store 的 action 里路由守衛(wèi)和 Axios 攔截器讀的是同一份狀態(tài)不會(huì)出現(xiàn)頁(yè)面顯示已登錄、請(qǐng)求卻被 401的錯(cuò)位。4.4 聯(lián)調(diào)配置Vite 代理解決跨域后端 CORS 兜底開發(fā)時(shí) Vite 代理已經(jīng)處理了大部分跨域問(wèn)題但有些場(chǎng)景比如直接訪問(wèn)后端接口文檔、或者臨時(shí)用 Postman 測(cè)試還是會(huì)走后端 CORS 配置。我在后端加一個(gè)兜底的跨域配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }這里有個(gè) 2025 年依然有人在踩的坑allowedOrigins() 和 allowCredentials(true) 同時(shí)使用Spring 會(huì)直接報(bào) IllegalArgumentException。解決辦法一是 allowedOriginPatterns() 代替二是把 allowCredentials 設(shè)成 false。對(duì)這個(gè)畢設(shè)系統(tǒng)前端和后端都是自己寫的安全邊界沒(méi)那么嚴(yán)格用 allowedOriginPatterns 省事。聯(lián)調(diào)時(shí)如果發(fā)現(xiàn)請(qǐng)求發(fā)出去了但響應(yīng)被瀏覽器攔下先看控制臺(tái)里 CORS error 的具體信息別著急改代碼。最常見的其實(shí)是代理沒(méi)生效——比如前端請(qǐng)求寫成了全路徑 http://localhost:8080繞過(guò)了 Vite 代理又回到了跨域的老問(wèn)題上。5. 避坑清單SpringBoot3Vue3 聯(lián)調(diào)階段最容易栽的五個(gè)坑5.1 javax 全部報(bào)紅SpringBoot3 的 jakarta 包名遷移現(xiàn)象從舊教程或?qū)W長(zhǎng)代碼里復(fù)制過(guò)來(lái)的文件出現(xiàn)大面積 import 報(bào)紅提示 package javax.servlet 不存在。原因SpringBoot3 基于 Jakarta EE 9官方把 javax 開頭的包名整體遷移到了 jakarta。這個(gè)改動(dòng)是 SpringBoot2 升 3 最直觀的破壞性變化很多老代碼片段直接失去了意義。解決在 IDEA 里用全局替換把 import javax. 改成 import jakarta.。需要注意 servlet 相關(guān) API 里的類名本身沒(méi)變變的只有包名所以批量替換是安全的。5.2 MyBatis-Plus 配置了但啟動(dòng)就報(bào)錯(cuò)現(xiàn)象項(xiàng)目啟動(dòng)時(shí)拋異常堆棧里有 ClassNotFoundError 或者關(guān)于 SqlSessionFactory 的 BeanCreationException而且信息指向 mybatis-spring 相關(guān)類。原因用了老坐標(biāo) mybatis-plus-boot-starter而它默認(rèn)帶的是適配 SpringBoot2 的 mybatis-spring在 SpringBoot3 的類加載環(huán)境下直接不兼容。解決換成 mybatis-plus-spring-boot3-starter并把版本提到 3.5.5 及以上。這個(gè)坑的特點(diǎn)是一旦踩中報(bào)錯(cuò)時(shí)機(jī)在啟動(dòng)早期信息也不直接指向版本不兼容不熟悉的人會(huì)在數(shù)據(jù)源配置上反復(fù)排查浪費(fèi)不少時(shí)間。5.3 數(shù)據(jù)庫(kù)時(shí)間和頁(yè)面時(shí)間差了 8 小時(shí)現(xiàn)象前端提交的入住日期是 2025-05-01存到數(shù)據(jù)庫(kù)后查出來(lái)變成 2025-04-30。原因MySQL 連接的時(shí)區(qū)沒(méi)有設(shè)置JDBC 驅(qū)動(dòng)默認(rèn)按照 JVM 所在時(shí)區(qū)去解析而連接串里的 serverTimezone 缺失時(shí)雙方各按各的時(shí)區(qū)解釋時(shí)間。解決連接串加上 serverTimezoneAsia/Shanghai同時(shí)檢查 Jackson 側(cè)的時(shí)間序列化配置。如果后端給前端返回時(shí)間也差 8 小時(shí)那就要在 application.yml 里給 Jackson 配 time-zone。這個(gè)坑不到實(shí)際聯(lián)調(diào)不會(huì)暴露而且出錯(cuò)位置可能在數(shù)據(jù)庫(kù)、可能在 JSON 序列化、也可能在瀏覽器顯示排查時(shí)先統(tǒng)一確認(rèn)某一層別兩頭亂改。5.4 Vue3 里 reactive 賦值后頁(yè)面不更新現(xiàn)象接口數(shù)據(jù)返回后console.log 能看到數(shù)據(jù)但頁(yè)面上表格空白或者還是舊數(shù)據(jù)。原因reactive 聲明的對(duì)象如果整體賦一個(gè)新數(shù)組等于把響應(yīng)式代理對(duì)象換成了一個(gè)普通對(duì)象Vue3 的依賴收集失效。這是 Vue3 新手最常見的玄學(xué)問(wèn)題也是從 Vue2 的 data 寫法遷移過(guò)來(lái)最容易踩的。解決要么列表數(shù)據(jù)用 ref 聲明賦值時(shí)寫 rooms.value res.data要么保留 reactive 但用 push 或 splice 更新。我的習(xí)慣是列表這種整體替換頻繁的數(shù)據(jù)一律 ref表單這種嵌套結(jié)構(gòu)用 reactive 配合 Object.assign 更新。5.5 CORS 配了還是被攔現(xiàn)象前端控制臺(tái)報(bào) CORS error后端也有 CORS 配置但請(qǐng)求就是過(guò)不去。原因有兩種常見情況。一是 allowedOrigins() 配了 credentialsSpring 直接拒絕這種組合二是后端同時(shí)有 Spring Security安全過(guò)濾器鏈的順序比 MVC 的 CORS 配置更靠前請(qǐng)求在到達(dá)你的 CorsConfig 之前就被攔了。解決先用 Vite 代理兜底把跨域問(wèn)題從開發(fā)期挪走后端 CORS 配置用 allowedOriginPatterns() 并加上 OPTIONS 方法如果引了 Spring Security在 SecurityConfig 里調(diào)用 cors() 讓安全框架感知跨域配置?？缬騿?wèn)題看起來(lái)是配置問(wèn)題實(shí)際上經(jīng)常是過(guò)濾器順序問(wèn)題排查時(shí)按先確認(rèn)請(qǐng)求到達(dá)了哪一層這個(gè)思路來(lái)。6. 答辯前用一條業(yè)務(wù)流把系統(tǒng)驗(yàn)到能上臺(tái)6.1 完整業(yè)務(wù)流自測(cè)清單很多畢設(shè)翻車不是功能沒(méi)寫完而是功能之間沒(méi)有串起來(lái)。我的習(xí)慣是答辯前兩周開始每天跑一遍完整業(yè)務(wù)流用一個(gè)固定的操作清單序號(hào)操作預(yù)期結(jié)果1用管理員賬號(hào)登錄跳轉(zhuǎn)首頁(yè)頂部顯示用戶名2新增兩個(gè)房型、四間房房間列表狀態(tài)均為空閑3創(chuàng)建一個(gè)兩天后的預(yù)訂預(yù)訂狀態(tài)為已確認(rèn)對(duì)應(yīng)房型房間標(biāo)記已預(yù)訂4對(duì)該預(yù)訂辦理入住分配具體房間房間狀態(tài)變?yōu)槿胱?查詢?cè)撚唵卧斍橛唵螤顟B(tài)變?yōu)橐讶胱?辦理退房并結(jié)算生成賬單金額天數(shù)×房型價(jià)格7查看房間列表該房間恢復(fù)空閑8未登錄直接訪問(wèn)后臺(tái)頁(yè)面被重定向到登錄頁(yè)9刷新頁(yè)面后再操作登錄態(tài)保持不需要重新登錄10看當(dāng)天日志文件能查到每一步的請(qǐng)求與關(guān)鍵 SQL這十條能穩(wěn)定跑通答辯演示環(huán)節(jié)基本不會(huì)出現(xiàn)老師指到哪項(xiàng)目死在哪的尷尬。金額對(duì)不上、狀態(tài)跳不對(duì)這類問(wèn)題也都會(huì)在反復(fù)跑流程時(shí)暴露出來(lái)。6.2 從日志定位問(wèn)題的基本姿勢(shì)聯(lián)調(diào)階段接口出問(wèn)題先別急著加打印。按這個(gè)順序走看瀏覽器 Network 里請(qǐng)求是否到達(dá)后端看控制臺(tái)有沒(méi)有業(yè)務(wù)異常堆棧再去 logs 目錄里查當(dāng)天的滾動(dòng)日志。logback-spring.xml 里配了按天滾動(dòng)所以查問(wèn)題直接打開對(duì)應(yīng)日期的文件搜索異常時(shí)間點(diǎn)前后幾十行基本就能定位到是哪個(gè)接口、哪條 SQL 出的問(wèn)題。一個(gè)值得養(yǎng)的調(diào)試習(xí)慣把日志級(jí)別里的 SQL 輸出保留到答辯前一兩天再改成只輸出 INFO。這樣平時(shí)能看到 MyBatis-Plus 實(shí)際執(zhí)行的 SQL排查參數(shù)綁定問(wèn)題時(shí)非常有幫助答辯演示時(shí)控制臺(tái)又不會(huì)被大量 SQL 刷屏。6.3 演示時(shí)的三個(gè)加分細(xì)節(jié)演示時(shí)不用把增刪改查都點(diǎn)一遍老師更想看你對(duì)自己系統(tǒng)的理解深度。我會(huì)重點(diǎn)準(zhǔn)備三塊登錄鑒權(quán)的完整鏈路——登錄、發(fā) token、前端攔截器帶頭、后端攔截器校驗(yàn)預(yù)訂入住的并發(fā)控制——把條件更新的那條 SQL 打開給老師看講清楚為什么這樣能防止超賣日志體系——現(xiàn)場(chǎng)打開當(dāng)天的日志文件指出一次完整操作在日志里的痕跡。這三個(gè)點(diǎn)都講明白比頁(yè)面點(diǎn)多十個(gè)更有說(shuō)服力。答辯前最深的感受是能給老師穩(wěn)定演示一條完整業(yè)務(wù)流比準(zhǔn)備一堆這個(gè)功能我還沒(méi)來(lái)得及做的解釋要踏實(shí)得多。我做這類系統(tǒng)有個(gè)習(xí)慣每次改完代碼都先跑一遍上面的十項(xiàng)清單不通過(guò)不繼續(xù)往下寫這個(gè)習(xí)慣救了我不止一次?，F(xiàn)在把這套流程寫出來(lái)希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取