摘要：文章针对新冠疫情下社区人员活动管理不规范，信息化程度不高等问题，采用前后端分离的开发模式，基于Vue+SpringBoot两个成熟的框架，构建了防疫信息和疫情地图信息数据库，设计并实现了基于B/S架构的以防控疫情为主题的社区人员管理系统。系统功能涵盖用户基本信息、健康码、行程卡、核酸信息以及隔离用户管理全过程，并基于高德地图API实现确诊人员与风险区的疫情分布地图直观展示功能。系统界面友好，便于操作，功能丰富，可用于辅助社区疫情防控，有效提高疫情防控的效率。
关键词：新冠疫情;Vue;SpringBoot;前后端分离;社区管理;
Abstract：Aiming at the problems of nonstandard community personnel activity management and low information level under the COVID-19, this paper uses the development mode of front and rear end separation, based on the Vue + SpringBoot two mature frameworks,builds the epidemic prevention information and map information database, designs and implements community personnel management system based on B/S architecture which takes the epidemic prevention and control as the theme. The functions of the system cover the whole process of user basic information, health code, travel card, nucleic acid information and the management of isolated users, and realize the visual display function of epidemic distribution map of confirmed patients and risk areas based on Amap API. The system has friendly interface, easy operation and rich functions, which can be used to assist community epidemic prevention and control and effectively improve the efficiency of epidemic prevention and control.
Keyword：COVID-19; Vue; SpringBoot; front and rear end separation; community management;
0 引言
2020年爆发的新冠肺炎疫情，作为重大突发公共卫生事件，给全世界人民带来了沉重的灾难。如今疫情已经得到一定程度控制，公众的渴望恢复工作和生产的需求已经非常迫切，使得中国面临“移动治理”的困境，这不仅需要有效的预防和控制疫情，但也要平衡正常流动人口和恢复工作和生产[1]。
肖永平在2019年开发了疫情监测和上报管理系统，解决了传统手工操作造成的漏报、误报、迟报等问题[2]。夏婉等人在2020年实现了疫情环境下的智慧社区管理系统。减轻了社区工作者的工作负担，满足了居民的生活需求，完成了卫生收集工作，提高了社区工作效率，具有良好的应用前景[3]。以GIS为基础，张良等人在2020年开发了宁波市新冠肺炎疫情管理系统，实现了宁波市新冠肺炎病例的定位与展示，并绘制了疫情风险评估“五色图”，为疫情防控提供了有力的信息化技术保障[4]。上述研究在疫情防控管理方面均取得了一定的成效，随着疫情发展的复杂变化及防控工作的深入开展，当前存在的主要问题包括：系统功能比较单一，以后的功能的延伸比较困难。只是单单一些信息的管理，没有进行疫情地图相关的拓展。本文基于Vue+Spring Boot两个成熟的框架，集成高德地图，开发实现了基于B/S架构的以防控疫情为主题的社区人员管理系统，用于辅助社区疫情防控，有效提高疫情防控的效率。
1 系统需求分析
在本次新冠疫情防控中，互联网、大数据、云计算、移动通信、人工智能等数字技术在其中扮演着举足轻重的角色。在数字技术的驱动之下，数字时代的协同治理是提升新冠疫情防控能力的关键[5]。
疫情防控中健康码、行程卡、核酸检测、风险区管控以及确诊患者和密接人员的途经信息的及时共享起了巨大作用。但是这些关键的信息并不能及时上报以及共享。风险区域和确诊患者信息的共享还不够迅速，以及疫情地图的应用还不够全面。疫情防控相关信息共享的速度还有很大的提升空间，需要建立有效的智能管理系统，用来辅助疫情的防控[6]。
2020年习近平总书记在北京市朝阳区调研指导新型冠状病毒肺炎疫情防控工作时强调：“社区是疫情联防联控、群防群治的第一线，也是外防输入、内防扩散最有效的防线。把社区这道防线守住，就能有效切断疫情扩散蔓延的渠道[7]。”在社区疫情防控中，防疫信息的管理发挥出了不容忽视的作用。常态化疫情防控下社区档案的应用有助于提供决策参考依据；有助于降低疫情传播风险；有助于提升社区治理水平。常态化疫情防控下社区档案管理中存在的问题：社区档案受重视程度有待加强；社区档案的质量有待提高；社区档案信息化水平有待提升[8]。
2 系统架构设计
本系统运用前后端分离的MVVM软件架构设计模式，采用B/S系统构架，后端使用目前主流的框架Spring Boot，并通过My Batis-Plus访问My SQL数据库，采用Vue.js框架完成前端的搭建，能够更好地处理页面交互和逻辑，系统具有运算速度快、操作更简单、易于统一维护、扩展性强等特点。在前端使用了Element UI框架，使得系统具有更好的界面和数据展示。随着业务需求的发展，对前端有了更高的要求，采用前后端分离的设计方式，使得前后端相互独立，更好的满足了业务的需求。在前后端分离的应用程序中，后端只需返回前端所需的相应数据，用户会有怎样的视觉效果，以及从后台端发出的数据，都是由前端来决定的，而后端只需要负责在前端发送请求之后，负责处理业务逻辑，返回一套相应的数据。分工明确，术业有专攻，有效的提高了开发的效率[9]。
系统整体框架如图1所示，为三层体系结构，主要包括：
（1）据层主要负责数据库表的操作：数据层描述了系统的数据存储的内容类型，持久化的业务数据使用My SQL保存。
图1 系统架构图
（2）后端主要关注数据处理和业务逻辑：包括数据持久层、服务层、控制层。数据持久层负责与数据库交互，向数据库发送SQL语句，完成数据的增删改查任务。服务层的作用为完成功能设计，服务层调用数据持久层接口，接收持久层返回的数据，完成项目的基本功能设计[10]。控制层调用业务层方法来控制业务逻辑，控制层的功能为请求和响应控制[11]；控制层负责前后端交互，接受前端请求，调用服务层，接收服务层返回的数据，最后返回具体的页面和数据到客户端[12]。
（3）前端主要负责用户界面交互与数据通信：用户使用浏览器访问前端Web应用，使用Element UI框架完成界面设计，通过Vue框架完成系统前端的构建，通过Vue-router完成路由管理、使用Vue X统一管理和维护各个vue组件的可变化状态，采用Axios请求同后端控制层进行数据通信[13]。
图2 功能设计
3 系统功能设计与实现
面对社区人员功能设计本着操作简便的宗旨，但是又拥有核心功能。与普通社区人员相比，社区管理员拥有全部功能，具体功能设计如图2所示。
面向社区人员我们设计了两大功能模块，有信息上传和疫情地图浏览查看。信息上传功能模块主要包含健康码、行程卡、核酸检测、疫苗接种相关信息的上传。该功能实现的目的是为了普通用户配合管理员完成信息管理。疫情地图浏览查看是我们提供给普通用户的一项服务，普通用户可以直观的在地图上浏览到疫情扩散情况和各个风险区的分布情况。
（1）相比于普通用户，管理员的功能十分全面。主要分为四个部分登录和注册功能，管理员与普通用户不同，权限越大责任也就越大，管理员需要注册登录才能进入系统主页[14]。
（2）基本功能，主要是数据的增删改查、分页显示、文件上传。
（3）信息管理功能，通过集成一些基本功能，实现对用户基本信息、健康码、行程卡、核酸检测、疫苗接种、隔离管理相关信息的管理。
（4）疫情地图功能，通过对确诊人员和风险区的管理从而实现动态疫情地图，可以直观的在地图上观察到疫情扩散情况和各个风险区的分布情况。
3.1 基本功能
注册功能是针对管理员设计的，可以通过输入用户名、密码、再次输入密码，进行注册。注册成功直接跳转到登录页面。社区人员无需登录，可直接跳转。社区管理员通过账号密码登录，登录成功直接跳转到系统主页。
新增信息：新增信息功能主要通过调用add方法，在form表中填写相关信息，然后调用save方法，发送put/post请求，后台接受请求，存储相应的数据，从而实现对数据的添加。
信息删除：信息删除功能主要通过调用handle Delete方法，发送delete请求，后台接受请求完成相应信息删除的操作，从而实现对数据的删除。
信息编辑：信息编辑功能主要通过调用handle Edit方法，重新输入需要编辑的信息即可实现对数据的修改[15]。
信息查询及分页显示：查询功能可以设置不同的字段，这里使用的是username（姓名），查询功能主要通过调用load方法，发送get请求，通过姓名进行模糊查询，返回符合条件的数据。在此基础上本系统使用了分页插件实现了分页显示，可以控制每页合适的显示信息数量。
3.2 社区人员信息管理
3.2.1 社区人员防疫信息上传
社区人员可直接登录，拥有的功能有信息上传、疫情地图。社区人员可以进行健康码、行程卡、疫苗接种信息、核酸检测信息及相关信息的上传。除此之外还提供了文件上传功能，在用户新增或编辑信息时，可上传相关的文件，例如健康码截图，等等。社区人员完成信息上传之后，会在社区管理员对应的界面有相应的展示。
信息管理流程如图3所示，社区人员可以在浏览器完成信息的上传，前端发送请求，后台接受请求，将数据存储到My SQL数据库。后台调取数据库中的数据返回给前端，前端完成数据渲染，将信息展示在社区管理员的浏览器中。
图3 信息上传
3.2.2 社区管理员防疫信息管理
管理员可以在系统上对社区人员的防疫相关信息进行管理。主要对社区人员的基本信息、健康码、行程卡、核酸检测、疫苗接种、密接人员等信息进行了管理。如图4所示，以行程卡相关信息管理为例，集成了增删改查、文件上传、分页显示等一些基本功能，实现了对行程卡相关信息的管理，可以直观的看到社区人员的行程卡相关信息，显着提高了防疫信息管理的效率。
图4 信息管理
3.2.3 基于高德地图API实现了疫情地图
本文基于高德地图API实现了疫情地图相关功能，直观的展示出疫情扩散情况和各个风险区的分布情况。社区人员管理系统集成了一些基本功能实现了对确诊患者的居住信息和中、高风险区信息的管理，除了基本信息之外，还有患者居住地的地址以及经纬度坐标信息的管理。社区管理员可以使用增、删、改、查这些基本功能完成对确诊患者以及中、高风险区信息的管理。确诊患者信息管理如图5所示。
在社区管理员完成对确诊患者、中高风险区信息的编辑之后，前端发送get请求，后台接受get请求并调取数据库里已经编辑过得确诊患者的数据，并返回到前端。前端通过后台返回的数据，集成高德地图，完成数据渲染，在浏览器中，直观的展示出疫情扩散情况和各个风险区的分布情况。疫情地图实现流程如图6所示。
图5 确诊患者信息管理
图6 疫情地图实现流程图
通过对确诊人员和风险区的信息管理从而实现动态疫情地图，可以直观的在地图上观察到疫情扩散情况和各个风险区的分布情况，疫情地图-确诊人员实现如图7所示。
4 结论
社区是疫情联防联控、群防群治的第一线，也是外防输入、内防扩散最有效的防线。在社区疫情防控中，社区人员防疫信息管理发挥出了不容忽视的作用。目前存在着社区人员活动管理不规范，社区档案管理信息化程度不高等问题。本文结合当前新冠疫情防控背景，针对上述问题，应用了较为流行的Vue、Spring Boot框架，设计并实现了新冠疫情下社区人员管理系统。本系统界面友好，操作简便，功能丰富，可用于辅助社区疫情防控，有效的改善了新冠疫情下社区人员活动管理不规范，社区档案管理信息化程度不高等问题，有效的提高疫情防控的效率。
图7 疫情地图
参考文献
[1]习近平在中央政治局常委会会议研究应对新型冠状病毒肺炎疫情工作时的讲话[J].先锋2020（2):4-8.
[2]肖永平.疫情监测与上报管理系统的设计与实现[J]中国医疗设备, 2019,34（2):103-106+115.
[3]夏婉，李全,张晶晶疫情下智慧社区管理系统构建[J].信息技术与信息化, 2020（8):67-70.
[4]张良,郑高峰，李宁,等GIS助力新冠肺炎疫情防控[J].中国数字医学, 2020,15（5)-99-101.
[5]郭芳芳.新冠疫情防控的数字协同治理研究[D].金华:浙江师范大学, 2021.
[6]颜强韩亦舜. 网络与数据技术助力新冠肺炎疫 情防控[J].中国国情国力，2020（6):50-52.
[7]赵滟.新型冠状病毒肺炎疫情防控与社区健康档案管理水平提升研究[J].北京档案，2020（6):28-30.
[8]杨倩青常态化疫情防控下社区档案管理工作的几点思考[J].北京档案, 2022（5):42-43.
[9]王建，罗政,张希,等.Web项目前后端分离的设计与实现[J]软件工程, 2020.23（):22-24.
[10]刘柯言，党佳伟,郑蕊蕊,等满文档案图像智能处理系统设计与实现[J].大连民族大学学报, 2022,24（1):75-81+87.
[11]肖文娟,王加胜基于Vue和Spring Boot的校园记录管理Web App的设计与实现[J].计算机应用与软件, 2020,37（4).25 30+88.
[12]徐小辉，刘江涛,高涵，等.基于Spring Boot+Vue框架的采4气访案系统开发[J].计算机仿真, 2021,38（6):248-250+382 .
[13]崔东旭,汤成丹.“师生互动教学管理系统”的设计与实现[J].信息技术与信息化, 2019（6):137-139.
[14]曹明昊基于Spring Boot和Vue框架的邯郸市现代农业园区信息管理系统的研发[D].邯郸:河北工程大学，2021:52-55.
[15]田海晴基于SpringBoot和Vue框架的共享运营管理平台的设计与实现[D].济南:山东大学, 2020.
