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

发布时间:2026/7/29 19:27:58
基于Django+Vue的儿童疫苗接种管理系统开发实践 1. 项目背景与核心需求儿童疫苗接种管理一直是社区医疗服务的重点难点。传统纸质登记方式效率低下家长经常面临排队时间长、信息不对称等问题。我们团队开发的这套系统采用PythonDjango作为后端Vue.js构建前端实现了疫苗预约、接种记录管理、数据统计等核心功能。这个系统主要解决三个痛点家长端随时查看疫苗库存、在线预约、接收提醒医护端批量导入疫苗、智能排期、接种记录管理管理端数据可视化分析、接种率统计、异常预警2. 技术架构设计2.1 后端技术选型我们最终选择Django而非Flask作为主要框架主要基于以下考量ORM支持Django自带的ORM对疫苗库存、用户信息等结构化数据管理更友好Admin后台内置的Admin系统可快速搭建医护人员管理界面安全性CSRF防护、XSS防护等开箱即用的安全特性扩展性使用Django REST framework构建API接口关键依赖包# requirements.txt核心部分 Django4.2 djangorestframework3.14 django-cors-headers3.14 mysqlclient2.12.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_deletemodels.CASCADE) vaccine models.ForeignKey(Vaccine, on_deletemodels.PROTECT) time_slot models.DateTimeField() status models.CharField(max_length1, choicesSTATUS_CHOICES) queue_position models.IntegerField(default0) 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(days3)) ).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实现三级提醒机制预约成功即时通知接种前3天提醒接种当天早上提醒# notification/tasks.py shared_task def send_reminder(appointment_id): app Appointment.objects.get(pkappointment_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 高并发预约处理我们在压力测试时发现疫苗上新时会出现秒杀场景。最终解决方案使用Redis缓存疫苗库存数据库事务乐观锁控制前端加入验证码和人机验证关键代码片段# vaccine/views.py transaction.atomic def create_appointment(request): vaccine get_object_or_404(Vaccine, pkrequest.POST[vid]) try: with transaction.atomic(): # 检查库存 if vaccine.stock 0: raise ValueError(库存不足) # 创建预约记录 app Appointment.objects.create( userrequest.user, vaccinevaccine, time_slotrequest.POST[time], statusP ) # 扣减库存 Vaccine.objects.filter( pkvaccine.pk, stockvaccine.stock ).update(stockF(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_onlyTrue) 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:alpineNginx关键配置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 性能优化实践数据库优化为常用查询字段添加索引使用select_related/prefetch_related减少查询次数定期执行VACUUM和ANALYZE前端优化路由懒加载组件按需引入使用Webpack分包策略缓存策略疫苗列表Redis缓存5分钟使用ETag实现客户端缓存静态文件CDN加速6. 开发工具与技巧6.1 PyCharm高效开发几个提高效率的技巧Django模板调试安装Django插件后支持模板语法高亮和跳转REST Client内置的HTTP客户端可直接测试APIDatabase工具可视化管理数据库支持直接执行Raw SQL运行配置为manage.py命令创建专用运行配置6.2 Vue开发调试推荐使用的浏览器插件Vue Devtools检查组件树和状态Redux DevTools调试Vuex状态变化Axios DevTools监控网络请求调试技巧在组件中使用debugger语句时需要关闭Vue的production模式否则断点不会生效7. 项目扩展方向微信小程序接入通过同一套API支持小程序预约接种证电子化对接卫健委系统实现电子接种证智能推荐基于儿童年龄自动推荐应种疫苗数据分析使用Pandas生成区域接种率报告核心表结构优化建议class VaccinationRecord(models.Model): child models.ForeignKey(Child, on_deletemodels.CASCADE) vaccine models.ForeignKey(Vaccine, on_deletemodels.PROTECT) dose models.PositiveSmallIntegerField() # 第几剂次 date models.DateField() batch_number models.CharField(max_length50) medical_worker models.ForeignKey(MedicalWorker, on_deletemodels.SET_NULL)8. 踩坑经验分享时区问题Django默认使用UTC时间需要在settings.py中设置TIME_ZONE Asia/Shanghai USE_TZ True跨域配置开发环境需要正确配置CORSCORS_ALLOWED_ORIGINS [ http://localhost:8080, http://127.0.0.1:8080 ]静态文件收集部署时记得运行python manage.py collectstaticVue路由模式使用history模式需要后端配合const router createRouter({ history: createWebHistory(process.env.BASE_URL), routes })数据库连接池生产环境建议配置DATABASES { default: { ENGINE: django.db.backends.mysql, CONN_MAX_AGE: 60, # 连接池 OPTIONS: { connect_timeout: 5, } } }