微信小程序场地预约系统实战：SSM+MySQL从零到跑通

简介本资源为基于微信小程序SSMMySql的场地预约系统毕业设计全套资料面向计算机相关专业需要完成毕设的学生及Java全栈初学者。系统围绕运动场地在线预约场景实现场地信息发布、价格透明展示、在线支付与押金退回等功能角色分为管理员与用户管理员负责场地类型、场地、用户、预约、取消申请及退回押金管理用户可查询、预约、支付、使用场地并申请取消。压缩包共936个文件约42.64MB包含120个Java后端源码、130个Vue前端组件、123个JS脚本、27个WXSS与26个WXML小程序页面文件以及SQL数据库脚本、开题报告、毕业论文和mp4视频演示另附png、svg等界面素材。目前已有290人学习下载。整套资料覆盖从需求分析、数据库设计到前后端编码与论文撰写的完整链路适合直接参考搭建环境、对照调试接口与整理答辩材料。1. 场地预约小程序从选题到能跑起来中间隔着多少坑场地预约小程序这个题目在计算机毕业设计里属于典型的看起来简单、做起来全是细节的类型。需求一句话就能说清用户在小程序里看场地、选时段、下单、查记录管理员在后台管场地、审订单、看统计。但真正动手你会发现难点根本不在预约两个字而在时间冲突怎么判、并发下单怎么防、微信登录态怎么和 SSM 后端对上。我见过太多同学卡在数据库连不上和登录拿不到 openid这两步最后草草交差。这篇笔记面向的是正在做这个题目的同学也适合想用微信小程序 SSM MySQL 这套组合练手的人。我会按真实开发顺序讲先定技术栈和数据库再把后端接口跑通然后接小程序最后说部署和答辩时容易被追问的点。整套方案不需要服务器也能在本地跑通源码、数据库、开题报告、论文、演示视频这些交付物本质都是这套流程的产物。你只要跟着把最小闭环跑起来剩下的就是往里填功能。2. 技术选型与数据库设计为什么是 SSM 而不是 SpringBoot2.1 选 SSM 的真实理由和它的边界现在新项目基本都用 SpringBoot但毕业设计里 SSMSpring SpringMVC MyBatis依然是主流原因很实际学校机房的 JDK 版本、Tomcat 版本、老师熟悉的套路都是 SSM 那一套。SSM 的配置文件虽然多但每一层职责清晰答辩时老师问你的请求怎么走到 Controller 的你能顺着 web.xml → DispatcherServlet → HandlerMapping 讲下来这本身就是加分项。SSM 的边界也要清楚它不带内嵌服务器得自己配 Tomcat没有自动装配所有 Bean 都要在 XML 或注解里声明事务要手动开tx:annotation-driven。这些麻烦恰恰是答辩时能讲出东西的地方。如果你时间紧、只想快速出功能SpringBoot 更省事但很多学校的任务书明确写了 SSM那就别折腾。微信小程序端没什么可选的原生小程序 wx.request就够了。热词里提到的 uniapp 开发微信小程序适合需要同时出 App 的场景但毕业设计只要求小程序的话原生更轻调试也更直接。2.2 数据库表设计五张表撑起整个系统场地预约的核心是谁在什么时间占了哪个场地所以表结构围绕这个关系展开。下面是我一般会用的最小表集字段都给了注释直接能建。-- 用户表存微信登录后的用户信息 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(64) NOT NULL COMMENT 微信唯一标识, nickname VARCHAR(64) DEFAULT NULL, avatar VARCHAR(255) DEFAULT NULL, phone VARCHAR(20) DEFAULT NULL, role TINYINT DEFAULT 0 COMMENT 0普通用户 1管理员, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 场地表 CREATE TABLE venue ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(64) NOT NULL, type VARCHAR(32) DEFAULT NULL COMMENT 篮球场/会议室/羽毛球场, price DECIMAL(10,2) DEFAULT 0.00 COMMENT 每小时价格, status TINYINT DEFAULT 1 COMMENT 1开放 0关闭, description VARCHAR(255) DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 预约订单表核心表 CREATE TABLE reservation ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, venue_id INT NOT NULL, reserve_date DATE NOT NULL COMMENT 预约日期, start_time TIME NOT NULL, end_time TIME NOT NULL, status TINYINT DEFAULT 0 COMMENT 0待审核 1已通过 2已拒绝 3已取消, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, KEY idx_venue_date (venue_id, reserve_date) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 时间段配置表定义每个场地可预约的时段 CREATE TABLE time_slot ( id INT PRIMARY KEY AUTO_INCREMENT, venue_id INT NOT NULL, slot_name VARCHAR(32) NOT NULL COMMENT 如 08:00-10:00, start_time TIME NOT NULL, end_time TIME NOT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 公告表首页轮播或通知 CREATE TABLE notice ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(128) NOT NULL, content TEXT, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;建表时有几个参数要留意。reservation表的idx_venue_date联合索引是必须的因为查冲突时永远是某场地某天这个条件没索引数据一多就慢。status用 TINYINT 而不是字符串省空间也方便判断。时间字段用TIME而不是DATETIME因为预约是按时段而不是精确时刻这样比较冲突时直接比大小就行。提示MySQL 8.0 默认字符集已经是 utf8mb4但如果你用的是 5.7建库时一定要显式写DEFAULT CHARSETutf8mb4否则微信昵称里的 emoji 存进去会报错这个坑我踩过。2.3 冲突判断的 SQL 怎么写预约系统最核心的一条逻辑同一场地、同一天时间段不能重叠。判断重叠的标准写法是新时段的开始 已有结束 且 新时段的结束 已有开始。SELECT COUNT(*) FROM reservation WHERE venue_id #{venueId} AND reserve_date #{reserveDate} AND status IN (0, 1) -- 待审核和已通过都算占用 AND start_time #{endTime} AND end_time #{startTime};返回大于 0 就说明冲突直接拒绝。这里status IN (0,1)是关键已拒绝和已取消的订单不占时段如果写成status 1就会漏判待审核的订单导致两个人同时预约成功。这个细节答辩时经常被问。3. 后端接口跑通从登录到下单的最小闭环3.1 微信登录code 换 openid 的完整链路小程序登录不是账号密码而是wx.login拿到临时 code后端拿 code 去微信服务器换 openid。这一步必须在后端做因为要用到 AppSecret放前端会泄露。// WxLoginController.java RestController RequestMapping(/api/wx) public class WxLoginController { private static final String APPID 你的appid; private static final String SECRET 你的secret; Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody MapString, String params) { String code params.get(code); // 调用微信接口换取 openid String url https://api.weixin.qq.com/sns/jscode2session ?appid APPID secret SECRET js_code code grant_typeauthorization_code; String resp HttpUtil.get(url); // 用 hutool 或自己写 HttpClient JSONObject json JSONUtil.parseObj(resp); String openid json.getStr(openid); if (openid null) { return Result.error(登录失败: json.getStr(errmsg)); } // 查库没有就注册 User user userService.findOrCreateByOpenid(openid); // 生成 token 返回简单场景直接用 openid 当 token 也行 return Result.success(user); } }逻辑说明jscode2session是微信官方接口返回 openid 和 session_key。openid 是用户在这个小程序里的唯一标识存库时加唯一索引第二次登录直接查到。参数上grant_type固定写authorization_codecode 只能用一次且五分钟过期所以前端拿到 code 要立刻发给后端不能缓存。注意AppSecret 绝对不能写在小程序代码里也不能提交到公开仓库。本地开发可以放配置文件答辩演示时记得把真实值换成占位符。3.2 预约下单接口事务和并发怎么处理下单接口要做三件事查冲突、插订单、返回结果。查和插之间如果有并发两个请求可能都查到没冲突然后都插入。解决办法是在 Service 方法上加事务并且用数据库的唯一约束兜底。Service public class ReservationServiceImpl implements ReservationService { Autowired private ReservationMapper reservationMapper; Override Transactional(rollbackFor Exception.class) public Result createReservation(ReservationDTO dto) { // 1. 校验时间合法性 if (!dto.getStartTime().before(dto.getEndTime())) { return Result.error(结束时间必须晚于开始时间); } // 2. 查冲突 int conflict reservationMapper.countConflict( dto.getVenueId(), dto.getReserveDate(), dto.getStartTime(), dto.getEndTime()); if (conflict 0) { return Result.error(该时段已被预约); } // 3. 插入订单 Reservation r new Reservation(); r.setUserId(dto.getUserId()); r.setVenueId(dto.getVenueId()); r.setReserveDate(dto.getReserveDate()); r.setStartTime(dto.getStartTime()); r.setEndTime(dto.getEndTime()); r.setStatus(0); reservationMapper.insert(r); return Result.success(预约成功等待审核); } }参数说明Transactional保证查和插在同一个事务里rollbackFor Exception.class让所有异常都回滚。但事务默认隔离级别是 REPEATABLE READ两个并发事务可能都读到旧数据所以更稳的做法是给reservation表加一个基于venue_id reserve_date start_time的唯一索引插入冲突时数据库直接报错捕获后返回已被预约。这是双保险答辩时能讲出这一层老师会觉得你想得深。3.3 MyBatis 映射文件的关键配置SSM 里 MyBatis 的 mapper.xml 容易写错尤其是时间类型和驼峰映射。mapper namespacecom.demo.mapper.ReservationMapper resultMap idBaseResultMap typecom.demo.entity.Reservation id columnid propertyid/ result columnuser_id propertyuserId/ result columnvenue_id propertyvenueId/ result columnreserve_date propertyreserveDate/ result columnstart_time propertystartTime/ result columnend_time propertyendTime/ result columnstatus propertystatus/ /resultMap select idcountConflict resultTypeint SELECT COUNT(*) FROM reservation WHERE venue_id #{venueId} AND reserve_date #{reserveDate} AND status IN (0, 1) AND start_time lt; #{endTime} AND end_time gt; #{startTime} /select /mapperlt;和gt;是 XML 转义不能直接写这是新手最常见的报错来源。resultMap手动映射虽然啰嗦但比开mapUnderscoreToCamelCase更可控字段名对不上时一眼能看出来。4. 小程序端对接请求封装和页面联调4.1 请求封装别在每个页面写 wx.request小程序原生wx.request是回调式的每个页面都写一遍会疯。标准做法是封装一个 Promise 版的 request统一处理 baseUrl、token 和错误提示。// utils/request.js const BASE_URL http://localhost:8080/api; function request(options) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { content-type: application/json, token: wx.getStorageSync(token) || }, success(res) { if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail(err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };逻辑说明BASE_URL本地开发指向localhost:8080但真机调试时手机访问不到电脑的 localhost要换成电脑的局域网 IP比如http://192.168.1.100:8080/api并且微信开发者工具里要勾选不校验合法域名。token从缓存取登录成功后存进去。参数上content-type用application/json和后端RequestBody对应。4.2 预约页面的时间选择与提交预约页面要展示场地、日期、可选时段用户选完提交。核心是把选中的时段转成后端要的格式。// pages/reserve/reserve.js const { request } require(../../utils/request); Page({ data: { venueId: null, date: , slots: [], selectedSlot: null }, onLoad(options) { this.setData({ venueId: options.venueId }); this.loadSlots(); }, // 加载该场地可预约时段 async loadSlots() { const slots await request({ url: /slot/list, data: { venueId: this.data.venueId } }); this.setData({ slots }); }, // 选择时段 chooseSlot(e) { this.setData({ selectedSlot: this.data.slots[e.currentTarget.dataset.index] }); }, // 提交预约 async submit() { if (!this.data.selectedSlot) { wx.showToast({ title: 请选择时段, icon: none }); return; } await request({ url: /reservation/create, method: POST, data: { venueId: this.data.venueId, reserveDate: this.data.date, startTime: this.data.selectedSlot.startTime, endTime: this.data.selectedSlot.endTime } }); wx.showToast({ title: 预约成功 }); setTimeout(() wx.navigateBack(), 1500); } });参数说明reserveDate格式必须是yyyy-MM-ddstartTime是HH:mm:ss和后端DATE、TIME类型对应。如果格式不对MyBatis 会报类型转换异常。日期选择器用小程序自带的picker modedate时段用列表点击选择比让用户手输时间靠谱得多。4.3 登录态保持和页面拦截用户没登录就点预约应该先跳登录。常见做法是在app.js里做全局登录检查或者在需要登录的页面onShow里判断。// app.js App({ globalData: { userInfo: null }, onLaunch() { const token wx.getStorageSync(token); if (token) { this.globalData.userInfo wx.getStorageSync(userInfo); } } }); // 页面里判断 onShow() { const app getApp(); if (!app.globalData.userInfo) { wx.navigateTo({ url: /pages/login/login }); } }登录成功后把token和userInfo都存进 Storage这样冷启动也能恢复。注意wx.setStorageSync是同步的存小数据没问题别存大对象。5. 避坑与排查那些让答辩翻车的细节5.1 数据库连不上Error 2002 和时区问题现象启动 Tomcat 报Error 2002 (HY000): Cant connect to local MySQL server through socket或者连接超时。原因MySQL 服务没启动或者 JDBC URL 里没配时区。MySQL 8.0 之后必须显式指定serverTimezone否则报The server time zone value is unrecognized。解决先确认服务在跑net start mysql或systemctl status mysql然后 JDBC URL 写成jdbc:mysql://localhost:3306/venue_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse。useSSLfalse在本地开发时加上避免 SSL 警告。5.2 中文乱码从数据库到页面的全链路现象场地名称存进去变成???或者小程序显示乱码。原因链路上任何一环字符集不对都会乱。数据库、表、连接、Tomcat、响应头五处都要是 UTF-8。解决建库建表用utf8mb4JDBC URL 加characterEncodingutf8Tomcat 的server.xml里 Connector 加URIEncodingUTF-8SpringMVC 配StringHttpMessageConverter默认就是 UTF-8。小程序端wx.request不用特别设置但后端返回的Content-Type要带charsetutf-8。5.3 真机调试请求失败localhost 的陷阱现象开发者工具里一切正常真机预览时所有接口都失败。原因手机和电脑不在同一个网络或者手机访问不到电脑的localhost。解决把BASE_URL改成电脑的局域网 IPipconfig查确保手机和电脑连同一个 WiFi关闭电脑防火墙对 8080 端口的拦截。开发者工具里勾选不校验合法域名、web-view、TLS 版本以及 HTTPS 证书。如果还是不行用手机浏览器访问http://电脑IP:8080/api/venue/list看能不能通能通就是小程序配置问题。5.4 时间冲突漏判status 条件写错现象两个人预约了同一时段系统都显示成功。原因冲突查询里status条件写成了status 1只查了已通过的漏掉了待审核的订单。解决改成status IN (0, 1)待审核和已通过都算占用。更彻底的做法是加唯一索引让数据库层面兜底。这个 bug 在演示时如果被老师发现基本等于功能没做对一定要提前测。5.5 事务不生效注解没扫到现象下单时冲突判断通过了但插入失败后没有回滚或者两个操作不在一个事务里。原因Transactional生效需要 Spring 开启注解驱动并且方法必须是 public、被外部调用。如果 Service 类没被 Spring 管理或者方法内部自调用事务都不生效。解决确认spring-service.xml里有tx:annotation-driven transaction-managertransactionManager/Service 类加Service方法加Transactional且是 public。自调用场景比如 A 方法调本类 B 方法事务会失效要把 B 方法抽到另一个 Service 里。6. 让答辩加分的两个进阶技巧第一个技巧是把冲突判断从应用层下沉到数据库层。前面说了加唯一索引具体做法是给reservation表加一个联合唯一索引uk_venue_slot (venue_id, reserve_date, start_time)插入时如果冲突会抛DuplicateKeyException在 Service 里捕获后返回友好提示。这样即使并发再高也不会出现双重预约答辩时你可以说应用层判断 数据库约束双保险比只说我查了一下有说服力得多。try { reservationMapper.insert(r); } catch (DuplicateKeyException e) { return Result.error(该时段刚被预约请刷新后重试); }第二个技巧是给管理端加一个简单的统计接口用 SQL 聚合出每个场地的预约次数和本周预约趋势。不用图表库返回 JSON 让小程序用简单的柱状条展示就行。这个功能代码量不大但答辩演示时很出效果老师会觉得你的系统有数据意识。SELECT v.name, COUNT(r.id) AS cnt FROM venue v LEFT JOIN reservation r ON v.id r.venue_id AND r.status 1 GROUP BY v.id, v.name ORDER BY cnt DESC;最后说个我自己的习惯每次改完代码先在本机把登录 → 看场地 → 下单 → 管理端审核这条主流程走一遍再提交。毕业设计最怕的不是功能少而是主流程走不通。把这条链路跑顺了开题报告和论文里的系统实现章节自然就有东西写视频演示也就是录一遍的事。希望帮到你。本文还有配套的精品资源点击获取