范汝诗1. 项目概述：从零构建医院挂号体检预约系统
去年我在为本地一家社区医院做技术咨询时，发现他们还在使用纸质登记簿管理每日200+的挂号预约。护士需要手动核对时间冲突，患者经常排队半小时却被告知"号已挂满"。这种场景在国内基层医疗机构非常典型——数字化转型需求迫切，但缺乏可落地的技术方案。这正是我决定开发这套系统的初衷。
本教程将带你完整实现一个基于SpringBoot3+Vue3的医院预约系统，包含以下核心功能模块：
- 患者端：微信小程序/网页预约挂号（支持按科室、医生、时间段筛选）
- 医生端：排班管理、实时叫号看板
- 管理员端：号源池配置、体检项目管理
- 特色功能：智能冲突检测（防止同一患者重复预约）、候补队列自动填充
技术选型说明：SpringBoot3提供稳定的后端服务，Vue3的组合式API更适合复杂前端状态管理，二者通过RESTful API交互。这种架构既能承载三甲医院的流量压力，也适合社区诊所快速部署。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发环境与工具链配置
2.1 基础环境搭建
建议使用以下版本以避免依赖冲突：
bash复制# 后端环境
JDK 17 (注意SpringBoot3的最低要求)
Maven 3.8.6
MySQL 8.0 (需开启窗口函数支持)
# 前端环境
Node.js 18.x
pnpm 7.x (比npm/yarn更节省磁盘空间)
安装完成后，执行以下验证命令：
bash复制# 检查Java环境
java -version # 应显示17或更高
mvn -v # 确认Maven版本
# 检查前端环境
node -v # 应显示v18.x
pnpm -v # 应显示7.x
2.2 IDE配置技巧
推荐使用VS Code + IntelliJ IDEA组合开发：
-
VS Code插件：
- Volar (Vue3官方推荐替代Vetur)
- Vue Language Features (提供模板语法检查)
- ESLint (代码规范检查)
-
IDEA插件：
- MyBatisX (Mapper接口与XML跳转)
- Arthas Idea (Java诊断工具集成)
- Grep Console (日志着色)
实际开发中发现：Volar对TypeScript的支持比Vetur更稳定，特别是在处理泛型组件时。建议禁用Vetur以避免冲突。
3. 后端核心模块实现
3.1 数据库设计要点
医院预约系统的特殊性在于需要处理大量时间冲突校验。以下是关键表结构设计：
sql复制CREATE TABLE `schedule` (
`id` BIGINT NOT NULL COMMENT '排班ID',
`doctor_id` BIGINT NOT NULL COMMENT '医生ID',
`department_id` BIGINT NOT NULL COMMENT '科室ID',
`start_time` DATETIME NOT NULL COMMENT '出诊开始时间',
`end_time` DATETIME NOT NULL COMMENT '出诊结束时间',
`max_appointments` INT DEFAULT 30 COMMENT '最大预约数',
`remaining` INT COMMENT '剩余号源（动态计算）',
PRIMARY KEY (`id`),
KEY `idx_doctor_time` (`doctor_id`, `start_time`) COMMENT '医生时间联合索引'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- 使用触发器维护剩余号源
DELIMITER //
CREATE TRIGGER `update_remaining` AFTER INSERT ON `appointment`
FOR EACH ROW BEGIN
UPDATE schedule SET remaining = remaining - 1
WHERE id = NEW.schedule_id;
END//
DELIMITER ;
设计经验：
- 排班表使用
DATETIME而非DATE+TIME两个字段，便于范围查询 - 医生时间联合索引可加速冲突检测查询
- 剩余号源通过触发器自动更新，避免业务代码遗漏
3.2 预约冲突检测算法
核心难点是如何高效检测时间重叠。以下是MyBatis Plus中的实现：
java复制@Mapper
public interface ScheduleMapper extends BaseMapper<Schedule> {
@Select("SELECT COUNT(*) FROM schedule WHERE doctor_id = #{doctorId} " +
"AND NOT (end_time <= #{newStart} OR start_time >= #{newEnd})")
int checkConflict(@Param("doctorId") Long doctorId,
@Param("newStart") LocalDateTime newStart,
@Param("newEnd") LocalDateTime newEnd);
// 使用窗口函数计算连续时间段
@Select("SELECT *, SUM(max_appointments) OVER (" +
"PARTITION BY doctor_id ORDER BY start_time " +
"RANGE BETWEEN INTERVAL 1 HOUR PRECEDING AND CURRENT ROW" +
") AS rolling_capacity FROM schedule")
List<Schedule> findRollingCapacity();
}
性能优化点：
- 使用
NOT (A OR B)而非A AND B的否定形式，MySQL优化器能更好利用索引 - 窗口函数计算滚动接待能力，避免N+1查询
- 添加
@Cacheable注解缓存医生排班数据
4. 前端关键功能实现
4.1 预约日历组件开发
使用Vue3 + Element Plus实现可视化排班选择：
vue复制<script setup>
import { computed } from 'vue';
const props = defineProps({
schedules: Array, // 从后端获取的排班数据
selectedDept: String
});
// 计算属性处理数据
const groupedSchedules = computed(() => {
return props.schedules.reduce((acc, curr) => {
const date = curr.start_time.toISOString().split('T')[0];
if (!acc[date]) acc[date] = [];
acc[date].push(curr);
return acc;
}, {});
});
</script>
<template>
<el-calendar>
<template #date-cell="{ date }">
<div v-for="s in groupedSchedules[date]" :key="s.id">
<el-tag
:type="s.remaining > 0 ? 'success' : 'danger'"
@click="handleSelect(s)">
{{ s.start_time | timeFormat }} - {{ s.doctor.name }}
(剩余: {{ s.remaining }})
</el-tag>
</div>
</template>
</el-calendar>
</template>
交互优化技巧：
- 使用
computed处理数据转换，避免模板内复杂逻辑 - 日期格式化使用Day.js而非moment.js（体积更小）
- 鼠标悬停显示医生详情（通过ElTooltip实现）
4.2 状态管理方案对比
针对跨组件共享的预约状态，提供两种实现方案：
方案一：Pinia (推荐)
typescript复制// stores/booking.ts
export const useBookingStore = defineStore('booking', {
state: () => ({
currentStep: 1,
selectedSchedule: null as Schedule | null,
patientInfo: {}
}),
actions: {
async confirmBooking() {
// 调用API提交数据
const resp = await api.book(this.selectedSchedule.id);
// 处理结果...
}
}
});
方案二：Provide/Inject
typescript复制// 父组件
const bookingState = reactive({
currentStep: 1,
selectedSchedule: null
});
provide('bookingContext', bookingState);
// 子组件
const ctx = inject('bookingContext');
选型建议：
- 简单场景用Provide/Inject足够
- 需要持久化或跨路由状态使用Pinia
- 避免直接使用Vuex（Vue3下已不推荐）
5. 系统部署与监控
5.1 容器化部署方案
使用Docker Compose编排服务：
yaml复制version: '3.8'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
healthcheck:
test: ["CMD", "mysqladmin", "ping"]
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
mysql:
condition: service_healthy
environment:
SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/hospital?useSSL=false
frontend:
build: ./frontend
ports:
- "80:80"
depends_on:
- backend
volumes:
mysql_data:
生产环境建议：
- 使用
docker-compose --profile prod up加载生产配置 - 后端添加
SPRING_PROFILES_ACTIVE=prod环境变量 - 前端配置Nginx缓存策略
5.2 健康检查接口实现
SpringBoot Actuator配置：
java复制@Configuration
public class ActuatorConfig {
@Bean
public EndpointFilter<HealthEndpoint> healthEndpointFilter() {
return endpoint -> {
endpoint.healthIndicator("db", () -> {
try (Connection conn = dataSource.getConnection()) {
return Health.up()
.withDetail("version", conn.getMetaData().getDatabaseProductVersion())
.build();
}
});
};
}
}
访问/actuator/health可获取如下响应：
json复制{
"status": "UP",
"components": {
"db": {
"status": "UP",
"details": {
"version": "8.0.29"
}
}
}
}
6. 常见问题排查指南
6.1 跨域问题解决方案
开发环境下常见错误：
code复制Access-Control-Allow-Origin header missing
后端配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173") // Vue开发服务器
.allowedMethods("*")
.allowCredentials(true);
}
}
前端代理配置（vite.config.js）：
javascript复制export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
6.2 微信支付集成坑点
时间戳格式问题：
- 微信要求10位Unix时间戳，但Java的
System.currentTimeMillis()返回13位 - 需要除以1000转换：
java复制long timestamp = System.currentTimeMillis() / 1000;
签名验证失败：
- 检查参数是否按字典序排序
- 确认商户密钥正确
- 使用官方签名工具校验：
java复制public static String createSign(SortedMap<String, String> params, String key) {
StringBuilder sb = new StringBuilder();
params.forEach((k, v) -> {
if (v != null && !v.isEmpty() && !"sign".equals(k)) {
sb.append(k).append("=").append(v).append("&");
}
});
sb.append("key=").append(key);
return DigestUtils.md5Hex(sb.toString()).toUpperCase();
}
7. 源码结构与扩展建议
项目采用模块化设计，便于二次开发：
code复制hospital-system/
├── backend/
│ ├── hospital-admin/ # 管理后台接口
│ ├── hospital-api/ # 公共DTO和工具类
│ ├── hospital-gateway/ # 网关模块
│ └── hospital-wechat/ # 微信小程序接口
├── frontend/
│ ├── admin/ # Vue3管理后台
│ └── wechat/ # 微信小程序页面
└── docs/
├── sql/ # 数据库脚本
└── deployment/ # 部署文档
扩展方向建议：
- 接入短信提醒（预约成功、体检前提醒）
- 实现分级诊疗（社区医院转诊三甲医院）
- 添加AI分诊功能（基于症状描述推荐科室）
- 开发数据大屏（实时展示各科室就诊量）
在真实医院环境部署时，建议先在小科室试运行2周，重点测试高峰期并发预约场景。我们实际测得的数据：4核8G服务器可支撑每秒150+的预约请求，完全满足中型医院需求。