尧图网页设计 
简介这是一份基于Spring、Spring MVC和MyBatisSSM框架的微信小程序酒店管理系统完整项目源码面向Java后端开发者、小程序学习者以及需要完成课程设计或毕业设计的学生可支撑酒店房间管理、在线预订、入住登记、客户服务、评价反馈和经营数据分析等一体化业务场景。压缩包共含1093个文件大小32.33MB文件类型覆盖前后端完整链路java、xml、properties为SSM后端服务代码js与vue构成管理后台页面wxml、wxss为小程序端页面与样式sql为数据库初始化脚本bat脚本便于一键启动png、svg、jpg等为界面图片素材目录结构清晰。该资源已有133人学习下载。借助项目源码读者能完整掌握SSM框架与微信小程序的整合方式理解从房间状态流转、预订流程到后台统计报表的具体实现同时自带数据库脚本和启动脚本可快速导入开发工具运行并在此基础上面向更多酒店业务进行二次开发适合作为课题设计或企业级入门实战参考。1. 微信小程序酒店管理系统能跑通才是课程设计的开始很多人拿到这套「微信小程序酒店管理系统ssm」源码时第一反应是被一堆.bak文件吓住main.css.bak、update-password.vue.bak、IndexAsideStatic.vue.bak旁边还躺着1-install.bat、2-run.bat、3-build.bat。这不是一个只给你看 UML 的演示工程而是一个有完整前后端链路、能真正跑起来的课程设计项目后端是 Spring Spring MVC MyBatis前端是原生微信小程序外加一个 Vue 写的酒店后台管理界面。它适合三类人准备交毕业设计或课程设计的学生、刚学完 SSM 想找一个完整项目复现的 Java 后端初学者以及想把简历写成“酒店管理系统”但担心被面试官追问实现的开发者。跑通只是第一步更值得花时间的是看懂房态与订单这些状态在哪些地方流动。2. SSM 后端的分层逻辑与房间状态表设计2.1 为什么课程设计选 SSM而不是直接上 Spring Boot这个项目用的是传统 SSM而不是 Spring Boot一开始会让人觉得“落后”。但课程设计选 SSM 有一个实际好处它把 Spring 的依赖注入、Spring MVC 的请求路由、MyBatis 的 SQL 映射都拆开了每一层都能在面试时单独被问到。比如RoomController只管接收参数和返回 JSONRoomService里写业务判断RoomMapper用 XML 管理 SQL这种分层在简历上写出来比“用 Spring Boot 自动配置”更有内容。另一个被忽略的点是SSM 项目里有.classpath和org.eclipse.wst.common.component说明它原本是在 Eclipse 里以 Dynamic Web Project 方式创建的不是标准 Maven 结构。所以拿到源码先别急着找pom.xml更要关注webapp目录下的WEB-INF配置以及lib或maven约定的依赖目录。微信小程序无法直接渲染 JSP所以后端接口统一返回 JSON前端再用wx.request拉数据。这也意味着你可以在不改动业务逻辑的情况下把接口接给别的客户端。每个接口都应该遵守“状态字段用整数、时间字段用字符串、返回体包一层 Result”这种约定后面调试会省很多事。2.2 核心表结构把房态变成字段酒店系统里最核心的概念不是订单而是“房间状态”。房间状态贯穿预定、入住、清洁三个环节。表结构设计直接决定后续 SQL 好不好写。下面是这个项目里最常见的核心表设计我在复现时也是这么建模的。表名核心字段关键状态roomroom_id,room_no,room_type_id,room_status,priceroom_status: 0 清洁中 / 1 空闲 / 2 已预订 / 3 已入住hotel_orderorder_id,order_no,user_id,room_id,check_in_date,check_out_date,order_statusorder_status: 0 待支付 / 1 已支付 / 2 已入住 / 3 已退房 / 4 已取消service_orderservice_id,order_id,service_type,service_timeservice_type: 叫醒 / 送餐 / 洗衣reviewreview_id,order_id,user_id,content,starstar1-5room_typetype_id,type_name,area,bed_type大床房 / 双床房room_status用整数不用字符串是为了小程序端switch匹配方便也方便做状态统计。比较巧妙的是hotel_order里的order_no它不光是业务编号还能在下单时做唯一约束防止同一个用户重复提交。建表时要注意时间字段的类型。check_in_date和check_out_date用DATEcreate_time用DATETIME。如果你在小程序端传的是2025-06-01这种字符串后端用DateTimeFormat就能直接解析不需要额外工具类。CREATE TABLE room ( room_id INT PRIMARY KEY AUTO_INCREMENT, room_no VARCHAR(10) NOT NULL, room_type_id INT NOT NULL COMMENT 房型ID, room_status TINYINT NOT NULL DEFAULT 1 COMMENT 0清洁中 1空闲 2已预订 3已入住, price DECIMAL(10,2) NOT NULL );这里把room_status默认值设为 1表示新录入的房间默认空闲。业务上客人退房后房间不会自动变空闲而是先被改成 0 清洁中保洁完成后改成 1。这个细节在项目里对应的是“退房”和“清洁完成”两个接口。2.3 MyBatis 查可用房不能只筛 status1很多初写者查可用房间时会直接写WHERE room_status 1这在课程设计里能跑通但经不起追问一个房间在 6 月 1 日到 6 月 3 日被订了6 月 3 日退房那 6 月 3 日晚上它应该是可订的。所以更严谨的查询必须传入入住和离店日期再用“订单区间重叠”的条件来排除冲突房间。Mapper 接口可以写成这样public interface RoomMapper { ListRoom findAvailableRooms(Param(checkIn) String checkIn, Param(checkOut) String checkOut); }对应的 XML 里既要判断房间状态是空闲也要判断没有订单区间与它冲突select idfindAvailableRooms resultTypecom.hotel.entity.Room SELECT r.room_id, r.room_no, r.room_status, r.price, rt.type_name FROM room r JOIN room_type rt ON r.room_type_id rt.room_type_id WHERE r.room_status 1 AND r.room_id NOT IN ( SELECT o.room_id FROM hotel_order o WHERE o.order_status IN (0, 1, 2) AND o.check_in_date lt; #{checkOut} AND o.check_out_date gt; #{checkIn} ) /select这段 SQL 的关键是区间重叠判断两个日期区间[a,b)与[c,d)重叠的条件是a d AND c b。放在订单上就是订单的入住日期要小于请求的离店日期订单的离店日期要大于请求的入住日期。如果日期相等的情况要支持当天退房当天入住可以用和微调但课程设计里用和就够演示了。下单时不能直接INSERT订单还要同步修改房间状态。正确做法是先在service层里查一次订单是否冲突再执行插入同时更新room_status 2UPDATE room SET room_status 2 WHERE room_id #{roomId} AND room_status 1这条 UPDATE 会返回影响行数。如果影响行数是 0说明房间已经被别人订走了Service 层应当抛出“房间已被预订”的异常。用一个 SQL 条件同时完成“占锁”和“状态更新”比先 SELECT 再 UPDATE 更安全。3. 小程序端预订流程与后台 Vue 管理页的实现3.1 小程序请求封装与开发环境配置微信小程序不能像浏览器一样直接跨域但开发阶段可以在开发者工具里跳过域名校验。做法是打开微信开发者工具点击右上角“详情”在“本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。这个选项只对当前项目有效真机预览时如果没点开调试请求会失败。接口请求建议统一封装别在每一个页面里直接写wx.request。项目里的utils/request.js通常长这样const BASE_URL http://192.168.1.100:8080/hotel_api; function request(url, method, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json }, success(res) { if (res.data.code 200) { resolve(res.data); } else { reject(res.data); } }, fail(err) { reject(err); } }); }); } module.exports { request };这里BASE_URL是局域网地址不能写localhost。因为小程序运行在微信的 WebView 里Android 模拟器上的localhost指向模拟器自己连不到你的电脑。我一般会先把电脑的局域网 IP 查出来比如ipconfig或ifconfig然后把这段地址改成http://192.168.x.x:8080/hotel_api。注意后端如果启动在 Tomcat 8.5 之后默认监听所有网卡地址所以局域网能访问如果不行去server.xml里看 Connector 的address是否被设成了127.0.0.1。3.2 房间列表渲染与日期筛选参数小程序首页通常会展示房间列表和房态。前端把用户选择好的入离店日期传给后端后端返回可预订房间。页面逻辑里我习惯在onLoad里接收参数再调用封装好的request。view classroom-card wx:for{{roomList}} wx:keyroomId view classroom-name{{item.roomNo}} · {{item.typeName}}/view view classroom-price¥{{item.price}} / 晚/view button sizemini bindtapbookRoom>const { request } require(../../utils/request); Page({ data: { roomList: [], checkIn: , checkOut: }, onLoad(options) { this.setData({ checkIn: options.checkIn, checkOut: options.checkOut }); this.loadRooms(); }, loadRooms() { const { checkIn, checkOut } this.data; request(/rooms/available?checkIn${checkIn}checkOut${checkOut}, GET) .then(res { this.setData({ roomList: res.data }); }) .catch(() { wx.showToast({ title: 查询失败, icon: none }); }); } });这里把日期放在 query string 里后端用RequestParam String checkIn接收。如果日期格式是2025-06-01Spring MVC 不需要额外转换如果前端传的是2025/06/01可以加DateTimeFormat(pattern yyyy/MM/dd)。我在这个项目里更建议前端统一replaceAll(/, -)后端就不用关心双重格式。点击“立即预订”时>import axios from axios; const service axios.create({ baseURL: http://192.168.1.100:8080/hotel_api, timeout: 5000 }); export function getRoomList(status) { return service.get(/rooms/list, { params: { status } }); }在房间管理页面里点击“空闲”“已预订”等 Tab 时就调用getRoomList(status)把room_status作为参数传给后端。SSM 里的RoomController会对应这样的写法RestController RequestMapping(/api) public class RoomController { Autowired private RoomService roomService; GetMapping(/rooms/list) public Result roomList(RequestParam(required false) Integer status) { return Result.ok(roomService.listByStatus(status)); } }后台管理页面构建完会生成dist目录我一般把它复制到 SSM 项目的webapp下由 Tomcat 统一托管。这样小程序、Web 管理后台、后端接口就在同一个域下跳过跨域问题。如果你分开放就需要在 Spring MVC 里配置 CORS 过滤器。4. 从下载源码到跑通全流程脚本、Eclipse 与微信开发者工具4.1 三个 bat 脚本的实际执行顺序压缩包里出现1-install.bat、2-run.bat、3-build.bat是发布者为了让你少敲命令准备的。它们的通用逻辑是先安装依赖再启动后端最后构建前端具体内容不同项目差别很大。我一般会先用文本编辑器打开看一眼再决定要不要执行。脚本常见作用我的使用时机1-install.bat安装 MySQL 驱动或 npm 依赖首次拿到源码初始化环境2-run.bat启动 Tomcat 或运行后端打包程序改完配置运行后端3-build.bat构建 Vue 后台生成 dist 目录修改后台页面后重新打包如果1-install.bat里写的是 npm 命令内容大约是这样cd admin npm install如果项目没有自动下载依赖不要依赖双击建议你手动在命令行执行npm install并观察有没有报错比如 node-sass 下载失败。遇到这类问题把相关依赖在package.json里换成sass或者less的兼容版本即可。2-run.bat如果是启动 Tomcat通常会先设置CATALINA_HOME再运行catalina.bat run。这个脚本很可能写死了磁盘路径比如D:\workspace\hotel-ssm。如果你把项目放在了别的目录需要先改路径否则启动时会提示找不到模块。4.2 联调前必须改的三个地址跑通这个系统的第一件事不是看代码而是把“三个地址”换成本机的小程序utils/request.js里的BASE_URL后端jdbc.properties里的数据库连接Vue 打包配置里的接口地址VUE_APP_BASE_URL数据库连接是最容易踩坑的地方因为课程设计源码里通常保留着原作者本机的账号密码。改成你自己的 MySQL 信息jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/hotel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456serverTimezoneAsia/Shanghai是必须加的参数否则新版 JDBC 驱动连 MySQL 8 会报时区错误。同时要检查 MySQL 字符集是不是utf8mb4不然小程序里输入 emoji 表情可能存不进去。改完地址后建议先在后端启动日志里确认“Resource initialized”这类关键字再用浏览器直接访问接口地址比如http://localhost:8080/hotel_api/rooms/list。如果返回 JSON说明后端没问题再切到微信开发者工具里联调。4.3 那些 .bak 文件是别人留下的修改痕迹.bak文件在 Java Web 课程设计里非常常见通常是项目作者在修改某个页面之前做的备份。比如main.css.bak是改样式前的原始 CSSupdate-password.vue.bak是没改完的修改密码组件。它们不会被 Tomcat 或小程序自动加载因为运行环境只认标准的文件后缀。我建议先别删因为在答辩或二次开发时还可以用 Beyond Compare 对比.vue和.vue.bak的差异快速看出哪些地方是原作者的修改点。若你想启用备份里的版本把.bak去掉并覆盖原文件再重新编译或构建即可。如果你要“修改刚进入的加载页面”可以单独搜索onLaunch或splash相关代码把默认的images/logo.png换成自己的酒店招牌图。这属于小程序前端视觉改造不涉及后端。4.4 启动后常见的 502、404 与乱码排查我在跑类似项目时遇到最多的问题是“接口返回 404”和“数据库乱码”。后者只要在 JDBC URL 里加了characterEncodingutf8再让 MySQL 连接参数使用utf8mb4基本能解决。前端小程序显示乱码时也要检查 HTTP 响应头里的Content-Type是否包含charsetutf-8。接口 404 常见原因有两个一是后端接口前缀与小程序请求地址不一致比如后端是/api/rooms/list小程序请求/rooms/list二是请求方法不对Controller 里写了GetMapping前端用了POST。可以用开发者工具的 Network 面板看请求状态再对照RequestMapping调整。后端跨域问题在联调时也经常出现。如果你不想把 Vue 的 build 产物放到 Tomcat 下而是在8080端口跑前端、8081跑后端那就必须在 Spring MVC 里加一个 CORS 过滤器Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(*); config.addAllowedMethod(*); config.addAllowedHeader(*); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); }这段代码放在一个Configuration类里只影响后端接口响应头不影响业务逻辑。加上之后浏览器和小程序的wx.request就不会被跨域拦截。5. 把课程设计改成可演示的酒店系统三个进阶改造方向5.1 用 SQL 条件更新防止同一房间被重复预订课程设计答辩时老师最容易问“两个客户同时订同一间房怎么办”。如果你只在 Service 层用if判断状态并发下会出问题。最简单的改造是把下单时更新房间状态改成条件更新UPDATE room SET room_status 2 WHERE room_id #{roomId} AND room_status 1如果UPDATE影响的行数等于 0说明这间房已经不是空闲状态Service 层直接抛出业务异常而不是继续插订单。这个小改动不需要引入 Redis 或分布式锁但在简历上能体现“你考虑过并发冲突”。5.2 订单号生成与前端防重复提交订单号不要用数据库自增主键因为老师会看到你的订单号是 1、2、3太不像商业系统。可以在插入订单前生成一个带日期和随机数的单号String orderNo HT new SimpleDateFormat(yyyyMMddHHmmss).format(new Date()) String.format(%04d, ThreadLocalRandom.current().nextInt(1000, 9999)); return orderNo;同时在小程序订单确认页把预订按钮设为 loading 状态第一次点击后disabled true等后端返回成功或失败再恢复。避免用户在慢网络下连续点击生成多笔重复订单。5.3 演示前准备好房态数据做课程设计演示最怕登录进去一片空白。可以在演示前通过 MySQL 脚本一次性造好数据把不同楼层的房间刷成不同状态展示时不用挨个下单UPDATE room SET room_status 1 WHERE room_no BETWEEN 601 AND 620; UPDATE room SET room_status 2 WHERE room_no IN (602, 605, 611); UPDATE room SET room_status 3 WHERE room_no IN (601, 608);执行完后小程序和后台管理页的房态板刷新一下就能看到空闲、已预订、已入住三种状态同时出现。用这种可控的数据去演示预订流程比现场手动创建订单更稳。本文还有配套的精品资源点击获取 微信小程序酒店管理系统结合SSM：从数据库设计到前后端联调全解析
简介这是一份基于Spring、Spring MVC和MyBatisSSM框架的微信小程序酒店管理系统完整项目源码面向Java后端开发者、小程序学习者以及需要完成课程设计或毕业设计的学生可支撑酒店房间管理、在线预订、入住登记、客户服务、评价反馈和经营数据分析等一体化业务场景。压缩包共含1093个文件大小32.33MB文件类型覆盖前后端完整链路java、xml、properties为SSM后端服务代码js与vue构成管理后台页面wxml、wxss为小程序端页面与样式sql为数据库初始化脚本bat脚本便于一键启动png、svg、jpg等为界面图片素材目录结构清晰。该资源已有133人学习下载。借助项目源码读者能完整掌握SSM框架与微信小程序的整合方式理解从房间状态流转、预订流程到后台统计报表的具体实现同时自带数据库脚本和启动脚本可快速导入开发工具运行并在此基础上面向更多酒店业务进行二次开发适合作为课题设计或企业级入门实战参考。1. 微信小程序酒店管理系统能跑通才是课程设计的开始很多人拿到这套「微信小程序酒店管理系统ssm」源码时第一反应是被一堆.bak文件吓住main.css.bak、update-password.vue.bak、IndexAsideStatic.vue.bak旁边还躺着1-install.bat、2-run.bat、3-build.bat。这不是一个只给你看 UML 的演示工程而是一个有完整前后端链路、能真正跑起来的课程设计项目后端是 Spring Spring MVC MyBatis前端是原生微信小程序外加一个 Vue 写的酒店后台管理界面。它适合三类人准备交毕业设计或课程设计的学生、刚学完 SSM 想找一个完整项目复现的 Java 后端初学者以及想把简历写成“酒店管理系统”但担心被面试官追问实现的开发者。跑通只是第一步更值得花时间的是看懂房态与订单这些状态在哪些地方流动。2. SSM 后端的分层逻辑与房间状态表设计2.1 为什么课程设计选 SSM而不是直接上 Spring Boot这个项目用的是传统 SSM而不是 Spring Boot一开始会让人觉得“落后”。但课程设计选 SSM 有一个实际好处它把 Spring 的依赖注入、Spring MVC 的请求路由、MyBatis 的 SQL 映射都拆开了每一层都能在面试时单独被问到。比如RoomController只管接收参数和返回 JSONRoomService里写业务判断RoomMapper用 XML 管理 SQL这种分层在简历上写出来比“用 Spring Boot 自动配置”更有内容。另一个被忽略的点是SSM 项目里有.classpath和org.eclipse.wst.common.component说明它原本是在 Eclipse 里以 Dynamic Web Project 方式创建的不是标准 Maven 结构。所以拿到源码先别急着找pom.xml更要关注webapp目录下的WEB-INF配置以及lib或maven约定的依赖目录。微信小程序无法直接渲染 JSP所以后端接口统一返回 JSON前端再用wx.request拉数据。这也意味着你可以在不改动业务逻辑的情况下把接口接给别的客户端。每个接口都应该遵守“状态字段用整数、时间字段用字符串、返回体包一层 Result”这种约定后面调试会省很多事。2.2 核心表结构把房态变成字段酒店系统里最核心的概念不是订单而是“房间状态”。房间状态贯穿预定、入住、清洁三个环节。表结构设计直接决定后续 SQL 好不好写。下面是这个项目里最常见的核心表设计我在复现时也是这么建模的。表名核心字段关键状态roomroom_id,room_no,room_type_id,room_status,priceroom_status: 0 清洁中 / 1 空闲 / 2 已预订 / 3 已入住hotel_orderorder_id,order_no,user_id,room_id,check_in_date,check_out_date,order_statusorder_status: 0 待支付 / 1 已支付 / 2 已入住 / 3 已退房 / 4 已取消service_orderservice_id,order_id,service_type,service_timeservice_type: 叫醒 / 送餐 / 洗衣reviewreview_id,order_id,user_id,content,starstar1-5room_typetype_id,type_name,area,bed_type大床房 / 双床房room_status用整数不用字符串是为了小程序端switch匹配方便也方便做状态统计。比较巧妙的是hotel_order里的order_no它不光是业务编号还能在下单时做唯一约束防止同一个用户重复提交。建表时要注意时间字段的类型。check_in_date和check_out_date用DATEcreate_time用DATETIME。如果你在小程序端传的是2025-06-01这种字符串后端用DateTimeFormat就能直接解析不需要额外工具类。CREATE TABLE room ( room_id INT PRIMARY KEY AUTO_INCREMENT, room_no VARCHAR(10) NOT NULL, room_type_id INT NOT NULL COMMENT 房型ID, room_status TINYINT NOT NULL DEFAULT 1 COMMENT 0清洁中 1空闲 2已预订 3已入住, price DECIMAL(10,2) NOT NULL );这里把room_status默认值设为 1表示新录入的房间默认空闲。业务上客人退房后房间不会自动变空闲而是先被改成 0 清洁中保洁完成后改成 1。这个细节在项目里对应的是“退房”和“清洁完成”两个接口。2.3 MyBatis 查可用房不能只筛 status1很多初写者查可用房间时会直接写WHERE room_status 1这在课程设计里能跑通但经不起追问一个房间在 6 月 1 日到 6 月 3 日被订了6 月 3 日退房那 6 月 3 日晚上它应该是可订的。所以更严谨的查询必须传入入住和离店日期再用“订单区间重叠”的条件来排除冲突房间。Mapper 接口可以写成这样public interface RoomMapper { ListRoom findAvailableRooms(Param(checkIn) String checkIn, Param(checkOut) String checkOut); }对应的 XML 里既要判断房间状态是空闲也要判断没有订单区间与它冲突select idfindAvailableRooms resultTypecom.hotel.entity.Room SELECT r.room_id, r.room_no, r.room_status, r.price, rt.type_name FROM room r JOIN room_type rt ON r.room_type_id rt.room_type_id WHERE r.room_status 1 AND r.room_id NOT IN ( SELECT o.room_id FROM hotel_order o WHERE o.order_status IN (0, 1, 2) AND o.check_in_date lt; #{checkOut} AND o.check_out_date gt; #{checkIn} ) /select这段 SQL 的关键是区间重叠判断两个日期区间[a,b)与[c,d)重叠的条件是a d AND c b。放在订单上就是订单的入住日期要小于请求的离店日期订单的离店日期要大于请求的入住日期。如果日期相等的情况要支持当天退房当天入住可以用和微调但课程设计里用和就够演示了。下单时不能直接INSERT订单还要同步修改房间状态。正确做法是先在service层里查一次订单是否冲突再执行插入同时更新room_status 2UPDATE room SET room_status 2 WHERE room_id #{roomId} AND room_status 1这条 UPDATE 会返回影响行数。如果影响行数是 0说明房间已经被别人订走了Service 层应当抛出“房间已被预订”的异常。用一个 SQL 条件同时完成“占锁”和“状态更新”比先 SELECT 再 UPDATE 更安全。3. 小程序端预订流程与后台 Vue 管理页的实现3.1 小程序请求封装与开发环境配置微信小程序不能像浏览器一样直接跨域但开发阶段可以在开发者工具里跳过域名校验。做法是打开微信开发者工具点击右上角“详情”在“本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。这个选项只对当前项目有效真机预览时如果没点开调试请求会失败。接口请求建议统一封装别在每一个页面里直接写wx.request。项目里的utils/request.js通常长这样const BASE_URL http://192.168.1.100:8080/hotel_api; function request(url, method, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json }, success(res) { if (res.data.code 200) { resolve(res.data); } else { reject(res.data); } }, fail(err) { reject(err); } }); }); } module.exports { request };这里BASE_URL是局域网地址不能写localhost。因为小程序运行在微信的 WebView 里Android 模拟器上的localhost指向模拟器自己连不到你的电脑。我一般会先把电脑的局域网 IP 查出来比如ipconfig或ifconfig然后把这段地址改成http://192.168.x.x:8080/hotel_api。注意后端如果启动在 Tomcat 8.5 之后默认监听所有网卡地址所以局域网能访问如果不行去server.xml里看 Connector 的address是否被设成了127.0.0.1。3.2 房间列表渲染与日期筛选参数小程序首页通常会展示房间列表和房态。前端把用户选择好的入离店日期传给后端后端返回可预订房间。页面逻辑里我习惯在onLoad里接收参数再调用封装好的request。view classroom-card wx:for{{roomList}} wx:keyroomId view classroom-name{{item.roomNo}} · {{item.typeName}}/view view classroom-price¥{{item.price}} / 晚/view button sizemini bindtapbookRoom>const { request } require(../../utils/request); Page({ data: { roomList: [], checkIn: , checkOut: }, onLoad(options) { this.setData({ checkIn: options.checkIn, checkOut: options.checkOut }); this.loadRooms(); }, loadRooms() { const { checkIn, checkOut } this.data; request(/rooms/available?checkIn${checkIn}checkOut${checkOut}, GET) .then(res { this.setData({ roomList: res.data }); }) .catch(() { wx.showToast({ title: 查询失败, icon: none }); }); } });这里把日期放在 query string 里后端用RequestParam String checkIn接收。如果日期格式是2025-06-01Spring MVC 不需要额外转换如果前端传的是2025/06/01可以加DateTimeFormat(pattern yyyy/MM/dd)。我在这个项目里更建议前端统一replaceAll(/, -)后端就不用关心双重格式。点击“立即预订”时>import axios from axios; const service axios.create({ baseURL: http://192.168.1.100:8080/hotel_api, timeout: 5000 }); export function getRoomList(status) { return service.get(/rooms/list, { params: { status } }); }在房间管理页面里点击“空闲”“已预订”等 Tab 时就调用getRoomList(status)把room_status作为参数传给后端。SSM 里的RoomController会对应这样的写法RestController RequestMapping(/api) public class RoomController { Autowired private RoomService roomService; GetMapping(/rooms/list) public Result roomList(RequestParam(required false) Integer status) { return Result.ok(roomService.listByStatus(status)); } }后台管理页面构建完会生成dist目录我一般把它复制到 SSM 项目的webapp下由 Tomcat 统一托管。这样小程序、Web 管理后台、后端接口就在同一个域下跳过跨域问题。如果你分开放就需要在 Spring MVC 里配置 CORS 过滤器。4. 从下载源码到跑通全流程脚本、Eclipse 与微信开发者工具4.1 三个 bat 脚本的实际执行顺序压缩包里出现1-install.bat、2-run.bat、3-build.bat是发布者为了让你少敲命令准备的。它们的通用逻辑是先安装依赖再启动后端最后构建前端具体内容不同项目差别很大。我一般会先用文本编辑器打开看一眼再决定要不要执行。脚本常见作用我的使用时机1-install.bat安装 MySQL 驱动或 npm 依赖首次拿到源码初始化环境2-run.bat启动 Tomcat 或运行后端打包程序改完配置运行后端3-build.bat构建 Vue 后台生成 dist 目录修改后台页面后重新打包如果1-install.bat里写的是 npm 命令内容大约是这样cd admin npm install如果项目没有自动下载依赖不要依赖双击建议你手动在命令行执行npm install并观察有没有报错比如 node-sass 下载失败。遇到这类问题把相关依赖在package.json里换成sass或者less的兼容版本即可。2-run.bat如果是启动 Tomcat通常会先设置CATALINA_HOME再运行catalina.bat run。这个脚本很可能写死了磁盘路径比如D:\workspace\hotel-ssm。如果你把项目放在了别的目录需要先改路径否则启动时会提示找不到模块。4.2 联调前必须改的三个地址跑通这个系统的第一件事不是看代码而是把“三个地址”换成本机的小程序utils/request.js里的BASE_URL后端jdbc.properties里的数据库连接Vue 打包配置里的接口地址VUE_APP_BASE_URL数据库连接是最容易踩坑的地方因为课程设计源码里通常保留着原作者本机的账号密码。改成你自己的 MySQL 信息jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/hotel_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456serverTimezoneAsia/Shanghai是必须加的参数否则新版 JDBC 驱动连 MySQL 8 会报时区错误。同时要检查 MySQL 字符集是不是utf8mb4不然小程序里输入 emoji 表情可能存不进去。改完地址后建议先在后端启动日志里确认“Resource initialized”这类关键字再用浏览器直接访问接口地址比如http://localhost:8080/hotel_api/rooms/list。如果返回 JSON说明后端没问题再切到微信开发者工具里联调。4.3 那些 .bak 文件是别人留下的修改痕迹.bak文件在 Java Web 课程设计里非常常见通常是项目作者在修改某个页面之前做的备份。比如main.css.bak是改样式前的原始 CSSupdate-password.vue.bak是没改完的修改密码组件。它们不会被 Tomcat 或小程序自动加载因为运行环境只认标准的文件后缀。我建议先别删因为在答辩或二次开发时还可以用 Beyond Compare 对比.vue和.vue.bak的差异快速看出哪些地方是原作者的修改点。若你想启用备份里的版本把.bak去掉并覆盖原文件再重新编译或构建即可。如果你要“修改刚进入的加载页面”可以单独搜索onLaunch或splash相关代码把默认的images/logo.png换成自己的酒店招牌图。这属于小程序前端视觉改造不涉及后端。4.4 启动后常见的 502、404 与乱码排查我在跑类似项目时遇到最多的问题是“接口返回 404”和“数据库乱码”。后者只要在 JDBC URL 里加了characterEncodingutf8再让 MySQL 连接参数使用utf8mb4基本能解决。前端小程序显示乱码时也要检查 HTTP 响应头里的Content-Type是否包含charsetutf-8。接口 404 常见原因有两个一是后端接口前缀与小程序请求地址不一致比如后端是/api/rooms/list小程序请求/rooms/list二是请求方法不对Controller 里写了GetMapping前端用了POST。可以用开发者工具的 Network 面板看请求状态再对照RequestMapping调整。后端跨域问题在联调时也经常出现。如果你不想把 Vue 的 build 产物放到 Tomcat 下而是在8080端口跑前端、8081跑后端那就必须在 Spring MVC 里加一个 CORS 过滤器Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(*); config.addAllowedMethod(*); config.addAllowedHeader(*); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); }这段代码放在一个Configuration类里只影响后端接口响应头不影响业务逻辑。加上之后浏览器和小程序的wx.request就不会被跨域拦截。5. 把课程设计改成可演示的酒店系统三个进阶改造方向5.1 用 SQL 条件更新防止同一房间被重复预订课程设计答辩时老师最容易问“两个客户同时订同一间房怎么办”。如果你只在 Service 层用if判断状态并发下会出问题。最简单的改造是把下单时更新房间状态改成条件更新UPDATE room SET room_status 2 WHERE room_id #{roomId} AND room_status 1如果UPDATE影响的行数等于 0说明这间房已经不是空闲状态Service 层直接抛出业务异常而不是继续插订单。这个小改动不需要引入 Redis 或分布式锁但在简历上能体现“你考虑过并发冲突”。5.2 订单号生成与前端防重复提交订单号不要用数据库自增主键因为老师会看到你的订单号是 1、2、3太不像商业系统。可以在插入订单前生成一个带日期和随机数的单号String orderNo HT new SimpleDateFormat(yyyyMMddHHmmss).format(new Date()) String.format(%04d, ThreadLocalRandom.current().nextInt(1000, 9999)); return orderNo;同时在小程序订单确认页把预订按钮设为 loading 状态第一次点击后disabled true等后端返回成功或失败再恢复。避免用户在慢网络下连续点击生成多笔重复订单。5.3 演示前准备好房态数据做课程设计演示最怕登录进去一片空白。可以在演示前通过 MySQL 脚本一次性造好数据把不同楼层的房间刷成不同状态展示时不用挨个下单UPDATE room SET room_status 1 WHERE room_no BETWEEN 601 AND 620; UPDATE room SET room_status 2 WHERE room_no IN (602, 605, 611); UPDATE room SET room_status 3 WHERE room_no IN (601, 608);执行完后小程序和后台管理页的房态板刷新一下就能看到空闲、已预订、已入住三种状态同时出现。用这种可控的数据去演示预订流程比现场手动创建订单更稳。本文还有配套的精品资源点击获取