HRGO1. 智慧社区医疗系统整体架构设计
智慧社区医疗系统采用前后端分离架构，前端使用Vue3构建响应式用户界面，后端采用SpringBoot提供RESTful API服务，Node.js作为中间层处理特定业务逻辑。这种架构设计充分考虑了医疗系统的实时性要求、数据安全性以及用户体验。
1.1 技术栈选型依据
SpringBoot作为后端核心框架具有以下优势：
- 内置Tomcat服务器简化部署
- 自动配置减少XML配置
- 完善的健康检查机制（特别适合医疗系统）
- 与MyBatis/JPA等ORM框架无缝集成
Node.js中间层主要负责：
- 实时消息推送（如挂号提醒、报告通知）
- 文件上传下载服务
- 第三方API对接（医保接口、支付接口）
Vue3作为前端框架的优势：
- Composition API更适合复杂医疗业务逻辑组织
- 更好的TypeScript支持
- 更小的打包体积和更高的运行效率
1.2 系统模块划分
核心功能模块包括：
- 用户认证模块（JWT+RBAC）
- 电子病历管理模块
- 在线问诊模块（WebRTC集成）
- 药品库存管理
- 预约挂号系统
- 健康数据监测（对接智能设备）
- 数据统计与分析
提示：医疗系统开发需特别注意HIPAA或类似医疗数据合规要求，所有接口必须加密传输，敏感数据需要脱敏处理。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 后端SpringBoot实现细节
2.1 项目基础配置
使用Spring Initializr创建项目时需包含：
- Spring Web（RESTful API支持）
- Spring Security（认证授权）
- MyBatis Plus（数据库操作）
- Lombok（简化代码）
- Redis（缓存会话）
关键Maven依赖示例：
xml复制<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3</version>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt-api</artifactId>
<version>0.11.5</version>
</dependency>
2.2 医疗数据模型设计
核心实体关系包括：
- 患者(Patient) ↔ 病历(MedicalRecord) 一对多
- 医生(Doctor) ↔ 排班(Schedule) 一对多
- 药品(Medicine) ↔ 库存(Inventory) 一对一
病历表设计示例：
java复制@Entity
@Table(name = "medical_records")
public class MedicalRecord {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String diagnosis;
@Column(name = "treatment_plan", columnDefinition = "TEXT")
private String treatmentPlan;
@ManyToOne
@JoinColumn(name = "patient_id")
private Patient patient;
// 其他字段和方法...
}
2.3 安全认证实现
医疗系统需要严格的权限控制：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/doctor/**").hasRole("DOCTOR")
.antMatchers("/api/patient/**").hasRole("PATIENT")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
3. Node.js中间层关键实现
3.1 实时通知服务
使用Socket.io实现实时通信：
javascript复制const io = require('socket.io')(server, {
cors: {
origin: "http://localhost:8080",
methods: ["GET", "POST"]
}
});
io.on('connection', (socket) => {
console.log('a user connected');
// 患者预约成功通知
socket.on('appointment', (data) => {
io.to(`doctor_${data.doctorId}`).emit('new_appointment', data);
});
// 检查报告就绪通知
socket.on('report_ready', (data) => {
io.to(`patient_${data.patientId}`).emit('report_notification', data);
});
});
3.2 文件处理服务
医疗系统涉及大量文件上传（检查报告、影像资料等）：
javascript复制const multer = require('multer');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'medical_uploads/');
},
filename: (req, file, cb) => {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});
const upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (!allowedTypes.includes(file.mimetype)) {
return cb(new Error('Invalid file type'));
}
cb(null, true);
},
limits: { fileSize: 10 * 1024 * 1024 } // 10MB限制
});
4. Vue3前端架构设计
4.1 项目初始化与配置
使用Vite创建Vue3项目：
bash复制npm create vite@latest community-medical-system --template vue-ts
核心依赖安装：
bash复制npm install pinia vue-router@4 axios element-plus vue-i18n
4.2 医疗系统特色组件
4.2.1 电子病历编辑器
使用Tiptap构建富文本编辑器：
vue复制<template>
<div class="editor">
<editor-content :editor="editor" />
</div>
</template>
<script setup lang="ts">
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { onMounted, onUnmounted } from 'vue'
const editor = useEditor({
content: '<p>请输入病历内容...</p>',
extensions: [
StarterKit,
],
})
// 自动保存功能
let saveInterval: number
onMounted(() => {
saveInterval = setInterval(() => {
if (editor.value) {
localStorage.setItem('draft_record', editor.value.getHTML())
}
}, 30000)
})
onUnmounted(() => {
clearInterval(saveInterval)
})
</script>
4.2.2 健康数据可视化
使用ECharts展示患者健康指标：
vue复制<template>
<div ref="chart" style="width: 100%; height: 400px;"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref<HTMLElement>()
const initChart = () => {
const myChart = echarts.init(chart.value!)
myChart.setOption({
tooltip: { trigger: 'axis' },
legend: { data: ['血压', '心率', '血糖'] },
xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
yAxis: { type: 'value' },
series: [
{ name: '血压', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] },
{ name: '心率', type: 'line', data: [72, 75, 71, 74, 70, 76, 73] },
{ name: '血糖', type: 'line', data: [5.2, 5.8, 5.0, 5.4, 4.9, 6.0, 5.5] }
]
})
}
onMounted(() => {
initChart()
window.addEventListener('resize', initChart)
})
</script>
5. 系统集成与部署
5.1 前后端联调配置
Vue3代理配置（vite.config.ts）：
typescript复制export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
}
})
5.2 Docker容器化部署
后端Dockerfile示例：
dockerfile复制FROM openjdk:17-jdk-slim
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/app.jar"]
前端Dockerfile示例：
dockerfile复制FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
5.3 性能优化实践
- 数据库查询优化：
java复制// MyBatis Plus查询优化示例
public Page<Patient> searchPatients(PatientQuery query) {
return page(new Page<>(query.getPageNum(), query.getPageSize()),
Wrappers.<Patient>lambdaQuery()
.like(StringUtils.isNotBlank(query.getName()), Patient::getName, query.getName())
.eq(query.getGender() != null, Patient::getGender, query.getGender())
.between(query.getMinAge() != null && query.getMaxAge() != null,
Patient::getAge, query.getMinAge(), query.getMaxAge())
.orderByAsc(Patient::getId)
);
}
- 前端性能优化：
- 路由懒加载
- 组件异步加载
- 使用keep-alive缓存常用组件
- 图片懒加载
6. 医疗系统开发经验分享
6.1 数据安全实践
- 敏感数据加密：
java复制// 使用Jasypt加密敏感字段
@Column
@EncryptedProperty(
value = "medical-records-${random.uuid}",
algorithm = "PBEWithMD5AndTripleDES"
)
private String medicalHistory;
- 审计日志记录：
java复制@EntityListeners(AuditingEntityListener.class)
@Entity
public class MedicalRecord {
//...
@CreatedBy
private String createdBy;
@CreatedDate
private LocalDateTime createdAt;
@LastModifiedBy
private String modifiedBy;
@LastModifiedDate
private LocalDateTime modifiedAt;
}
6.2 常见问题排查
- 跨域问题解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
- 文件上传大小限制：
properties复制# application.properties
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
- Vue3与Socket.io连接问题：
typescript复制// 确保socket.io-client版本兼容
import { io } from "socket.io-client"
const socket = io("http://localhost:3000", {
reconnectionAttempts: 5,
reconnectionDelay: 1000,
autoConnect: false,
transports: ["websocket"]
})
在实际开发中，我们发现医疗系统的表单验证特别复杂，为此创建了专门的验证工具类：
typescript复制// medicalValidator.ts
export const validateMedicalRecord = (record: MedicalRecord) => {
const errors: string[] = []
if (!record.patientId) {
errors.push('必须选择患者')
}
if (!record.diagnosis || record.diagnosis.length < 10) {
errors.push('诊断描述不能少于10个字符')
}
// 更多医疗特定的验证规则...
return errors
}
医疗系统开发中最耗时的部分往往是各种异常情况的处理，特别是与第三方系统（如医保系统）对接时。我们总结的经验是：为每个外部调用设置合理的超时时间，并实现完善的错误重试机制。