Vue3+Spring Boot构建社区医疗系统全流程解析

1. 项目概述与技术选型社区居民诊疗健康管理系统是一个面向社区医疗机构的信息化解决方案旨在通过数字化手段提升基层医疗服务效率。系统采用前后端分离架构前端基于Vue 3TypeScript技术栈后端采用Spring Boot框架实现了从健康档案管理到在线诊疗的全流程服务。1.1 技术架构设计考量选择Vue 3Spring Boot的技术组合主要基于以下实际考量前端技术选型理由Vue 3的Composition API相比Options API更适合大型应用的状态管理TypeScript的静态类型检查能在开发阶段发现潜在的类型错误Element Plus组件库提供丰富的医疗行业适用UI组件如时间选择器、表单验证等后端技术选型优势Spring Boot的自动配置特性可快速搭建医疗级应用框架MyBatis-Plus的ActiveRecord模式简化了健康档案的CRUD操作JWT无状态认证适合分布式部署场景避免会话同步问题实际开发中发现医疗系统对数据一致性要求极高我们最终采用了REPEATABLE_READ事务隔离级别并在关键业务如预约挂号中添加了乐观锁控制。1.2 基础设施配置方案数据库采用MySQL 8.0Redis组合方案具体配置如下组件版本用途配置建议MySQL8.0.28结构化医疗数据存储至少4核8GB内存SSD存储Redis6.2会话缓存/预约锁/高频查询缓存独立部署启用持久化Nginx1.20静态资源服务API反向代理配置HTTP/2和Gzip压缩2. 核心模块实现细节2.1 用户权限管理系统采用RBAC基于角色的访问控制模型设计具体实现包含以下关键点数据库表设计CREATE TABLE sys_user ( id BIGINT NOT NULL AUTO_INCREMENT, username VARCHAR(64) NOT NULL COMMENT 登录账号, password VARCHAR(128) NOT NULL COMMENT 加密密码, mobile VARCHAR(20) COMMENT 手机号(用于短信验证), status TINYINT DEFAULT 1 COMMENT 状态(0-禁用,1-正常), PRIMARY KEY (id), UNIQUE KEY idx_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT系统用户表; CREATE TABLE sys_role ( id BIGINT NOT NULL AUTO_INCREMENT, role_name VARCHAR(50) NOT NULL COMMENT 角色名称(居民/医生/管理员), role_code VARCHAR(50) NOT NULL COMMENT 角色编码, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT角色表;前端权限控制实现// 在路由守卫中检查权限 router.beforeEach(async (to, from, next) { const userStore useUserStore() if (!userStore.token to.path ! /login) { next(/login) } else if (to.meta.roles !hasPermission(to.meta.roles)) { next(/403) // 无权限跳转到403页面 } else { next() } }) // 按钮级权限指令 Vue.directive(permission, { mounted(el, binding) { if (!checkPermission(binding.value)) { el.parentNode?.removeChild(el) } } })2.2 健康档案管理模块医疗数据结构化存储采用FHIR标准的部分设计理念主要包含以下组件体检报告数据结构示例{ reportId: MED20230001, patientId: P10086, examDate: 2023-07-15, items: [ { itemCode: BP, itemName: 血压, resultValue: 120/80, unit: mmHg, referenceRange: 90/60-140/90 }, { itemCode: GLU, itemName: 血糖, resultValue: 5.2, unit: mmol/L, referenceRange: 3.9-6.1 } ] }数据可视化实现技巧使用ECharts的dataset特性实现动态数据绑定针对医疗数据特点预设三种主题色系正常/预警/异常实现拖拽缩放时间轴查看历史趋势踩坑记录直接渲染大量体检数据会导致浏览器卡顿最终采用Web Worker进行数据预处理并实现分页加载策略。3. 关键业务逻辑实现3.1 预约挂号并发控制针对挂号资源竞争问题采用多级防护策略前端防抖提交按钮添加300ms点击间隔限制Redis分布式锁public boolean makeAppointment(Long scheduleId, Long userId) { String lockKey lock:appointment: scheduleId; // 尝试获取锁有效期30秒 boolean locked redisTemplate.opsForValue() .setIfAbsent(lockKey, userId, 30, TimeUnit.SECONDS); if (!locked) { throw new BusinessException(当前时段预约人数过多请稍后再试); } try { // 查询剩余号源 Integer remain appointmentMapper.selectRemain(scheduleId); if (remain 0) { throw new BusinessException(号源已约满); } // 扣减库存 int updated appointmentMapper.reduceRemain(scheduleId, remain); if (updated 0) { throw new BusinessException(号源发生变化请重新选择); } // 创建预约记录 Appointment appointment new Appointment(); appointment.setScheduleId(scheduleId); appointment.setUserId(userId); appointmentMapper.insert(appointment); return true; } finally { // 释放锁 redisTemplate.delete(lockKey); } }数据库乐观锁update idreduceRemain UPDATE doctor_schedule SET remain remain - 1 WHERE id #{id} AND remain 1 /update3.2 在线问诊实时通信基于WebSocket的咨询系统实现要点后端事件处理Slf4j Component RequiredArgsConstructor public class ConsultationHandler extends TextWebSocketHandler { private final SimpMessagingTemplate messagingTemplate; Override protected void handleTextMessage(WebSocketSession session, TextMessage message) { ConsultationMsg msg JSON.parseObject(message.getPayload(), ConsultationMsg.class); // 消息持久化 consultationService.saveMessage(msg); // 推送到特定会话 String destination /topic/consultation/ msg.getSessionId(); messagingTemplate.convertAndSend(destination, msg); } }前端连接管理class ConsultationSocket { private socket: WebSocket | null null connect(sessionId: string) { const token localStorage.getItem(token) this.socket new WebSocket( wss://api.example.com/ws/consultation?sessionId${sessionId}token${token} ) this.socket.onmessage (event) { const msg JSON.parse(event.data) store.commit(ADD_MESSAGE, msg) } } sendMessage(content: string) { if (this.socket?.readyState WebSocket.OPEN) { const msg { type: text, content, timestamp: Date.now() } this.socket.send(JSON.stringify(msg)) } } }4. 系统部署与性能优化4.1 Docker容器化方案医疗系统的容器化部署需要特别注意数据持久化和安全性docker-compose.yml关键配置version: 3.8 services: app: image: health-system:1.0.0 ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod - REDIS_HOSTredis depends_on: - redis - mysql mysql: image: mysql:8.0 ports: - 3306:3306 environment: - MYSQL_ROOT_PASSWORDyour_strong_password - MYSQL_DATABASEhealth_db volumes: - mysql_data:/var/lib/mysql - ./sql/init.sql:/docker-entrypoint-initdb.d/init.sql redis: image: redis:6.2-alpine ports: - 6379:6379 volumes: - redis_data:/data command: redis-server --appendonly yes volumes: mysql_data: redis_data:4.2 性能调优实战通过JMeter压力测试发现的性能瓶颈及解决方案健康档案查询慢问题联合查询5张表时响应时间2s解决添加复合索引 引入Caffeine本地缓存Cacheable(value medicalRecord, key #patientId) public MedicalRecord getRecord(Long patientId) { // 数据库查询逻辑 }图片上传超时问题大尺寸医疗影像上传失败优化前端采用分片上传每片2MB后端使用阿里云OSS直传签名Nginx调整client_max_body_size为50MWebSocket连接数限制问题默认的Tomcat线程数限制调整# application.properties server.tomcat.max-threads200 server.tomcat.accept-count1005. 医疗数据安全实践5.1 敏感信息加密方案根据《医疗卫生机构网络安全管理办法》要求实施以下安全措施身份证号加密存储public class AesEncryptor implements AttributeConverterString, String { private static final String KEY your-256-bit-secret; private static final String ALGORITHM AES/GCM/NoPadding; Override public String convertToDatabaseColumn(String attribute) { // 实现AES加密逻辑 } Override public String convertToEntityAttribute(String dbData) { // 实现AES解密逻辑 } } Entity Table(name patient_info) public class Patient { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Convert(converter AesEncryptor.class) private String idCardNumber; }5.2 审计日志实现关键操作审计日志表设计CREATE TABLE sys_audit_log ( id BIGINT NOT NULL AUTO_INCREMENT, user_id BIGINT COMMENT 操作人ID, operation VARCHAR(50) NOT NULL COMMENT 操作类型, method VARCHAR(200) COMMENT 请求方法, params TEXT COMMENT 请求参数, ip VARCHAR(50) COMMENT IP地址, status TINYINT COMMENT 操作状态(0-失败,1-成功), error_msg TEXT COMMENT 错误信息, operation_time DATETIME NOT NULL COMMENT 操作时间, PRIMARY KEY (id), KEY idx_user (user_id), KEY idx_time (operation_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT系统审计日志表;通过AOP实现日志记录Aspect Component Slf4j public class AuditLogAspect { Autowired private AuditLogService logService; Around(annotation(auditLog)) public Object around(ProceedingJoinPoint joinPoint, AuditLog auditLog) throws Throwable { // 获取方法签名和参数 MethodSignature signature (MethodSignature) joinPoint.getSignature(); String methodName signature.getMethod().getName(); Object[] args joinPoint.getArgs(); // 构建日志对象 AuditLogEntry entry new AuditLogEntry(); entry.setOperation(auditLog.value()); entry.setMethod(methodName); try { Object result joinPoint.proceed(); entry.setStatus(1); return result; } catch (Exception e) { entry.setStatus(0); entry.setErrorMsg(e.getMessage()); throw e; } finally { logService.saveLog(entry); } } }医疗系统的开发过程中最大的体会是必须平衡功能需求与合规要求。例如在实现数据共享功能时我们最终采用了前端聚合权限过滤的方案而不是直接开放数据库接口这样既满足了多科室协作需求又避免了敏感数据泄露风险。