基于 Uniapp 的医疗挂号系统开发经验分享

原创于 2025-08-20 08:47:30 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

18 篇文章

订阅专栏

一、整体架构设计

采用分层架构模式：

前端：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 {

    @Autowired
    private PatientService patientService;

    @GetMapping("/{id}")
    public ResponseEntity<Patient> getPatient(@PathVariable Long id) {
        return ResponseEntity.ok(patientService.findById(id));
    }

    @PostMapping
    public 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-PLUS
  return 'APP'
  #endif
  #ifdef H5
  return '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)