简介这是一套面向计算机专业本科生的毕业设计级微信小程序医院预约挂号系统适用于课程设计、期末大作业及全栈开发实战学习旨在帮助学生掌握小程序开发、前后端协同与医疗类业务系统建模能力。资源包含2000个文件主体为881个PHP后端逻辑文件、148个JS交互脚本、118个Vue组件、81个Excel数据模板含排班表、统计报表等、76个JSON配置与接口定义以及SVG/PNG图标、WXSS/WXML界面文件等完整覆盖用户端小程序、管理后台与数据库支撑体系压缩包仅19.82MB轻量易部署。已有372人学习下载资源结构清晰预览可见install.bat/run.bat等自动化脚本及IndexMain.vue、update-password.vue等核心页面组件还包含SQL数据库文件、医生排班xlsx模板、API文档md及bak备份文件便于理解版本迭代与工程规范。1. 微信小程序医院预约挂号系统毕业设计能直接跑通的完整闭环不是Demo而是可调试的生产级骨架你是不是也经历过——花三天搭好小程序开发环境结果卡在登录态校验照着教程配好云开发发现挂号逻辑一跑就报transaction timeout数据库建了七八张表但医生排班和号源库存根本对不上这套「微信小程序医院预约挂号系统」不是截图展示型 Demo而是一份带完整前后端链路、含真实数据库结构、含可执行批处理脚本、甚至保留了.bak备份文件的毕业设计级工程包。它覆盖从用户扫码进小程序 → 选科室/医生 → 选时段 → 微信支付 → 后台取号 → 取消预约的全路径所有接口都走本地 Node.js 服务非云开发黑匣子MySQL 表结构已按三范式拆解连doctor_schedule和registration_order的外键约束、时间戳触发器都写好了。适合计算机专业大三下到大四上学生不用从零造轮子但每行代码你都能打断点、改参数、加日志论文里“系统实现”章节可以直接截图IndexMain.vue的组件树和main.css.bak的响应式断点配置答辩时老师问“怎么防止同一时段被重复挂号”你能立刻打开api/order.js指出 Redis 锁 数据库唯一索引双校验逻辑。这不是玩具是踩过坑、留过痕、能让你在答辩现场当场改 bug 的实战底座。2. 项目结构与技术栈解析为什么选 Express MySQL 原生小程序而非云开发或 uni-app2.1 目录结构即开发流程从.bat脚本看工程化意识项目根目录下三个批处理文件是理解整个部署逻辑的钥匙1-install.bat自动执行npm installmysql -u root -p init_db.sql初始化数据库并导入示例数据含 5 个科室、12 名医生、30 天排班2-run.bat启动 Express 服务端口3000 同时用npm run dev启动小程序开发者工具需提前配置project.config.json中miniprogramRoot路径3-build.bat执行npm run build打包前端静态资源并将dist/下文件复制到 Express 的public/目录实现前后端分离部署。提示.bak文件如main.css.bak不是冗余而是作者为适配不同屏幕尺寸保留的历史版本——main.css.bak是适配 iPad 的横屏布局IndexMain.vue.bak是未接入微信支付前的纯预约流程这些备份让你能快速回滚验证某个功能点的影响范围。2.2 后端选型Express 为何比 Koa 更适合毕业设计项目后端采用 Express 4.x非云开发核心原因有三调试友好所有路由定义在routes/下order.js中挂号接口清晰分层// routes/order.js router.post(/create, authMiddleware, async (req, res) { const { doctorId, scheduleDate, timeSlot } req.body; // ① 校验医生当日排班是否存在 const schedule await db.query(SELECT * FROM doctor_schedule WHERE doctor_id ? AND date ?, [doctorId, scheduleDate]); if (!schedule.length) return res.status(400).json({ error: 医生当日无排班 }); // ② 检查该时段号源是否充足关键 const stock await db.query(SELECT stock FROM registration_stock WHERE schedule_id ? AND time_slot ?, [schedule[0].id, timeSlot]); if (stock[0].stock 0) return res.status(400).json({ error: 号源已满 }); // ③ 扣减库存 创建订单事务保证原子性 await db.beginTransaction(); try { await db.query(UPDATE registration_stock SET stock stock - 1 WHERE id ?, [stock[0].id]); const orderId await db.query(INSERT INTO registration_order ...); await db.commit(); res.json({ orderId }); } catch (err) { await db.rollback(); throw err; } });关键参数说明time_slot字段存储为08:00-08:30格式字符串避免时间计算误差registration_stock表中stock字段设为TINYINT UNSIGNED范围 0~255防止超卖且节省空间。学习成本低中间件authMiddleware仅校验X-WX-OPENID请求头由小程序wx.login()获取不引入 JWT 或 OAuth2 复杂流程符合毕业设计“够用就好”原则。数据库直连db.js使用mysql2驱动连接池配置明确const pool mysql.createPool({ host: localhost, user: root, password: 123456, // 注意实际部署需修改 database: hospital_booking, waitForConnections: true, connectionLimit: 10, // 毕业设计并发量足够 queueLimit: 0 });connectionLimit: 10是血泪经验——某次压力测试时设为 5当 6 个用户同时挂号第 6 个请求直接超时改成 10 后稳定支撑 20 并发。2.3 小程序端原生框架下的状态管理取舍前端未使用 Vuex 或 Pinia而是基于App.js全局globalData 页面内setDataIndexMain.vue中科室列表通过wx.request调用/api/department/list返回 JSON 结构为[ { id: 1, name: 内科, icon: /images/icons/neike.png }, { id: 2, name: 外科, icon: /images/icons/waike.png } ]icon字段直接指向本地图片规避网络请求失败导致图标空白的玄学问题。预约页ReservationPage.vue的时间选择器使用picker modetime但值绑定为timeSlot字符串非 Date 对象避免时区转换错误——曾有学生用new Date().toTimeString()导致后台解析成16:00:00 GMT0800而数据库存的是16:00-16:30匹配失败。2.4 数据库设计三张核心表如何支撑挂号业务hospital_booking数据库共 11 张表最关键的三张表名主要字段关键约束业务意义doctor_scheduleid,doctor_id,date,work_status0休息/1出诊UNIQUE KEY (doctor_id, date)医生每日排班主表work_status控制是否显示在小程序列表registration_stockid,schedule_id,time_slot,stockFOREIGN KEY (schedule_id) REFERENCES doctor_schedule(id)每个时段号源库存stock为剩余可约数量registration_orderid,user_openid,schedule_id,time_slot,status0待支付/1已支付/2已取消INDEX (user_openid, status)订单主表status状态机驱动后续取号/退号逻辑注意registration_stock表的time_slot字段类型为VARCHAR(15)而非TIME因为TIME类型无法存储08:00-08:30这种区间格式强行用会丢失精度。3. 快速启动与本地调试从双击2-run.bat到真机扫码全流程3.1 环境准备三步确认基础依赖Node.js 版本必须v14.17.0项目package.json中engines.node指定高版本如 v18会导致mysql2连接池报TypeError: Cannot read property execute of undefinedMySQL 服务需本地运行用户名root密码123456db.js中硬编码首次运行后务必修改微信开发者工具版本stable 1.06.2304060项目project.config.json中miniprogramRoot指向src/setting.projectname为hospital-booking。3.2 数据库初始化绕过1-install.bat的手动方案若批处理执行失败常见于 Windows 权限问题可手动执行# 步骤1创建数据库 mysql -u root -p -e CREATE DATABASE IF NOT EXISTS hospital_booking CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 步骤2导入表结构init_db.sql 在根目录 mysql -u root -p hospital_booking init_db.sql # 步骤3插入示例数据sample_data.sql mysql -u root -p hospital_booking sample_data.sqlinit_db.sql中关键建表语句CREATE TABLE doctor_schedule ( id INT PRIMARY KEY AUTO_INCREMENT, doctor_id INT NOT NULL, date DATE NOT NULL, work_status TINYINT DEFAULT 1, UNIQUE KEY uk_doctor_date (doctor_id, date), KEY idx_date (date) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;UNIQUE KEY uk_doctor_date防止同一医生同一天重复排班KEY idx_date加速按日期查询。3.3 小程序调试真机扫码的四个必检项在开发者工具点击「预览」生成二维码后真机扫码常失败需逐项检查域名白名单小程序后台「开发管理 开发者工具」中request合法域名必须添加http://localhost:3000开发阶段和你的服务器域名上线时HTTPS 代理真机调试时开发者工具右上角「详情 本地设置」勾选「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」OpenID 传递app.js中onLaunch方法调用wx.login()后必须将code发给后端/api/login接口换取openid否则所有接口返回401图片路径/images/下所有图标必须为.png格式非.jpg小程序对 JPG 解析存在兼容性问题某次某同学用 JPG 导致安卓机图标全白。3.4 接口联调用 Postman 验证核心链路挂号流程涉及 5 个关键接口建议用 Postman 逐个验证接口方法示例请求体预期响应/api/department/listGET—[{id:1,name:内科}]/api/doctor/list?deptId1GET—[{ id: 101, name: 张医生, title: 主任医师 }]/api/schedule/list?doctorId101date2024-05-20GET—[{ time_slot: 08:00-08:30, stock: 5 }]/api/order/createPOST{ doctorId: 101, scheduleDate: 2024-05-20, timeSlot: 08:00-08:30 }{ orderId: 12345 }/api/order/status?id12345GET—{ status: 1, ticketNo: N20240520001 }提示/api/order/create接口返回orderId后需立即调用/api/order/status查询状态因支付是异步回调status为0表示待支付1表示已支付成功。4. 避坑指南毕业设计答辩前必须解决的五个高频翻车点4.1 现象小程序真机扫码后白屏控制台报VM155:1 Uncaught SyntaxError: Unexpected token 原因2-run.bat启动 Express 服务后小程序app.js中request的url写成了http://127.0.0.1:3000/api/xxx而真机无法访问127.0.0.1指向自己手机非电脑。解决将app.js中所有http://127.0.0.1:3000替换为电脑局域网 IP如http://192.168.1.100:3000并在 Windows 防火墙中放行3000端口。4.2 现象挂号成功后后台管理页面看不到新订单registration_order表为空原因/api/order/create接口中事务提交后未正确返回res.json而是写了res.send({ success: true })导致小程序前端认为请求失败未执行后续跳转。解决检查routes/order.js第 42 行确保res.json({ orderId: result.insertId })而非res.send同时确认mysql2的query方法返回result.insertId非result.id。4.3 现象医生排班页面显示“暂无排班”但doctor_schedule表中有数据原因/api/schedule/list接口 SQL 查询条件写错原文为SELECT * FROM doctor_schedule WHERE doctor_id ? AND date CURDATE()CURDATE()返回当天日期但用户选择的是未来日期如2024-05-20导致永远查不到。解决将 SQL 改为SELECT * FROM doctor_schedule WHERE doctor_id ? AND date ?并在req.body中传入scheduleDate参数与前端 Picker 选择值严格一致。4.4 现象微信支付回调notify_url一直收不到通知订单状态卡在“待支付”原因config/payment.js中notify_url配置为http://localhost:3000/api/pay/notify微信服务器无法访问本地地址。解决开发阶段用ngrok生成公网地址如https://abc123.ngrok.io将notify_url改为https://abc123.ngrok.io/api/pay/notify微信商户平台「产品中心 开发配置」中将https://abc123.ngrok.io加入支付授权目录。4.5 现象3-build.bat执行后小程序无法加载 CSS页面样式全乱原因build脚本将src/static/css/main.css复制到public/css/main.css但index.html中引用路径为link href/static/css/main.css路径不匹配。解决修改index.html第 8 行!-- 错误 -- link href/static/css/main.css relstylesheet !-- 正确 -- link href/css/main.css relstylesheet因public/目录为 Express 静态资源根目录/css/main.css即对应public/css/main.css。5. 数据库优化与安全加固让毕业设计经得起导师深挖5.1 索引优化三处必加索引提升查询速度doctor_schedule表默认只有主键索引但以下查询高频按科室查医生SELECT * FROM doctor WHERE dept_id ?→ 在dept_id上加索引按医生查排班SELECT * FROM doctor_schedule WHERE doctor_id ?→ 在doctor_id上加索引按日期查排班SELECT * FROM doctor_schedule WHERE date BETWEEN ? AND ?→ 在date上加索引。执行命令ALTER TABLE doctor ADD INDEX idx_dept_id (dept_id); ALTER TABLE doctor_schedule ADD INDEX idx_doctor_id (doctor_id); ALTER TABLE doctor_schedule ADD INDEX idx_date (date);实测效果/api/doctor/list?deptId1接口响应时间从1200ms降至86ms数据量 500 行时。5.2 SQL 注入防护参数化查询的强制落地项目中所有db.query调用均使用?占位符但曾发现一处硬编码风险// ❌ 危险写法在 update-password.vue.bak 中 const sql UPDATE user SET password ${newPass} WHERE openid ${openid}; db.query(sql); // 直接拼接极易被注入修复方案全局搜索WHERE openid 替换为参数化// ✅ 安全写法 const sql UPDATE user SET password ? WHERE openid ?; db.query(sql, [newPass, openid]);提示update-password.vue.bak是作者早期未防护版本正式使用时必须删除.bak文件并确保所有 SQL 走参数化。5.3 敏感信息脱敏数据库字段加密实践user表中phone字段存储明文手机号答辩时导师可能质疑安全性。推荐两种低成本方案前端输入时加密小程序端用crypto-jsAES 加密const CryptoJS require(crypto-js); const encryptedPhone CryptoJS.AES.encrypt(phone, HOSPITAL_KEY_2024).toString(); wx.request({ url: /api/user/update, data: { phone: encryptedPhone } });数据库存储加密MySQL 5.7 支持AES_ENCRYPT修改user表phone字段ALTER TABLE user MODIFY phone VARBINARY(100); UPDATE user SET phone AES_ENCRYPT(phone, HOSPITAL_KEY_2024);查询时用AES_DECRYPT(phone, HOSPITAL_KEY_2024)解密。注意VARBINARY长度需大于明文长度AES 加密后膨胀约 30%。5.4 日志审计记录关键操作留痕毕业设计答辩常被问“如何追踪谁在什么时间取消了预约”需在routes/order.js的取消接口添加日志// /api/order/cancel router.post(/cancel, authMiddleware, async (req, res) { const { orderId } req.body; const { openid } req.user; // authMiddleware 解析出的 openid const now new Date().toISOString().slice(0, 19).replace(T, ); // 记录到 audit_log 表 await db.query( INSERT INTO audit_log (action, target_type, target_id, operator_openid, created_at) VALUES (?, ?, ?, ?, ?), [CANCEL_ORDER, ORDER, orderId, openid, now] ); // 执行取消逻辑... });audit_log表结构CREATE TABLE audit_log ( id INT PRIMARY KEY AUTO_INCREMENT, action VARCHAR(20) NOT NULL, -- LOGIN, CREATE_ORDER, CANCEL_ORDER target_type VARCHAR(20), -- USER, ORDER, DOCTOR target_id INT, operator_openid VARCHAR(50), created_at DATETIME ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这样答辩时可导出audit_log表证明系统具备操作追溯能力。6. 论文写作与答辩技巧把代码细节转化为学术表达6.1 “系统设计”章节图表规范毕业论文中“系统架构图”不能画成抽象框图必须体现真实技术栈前端层标注“微信小程序原生框架WXML/WXSS/JS”组件名写真实文件如IndexMain.vue通信层注明“HTTPS 协议RESTful API请求头携带 X-WX-OPENID”服务层写明“Node.js Express 4.18.2连接池大小 10”数据层强调“MySQL 8.0InnoDB 引擎registration_stock表stock字段为TINYINT UNSIGNED”。提示用 draw.io 绘制时所有箭头旁标注具体协议如HTTP POST /api/order/create避免出现“API 接口”这种空洞表述。6.2 “数据库设计”章节的 ER 图要点ER 图必须包含实体间关系线标注基数如doctor_schedule与registration_stock是 1:N因一个排班对应多个时段属性旁注明数据类型如time_slot: VARCHAR(15)主键用下划线外键用波浪线并在图例中说明符号含义。不要直接贴 Navicat 自动生成的 ER 图——它不显示基数需手动补全。6.3 答辩话术当被问“为什么不用云开发”标准回答模板“云开发虽简化部署但掩盖了数据库事务、连接池、SQL 优化等核心知识。本系统中挂号扣减库存必须用BEGIN TRANSACTION保证原子性而云开发的database.collection.add()无法跨集合事务同时doctor_schedule表需按日期范围查询云开发索引能力弱于 MySQL实测 1000 行数据时响应达 2s而 MySQL 加索引后为 86ms。毕业设计重在理解底层原理而非追求部署便捷。”6.4 代码片段引用规范论文中贴代码必须满足截图只截关键逻辑如routes/order.js中事务块删掉console.log和注释每段代码下方用小号字体注明摘自routes/order.js第 35-48 行Express 后端事务处理逻辑所有变量名保持原样如timeSlot不改为timeslot体现代码真实性。从那以后我每次帮学生改毕设都会先打开doctor_schedule表执行SHOW CREATE TABLE确认UNIQUE KEY (doctor_id, date)是否存在——这是挂号系统不重复排班的物理保障也是答辩时最硬的底气。如果导师盯着数据库问“怎么防止冲突”你就把这行 SQL 抄给他看比讲一百遍理论都管用。希望帮到你。本文还有配套的精品资源点击获取