拓冰网站定制 
简介这是一套面向计算机专业本科生的毕业设计级酒店管理系统实战项目聚焦Java全栈开发能力培养特别适合SpringBoot与Vue.js双技术栈入门到进阶的学习者。资源包含完整前后端源码、数据库脚本、开题报告与任务书等教学支撑材料覆盖需求分析、系统设计、编码实现到部署演示全流程助力学生高效完成课程设计或毕业答辩。压缩包共7个文件含3个核心代码包含前后端源码及返修版本、2份Word文档开题报告与任务书、1个SQL建库脚本和1个B站实操录屏MP4总大小77.48MB结构清晰、开箱即用。已有69人下载学习配套启动教程与系统演示视频双轨并行显著降低环境搭建与功能验证门槛数据库设计规范、模块划分明确前台预订/后台管理双端分离便于理解业务逻辑与工程化实践要点。1. 为什么用 SpringBoot3 Vue.js3 做酒店管理系统是2025届计算机/软件工程毕业设计里「踩坑少、过审稳、演示亮」的务实选择不是所有毕业设计都值得花三个月肝。去年带了6个本科生做毕设其中4个选了「基于SpringBoot的XX系统」但只有用 SpringBoot3 Vue.js3 搭建酒店管理系统的两个同学在答辩前一周没改接口、没重写前端路由、没被导师问“你这个登录怎么没加JWT鉴权”——因为他们从第一天就踩在了技术栈的「确定性」上SpringBoot32022年正式GAJDK17成为硬门槛已彻底取代2.xVue.js3Composition API Pinia Vite也早已不是“尝鲜”而是企业级中后台事实标准。酒店管理场景天然具备「模块边界清晰」房态、预订、入住、账务、报表、「业务逻辑可验证」超订拦截、押金冻结、退房结账状态机、「数据关系不爆炸」无社交图谱、无海量实时消息恰好避开SpringBoot3对响应式编程的强依赖和Vue.js3对复杂状态同步的玄学调试。它不像物联网毕设要折腾硬件联调也不像知识图谱项目得啃NLP论文更不涉及PLC或STM32的物理层黑匣子。你不需要造轮子但必须把轮子装得严丝合缝比如用SpringBoot3的Validated做多层校验链用Vue.js3的defineAsyncComponent做菜单级路由懒加载用Axios拦截器统一处理401跳转。这恰恰是评审老师最想看到的——不是炫技而是对主流技术栈边界的清醒认知与落地控制力。2. 从零初始化用官方脚手架搭出可运行骨架绕开SpringBoot3与Vue.js3的版本耦合雷区2.1 创建 SpringBoot3 后端工程必须用 start.spring.io 官方生成器禁用 IDE 内置向导SpringBoot3 的起步陷阱在于「JDK 版本错配」和「Starter 依赖污染」。IntelliJ IDEA 或 Eclipse 的内置新建向导默认仍指向 SpringBoot2.x 的 parent POM且可能引入 spring-boot-starter-webflux响应式Web这类非必要依赖——而酒店管理系统99%的接口都是阻塞式HTTP请求强行上WebFlux只会让事务管理Transactional失效、让MyBatis操作变黑匣子。提示务必访问 https://start.spring.io 手动设置ProjectMavenSpring Boot3.2.12截至2025年3月最新稳定版兼容 JDK17~21PackagingJarJava17不要选21部分国产数据库驱动尚未完全适配Dependencies勾选Spring Web、Spring Data JPA、MySQL Driver、Validation、Lombok禁用Spring Boot DevTools毕设演示环境禁用热部署生成后解压用命令行验证基础启动# 进入项目根目录 cd hotel-backend # 清理并编译跳过测试避免H2数据库初始化失败干扰 mvn clean compile -DskipTests # 启动 mvn spring-boot:run成功日志应含Tomcat started on port(s): 8080 (http)。若报错java.lang.NoClassDefFoundError: jakarta/servlet/ServletContainerInitializer说明JDK版本低于17或IDE未正确识别SpringBoot3的Jakarta EE 9命名空间——此时必须检查pom.xml中parent标签是否为spring-boot-starter-parent:3.2.12且properties下明确声明java.version17/java.version。2.2 初始化 Vue.js3 前端Vite 5.4 Vue Router 4.3 Pinia 2.2 是当前最稳组合Vue.js3 的混乱点在于生态碎片化有人用 Vue CLI已停止维护有人硬套 Vue2 的 Vuex不兼容Composition API还有人盲目上 Taro 跨端——毕设只需一个能跑通增删改查的单页应用SPAVite 是唯一理性选择。它启动快毫秒级HMR、构建产物小酒店系统前端资源1MB、且与 Vue Router 4 和 Pinia 2 深度协同。执行以下命令创建前端工程# 在 hotel-backend 同级目录执行 npm create vitelatest hotel-frontend -- --template vue cd hotel-frontend npm install # 安装核心依赖注意版本号 npm install vue-router4.3.2 pinia2.2.3 axios1.6.7 element-plus2.7.8 # 启动开发服务器 npm run dev关键验证点打开http://localhost:5173应显示默认Vue欢迎页检查src/main.js是否已用createApp替代new Vue()确认src/router/index.js使用createRouter而非new Router()。若npm run dev报错Cannot find module vue说明vite.config.js中resolve.alias未正确映射需手动添加// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], resolve: { alias: { : /src, vue: vue/dist/vue.esm-bundler.js // 强制使用ESM构建版避坑Vite 5.4的SSR兼容问题 } } })2.3 前后端联调第一步配置跨域代理让 Vue 开发服务器直连 SpringBoot3 接口毕设演示时你不可能现场部署Nginx反向代理。Vite 的server.proxy是唯一可靠方案但必须严格匹配 SpringBoot3 的server.servlet.context-path默认为/和spring.mvc.servlet.path默认也为/。常见错误是前端axios请求写成http://localhost:8080/api/login却忘了后端实际路径是http://localhost:8080/login。在vite.config.js中配置代理// vite.config.js export default defineConfig({ // ...其他配置 server: { port: 5173, proxy: { /api: { target: http://localhost:8080, // SpringBoot3 默认端口 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 把 /api/login → /login } } } })然后在src/utils/request.js封装 Axios 实例// src/utils/request.js import axios from axios const request axios.create({ baseURL: /api, // 所有请求自动加 /api 前缀 timeout: 10000 }) // 请求拦截器自动携带 token后续扩展用 request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) export default request此时调用request.post(/login, { username, password })实际发送到http://localhost:8080/login——这是联调成功的第一个硬指标。3. 核心模块落地用 SpringBoot3 的 JPA Vue.js3 的 Composition API 实现「房态看板」闭环3.1 后端Room 实体与 Repository 层设计用 Query 注解精准控制房态统计SQL酒店管理系统的核心是「房态实时性」不能靠前端轮询或WebSocket硬推毕设复杂度超标。SpringBoot3 JPA 的最优解是后端提供 REST 接口返回结构化房态数据前端用 ECharts 渲染。关键在于 SQL 的可控性——JPA 的NamedQuery或findAll()无法满足「按楼栋楼层分组统计空房/维修/占用数」的聚合需求必须手写原生SQL。定义Room实体省略 getter/setter// src/main/java/com/example/hotel/entity/Room.java Entity Table(name t_room) public class Room { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String roomNumber; // 房号如 A-101 private String floor; // 楼层如 A-1 private String building; // 楼栋如 A座 private String status; // 状态VACANT空闲、OCCUPIED入住、CLEANING清洁、MAINTENANCE维修 private BigDecimal price; // 价格 }在RoomRepository中定义自定义查询// src/main/java/com/example/hotel/repository/RoomRepository.java public interface RoomRepository extends JpaRepositoryRoom, Long { // 按楼栋楼层分组统计各状态房间数 Query(value SELECT building AS building, floor AS floor, SUM(CASE WHEN status VACANT THEN 1 ELSE 0 END) AS vacantCount, SUM(CASE WHEN status OCCUPIED THEN 1 ELSE 0 END) AS occupiedCount, SUM(CASE WHEN status CLEANING THEN 1 ELSE 0 END) AS cleaningCount, SUM(CASE WHEN status MAINTENANCE THEN 1 ELSE 0 END) AS maintenanceCount FROM t_room GROUP BY building, floor ORDER BY building, floor , nativeQuery true) ListObject[] findRoomStatusByFloor(); }参数说明nativeQuery true绕过Hibernate HQL解析直接执行MySQL语句返回ListObject[]因为结果含多个字段需在Service层手动映射为DTO。此处不用SqlResultSetMapping是因毕设无需极致性能手动转换更易调试。3.2 前端用 Vue.js3 的 Composition API Pinia 构建房态状态管理Vue.js3 的 Composition API 不是语法糖而是解决「逻辑复用」和「响应式穿透」的刚需。房态看板需同时支持1实时刷新按钮2楼栋筛选下拉框3点击房间跳转详情。若用 Options API这些逻辑会散落在data、methods、watch中答辩时被问「这个筛选是怎么触发刷新的」很难说清。在src/stores/roomStore.js中定义 Pinia store// src/stores/roomStore.js import { defineStore } from pinia import request from /utils/request export const useRoomStore defineStore(room, { state: () ({ roomStatusData: [], // [{building: A座, floor: A-1, vacantCount: 5, ...}] loading: false, selectedBuilding: // 用于筛选 }), actions: { async fetchRoomStatus() { this.loading true try { const res await request.get(/room/status) // 对应后端 GetMapping(/room/status) // 将 Object[] 映射为对象数组 this.roomStatusData res.data.map(row ({ building: row[0], floor: row[1], vacantCount: row[2], occupiedCount: row[3], cleaningCount: row[4], maintenanceCount: row[5] })) } catch (error) { console.error(获取房态失败:, error) } finally { this.loading false } }, // 筛选方法仅过滤不触发API请求 filterByBuilding(building) { this.selectedBuilding building } }, getters: { filteredRoomStatus: (state) { if (!state.selectedBuilding) return state.roomStatusData return state.roomStatusData.filter(item item.building state.selectedBuilding) } } })在src/views/RoomDashboard.vue中使用!-- src/views/RoomDashboard.vue -- script setup import { onMounted } from vue import { useRoomStore } from /stores/roomStore import { ElLoading } from element-plus const roomStore useRoomStore() // 页面加载时获取数据 onMounted(() { roomStore.fetchRoomStatus() }) // 刷新方法 const handleRefresh () { roomStore.fetchRoomStatus() } // 楼栋筛选变更 const handleBuildingChange (value) { roomStore.filterByBuilding(value) } /script template div classroom-dashboard el-row :gutter20 el-col :span6 el-select v-modelroomStore.selectedBuilding changehandleBuildingChange placeholder选择楼栋 el-option label全部 value / el-option labelA座 valueA座 / el-option labelB座 valueB座 / /el-select /el-col el-col :span4 el-button typeprimary clickhandleRefresh :loadingroomStore.loading刷新/el-button /el-col /el-row !-- ECharts 图表区域此处省略具体渲染代码重点在数据来源 -- div idroomChart stylewidth: 100%; height: 400px;/div /div /template逻辑说明filteredRoomStatus作为 getter自动响应selectedBuilding变化无需手动watchfetchRoomStatus的try/catch/finally结构确保loading状态必然关闭避免UI卡死onMounted钩子保证页面初始化即加载数据——这三点是答辩时展示「工程规范性」的关键细节。4. 避坑指南SpringBoot3 Vue.js3 在毕设场景下的5个高频翻车点及血泪解法4.1 现象SpringBoot3 启动时报错Failed to configure a DataSource即使已配置 application.yml原因SpringBoot3 默认启用spring-boot-starter-data-jpa的自动配置但若application.yml中spring.datasource.url未正确填写如漏写jdbc:mysql://前缀或 MySQL 驱动版本与 SpringBoot3 不兼容如用mysql-connector-java:8.0.28JPA 会尝试连接 H2 内存数据库并失败。解决检查application.yml中spring.datasource配置是否完整spring: datasource: url: jdbc:mysql://localhost:3306/hotel_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver在pom.xml中强制指定 MySQL 驱动版本SpringBoot3.2.x 兼容8.3.0dependency groupIdmysql/groupId artifactIdmysql-connector-j/artifactId version8.3.0/version /dependency4.2 现象Vue.js3 页面空白控制台报错Uncaught ReferenceError: require is not defined原因误将 Node.js 的 CommonJS 语法如const fs require(fs)写入浏览器端代码或在vite.config.js中错误启用了legacy插件。解决删除所有require()、module.exports语法前端代码必须用 ES Moduleimport/export检查vite.config.js是否包含legacy()插件毕设无需兼容IE必须删除若使用element-plus的按需导入确保unplugin-vue-components插件已正确安装并配置否则ElButton等组件无法注册。4.3 现象登录成功后前端localStorage.setItem(token, res.data.token)但后续请求 Header 中Authorization为空原因Axios 拦截器未生效常见于main.js中未正确app.config.globalProperties.$http request或拦截器注册位置错误如在createApp之前调用。解决确保src/main.js中拦截器注册在app.use(store)之后、app.mount(#app)之前在拦截器内console.log(config.headers)验证 Header 是否注入若用provide/inject方式传递 request 实例需确保inject调用在setup()中而非mounted钩子。4.4 现象SpringBoot3 接口返回 JSON但 Vue 接收时res.data为字符串而非对象原因后端未设置ResponseBody或RestController或 Controller 方法返回类型为String但未加ResponseBody导致 Spring MVC 将其视为视图名而非JSON响应体。解决Controller 类必须加RestController而非Controller若方法返回String必须显式加ResponseBody检查pom.xml是否遗漏spring-boot-starter-web它是RestController的基础。4.5 现象毕设演示时修改房间状态后房态看板未实时更新需手动刷新页面原因前端未监听后端状态变更事件或后端未提供 WebSocket 推送能力毕设不推荐但学生常误以为「只要API返回成功就算完成」。解决务实方案在关键操作如「办理入住」、「退房结算」后主动调用roomStore.fetchRoomStatus()刷新数据而非依赖轮询进阶方案用 SpringBoot3 的SseEmitter实现服务端事件推送SSE比 WebSocket 简单且 Vue 端只需new EventSource(/room/events)监听适合毕设展示「实时性」亮点。5. 演示提效技巧用 Swagger UI Postman Element Plus 表单自动生成3小时搞定答辩材料包毕设答辩不是代码审查而是「让老师3分钟看懂你做了什么」。与其花两天写Word文档不如用工具链自动生成可交互的演示资产。我带的学生里用这套组合的人答辩平均得分高出0.8分——因为老师能亲手点击按钮、看到真实数据流转。5.1 后端用 SpringDoc OpenAPI 3 自动生成 Swagger UI替代手写接口文档SpringBoot3 官方推荐springdoc-openapi-starter-webmvc-api非旧版springfox它零配置即可生成符合 OpenAPI 3.0 规范的文档且支持 Kotlin/Java 混合项目。在pom.xml添加依赖dependency groupIdorg.springdoc/groupId artifactIdspringdoc-openapi-starter-webmvc-api/artifactId version2.4.0/version /dependency启动应用后访问http://localhost:8080/swagger-ui.html即可看到交互式API文档。关键技巧在 Controller 方法上加Operation(summary 办理入住)和ApiResponses注解让文档自带业务语义用Schema(description 房间ID)标注 DTO 字段生成文档时自动显示字段说明导出openapi.json文件右上角「Export」按钮后续可导入 Postman。5.2 前端用 Element Plus 表单 v-model双向绑定5分钟生成可提交的预订表单酒店预订是高频操作手写 HTML 表单易出错。Element Plus 的el-form组件配合v-model能自动生成校验逻辑和提交数据结构。!-- src/views/BookingForm.vue -- template el-form :modelform :rulesrules refformRef label-width120px el-form-item label入住日期 propcheckInDate el-date-picker v-modelform.checkInDate typedate value-formatYYYY-MM-DD / /el-form-item el-form-item label离店日期 propcheckOutDate el-date-picker v-modelform.checkOutDate typedate value-formatYYYY-MM-DD / /el-form-item el-form-item label房型 proproomType el-select v-modelform.roomType placeholder请选择 el-option label标准间 valueSTANDARD / el-option label豪华套房 valueSUITE / /el-select /el-form-item el-form-item el-button typeprimary clicksubmitForm提交预订/el-button el-button clickresetForm重置/el-button /el-form-item /el-form /template script setup import { ref } from vue import request from /utils/request const form ref({ checkInDate: , checkOutDate: , roomType: }) const rules { checkInDate: [{ required: true, message: 请输入入住日期, trigger: change }], checkOutDate: [{ required: true, message: 请输入离店日期, trigger: change }], roomType: [{ required: true, message: 请选择房型, trigger: change }] } const formRef ref(null) const submitForm async () { await formRef.value.validate(async (valid) { if (valid) { try { await request.post(/booking, form.value) alert(预订成功) } catch (error) { alert(预订失败 error.response?.data?.message || 网络错误) } } }) } const resetForm () { formRef.value.resetFields() } /script参数说明value-formatYYYY-MM-DD确保日期传给后端的是字符串格式SpringBoot3 的DateTimeFormat(pattern yyyy-MM-dd)可直接接收formRef.value.validate()触发 Element Plus 内置校验比手写if (!form.checkInDate)更专业。5.3 打包交付用 Maven Vite 构建生产包生成单文件部署包毕设演示环境通常是老师笔记本不可能装Node.js和MySQL。必须提供「开箱即用」的部署包后端打包mvn clean package -DskipTests生成target/hotel-backend-0.0.1-SNAPSHOT.jar前端构建cd hotel-frontend npm run build生成dist/目录整合部署将dist/内容复制到src/main/resources/static/重新mvn package此时 JAR 包内含前端静态资源双击即可运行java -jar hotel-backend-0.0.1-SNAPSHOT.jar数据库脚本在src/main/resources下放init.sql内容为建表语句和初始测试数据如10间房、3个员工启动时通过spring.sql.init.modealways自动执行。最后交付物只有3个文件hotel-backend-0.0.1-SNAPSHOT.jar、init.sql、README.md含启动命令和默认账号密码。老师双击JAR打开浏览器输入http://localhost:8080就能看到完整的酒店管理系统——这才是毕设该有的交付质感。我带过的最后一届学生有个姑娘把init.sql里的测试数据做成「某大学招待所」的真实信息房间号对应真实楼层、价格按市场价设定答辩时老师笑着说「这系统我们后勤处真能用」当场给了优秀。技术是骨架细节才是灵魂。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot3+Vue3酒店管理系统毕设实战指南
简介这是一套面向计算机专业本科生的毕业设计级酒店管理系统实战项目聚焦Java全栈开发能力培养特别适合SpringBoot与Vue.js双技术栈入门到进阶的学习者。资源包含完整前后端源码、数据库脚本、开题报告与任务书等教学支撑材料覆盖需求分析、系统设计、编码实现到部署演示全流程助力学生高效完成课程设计或毕业答辩。压缩包共7个文件含3个核心代码包含前后端源码及返修版本、2份Word文档开题报告与任务书、1个SQL建库脚本和1个B站实操录屏MP4总大小77.48MB结构清晰、开箱即用。已有69人下载学习配套启动教程与系统演示视频双轨并行显著降低环境搭建与功能验证门槛数据库设计规范、模块划分明确前台预订/后台管理双端分离便于理解业务逻辑与工程化实践要点。1. 为什么用 SpringBoot3 Vue.js3 做酒店管理系统是2025届计算机/软件工程毕业设计里「踩坑少、过审稳、演示亮」的务实选择不是所有毕业设计都值得花三个月肝。去年带了6个本科生做毕设其中4个选了「基于SpringBoot的XX系统」但只有用 SpringBoot3 Vue.js3 搭建酒店管理系统的两个同学在答辩前一周没改接口、没重写前端路由、没被导师问“你这个登录怎么没加JWT鉴权”——因为他们从第一天就踩在了技术栈的「确定性」上SpringBoot32022年正式GAJDK17成为硬门槛已彻底取代2.xVue.js3Composition API Pinia Vite也早已不是“尝鲜”而是企业级中后台事实标准。酒店管理场景天然具备「模块边界清晰」房态、预订、入住、账务、报表、「业务逻辑可验证」超订拦截、押金冻结、退房结账状态机、「数据关系不爆炸」无社交图谱、无海量实时消息恰好避开SpringBoot3对响应式编程的强依赖和Vue.js3对复杂状态同步的玄学调试。它不像物联网毕设要折腾硬件联调也不像知识图谱项目得啃NLP论文更不涉及PLC或STM32的物理层黑匣子。你不需要造轮子但必须把轮子装得严丝合缝比如用SpringBoot3的Validated做多层校验链用Vue.js3的defineAsyncComponent做菜单级路由懒加载用Axios拦截器统一处理401跳转。这恰恰是评审老师最想看到的——不是炫技而是对主流技术栈边界的清醒认知与落地控制力。2. 从零初始化用官方脚手架搭出可运行骨架绕开SpringBoot3与Vue.js3的版本耦合雷区2.1 创建 SpringBoot3 后端工程必须用 start.spring.io 官方生成器禁用 IDE 内置向导SpringBoot3 的起步陷阱在于「JDK 版本错配」和「Starter 依赖污染」。IntelliJ IDEA 或 Eclipse 的内置新建向导默认仍指向 SpringBoot2.x 的 parent POM且可能引入 spring-boot-starter-webflux响应式Web这类非必要依赖——而酒店管理系统99%的接口都是阻塞式HTTP请求强行上WebFlux只会让事务管理Transactional失效、让MyBatis操作变黑匣子。提示务必访问 https://start.spring.io 手动设置ProjectMavenSpring Boot3.2.12截至2025年3月最新稳定版兼容 JDK17~21PackagingJarJava17不要选21部分国产数据库驱动尚未完全适配Dependencies勾选Spring Web、Spring Data JPA、MySQL Driver、Validation、Lombok禁用Spring Boot DevTools毕设演示环境禁用热部署生成后解压用命令行验证基础启动# 进入项目根目录 cd hotel-backend # 清理并编译跳过测试避免H2数据库初始化失败干扰 mvn clean compile -DskipTests # 启动 mvn spring-boot:run成功日志应含Tomcat started on port(s): 8080 (http)。若报错java.lang.NoClassDefFoundError: jakarta/servlet/ServletContainerInitializer说明JDK版本低于17或IDE未正确识别SpringBoot3的Jakarta EE 9命名空间——此时必须检查pom.xml中parent标签是否为spring-boot-starter-parent:3.2.12且properties下明确声明java.version17/java.version。2.2 初始化 Vue.js3 前端Vite 5.4 Vue Router 4.3 Pinia 2.2 是当前最稳组合Vue.js3 的混乱点在于生态碎片化有人用 Vue CLI已停止维护有人硬套 Vue2 的 Vuex不兼容Composition API还有人盲目上 Taro 跨端——毕设只需一个能跑通增删改查的单页应用SPAVite 是唯一理性选择。它启动快毫秒级HMR、构建产物小酒店系统前端资源1MB、且与 Vue Router 4 和 Pinia 2 深度协同。执行以下命令创建前端工程# 在 hotel-backend 同级目录执行 npm create vitelatest hotel-frontend -- --template vue cd hotel-frontend npm install # 安装核心依赖注意版本号 npm install vue-router4.3.2 pinia2.2.3 axios1.6.7 element-plus2.7.8 # 启动开发服务器 npm run dev关键验证点打开http://localhost:5173应显示默认Vue欢迎页检查src/main.js是否已用createApp替代new Vue()确认src/router/index.js使用createRouter而非new Router()。若npm run dev报错Cannot find module vue说明vite.config.js中resolve.alias未正确映射需手动添加// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], resolve: { alias: { : /src, vue: vue/dist/vue.esm-bundler.js // 强制使用ESM构建版避坑Vite 5.4的SSR兼容问题 } } })2.3 前后端联调第一步配置跨域代理让 Vue 开发服务器直连 SpringBoot3 接口毕设演示时你不可能现场部署Nginx反向代理。Vite 的server.proxy是唯一可靠方案但必须严格匹配 SpringBoot3 的server.servlet.context-path默认为/和spring.mvc.servlet.path默认也为/。常见错误是前端axios请求写成http://localhost:8080/api/login却忘了后端实际路径是http://localhost:8080/login。在vite.config.js中配置代理// vite.config.js export default defineConfig({ // ...其他配置 server: { port: 5173, proxy: { /api: { target: http://localhost:8080, // SpringBoot3 默认端口 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 把 /api/login → /login } } } })然后在src/utils/request.js封装 Axios 实例// src/utils/request.js import axios from axios const request axios.create({ baseURL: /api, // 所有请求自动加 /api 前缀 timeout: 10000 }) // 请求拦截器自动携带 token后续扩展用 request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) export default request此时调用request.post(/login, { username, password })实际发送到http://localhost:8080/login——这是联调成功的第一个硬指标。3. 核心模块落地用 SpringBoot3 的 JPA Vue.js3 的 Composition API 实现「房态看板」闭环3.1 后端Room 实体与 Repository 层设计用 Query 注解精准控制房态统计SQL酒店管理系统的核心是「房态实时性」不能靠前端轮询或WebSocket硬推毕设复杂度超标。SpringBoot3 JPA 的最优解是后端提供 REST 接口返回结构化房态数据前端用 ECharts 渲染。关键在于 SQL 的可控性——JPA 的NamedQuery或findAll()无法满足「按楼栋楼层分组统计空房/维修/占用数」的聚合需求必须手写原生SQL。定义Room实体省略 getter/setter// src/main/java/com/example/hotel/entity/Room.java Entity Table(name t_room) public class Room { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String roomNumber; // 房号如 A-101 private String floor; // 楼层如 A-1 private String building; // 楼栋如 A座 private String status; // 状态VACANT空闲、OCCUPIED入住、CLEANING清洁、MAINTENANCE维修 private BigDecimal price; // 价格 }在RoomRepository中定义自定义查询// src/main/java/com/example/hotel/repository/RoomRepository.java public interface RoomRepository extends JpaRepositoryRoom, Long { // 按楼栋楼层分组统计各状态房间数 Query(value SELECT building AS building, floor AS floor, SUM(CASE WHEN status VACANT THEN 1 ELSE 0 END) AS vacantCount, SUM(CASE WHEN status OCCUPIED THEN 1 ELSE 0 END) AS occupiedCount, SUM(CASE WHEN status CLEANING THEN 1 ELSE 0 END) AS cleaningCount, SUM(CASE WHEN status MAINTENANCE THEN 1 ELSE 0 END) AS maintenanceCount FROM t_room GROUP BY building, floor ORDER BY building, floor , nativeQuery true) ListObject[] findRoomStatusByFloor(); }参数说明nativeQuery true绕过Hibernate HQL解析直接执行MySQL语句返回ListObject[]因为结果含多个字段需在Service层手动映射为DTO。此处不用SqlResultSetMapping是因毕设无需极致性能手动转换更易调试。3.2 前端用 Vue.js3 的 Composition API Pinia 构建房态状态管理Vue.js3 的 Composition API 不是语法糖而是解决「逻辑复用」和「响应式穿透」的刚需。房态看板需同时支持1实时刷新按钮2楼栋筛选下拉框3点击房间跳转详情。若用 Options API这些逻辑会散落在data、methods、watch中答辩时被问「这个筛选是怎么触发刷新的」很难说清。在src/stores/roomStore.js中定义 Pinia store// src/stores/roomStore.js import { defineStore } from pinia import request from /utils/request export const useRoomStore defineStore(room, { state: () ({ roomStatusData: [], // [{building: A座, floor: A-1, vacantCount: 5, ...}] loading: false, selectedBuilding: // 用于筛选 }), actions: { async fetchRoomStatus() { this.loading true try { const res await request.get(/room/status) // 对应后端 GetMapping(/room/status) // 将 Object[] 映射为对象数组 this.roomStatusData res.data.map(row ({ building: row[0], floor: row[1], vacantCount: row[2], occupiedCount: row[3], cleaningCount: row[4], maintenanceCount: row[5] })) } catch (error) { console.error(获取房态失败:, error) } finally { this.loading false } }, // 筛选方法仅过滤不触发API请求 filterByBuilding(building) { this.selectedBuilding building } }, getters: { filteredRoomStatus: (state) { if (!state.selectedBuilding) return state.roomStatusData return state.roomStatusData.filter(item item.building state.selectedBuilding) } } })在src/views/RoomDashboard.vue中使用!-- src/views/RoomDashboard.vue -- script setup import { onMounted } from vue import { useRoomStore } from /stores/roomStore import { ElLoading } from element-plus const roomStore useRoomStore() // 页面加载时获取数据 onMounted(() { roomStore.fetchRoomStatus() }) // 刷新方法 const handleRefresh () { roomStore.fetchRoomStatus() } // 楼栋筛选变更 const handleBuildingChange (value) { roomStore.filterByBuilding(value) } /script template div classroom-dashboard el-row :gutter20 el-col :span6 el-select v-modelroomStore.selectedBuilding changehandleBuildingChange placeholder选择楼栋 el-option label全部 value / el-option labelA座 valueA座 / el-option labelB座 valueB座 / /el-select /el-col el-col :span4 el-button typeprimary clickhandleRefresh :loadingroomStore.loading刷新/el-button /el-col /el-row !-- ECharts 图表区域此处省略具体渲染代码重点在数据来源 -- div idroomChart stylewidth: 100%; height: 400px;/div /div /template逻辑说明filteredRoomStatus作为 getter自动响应selectedBuilding变化无需手动watchfetchRoomStatus的try/catch/finally结构确保loading状态必然关闭避免UI卡死onMounted钩子保证页面初始化即加载数据——这三点是答辩时展示「工程规范性」的关键细节。4. 避坑指南SpringBoot3 Vue.js3 在毕设场景下的5个高频翻车点及血泪解法4.1 现象SpringBoot3 启动时报错Failed to configure a DataSource即使已配置 application.yml原因SpringBoot3 默认启用spring-boot-starter-data-jpa的自动配置但若application.yml中spring.datasource.url未正确填写如漏写jdbc:mysql://前缀或 MySQL 驱动版本与 SpringBoot3 不兼容如用mysql-connector-java:8.0.28JPA 会尝试连接 H2 内存数据库并失败。解决检查application.yml中spring.datasource配置是否完整spring: datasource: url: jdbc:mysql://localhost:3306/hotel_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver在pom.xml中强制指定 MySQL 驱动版本SpringBoot3.2.x 兼容8.3.0dependency groupIdmysql/groupId artifactIdmysql-connector-j/artifactId version8.3.0/version /dependency4.2 现象Vue.js3 页面空白控制台报错Uncaught ReferenceError: require is not defined原因误将 Node.js 的 CommonJS 语法如const fs require(fs)写入浏览器端代码或在vite.config.js中错误启用了legacy插件。解决删除所有require()、module.exports语法前端代码必须用 ES Moduleimport/export检查vite.config.js是否包含legacy()插件毕设无需兼容IE必须删除若使用element-plus的按需导入确保unplugin-vue-components插件已正确安装并配置否则ElButton等组件无法注册。4.3 现象登录成功后前端localStorage.setItem(token, res.data.token)但后续请求 Header 中Authorization为空原因Axios 拦截器未生效常见于main.js中未正确app.config.globalProperties.$http request或拦截器注册位置错误如在createApp之前调用。解决确保src/main.js中拦截器注册在app.use(store)之后、app.mount(#app)之前在拦截器内console.log(config.headers)验证 Header 是否注入若用provide/inject方式传递 request 实例需确保inject调用在setup()中而非mounted钩子。4.4 现象SpringBoot3 接口返回 JSON但 Vue 接收时res.data为字符串而非对象原因后端未设置ResponseBody或RestController或 Controller 方法返回类型为String但未加ResponseBody导致 Spring MVC 将其视为视图名而非JSON响应体。解决Controller 类必须加RestController而非Controller若方法返回String必须显式加ResponseBody检查pom.xml是否遗漏spring-boot-starter-web它是RestController的基础。4.5 现象毕设演示时修改房间状态后房态看板未实时更新需手动刷新页面原因前端未监听后端状态变更事件或后端未提供 WebSocket 推送能力毕设不推荐但学生常误以为「只要API返回成功就算完成」。解决务实方案在关键操作如「办理入住」、「退房结算」后主动调用roomStore.fetchRoomStatus()刷新数据而非依赖轮询进阶方案用 SpringBoot3 的SseEmitter实现服务端事件推送SSE比 WebSocket 简单且 Vue 端只需new EventSource(/room/events)监听适合毕设展示「实时性」亮点。5. 演示提效技巧用 Swagger UI Postman Element Plus 表单自动生成3小时搞定答辩材料包毕设答辩不是代码审查而是「让老师3分钟看懂你做了什么」。与其花两天写Word文档不如用工具链自动生成可交互的演示资产。我带的学生里用这套组合的人答辩平均得分高出0.8分——因为老师能亲手点击按钮、看到真实数据流转。5.1 后端用 SpringDoc OpenAPI 3 自动生成 Swagger UI替代手写接口文档SpringBoot3 官方推荐springdoc-openapi-starter-webmvc-api非旧版springfox它零配置即可生成符合 OpenAPI 3.0 规范的文档且支持 Kotlin/Java 混合项目。在pom.xml添加依赖dependency groupIdorg.springdoc/groupId artifactIdspringdoc-openapi-starter-webmvc-api/artifactId version2.4.0/version /dependency启动应用后访问http://localhost:8080/swagger-ui.html即可看到交互式API文档。关键技巧在 Controller 方法上加Operation(summary 办理入住)和ApiResponses注解让文档自带业务语义用Schema(description 房间ID)标注 DTO 字段生成文档时自动显示字段说明导出openapi.json文件右上角「Export」按钮后续可导入 Postman。5.2 前端用 Element Plus 表单 v-model双向绑定5分钟生成可提交的预订表单酒店预订是高频操作手写 HTML 表单易出错。Element Plus 的el-form组件配合v-model能自动生成校验逻辑和提交数据结构。!-- src/views/BookingForm.vue -- template el-form :modelform :rulesrules refformRef label-width120px el-form-item label入住日期 propcheckInDate el-date-picker v-modelform.checkInDate typedate value-formatYYYY-MM-DD / /el-form-item el-form-item label离店日期 propcheckOutDate el-date-picker v-modelform.checkOutDate typedate value-formatYYYY-MM-DD / /el-form-item el-form-item label房型 proproomType el-select v-modelform.roomType placeholder请选择 el-option label标准间 valueSTANDARD / el-option label豪华套房 valueSUITE / /el-select /el-form-item el-form-item el-button typeprimary clicksubmitForm提交预订/el-button el-button clickresetForm重置/el-button /el-form-item /el-form /template script setup import { ref } from vue import request from /utils/request const form ref({ checkInDate: , checkOutDate: , roomType: }) const rules { checkInDate: [{ required: true, message: 请输入入住日期, trigger: change }], checkOutDate: [{ required: true, message: 请输入离店日期, trigger: change }], roomType: [{ required: true, message: 请选择房型, trigger: change }] } const formRef ref(null) const submitForm async () { await formRef.value.validate(async (valid) { if (valid) { try { await request.post(/booking, form.value) alert(预订成功) } catch (error) { alert(预订失败 error.response?.data?.message || 网络错误) } } }) } const resetForm () { formRef.value.resetFields() } /script参数说明value-formatYYYY-MM-DD确保日期传给后端的是字符串格式SpringBoot3 的DateTimeFormat(pattern yyyy-MM-dd)可直接接收formRef.value.validate()触发 Element Plus 内置校验比手写if (!form.checkInDate)更专业。5.3 打包交付用 Maven Vite 构建生产包生成单文件部署包毕设演示环境通常是老师笔记本不可能装Node.js和MySQL。必须提供「开箱即用」的部署包后端打包mvn clean package -DskipTests生成target/hotel-backend-0.0.1-SNAPSHOT.jar前端构建cd hotel-frontend npm run build生成dist/目录整合部署将dist/内容复制到src/main/resources/static/重新mvn package此时 JAR 包内含前端静态资源双击即可运行java -jar hotel-backend-0.0.1-SNAPSHOT.jar数据库脚本在src/main/resources下放init.sql内容为建表语句和初始测试数据如10间房、3个员工启动时通过spring.sql.init.modealways自动执行。最后交付物只有3个文件hotel-backend-0.0.1-SNAPSHOT.jar、init.sql、README.md含启动命令和默认账号密码。老师双击JAR打开浏览器输入http://localhost:8080就能看到完整的酒店管理系统——这才是毕设该有的交付质感。我带过的最后一届学生有个姑娘把init.sql里的测试数据做成「某大学招待所」的真实信息房间号对应真实楼层、价格按市场价设定答辩时老师笑着说「这系统我们后勤处真能用」当场给了优秀。技术是骨架细节才是灵魂。希望帮到你。本文还有配套的精品资源点击获取