基于Django+Vue的儿童疫苗接种管理系统开发实践

1. 项目背景与核心需求

儿童疫苗接种管理一直是社区医疗服务的重点难点。传统纸质登记方式效率低下，家长经常面临排队时间长、信息不对称等问题。我们团队开发的这套系统采用Python+Django作为后端，Vue.js构建前端，实现了疫苗预约、接种记录管理、数据统计等核心功能。

这个系统主要解决三个痛点：

• 家长端：随时查看疫苗库存、在线预约、接收提醒
• 医护端：批量导入疫苗、智能排期、接种记录管理
• 管理端：数据可视化分析、接种率统计、异常预警

2. 技术架构设计

2.1 后端技术选型

我们最终选择Django而非Flask作为主要框架，主要基于以下考量：

1. ORM支持：Django自带的ORM对疫苗库存、用户信息等结构化数据管理更友好
2. Admin后台：内置的Admin系统可快速搭建医护人员管理界面
3. 安全性：CSRF防护、XSS防护等开箱即用的安全特性
4. 扩展性：使用Django REST framework构建API接口

关键依赖包：

# requirements.txt核心部分 Django==4.2 djangorestframework==3.14 django-cors-headers==3.14 mysqlclient==2.1

2.2 前端技术栈

Vue 3组合式API带来更好的开发体验：

• Element Plus：构建管理后台界面
• Vue Router：实现多级路由嵌套
• Axios：处理API请求
• ECharts：数据可视化展示

典型页面组件结构：

src/ ├── views/ │ ├── parent/ # 家长端页面 │ ├── doctor/ # 医护端页面 │ └── admin/ # 管理端页面 ├── components/ │ ├── VaccineCard.vue # 疫苗卡片 │ └── Calendar.vue # 预约日历

3. 核心功能实现

3.1 预约排队算法

为解决高峰期并发预约问题，我们设计了双队列机制：

# vaccine/models.py class Appointment(models.Model): STATUS_CHOICES = [ ('P', '待确认'), ('C', '已确认'), ('X', '已取消') ] user = models.ForeignKey(User, on_delete=models.CASCADE) vaccine = models.ForeignKey(Vaccine, on_delete=models.PROTECT) time_slot = models.DateTimeField() status = models.CharField(max_length=1, choices=STATUS_CHOICES) queue_position = models.IntegerField(default=0) class Meta: ordering = ['time_slot', 'queue_position']

后台任务每小时执行队列优化：

# vaccine/tasks.py @shared_task def optimize_queue(): # 获取未来3天的预约 appointments = Appointment.objects.filter( time_slot__range=(now(), now()+timedelta(days=3)) ).order_by('time_slot') # 按时间段分组重新排序 for slot in groupby(appointments, lambda x: x.time_slot): for idx, app in enumerate(slot[1]): app.queue_position = idx app.save()

3.2 接种提醒服务

采用Celery实现三级提醒机制：

1. 预约成功即时通知
2. 接种前3天提醒
3. 接种当天早上提醒

# notification/tasks.py @shared_task def send_reminder(appointment_id): app = Appointment.objects.get(pk=appointment_id) if app.status != 'C': return # 使用腾讯云短信服务 client = sms.Client(secret_id, secret_key) req = sms.SendSmsRequest() req.PhoneNumberSet = [app.user.phone] req.TemplateID = "12345" req.TemplateParamSet = [app.vaccine.name, app.time_slot] client.SendSms(req)

4. 关键问题与解决方案

4.1 高并发预约处理

我们在压力测试时发现，疫苗上新时会出现秒杀场景。最终解决方案：

1. 使用Redis缓存疫苗库存
2. 数据库事务+乐观锁控制
3. 前端加入验证码和人机验证

关键代码片段：

# vaccine/views.py @transaction.atomic def create_appointment(request): vaccine = get_object_or_404(Vaccine, pk=request.POST['vid']) try: with transaction.atomic(): # 检查库存 if vaccine.stock <= 0: raise ValueError('库存不足') # 创建预约记录 app = Appointment.objects.create( user=request.user, vaccine=vaccine, time_slot=request.POST['time'], status='P' ) # 扣减库存 Vaccine.objects.filter( pk=vaccine.pk, stock=vaccine.stock ).update(stock=F('stock')-1) except Exception as e: return JsonResponse({'status': 'error', 'msg': str(e)})

4.2 前后端数据交互

采用DRF的ModelSerializer处理复杂数据关系：

# vaccine/serializers.py class VaccineSerializer(serializers.ModelSerializer): class Meta: model = Vaccine fields = ['id', 'name', 'manufacturer', 'age_range', 'stock'] class AppointmentSerializer(serializers.ModelSerializer): vaccine = VaccineSerializer(read_only=True) class Meta: model = Appointment fields = ['id', 'vaccine', 'time_slot', 'status']

前端使用axios拦截器统一处理错误：

// src/utils/request.js const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.response.use( response => { return response.data }, error => { if (error.response.status === 403) { router.push('/login') } return Promise.reject(error) } )

5. 部署与优化

5.1 生产环境部署

我们使用Docker Compose编排服务：

version: '3' services: web: build: . command: gunicorn core.wsgi:application --bind 0.0.0.0:8000 volumes: - .:/code ports: - "8000:8000" depends_on: - redis - db db: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: password MYSQL_DATABASE: vaccine redis: image: redis:alpine

Nginx关键配置：

location /api { proxy_pass http://web:8000; proxy_set_header Host $host; } location / { root /var/www/html; try_files $uri $uri/ /index.html; }

5.2 性能优化实践

1. 数据库优化：

   • 为常用查询字段添加索引
   • 使用select_related/prefetch_related减少查询次数
   • 定期执行VACUUM和ANALYZE

2. 前端优化：

   • 路由懒加载
   • 组件按需引入
   • 使用Webpack分包策略

3. 缓存策略：

   • 疫苗列表Redis缓存5分钟
   • 使用ETag实现客户端缓存
   • 静态文件CDN加速

6. 开发工具与技巧

6.1 PyCharm高效开发

几个提高效率的技巧：

1. Django模板调试：安装Django插件后支持模板语法高亮和跳转
2. REST Client：内置的HTTP客户端可直接测试API
3. Database工具：可视化管理数据库，支持直接执行Raw SQL
4. 运行配置：为manage.py命令创建专用运行配置

6.2 Vue开发调试

推荐使用的浏览器插件：

• Vue Devtools：检查组件树和状态
• Redux DevTools：调试Vuex状态变化
• Axios DevTools：监控网络请求

调试技巧：在组件中使用debugger语句时，需要关闭Vue的production模式，否则断点不会生效

7. 项目扩展方向

1. 微信小程序接入：通过同一套API支持小程序预约
2. 接种证电子化：对接卫健委系统实现电子接种证
3. 智能推荐：基于儿童年龄自动推荐应种疫苗
4. 数据分析：使用Pandas生成区域接种率报告

核心表结构优化建议：

class VaccinationRecord(models.Model): child = models.ForeignKey(Child, on_delete=models.CASCADE) vaccine = models.ForeignKey(Vaccine, on_delete=models.PROTECT) dose = models.PositiveSmallIntegerField() # 第几剂次 date = models.DateField() batch_number = models.CharField(max_length=50) medical_worker = models.ForeignKey(MedicalWorker, on_delete=models.SET_NULL)

8. 踩坑经验分享

1. 时区问题：Django默认使用UTC时间，需要在settings.py中设置：

   TIME_ZONE = 'Asia/Shanghai' USE_TZ = True

2. 跨域配置：开发环境需要正确配置CORS：

   CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", "http://127.0.0.1:8080" ]

3. 静态文件收集：部署时记得运行：

   python manage.py collectstatic

4. Vue路由模式：使用history模式需要后端配合：

   const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes })

5. 数据库连接池：生产环境建议配置：

   DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'CONN_MAX_AGE': 60, # 连接池 'OPTIONS': { 'connect_timeout': 5, } } }