简介：本资源是一套完整的微信小程序+Java后端琴房预约管理毕业设计项目，面向计算机专业本科生及Java全栈初学者，解决高校或培训机构琴房资源线上化预约、分角色协同管理的典型业务场景。压缩包共1098个文件，涵盖120个Vue前端页面、96个Java后端类、96个编译后class文件、243张PNG界面截图与图标、115个JS交互逻辑、48个JPG宣传图、3个SQL建表与初始化脚本，以及bat一键部署脚本、yml配置、mp4演示视频等，完整呈现前后端分离开发结构，总大小18.76MB。已有175人学习下载，适合课程设计、毕设选题与Java+小程序技术栈实战复现。用户可直接运行源码查看学生端首页、琴房信息浏览、在线预约、留言互动，以及管理员端的琴房类型管理、预约审核、公告轮播与留言审核等全部功能，配套说明文档与演示视频大幅降低理解与调试门槛。

1. 这不是又一个“学生管理系统”：微信小程序+Java后端的琴房预约系统，真能跑通「学生扫码预约→后台实时调度→状态同步刷新」闭环

去年带毕设时，三个学生交上来同款「图书管理系统」，我当场删掉两个——不是功能不行，是业务太假：谁会用Web页面查《高等数学》在几楼几架？但琴房不一样。音乐学院每天上百人抢20间琴房，学生蹲在门口等空位、老师手动记本子排班、管理员凌晨三点改Excel表……这个基于微信小程序+Java后端的琴房管理系统，恰恰卡在真实痛点上：它不只做CRUD，而是把「预约冲突检测」「时段自动释放」「状态秒级同步」全链路压进一套可运行的源码里。项目含完整MySQL数据库（含初始化数据）、Spring Boot后端（JDK8+SpringBoot2.3.12）、Vue.js管理前端、微信小程序原生代码（非uniapp），还附带演示视频——不是录屏剪辑，是真实手机扫码进入、选琴房、填时段、提交、后台审核、学生收到推送的全流程实拍。适合计算机/软件工程专业做毕业设计或课程设计的同学直接复现，也适合想补全「小程序+Java」全栈能力的初级开发者拆解学习。别被“毕业设计”四个字劝退——它的接口设计、事务控制、小程序登录态管理，比很多企业外包项目更扎实。

2. 从解压到跑通：四步启动这套琴房系统，关键在环境对齐与配置文件缝合

这套资源不是点开即用的黑匣子，它由四个物理层组成：微信小程序前端（miniprogram/目录）、Java后端（server/目录）、MySQL数据库（db/目录下的.sql文件）、配套文档（doc/目录）。启动前必须确认三件事：JDK版本锁死为8（Spring Boot 2.3.x不兼容JDK11+）、MySQL字符集强制设为utf8mb4（否则留言emoji存不进去）、微信开发者工具必须用稳定版（v1.05.2303020，新版对wx.request拦截逻辑有变更）。下面按真实操作顺序拆解：

2.1 数据库初始化：执行SQL脚本前先改字符集，否则中文全变问号

提示：不要直接双击.sql文件用Navicat导入！必须用命令行执行，确保字符集生效。

# 登录MySQL（假设root密码为空） mysql -u root -p # 创建数据库并指定字符集（关键！） CREATE DATABASE `qinfang_db` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 退出后执行SQL脚本（路径替换成你解压后的实际路径） mysql -u root -p qinfang_db < /path/to/your/unzip/db/qinfang_system.sql

这段命令的核心在于CHARACTER SET utf8mb4——琴房名称常含「🎹」「♯」符号，普通utf8不支持4字节Unicode；而qinfang_system.sql里建表语句本身没声明字符集，全靠建库时兜底。如果跳过这步，你会看到后台管理页的「钢琴培训企业琴房名称」显示为????，且无法通过WHERE条件查询。

2.2 Java后端配置：application.yml里藏着三个必改参数

解压后的server/src/main/resources/application.yml是启动成败的关键。它默认配置了本地MySQL连接，但实际部署时需改三处：

改完后用Maven打包：

cd server mvn clean package -Dmaven.test.skip=true java -jar target/qinfang-server-1.0.jar

成功启动会输出Tomcat started on port(s): 8080，此时访问http://localhost:8080/api/test返回{"code":200,"msg":"test success"}即通。

2.3 微信小程序前端：开发者工具里必须填对request域名和AppID

打开微信开发者工具，选择「小程序」→「导入项目」，根目录指向解压包里的miniprogram/。但此时编译会报错：request:fail url not in domain list。这是因为小程序要求所有网络请求域名必须在「微信公众平台-开发管理-服务器域名」中备案。而本项目调用的是本地Java后端，解决方案是：

1. 在开发者工具右上角「详情」→「本地开发设置」→勾选「不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书」；
2. 打开miniprogram/app.js，找到config.apiBase字段，改为你的Java后端地址：

   // 原始代码（错误） apiBase: 'https://api.example.com' // 改为（关键！） apiBase: 'http://localhost:8080'

3. 小程序登录态依赖wx.login()获取code，后端用该code向微信服务器换session_key。项目已内置appid和appsecret（在Java后端application.yml的wechat.appid和wechat.secret），但你必须用自己的测试号替换，否则登录永远返回{"code":500,"msg":"invalid appid"}。

2.4 管理后台Vue页面：用Chrome直接打开index.html会跨域，必须走Node服务

admin/目录下是管理员后台，但直接双击index.html会因Ajax跨域失败。正确做法是：

cd admin npm install npm run serve

此时访问http://localhost:8081即可。注意：Vue项目里vue.config.js已配置代理：

devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 指向Java后端 changeOrigin: true, pathRewrite: { '^/api': '' } } } }

这意味着所有以/api开头的请求（如/api/admin/login）会被自动转发到http://localhost:8080，规避跨域。

3. 功能模块拆解：学生预约流程背后的四个技术硬核点

这套系统表面是「学生选琴房」，实则暗藏四个值得深挖的技术点：登录态穿透、预约冲突检测、状态实时同步、多角色权限隔离。它们不是教科书概念，而是写在源码里的具体实现。

3.1 小程序登录态如何穿透到Java后端：code2Session + JWT双保险

学生点击「微信登录」时，小程序调用wx.login()获取临时code，传给后端/api/user/wxLogin接口。Java后端做的不是简单存session，而是三步：

1. 微信服务器换凭证：用code+appid+appsecret向https://api.weixin.qq.com/sns/jscode2session请求，得到openid和session_key；
2. 生成JWT令牌：用openid作为payload，HMAC-SHA256签名生成token（密钥在application.yml的jwt.secret）；
3. 返回token并存入Redis：同时将token: openid存入Redis，过期时间设为2小时（jwt.expiration）。

关键代码在UserController.java的wxLogin方法：

// 1. 调用微信接口换session_key String wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code"; // ... HTTP请求解析JSON，获取openid // 2. 生成JWT String token = Jwts.builder() .setSubject(openid) // 主体设为openid .setExpiration(new Date(System.currentTimeMillis() + expiration * 1000)) .signWith(SignatureAlgorithm.HS256, jwtSecret.getBytes()) .compact(); // 3. 存Redis（key为token，value为openid） redisTemplate.opsForValue().set(token, openid, expiration, TimeUnit.SECONDS);

这样设计的好处是：小程序后续所有请求带上Authorization: Bearer <token>，后端用JWT解析出openid，再查数据库获取用户信息——完全无状态，横向扩展友好。

3.2 预约冲突检测：不是简单查「该时段是否有记录」，而是用MySQL行锁防超订

学生选「3月15日14:00-15:00」的琴房A，系统要确保同一时段同一琴房不能被重复预约。常见错误做法是：

-- ❌ 危险！存在并发漏洞 SELECT COUNT(*) FROM reservation WHERE room_id = ? AND start_time = ? AND end_time = ? -- 如果COUNT=0就INSERT，但两个请求同时查到0，都会INSERT成功

本项目用的是SELECT FOR UPDATE + 事务：

@Transactional public boolean createReservation(Reservation reservation) { // 先锁定该琴房在该时段的记录（即使不存在也会锁住间隙） int lockedCount = reservationMapper.lockByRoomAndTime( reservation.getRoomId(), reservation.getStartTime(), reservation.getEndTime() ); if (lockedCount > 0) { return false; // 已有预约，返回失败 } // 此时其他事务无法修改该间隙，安全INSERT return reservationMapper.insert(reservation) > 0; }

对应的Mapper XML：

<select id="lockByRoomAndTime" resultType="int"> SELECT COUNT(*) FROM reservation WHERE room_id = #{roomId} AND start_time &lt; #{endTime} AND end_time &gt; #{startTime} FOR UPDATE </select>

这里start_time < endTime AND end_time > startTime是标准的「时间重叠判断」，FOR UPDATE让MySQL对满足条件的行加写锁，后续请求必须等待锁释放——这才是工业级预约系统的底线。

3.3 状态实时同步：小程序不用轮询，靠WebSocket推消息

学生提交预约后，管理员在后台审核通过，学生手机要立刻收到通知。项目没用低效的定时轮询，而是集成Spring Boot WebSocket：

1. 小程序端建立WebSocket连接：

   const socket = wx.connectSocket({ url: 'ws://localhost:8080/ws/' + openid // openid作为连接标识 });

2. Java后端用@MessageMapping接收消息，@SendToUser精准推送给指定openid：

   @MessageMapping("/approve") @SendToUser(value = "/queue/approval", broker = "user") public ResponseMessage approve(@Payload ApprovalDto dto) { // 审核逻辑... return new ResponseMessage("预约已通过", "APPROVED"); }

3. 小程序监听onMessage事件：

   socket.onMessage((res) => { const data = JSON.parse(res.data); if (data.type === 'APPROVED') { wx.showToast({title: '预约成功！'}); } });

3.4 多角色权限隔离：不是if-else硬编码，而是RBAC模型落地

学生和管理员权限差异极大，但后端没写if(role.equals("admin")){...}这种屎山。它实现了精简版RBAC：

• 数据库三张表：sys_user（用户）、sys_role（角色）、sys_user_role（关联）；
• @PreAuthorize("hasRole('ADMIN')")注解控制接口访问；
• 管理员登录后，SecurityContext中存入GrantedAuthority列表，/api/admin/**路径自动拦截非ADMIN用户。

验证方式：用学生账号（如student1/password）访问http://localhost:8081/#/admin/room，页面直接403 Forbidden——权限控制已生效。

4. 避坑指南：这五个血泪经验，让我重装三次MySQL才搞懂

这套资源交付质量不错，但新手照着README跑，90%会卡在以下环节。我把踩过的坑按「现象→原因→解决」列清楚，省得你浪费半天时间：

4.1 现象：小程序登录后首页空白，控制台报Cannot read property 'nickName' of undefined

原因：app.js里getUserInfo回调未处理用户拒绝授权的情况。微信基础库2.23.0+默认不弹授权框，需主动调用wx.getUserProfile。
解决：

1. 修改pages/index/index.js的onLoad方法，将wx.getUserInfo替换为：

   wx.getUserProfile({ desc: '用于完善会员资料', success: (res) => { this.setData({ userInfo: res.userInfo }); }, fail: () => { // 用户拒绝授权，仍允许进入首页（仅隐藏昵称） this.setData({ userInfo: { nickName: '游客' } }); } });

4.2 现象：Java后端启动报错java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter

原因：JDK8自带JAXB，但某些精简版JDK（如Amazon Corretto）移除了它。
解决：在server/pom.xml中添加依赖：

<dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.1</version> </dependency>

4.3 现象：管理员后台上传琴房图片失败，返回500 Internal Server Error

原因：qinfang.upload.path路径不存在，且Java代码未创建父目录。
解决：

1. 确保application.yml中qinfang.upload.path指向的目录已手动创建；
2. 或修改FileUploadService.java，在saveFile方法开头加：

   File uploadDir = new File(uploadPath); if (!uploadDir.exists()) { uploadDir.mkdirs(); // 自动创建多级目录 }

4.4 现象：MySQL导入SQL时报错ERROR 1071 (42000): Specified key was too long

原因：qinfang_system.sql中user_info表的nickname字段类型为varchar(255)，但InnoDB默认索引长度限制767字节，utf8mb4下255字符占1020字节。
解决：

1. 启动MySQL时加参数--innodb_large_prefix=ON；
2. 或修改SQL文件，将nickname字段改为varchar(191)（191×4=764<767）；
3. 更彻底：执行SET GLOBAL innodb_file_format=BARRACUDA; SET GLOBAL innodb_file_per_table=ON;。

4.5 现象：Vue管理后台登录后跳转404，地址栏变成http://localhost:8081/#/undefined

原因：router/index.js里beforeEach守卫未处理token失效情况，next('/login')后路由未重置。
解决：
在router/index.js的router.beforeEach中，将next('/login')改为：

next({ path: '/login', query: { redirect: to.fullPath } });

并在login.vue的登录成功逻辑里加：

this.$router.push(this.$route.query.redirect || '/');

5. 进阶技巧：把「琴房预约」做成可商用的最小可行产品（MVP）

毕业设计常止步于「功能跑通」，但真正拉开差距的，是能否把它变成一个能解决实际问题的MVP。我基于这套源码做了三处改造，让系统从「课程作业」升级为「可用工具」：

5.1 预约时段粒度从「整点」升级为「30分钟」，需改数据库与前端联动逻辑

原始设计只支持1小时为单位（如14:00-15:00），但琴房实际需要30分钟粒度（14:00-14:30）。改动分三步：

1. 数据库改字段：reservation表的start_time和end_time类型从TIME改为VARCHAR(5)（存14:00格式），因为MySQL的TIME类型不支持30分钟精度的索引优化；
2. 后端改冲突检测SQL：原SQL用BETWEEN，改为更精确的区间判断：

   -- 新SQL：检查[新预约开始, 新预约结束]是否与任一现有预约重叠 SELECT COUNT(*) FROM reservation WHERE room_id = #{roomId} AND NOT (#{endTime} <= start_time OR #{startTime} >= end_time)

3. 小程序前端改时间选择器：pages/reserve/reserve.wxml中，将picker的range从['08:00','09:00',...]改为生成30分钟粒度数组：

   // pages/reserve/reserve.js generateTimeRange() { const times = []; for (let h = 8; h <= 22; h++) { times.push(`${h}:00`); if (h < 22) times.push(`${h}:30`); } return times; }

5.2 加入「预约提醒」功能：用Quartz定时任务+微信模板消息

学生容易忘记预约，我们加个提前提醒。Java后端新增ReminderJob.java：

@Component @DisallowConcurrentExecution // 防止任务并发 public class ReminderJob implements Job { @Override public void execute(JobExecutionContext context) { // 查未来30分钟内未开始的预约 List<Reservation> soonReservations = reservationMapper.findSoonReservations(); for (Reservation r : soonReservations) { // 调用微信模板消息API（需提前在公众号申请模板ID） wechatService.sendTemplateMsg(r.getUserId(), r.getRoomName(), r.getStartTime()); } } }

在application.yml中配置Quartz：

spring: quartz: job-store-type: jdbc jdbc: initialize-schema: always properties: org.quartz.jobStore.class: org.quartz.impl.jdbcjobstore.JobStoreTX

5.3 小程序端加入「离线缓存」：用wx.setStorageSync存最近琴房列表，弱网下仍可查看

学生走到琴房楼信号差，但琴房列表必须能看。在pages/room/room.js的onLoad里加缓存逻辑：

onLoad() { // 先读本地缓存 const cachedRooms = wx.getStorageSync('cachedRooms'); if (cachedRooms && cachedRooms.length > 0) { this.setData({ rooms: cachedRooms }); } // 再发起网络请求 wx.request({ url: `${app.globalData.apiBase}/api/room/list`, success: (res) => { if (res.data.code === 200) { // 缓存最新数据，有效期2小时 wx.setStorageSync('cachedRooms', res.data.data); this.setData({ rooms: res.data.data }); } } }); }

从那以后我每次带学生做毕设，都强制他们做完「功能实现」后，必须完成一项MVP改造——要么加离线缓存，要么加短信提醒，要么做性能压测。因为真正的工程能力，不在代码跑通那一刻，而在它面对真实场景时，还能不能稳住。希望帮到你。

本文还有配套的精品资源，点击获取