基于SpringBoot+Vue的医院挂号预约系统的设计与实现

温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与意义随着医疗信息化建设的不断推进传统的人工挂号方式暴露出排队时间长、号源分配不透明、就诊流程繁琐等问题。患者往往需要提前到医院现场排队挂号不仅耗费大量时间也增加了医院窗口的服务压力。与此同时号源信息不透明导致部分热门科室一号难求而部分号源却存在闲置浪费的情况。基于SpringBootVue的医院挂号预约系统旨在通过互联网技术手段优化挂号流程实现号源的在线查询、预约、取消与统一管理。系统让患者足不出户即可完成挂号预约同时帮助医院合理调配医疗资源、提升运营效率具有显著的社会价值和应用前景。2. 系统技术栈本系统采用前后端分离架构前端与后端通过RESTful API进行数据交互整体技术选型如下层次技术选型说明前端框架Vue 3 Element Plus组件化开发提供丰富的UI组件前端构建Vite快速的开发服务器与构建工具状态管理PiniaVue 3 官方推荐的状态管理库路由管理Vue Router实现前端页面路由与导航守卫后端框架Spring Boot 2.7简化Spring应用搭建与配置持久层框架MyBatis-Plus简化数据库操作内置分页插件权限认证Spring Security JWT实现登录认证与接口鉴权数据库MySQL 8.0存储用户、科室、医生、号源等数据接口文档Swagger / Knife4j自动生成在线接口调试文档3. 系统功能模块设计系统面向患者、医生和系统管理员三类角色主要功能模块划分如下用户模块患者注册、登录、个人信息维护、就诊人管理。科室与医生模块科室分类展示、医生信息查询、医生排班管理。挂号预约模块号源查询、在线预约、取消预约、预约记录查询。后台管理模块管理员对科室、医生、号源、订单进行统一管理。4. 数据库设计系统核心数据表包括用户表、科室表、医生表、排班表、预约订单表等。以下为预约订单表的设计示例CREATE TABLE appointment_order ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键ID, order_no varchar(32) NOT NULL COMMENT 订单编号, user_id bigint(20) NOT NULL COMMENT 预约用户ID, patient_name varchar(50) NOT NULL COMMENT 就诊人姓名, doctor_id bigint(20) NOT NULL COMMENT 医生ID, schedule_id bigint(20) NOT NULL COMMENT 排班ID, appointment_date date NOT NULL COMMENT 预约日期, time_slot varchar(20) NOT NULL COMMENT 时间段, status tinyint(4) NOT NULL DEFAULT 0 COMMENT 状态0待就诊 1已完成 2已取消, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), KEY idx_user_id (user_id), KEY idx_doctor_id (doctor_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT预约订单表;5. 核心代码实现5.1 后端预约挂号接口后端通过Controller接收前端请求调用Service层完成号源校验与订单创建核心代码如下RestController RequestMapping(/api/appointment) public class AppointmentController { Resource private AppointmentService appointmentService; PostMapping(/book) public ResultAppointmentOrder book(RequestBody BookRequest request) { return Result.success(appointmentService.book(request)); } GetMapping(/list) public ResultPageResultAppointmentOrder list( RequestParam Long userId, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { return Result.success(appointmentService.pageList(userId, pageNum, pageSize)); } PutMapping(/cancel/{orderId}) public ResultVoid cancel(PathVariable Long orderId) { appointmentService.cancel(orderId); return Result.success(); } }5.2 后端预约业务逻辑预约时需校验号源余量并通过数据库乐观锁防止并发超卖核心Service实现如下Service public class AppointmentServiceImpl implements AppointmentService { Resource private AppointmentOrderMapper orderMapper; Resource private ScheduleMapper scheduleMapper; Override Transactional(rollbackFor Exception.class) public AppointmentOrder book(BookRequest request) { // 1. 查询排班信息 Schedule schedule scheduleMapper.selectById(request.getScheduleId()); if (schedule null) { throw new BusinessException(排班信息不存在); } // 2. 乐观锁扣减号源余量防止并发超卖 int rows scheduleMapper.deductRemaining( schedule.getId(), schedule.getVersion()); if (rows 0) { throw new BusinessException(该时段号源已约满); } // 3. 生成预约订单 AppointmentOrder order new AppointmentOrder(); order.setOrderNo(OrderNoGenerator.generate()); order.setUserId(request.getUserId()); order.setPatientName(request.getPatientName()); order.setDoctorId(schedule.getDoctorId()); order.setScheduleId(schedule.getId()); order.setAppointmentDate(schedule.getWorkDate()); order.setTimeSlot(schedule.getTimeSlot()); order.setStatus(0); orderMapper.insert(order); return order; } }5.3 后端乐观锁扣减号源SQLupdate iddeductRemaining UPDATE schedule SET remaining remaining - 1, version version 1 WHERE id #{id} AND remaining 0 AND version #{version} /update5.4 前端挂号预约页面前端使用Vue 3组合式API实现预约表单与提交逻辑核心代码如下template el-form :modelbookForm refbookFormRef label-width100px el-form-item label就诊人 proppatientName el-input v-modelbookForm.patientName placeholder请输入就诊人姓名 / /el-form-item el-form-item label预约日期 propappointmentDate el-date-picker v-modelbookForm.appointmentDate typedate placeholder选择预约日期 :disabled-datedisabledDate / /el-form-item el-form-item label时间段 proptimeSlot el-select v-modelbookForm.timeSlot placeholder选择时间段 el-option label上午 08:00-12:00 value上午 / el-option label下午 14:00-17:30 value下午 / /el-select /el-form-item el-form-item el-button typeprimary clickhandleBook立即预约/el-button /el-form-item /el-form /template script setup import { reactive, ref } from vue import { ElMessage } from element-plus import request from /utils/request const bookFormRef ref() const bookForm reactive({ patientName: , appointmentDate: , timeSlot: }) const disabledDate (date) { return date.getTime() Date.now() - 8.64e7 } const handleBook async () { await bookFormRef.value.validate() const { data } await request.post(/api/appointment/book, bookForm) if (data.code 200) { ElMessage.success(预约成功) } else { ElMessage.error(data.msg) } } /script6. 系统亮点与总结本系统通过SpringBoot与Vue的前后端分离架构实现了医院挂号预约流程的线上化与数字化。系统在号源扣减环节采用乐观锁机制有效避免了高并发场景下的超卖问题前端基于Element Plus提供友好的交互体验后端通过JWT实现安全的身份认证。整体而言该系统既缓解了患者挂号难、排队久的问题也提升了医院号源管理的精细化水平对医疗资源的合理配置具有积极的推动作用。