基于 Uniapp 的医疗挂号系统开发经验分享
一、整体架构设计
采用分层架构模式：
前端：Uniapp (Vue3 + Vite)
后端：Spring Boot 2.7 + MyBatis Plus
通信：RESTful API + WebSocket
数据库：MySQL 8.0
二、患者信息管理模块
1. 核心功能实现
- 患者档案管理（CRUD操作）
- 身份证OCR识别（集成百度AI）
- 就诊记录时间轴展示
2. 跨端关键代码
<template><scroll-view :scroll-y="true"><uni-card v-for="item in patientList" :key="item.id"><uni-section title="基本信息"><uni-list><uni-list-item :title="`姓名：${item.name}`" /><uni-list-item :title="`性别：${item.gender | genderFilter}`" /></uni-list></uni-section></uni-card></scroll-view>
</template><script setup>
import { ref } from 'vue'
const patientList = ref([])// 获取患者数据
const fetchPatients = async () => {const res = await uni.request({url: '/api/patients',method: 'GET'})patientList.value = res.data
}
</script>
三、医生排班模块
1. 技术实现要点
- 可视化排班日历（集成
uCharts） - 冲突检测算法
- 多状态管理（出诊/停诊/替诊）
2. 排班算法核心
// 排班冲突检测
const checkScheduleConflict = (newSchedule) => {return existingSchedules.value.some(s => s.doctorId === newSchedule.doctorId &&s.date === newSchedule.date &&Math.abs(s.timeSlot - newSchedule.timeSlot) < 2)
}// 生成周视图数据
const generateWeekView = (date) => {const start = new Date(date.setDate(date.getDate() - date.getDay()))return Array(7).fill().map((_, i) => {const day = new Date(start)day.setDate(start.getDate() + i)return {date: day.toISOString().split('T')[0],weekday: ['日','一','二','三','四','五','六'][day.getDay()]}})
}
四、Spring Boot 后端交互
1. 接口设计规范
// 患者控制器示例
@RestController
@RequestMapping("/api/patients")
public class PatientController {@Autowiredprivate PatientService patientService;@GetMapping("/{id}")public ResponseEntity<Patient> getPatient(@PathVariable Long id) {return ResponseEntity.ok(patientService.findById(id));}@PostMappingpublic ResponseEntity<Void> createPatient(@RequestBody PatientDTO dto) {patientService.createPatient(dto);return ResponseEntity.status(HttpStatus.CREATED).build();}
}
2. 数据传输优化
- 使用ProtoBuf替代JSON提升性能
- 分页参数统一处理：
public class PageParam {@Min(1)private int page = 1;@Range(min=5, max=100)private int size = 10;
}
五、跨端适配经验
1. 多端差异处理
// 设备判断
const getPlatform = () => {#ifdef APP-PLUSreturn 'APP'#endif#ifdef H5return 'H5'#endif
}// 支付模块适配
const handlePayment = () => {switch(getPlatform()) {case 'APP': uni.requestPayment({ provider: 'alipay' })break;case 'H5':window.location.href = '/alipay/page'break;}
}
2. 性能优化方案
- 虚拟列表加载千条数据
- SQL查询优化：
@Select("SELECT * FROM schedule WHERE date BETWEEN #{start} AND #{end}") - 使用WebSocket推送排班变更通知
六、关键问题解决方案
日历组件性能瓶颈
- 采用按周动态加载数据
- 使用Canvas绘制替代DOM渲染
多端样式适配
.doctor-card {/* 通用样式 */padding: 20rpx;/* 小程序特有样式 */@media screen and (max-width: 480px) {padding: 10rpx;} }安全防护措施
- JWT令牌自动续期机制
- 敏感数据加密传输：
RSA(前端公钥加密) + AES(业务数据加密)
七、项目成果
- 实现功能模块：
├─ 患者管理 ├─ 医生排班 ├─ 预约挂号 ├─ 支付系统 └─ 数据看板 - 性能指标：
- 首屏加载：<1.5s
- API响应：<200ms
- 支持并发：5000+
最佳实践建议：
- 使用
uni.$emit/uni.$on实现跨页面通信 - 复杂数据状态管理优先选择
Pinia - 后端接口遵循
RESTful风格并添加版本控制 - 重要操作添加防抖机制：
const submit = uni.$uv.debounce(() => {// 提交逻辑
}, 500)