SpringBoot+Vue+MySQL酒店客房管理系统开发实战指南-北京尧图网络

最近在整理一套酒店客房管理信息系统的源码后端是SpringBoot前端是Vue数据库用的是MySQL整套系统被打包成“可直接运行”的状态。这种组合在中小型管理系统里非常常见尤其适合毕设、个人项目练手、或者快速给传统酒店做内部信息化改造。它解决的核心问题很直接把客房预订、入住登记、退房结算、房态管理、订单查询这些日常动作从Excel和纸质台账里解放出来用一套Web界面统一操作。这套系统适合谁两类人最值得看。一类是刚学完Java和Vue、想做完整项目却不知道从哪入手的开发者另一类是酒店或民宿经营者想自己搭一套轻量级的内部管理后台又不想花大价钱买商业SaaS系统。当然拿来当课程设计底子、在其上加自己的业务逻辑也完全没有问题。先说一句不太客气的话所谓“可直接运行”不是双击一个exe就能完事而是把环境依赖、数据库脚本、初始账号、配置项这些最容易卡人的东西都替你准备好了。你只需要把JDK、MySQL、Node这些基础环境装好按顺序执行几条命令系统就能在浏览器里跑起来。整个过程我会放在后面一步步拆。1. 项目整体设计与技术栈选型1.1 为什么是SpringBoot Vue MySQL这套组合选型不是越炫越好而是要考虑维护成本、招聘难易、社区资料丰富度。SpringBoot是目前Java后端里最“省心”的框架内嵌Tomcat不用单独部署容器写几个注解就能暴露一套REST接口配合Maven管理依赖非常顺。Vue则胜在渐进式你可以只把它当jQuery用的替代品也可以把它做成完整的前后端分离工程配合Element UI这类组件库后台管理页面的表格、弹窗、表单很快就能搭起来。MySQL更不用多说开源、免费、资料多中小型酒店的并发量对它来说完全不是压力。这套组合的另一个好处是“边界清晰”前端只负责页面和交互后端只提供数据和校验逻辑中间通过JSON格式的接口通信。前端团队和后端团队可以并行开发甚至一个人分两个阶段写也不会乱。很多培训机构和高校课程都用类似架构意味着你遇到任何报错搜一下都能找到解决方案不用在冷门技术上死磕。1.2 工程结构怎么划分才不乱我在实际跑这套源码时第一件事就是看目录。后端主包下面一般会分成这几个关键层controller接收前端请求做参数校验返回统一Result对象。service写业务逻辑比如下单、支付、入住登记、退房结算。mapper操作MySQL通常搭配MyBatis或MyBatis-Plus。entity或domain对应数据库表的实体类。config放跨域配置、拦截器、自定义异常处理等。common放Result包装类、常量、工具类。前端同样要分层views页面组件比如登录页、房间管理页、订单管理页。components公共组件比如批量操作弹窗、上传组件。router路由表控制页面跳转和权限。store全局状态常用Vuex或Pinia管理用户信息。api封装所有后端接口调用按模块拆分文件。把结构按职责切开后续加功能会很轻松。比如我后来想加一个“维修记录”表只要在数据库加一张表后端加一套Controller和Service前端在房间管理页面加一个Tab和对应的API文件半小时就能搞定。1.3 “可直接运行”版本到底做了什么优化标题里特意标了“可直接运行”这背后有一些常见操作我可以直接说明。首先是数据库初始化脚本已经写好里面包含建表语句和初始数据比如管理员账号、几个演示用的房间和房型你不用从空库开始其次是配置文件里的数据库地址、端口、文件上传路径基本是本地常用值只需要改用户名密码再次是前端已经配置好代理解决开发环境下跨域问题后端启动后可以直接访问最后是依赖版本都锁定在稳定组合上不会出现今天装了一个新版依赖明天启动直接报ClassNotFound的尴尬。不过要提醒一点哪怕它能直接运行也一定先在本地跑通再考虑改动。我见过太多人一上来就改代码结果分不清是环境问题还是自己改坏的问题。2. 数据库设计酒店预订系统的地基2.1 核心表结构设计这套系统的核心表大概有这几张我按实际开发顺序说。第一张是用户表存放管理员、前台操作员和普通客户。字段一般有id、用户名、密码、姓名、手机号、角色、创建时间。密码不要明文存至少要加个MD5或BCrypt加密。角色字段建议用数字区分1表示管理员2表示前台3表示客户这样在拦截器里判断权限时比较方便。第二张是房型表比如大床房、双床房、套房、钟点房。字段包括房型名称、挂牌价、门市价、面积、床位数量、可住人数、设施介绍。房型表独立出来是因为同一房间在不同日期可能价格不一样而且房型和房间是1对多关系一栋楼的10间大床房可以共用同一个房型定义。第三张是房间表这张表是房态管理的关键。字段包括房间编号、所属楼层、房型id、房间状态、备注。房间编号一定要加唯一索引否则前台录错一个重复房号整个系统都会混乱。第四张是订单表这张表最核心。大致字段有订单号、用户id、房间id、入住日期、离店日期、预订价格、订单状态、创建时间、支付时间、操作人。订单号和房间id建议都加索引因为系统里最高频的操作就是按订单号查询或者查某个房间的入住记录。简单给出房间表的建表脚本作参考CREATE TABLE room ( id int(11) NOT NULL AUTO_INCREMENT, room_no varchar(20) NOT NULL COMMENT 房间编号, floor int(11) DEFAULT NULL COMMENT 所在楼层, type_id int(11) DEFAULT NULL COMMENT 房型ID, status tinyint(4) DEFAULT 0 COMMENT 0空闲 1已入住 2打扫中 3维修, remark varchar(255) DEFAULT NULL COMMENT 备注, PRIMARY KEY (id), UNIQUE KEY uk_room_no (room_no), KEY idx_type_id (type_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT房间表;2.2 房态与订单状态如何联动这里是最容易踩坑的地方。酒店系统里“房态”和“订单状态”是两套状态但必须联动。房态有空闲、入住中、打扫中、维修、预留订单状态有待确认、已确认、已入住、已完成、已取消、已退款。如果代码里不联动就会出现“房间已经订出去了房态还显示空闲”的笑话。我的建议是创建订单时如果订单确认立刻把对应房间状态更新为“预留”或“入住中”并在事务里一起提交。退房时订单状态变为“已完成”同时房间状态变为“打扫中”。打扫完毕前台手动把房间状态改回“空闲”。维修则由管理员在后台直接设置。关于并发问题比如两个人同时抢订同一间房如果只靠前台页面判断“状态为空闲”再去下单极端情况下会重复下单。解决办法有两种一是用数据库的乐观锁在room表增加version字段更新时带上旧版本号更新行数影响0则说明别人先改了二是更简单在事务里对房间行加锁SELECT FOR UPDATE把房间状态置为占用再插入订单。对于小型系统第二招足够用代码也直观。2.3 初始数据与演示账号的讲究“可直接运行”版本一定要把初始数据准备好不然别人打开系统还得自己注册账号。演示账号我建议保留两个一个管理员一个普通用户。管理员拥有所有权限普通用户只能查房间、下订单、看自己的订单。密码必须在SQL脚本里写好密文并在说明文档里标注明文。如果用的是MD5可以在初始化SQL里直接插入MD5字符串登录时把用户输入的密码加密后再比对。另外初始房间数据可以造10到20个分布在1到5楼包括两三种房型。房间状态要有意造几个不同状态的比如一间维修、一间打扫中、其余空闲这样前端界面能直观看到状态效果演示时也不至于点进去全是同一状态。3. 后端SpringBoot接口与权限的一次落地3.1 权限认证方案怎么选市面上常见的有单点登录、JWT、SpringSecurity、Shiro但其实对于酒店管理系统用JWT配合拦截器已经足够了。JWT的原理简单说就是用户登录成功后后端签发一个带过期时间的token前端后面每次请求都带上这个token后端拦截器解析token就知道用户是谁、能做什么。在实际源码里我推荐这样设计LoginController接收用户名和密码校验通过后生成token返回。自定义拦截器统一处理请求头中的token并把用户信息放入ThreadLocal或Request attribute中。在WebConfig里注册拦截器并配置放行路径比如/login、静态资源、Swagger文档等。对于需要管理员权限的操作可以在接口上做一个自定义注解比如RequireAdmin拦截器里判断角色不通过则返回403。用JWT的一个好处是后端无状态重启服务之后用户不用重新登录尤其适合以后要水平扩展的场景。坏处是token一旦泄露只能等过期所以保存token时前端要谨慎不建议直接放在localStorage更安全的做法是放内存配合refresh token机制但对于学习项目放在localStorage里方便观察。3.2 客房查询与下单接口的核心逻辑查房接口是系统最基础的功能前端房态图其实就是在循环调用它。后端接口一般接受几个参数入住时间、离店时间、房型id、楼层、页码、页大小。查询时要注意日期条件不能只查当前空闲的房间还要排除“已经在订单中且时间范围重叠”的房间。这里可以写类似NOT EXISTS的子查询SELECT r.* FROM room r WHERE r.status 0 AND NOT EXISTS ( SELECT 1 FROM order o WHERE o.room_id r.id AND o.status IN (1,2) AND o.check_in_date #{checkOut} AND o.check_out_date #{checkIn} )这段SQL的核心就是判断两个日期范围是否存在重叠。条件我习惯写已入住时间段新订单离店时间 AND 已入住离店时间新订单入住时间查不到就表示时间上不冲突。创建订单时要注意几件事生成唯一订单号我一般用时间戳加随机数。计算总价考虑连住天数和是否有折扣。校验房间状态。使用Transactional保证订单插入失败时能回滚房间状态。示意代码PostMapping(/order/create) Transactional(rollbackFor Exception.class) public Result createOrder(RequestBody OrderCreateDTO dto) { Room room roomMapper.selectById(dto.getRoomId()); if (room null || room.getStatus() ! 0) { return Result.error(该房间当前不可预订); } // 先把房间状态置为已预订避免被其他人抢 room.setStatus(1); roomMapper.updateById(room); Order order new Order(); order.setOrderNo(generateOrderNo()); order.setUserId(dto.getUserId()); order.setRoomId(room.getId()); // 计算天数、金额 int days calculateDays(dto.getCheckInDate(), dto.getCheckOutDate()); BigDecimal total roomTypeMapper.selectById(room.getTypeId()).getPrice() .multiply(BigDecimal.valueOf(days)); order.setTotalPrice(total); order.setStatus(1); orderMapper.insert(order); return Result.ok(order); }3.3 统一返回值与异常处理好的后端接口风格必须统一。源码里一般会有下面这样的Result类public class Result { private Integer code; private String msg; private Object data; public static Result ok(Object data) { ... } public static Result error(String msg) { ... } }所有Controller方法的返回值都包装成Result前端解析时只看code即可。正常返回200参数错误400未登录401无权限403服务异常500。这样做的好处是前端处理逻辑非常简单拦截器里判断一下code就能统一弹提示而不是每个接口都写一遍try catch。异常处理上可以用RestControllerAdvice做全局异常捕获把业务异常和系统异常分开。业务异常指的是“房间已被订了”“密码不正确”这种可预知的错误应该直接返回错误信息系统异常是空指针、数据库连接失败这部分记录日志并返回通用的“服务开小差”不要暴露堆栈信息给前端。3.4 容易被忽略的后端细节我跑这套源码时最头疼的是两个小坑。第一个是MySQL连接时区如果application.yml里jdbc:mysql://localhost:3306/hotel_db后面不加上serverTimezoneAsia/Shanghai会报时区错误或者时间相差8小时。第二个是MyBatis-Plus的驼峰映射需要确保数据库字段是下划线风格实体类字段是驼峰风格并且开启map-underscore-to-camel-case配置。还有一点千万别把文件上传目录配置在src/main/resources下。项目重新打包时会清掉里面的文件正确做法是配一个外部目录比如/home/hotel/upload/本地调试时用${user.dir}/upload这样重启不丢图。4. 前端Vue页面交互与接口对接4.1 前端项目基础结构这套系统的前端我打开一看就是标准的Vue Cli脚手架项目没有搞太多花活。src目录下面主要分成api、views、components、router、store、utils。main.js里注册Element UI和路由。这种结构很清晰新人也容易看懂。Vue版本建议使用Vue2加Element UI还是直接上Vue3加Element Plus其实都可以。但考虑到“可直接运行”要照顾多数人的环境Vue2现在仍然很稳兼容性也好。如果你自己新建项目我建议直接Vue3加Vite加Element Plus构建速度快很多。不过源码如果已经用了Vue2就不要再纠结升级能跑起来最重要。前端页面一般包括登录页账号密码输入成功后保存token并跳转首页。首页概览显示今日入住率、在住人数、待打扫房间数、今日订单量。房间管理房态图、房型列表、房间编辑弹窗。入住登记根据订单或散客创建入住记录选择房间、填写住客信息。订单管理订单列表、入住办理、退房结算、订单详情。用户管理管理员维护前台账号。4.2 房态图的设计与实现房态图是酒店管理系统里最有辨识度的功能。前端拿到后端返回的房间列表后按楼层分组把房间渲染成一张张卡片。卡片的背景色根据状态变化空闲绿色、入住中红色、打扫中黄色、维修灰色。点击卡片弹出操作菜单比如空闲房间点“登记入住”入住房间点“退房结账”维修房间点“恢复空闲”等。我用过的实现思路是房间卡片用一个RoomCard组件接收room对象根据status计算class名。操作菜单用一个el-popover包着卡片点开后再显示按钮。房间的筛选条件放在页面顶部包括楼层、房型、状态每次查询分支后重新拉取列表。4.3 Axios封装与路由守卫前端和后端联调最核心的是API封装。建议在utils/request.js里创建axios实例import axios from axios import { Message } from element-ui const request axios.create({ baseURL: process.env.VUE_APP_BASE_URL || /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } Message.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request路由守卫则负责让未登录的人无法访问后台页面router.beforeEach((to, from, next) { if (to.path ! /login !localStorage.getItem(token)) { next(/login) } else { next() } })这样只要后端返回401前端就自动踢回登录页。页面里任何接口请求也都不需要重复判断token了。4.4 代理配置与构建发布开发环境下前端页面默认跑在8080端口后端跑在8081端口如果不做代理浏览器会直接拒绝跨域请求。最简单的解决方案是在vue.config.js里配置devServer代理module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }这样前端请求/api/room/list会被转发到http://localhost:8081/room/list浏览器看到的却是同源请求。构建上线时前端执行npm run build生成的dist目录可以丢进Nginx再配置反向代理到后端即可。5. 直接把项目跑起来的完整流程5.1 环境准备清单动手之前先把这些装好。JDK版本1.8或11都可以如果后端用了较高版本的SpringBootJDK11更稳。Maven建议3.6以上Node建议14或16MySQL建议5.7及以上开发工具用IntelliJ IDEA或者VSCode都行。一个省事的小技巧把Maven镜像换成国内源不然下载依赖等十分钟很常见。修改settings.xml里的mirror即可很多人卡在启动第一步不是代码问题而是依赖没拉下来。5.2 后端启动步骤第一步创建数据库。打开MySQL客户端执行CREATE DATABASE IF NOT EXISTS hotel_db DEFAULT CHARSET utf8mb4; USE hotel_db; source /你的路径/hotel.sql;第二步用IDEA打开后端工程等Maven把依赖下载完。打开application.yml这里主要是改成你自己的数据库账号密码server: port: 8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hotel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456第三步启动HotelApplication.java主类。看到类似Started HotelApplication in 3.5 seconds的日志就说明后端起来了。这时候可以打开浏览器访问http://localhost:8081/room/list看一下接口是否正常返回JSON。5.3 前端启动步骤前端用命令行打开更直接。进入前端工程目录依次执行npm install npm run servenpm install如果太慢可以先执行npm config set registry https://registry.npmmirror.com再安装。启动成功后终端会输出一个地址一般是http://localhost:8080浏览器打开就能看到登录页。初始账号在SQL里已经准备好了通常是admin/123456这种具体看初始化脚本。5.4 端口冲突怎么办最尴尬的情况是前端和后端都默认用了8080结果一个起不来。解决办法很简单改后端端口比如改成8081或者改前端devServer端口比如改成3000。我建议以后端保持8081、前端8080为基准因为很多配置文件都是按照这个逻辑预设的你只要在vue.config.js里确认代理target指向8081即可。如果本地8080被钉钉、微信这类软件占用也可以把devServer的port改成8090其他不用动。5.5 生产环境部署提一句本地跑通后如果真要放在服务器上给酒店用不要用spring-boot:run更不要用IDEA里运行。正确做法是后端打包成jar包mvn clean package -DskipTests java -jar hotel-admin.jar hotel.log 21 前端打包成静态文件后交给Nginx托管。这样后端是常驻Java进程前端是纯静态文件就算服务器重启也能用脚本自动拉起。6. 常见问题排查与避坑心得6.1 数据库连接失败的常见原因启动时最扎眼的报错是Access denied for user rootlocalhost或者Unknown database hotel_db。前者几乎都是账号密码错误或权限问题检查application.yml里的用户名密码后者是没执行建库脚本。还有一种是Public Key Retrieval is not allowed这个需要在JDBC URL后面加上allowPublicKeyRetrievaltrue。时区问题也很经典报错信息里带着Server time zone value的时候基本没跑在URL后面加上serverTimezoneAsia/Shanghai就行。6.2 前端跨域问题前端请求接口浏览器报No Access-Control-Allow-Origin header is present on the requested resource大概率就是代理没生效。先检查前端调用的URL是不是以/api开头然后看vue.config.js里的proxy配置是否在根目录改完要重启npm run serve。如果你不想用代理也可以在后端写一个Cors过滤器允许对应前端域名跨域但对于开发环境还是代理最简单。6.3 npm install卡死和node-sass崩溃Node版本太新或太旧都可能导致node-sass编译失败报错信息里通常有Module build failed。解决办法是别费劲去搞python环境直接看package.json里的node-sass版本切换成兼容的Node版本。我现在比较推荐的做法是装完依赖后如果node_modules出问题干脆删除node_modules和package-lock.json切换Node版本后重新install。npm install卡住时先看看是不是网络问题。我一般用--registry参数指定国内源速度快很多。还可以设置npm config set prefer-offline true。6.4 启动后页面白屏或列表加载不出页面白屏一般是前端路由问题或JS编译错误。先按F12打开控制台看红色报错。如果是Cannot read property $message of undefined通常是没有正确注册Element UI。列表加载不出按下F12切到Network找到对应接口看状态码和返回数据。如果返回500去后端日志里看具体异常。后端日志里最常见的麻烦是MyBatis-Plus查询条件没拼对导致SQL出现WHERE (name LIKE ?)一直查不到。调试时可以打开SQL日志打印实际执行的SQL再回怼到数据库里跑一遍能快速定位是语法问题还是数据问题。6.5 其他容易被忽略的隐藏坑前端登录成功后跳转路由但刷新页面又回到登录页多半是store里的用户信息没有持久化。解决方案是登录成功后把用户信息也存一份到localStorage。日期时间差8小时不一定是时区问题还可能前端传入的日期是字符串后端没有正确转换。建议统一用yyyy-MM-dd HH:mm:ss格式后端用DateTimeFormat指定。删除房间时提示外键约束失败是因为有历史订单还在引用房间不能直接物理删逻辑上应该把房间状态改成维修下架而不是删除房间数据。文件上传后图片在浏览器打不开可能是上传目录没有对外映射。开发环境可以加一个静态资源映射配置生产环境交给Nginx的location /upload。结尾这套系统我完整跑了一遍最感慨的是它踩准了“中小型酒店管理系统”的核心需求没有过度设计。对于想学全栈的人来说它是一个很好的脚手架后端能看权限控制、事务处理、数据库设计前端能看组件封装、路由守卫、接口对接每一块都不算特别难但合在一起就是完整业务闭环。我在实际跑项目时还有几个小习惯可以分享拿到任何源码第一步不是急着启动而是先看数据库脚本和README搞明白表结构和初始账号第二步把后端跑起来先用浏览器验证几个接口第三步再启前端用界面去串联整个流程。这样如果中途出问题你能快速定位是哪一层的问题而不是一团乱麻。后续扩展可以做的方向还挺多比如引入Redis做Token刷新和房态缓存引入Docker Compose一键启动整套环境或者对接微信支付做线上预订。这套系统的底子留好了加业务功能不会太痛苦。总之这是我个人跑下来的真实感受如果你也打算基于这套SpringBootVueMySQL的酒店客房管理系统入手先把环境跑通再按自己的业务去改应该是近期投入产出比最高的一个学习路径。

SpringBoot+Vue+MySQL酒店客房管理系统开发实战指南

相关推荐

FFmpeg VS2015 静态库编译指南：x86/x64 双平台 .lib 集成与避坑

颈椎CT三平面分割：解剖先验驱动的2D切片数据工程化实践

NSSM 2.24实战：Python脚本Windows服务化与自动重启日志管理

更多资讯

Agent应用开发实战：从核心架构到多Agent协作的完整学习路径

IPS入侵防护系统原理与企业部署实战指南

d2rq-0.8.1快速构建RDF语义层实战指南

本地模型、智能路由与RTX Spark：端侧AI从能跑到好用的工程落地

基于SpringBoot的蛋糕烘焙销售系统设计与实现指南

Kafka消费者组核心原理：subscribe与assign的本质区别

今日更新

声子晶体仿真：三角晶格与六角晶格的能带计算实战

度假村安保定岗定编：岗位梳理、编制测算与排班设计

COMSOL等离子体模块实战：氩气双层DBD仿真建模全解析

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？