校园疫情防控平台的设计与实现

李志鸿，李金忠，肖延龙，钟鸣山，周先亮，邹聪波

校园疫情防控平台的设计与实现

李志鸿，*李金忠，肖延龙，钟鸣山，周先亮，邹聪波

（井冈山大学电子与信息工程学院，江西，吉安 343009）

通过采用当下主流的框架技术，包括SpringBoot、Vue和Uni-App等前后端框架和Apache ECharts、MySQL、Flyway和Redis数据库等技术，以及Stylefeng开源技术、Selenium动态爬取技术、JWT和Shiro安全验证技术，设计和实现了一个校园疫情防控平台。该平台细分为五大子系统，分别为电脑端疫情信息管理、电脑端智疫图数据展示、电脑端疫情知识题库与刷题、手机端疫情信息上报和手机端疫情信息管理适配系统。多端多系统的设计正是为了适应高校防疫的多样性，本平台可高效应对高校的疫情防控。本平台各系统操作简单、管理高效、易于维护、具有较高的安全性。

校园疫情防控；SpringBoot框架；Uni-App框架；Vue框架；ECharts可视化图表库

0 引言

2003年的“非典型肺炎”和2019年的“新型冠状病毒肺炎”疫情都展现了流行性传染病的强传染性，那么如何去控制与预防传染病的传染成为防控传染病的关键。针对新冠肺炎疫情防控，目前已有一些优秀的软件，如健康码、支付宝疫情上报、全球疫情服务等。当前，有些开发者针对省市或者学校等地开发了专有的新冠肺炎疫情防控方面的系统，例如蔡磊等[1]设计与实现了北京市新冠肺炎疫情信息平台，许业辉[2]设计与实现了福建省新冠肺炎疫情动态分析系统，郑菲等[3]设计与实现了校园疫情防控可视化平台。目前，市面上针对校园疫情防控方面的系统或软件不多，而具有多端多系统的平台相对更少。

为了满足现在或将来校园流行性传染病的预防的需求，拟开发一款具有多端多系统的“校园疫情防控平台”软件以更便捷地采集有关疫情信息，宣传疫情防控相关知识和资讯，将每日上报的个人身体健康信息可视化，将活动路线可视化以用于疫情应急处理，并运用数据挖掘、数据分析技术将疫情相关信息进行展示。

本平台采用科学有效的方式以及流行技术框架来应对现在或是未来流行病的预防和传播，并充分运用阿里云数据库等现代信息技术，深化数据支撑，让数据“动”起来、“跑”起来、“实”起来，进一步提升疫情防控的科技含量和效能效用。本平台是结合现代软件开发技术而实现的一款适合校园的疫情防控系统，它借助可视化技术将数据更为直观地展示出来，同时借助疫情知识题库模块提高师生的疫情知识，更有效地进行符合校园疫情防控工作。

1 开发环境与技术介绍

校园疫情防控平台软件采用Tomcat 9和MySQL5.6作为服务器和数据库，开发平台借助于Android与Windows平台，选择C/S开发模式，前端采用Uni-App开发界面，后端采用基础开发框架SpringBoot+SpringMVC+MyBatis，开发环境为JDK8，开发工具采用IntellJ IDEA和Visual Studio Code，继承Shiro,Redis等技术，项目代码交由git管理。

SpringBoot框架是一个可以快速构建生产级别的Spring应用程序，其AOP和IOC有着突出优势，使得Java Web程序解耦，能优雅、高效地开发应用程序[4]。

Vue框架[5]是一套用于构建前端用户界面的渐进式框架，兼具React和Angular优点。Vue是基于数据驱动和组件化思想构建前端页面，采用自底向上渐进式增量开发的设计。Vue的核心库只关注视图层，提供了更加轻量级、容易理解的API，具有简单和易于上手的优点。

Uni-App框架[6]是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）以及各种小程序、快应用等多个平台。Uni-App在App端可以使用绝大多数的小程序相关的API，同时App端内置weex引擎，提供了原生渲染能力。它还提供了条件编译策略，可在一个工程里优雅地完成平台个性化的实现[7]。Uni-App在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势[6]。

Apache Echarts框架[8]是一个基于JavaScript的开源可视化图表，可以流畅地运行在 PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。ECharts[9]是一个开源的、基于网络的、跨平台的、支持快速构建交互式可视化的框架，具有易于使用，丰富的内置交互以及高性能的特性。它的核心是一套用于定制内置的图表类型的声明式可视化设计语言，其底层的流架构以及基于HTML5画布的高性能图形渲染器使得ECharts具有高扩展性和高性能。

2 平台设计

2.1 平台框架结构设计

本平台基于Spring Boot、guns框架搭建后端，Vue、ECharts框架和Uni-App技术设计前端，MySQL数据库存储数据，基于Java Shiro以及JWT框架进行登入安全验证以保证用户的信息安全。本平台分为表现层、控制层和持久层，各层之间的通信通过相应的接口编程实现，其框架结构如图1所示。

图1 平台框架结构图

2.2 平台功能架构设计

校园疫情防控平台包括PC端和移动端的两端系统。PC端（即电脑端）主要功能有疫情信息管理、智疫图数据展示、疫情知识题库与刷题，移动端（即手机端）主要功能有疫情信息管理适配和疫情信息上报。电脑端疫情信息管理子系统负责用户和管理员信息的管理、疫情信息的管理，可以通过用户管理功能来分配角色，重置密码等，也可通过角色管理来修改角色等级或状态。电脑端智疫图数据展示子系统主要负责对电脑端信息管理模块存储的用户信息和疫情信息等进行智能展示，通过图形、表格等多种方式展示疫情数据。电脑端疫情知识题库与刷题子系统为用户提供大量的相关疫情知识的题目，并提供顺序刷题、乱序刷题、错题重刷的刷题方式，用户可对疫情知识题库选择适合自己的方式进行刷题。手机端信息管理适配子系统负责将电脑端的信息管理系统适配到手机端显示，为此，疫情信息管理子系统可流畅且友好地运行在PC端和移动端。手机端疫情信息上报子系统的设计旨在方便高校用户上报疫情相关信息，帮助高校用户掌握实时疫情状况，为此设计信息添加、信息搜索、相关新闻、信息图表等功能。高校用户可在信息添加中上报自己的个人疫情信息，信息搜索中搜索相关用户的疫情信息，相关新闻中查阅相关疫情新闻，信息图表中直观地分析疫情实时状况。校园疫情防控平台的整体功能架构如图2所示。

图2 平台功能架构设计图

2.3 数据库设计

根据平台功能架构设计，确定本平台包括的基本实体及实体关系，从而确定本平台各子系统所需设计的数据库。本平台主要包括疫情信息管理数据库、疫情信息上报云数据库和疫情知识题库，其中疫情信息管理数据库结合FlyWay数据库控制技术进行控制，内含28张表，表1展示了该库中的主要表；疫情信息上报云数据库存储了疫情的上报信息，表2展示了该库中各表；疫情知识题库存储了与疫情相关的知识题目，表3展示了该库中的各表。

表1 疫情信息管理数据库中的主要表

Table 1 Main tables in the epidemic information management database

表名主键描述 sys_rolerole_id角色信息表（主要字段：角色序号（主键）、角色姓名、角色代码、状态标志、更新时间、更新用户、创建用户等），其中，角色序号需从小到大排序， 更新时间必须满足YYYY-MM-DD格式。 sys_role_data_scoperole_data_scope_id机构信息表（主要字段：角色数据生命期序号（主键）、角色序号（外键）、创建时间、创建用户、更新时间、更新用户、组织序号等），其中，角色数据生命期序号需从小到大排序，创建时间必须满足YYYY-MM-DD格式。 sys_role_menurole_menu_id角色菜单信息表（主要字段：角色按钮序号（主键）、角色序号（外键）、按钮序号、按钮代码、创建时间、创建用户、更新时间、更新用户等），其中，角色按钮序号需从小到大排序，创建时间必须满足YYYY-MM-DD格式。 sys_role_menu_buttonrole_menu_button_id角色菜单按钮表（主要字段：角色菜单序号（主键）、角色序号（外键）、菜单序号、创建时间、创建用户、更新时间、更新用户等），其中，角色菜单序号需从小到大排序，更新用户需从状态0、1选择。 sys_role_resourcerole_resource_id角色资源信息表（主要字段：角色资源序号（主键）、角色序号（外键）、资源代码、创建时间、创建用户、更新时间、更新用户等），其中，角色资源序号需从小到大排序，创建用户需从状态0、1选择。 sys_useruser_id用户信息表（主要字段：用户序号（主键）、真实名字、昵称、账号、密码、生日、性别、邮箱、手机、电话、登录ip、最近登录时间等），其中，生日必须满足YYYY-MM-DD格式，手机为11位十进制数，邮箱为需合法的邮箱格式。 sys_user_data_scopeuser_data_scope_id用户数据表（主要字段：用户数据生命期序号（主键）、用户序号（外键）、组织序号、创建时间、创建用户、更新时间、更新用户等），其中，用户数据生命期序号需从小到大排序。

表2 疫情信息上报云数据库中各表

Table 2 Each table of the epidemic information reporting cloud database

表名主键描述 memberMember_id成员表（主要字段：随机序号（主键）、登录时间、状态、身份证类型、身份证号码、姓名、手机号码、年龄、性别、国家、地址），其中，身份证号码为18位存储字长，年龄Int类型的取值不超过150，手机号11位。 member_listmember_list_id成员列表（主要字段：随机序号（主键）、身份证类型、体温、现地址、是否去过高风险地区、成员序号、是否去过风险地区、身体状况），其中，成员序号唯一，体温不超过 43摄氏度。 useruser_id用户表（主要字段：随机序号（主键）、用户名、密码、加密令牌），其中，用户名唯一，密码必须包括大小写字母以及数字下划线，加密令牌随机。

表3 疫情知识题库中各表

Table 3 Each table of the epidemic Knowledge database

表名主键描述 libi_id题目表(主要有以下字段：题目序号（主键）、类型、问题、A项、B项、C项、D项、E项、F项、答案、难度），其中，序号字段需从小到大排序,答案字段必须为限定的大写字母，如：A、B、C、D等,难度字段必须为简单、中等、困难中选择。 errorid错误表（主要有以下字段：序号（主键）、用户序号（外键）、题目序号（外键）、最新错误答案、错误数量、标记、标志。），其中，序号字段需从小到大排序,最新错误答案字段必须为定的大写字母，如：A、B、C、D,错误数量字段必须为正整数且小于题目数量。 useru_id用户表（主要有以下字段：用户序号（主键）、用户姓名、密码、手机号、邮箱、性别、上一题、问题数量、错误问题数量、最近登录时间），其中，手机号为11位十进制数,邮箱为需合法的邮箱格式，性别只能为男、女,最近时间必须满足YYYY-MM-DD格式。

3 平台各子系统的主要功能实现

校园疫情防控平台是一个包括PC端和移动端的多端多系统，主要分为电脑端疫情信息管理、电脑端智疫图数据展示、电脑端疫情知识题库与刷题，手机端疫情信息管理适配、手机端疫情信息上报5个子系统，各子系统主要功能实现如下所述。

3.1 电脑端疫情信息管理

电脑端疫情信息管理用于对疫情信息的处理，可辅助管理员处理高校学生用户的相关疫情信息，包括主控面板、用户权限管理、基础数据、系统功能、通知管理、监控管理等功能，如图3所示，其中用户权限管理是基于角色的访问控制（Role-Based Access Control，RBAC）[10]管理权限的，通过权限管理为电脑端疫情信息管理的角色设计提供扩展的功能。

图3 疫情信息管理界面

3.2 电脑端智疫图数据展示

电脑端智疫图数据展示子系统中的数据与疫情信息管理子系统中的数据互通，结合Echarts 数据可视化技术进行动态渲染，其界面如图4 所示，该图中间为基于本省地理位置信息进行动态数据展示，顶部Tab栏为本校基本人员信息，包含在校学生数、在校职工数，左Tab 栏内容分别为学院人数分布的柱状图表示、疫情变化的折线图表示、学院年龄分布的饼状图表示，右Tab栏分别为周围省份的疫情信息柱状图、进出省折线图、江西地区分布柱状图。

图4 智疫图数据展示界面

3.3 电脑端疫情知识题库与刷题

电脑端疫情知识题库与刷题子系统旨在通过疫情信息相关题目加深用户对疫情知识的了解，提高用户对疫情的防范意识，其界面如图5所示。该系统核心模块为“疫情知识题目爬取”与“疫情知识刷题”模块。对于“疫情知识题目爬取”模块，采用Python爬虫爬取网络上公开的疫情知识题目，调用selenium库，模拟浏览器访问远程服务器，根据远程服务器返回的资源，分析提取疫情题目，使用MySQL数据库存取疫情题目，最后由后台代码调用数据库，渲染页面。对于“疫情知识刷题”模块，提供顺序刷题、随机刷题和错题重刷方式，其中随机刷题利用rand函数产生一个伪随机数，调用对应接口从疫情题库中随机查出十条疫情题目记录。

图5 疫情知识题库与刷题系统界面

3.4 手机端疫情信息管理适配

手机端疫情信息管理适配子系统是基于LayUI[11]进行适配，这是一种弹性布局的实现方式，其实现思路主要是使用Meta属性进行适配，根据屏幕宽度设置html标签的font-size。在布局时使用Rem单位布局，达到自适应的目的。其实现过程是：首先获取文档根元素和设备dpr，设置Rem，在html文档加载和解析完成后调整body字体大小；其次，在页面缩放/回退/前进的时候，获取元素的内部宽度(不包括垂直滚动条，边框和外边距)，重新调整Rem大小。

3.5 手机端疫情信息上报

手机端疫情信息上报子系统登入验证运用Promise构造函数，并且传入两个参数resolve和reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。手机端疫情信息上报子系统采用Layout布局，使用正则判断逻辑登入，登入模块界面设计主体为用户名与密码以及登录按钮。手机端疫情信息上报界面设计简洁，且对用户更加友好、易于操作，其界面如图6所示。

图6 手机端疫情信息上报界面

手机端疫情信息上报子系统主要包括云数据库存储信息、基于 axios的请求拦截器和响应拦截器、Fetch响应结果等的设计与实现，阐述如下。

（1）云数据库存储信息

基于阿里云云数据库Cloudfunctions，同步云端函数列表，其中云函数分别有：add-member、change-pwd、chart-member-list、count-member-list、creater-user、export、get-data、login、Member-detail、member-list、serach、validateToken。

（2）基于 axios 的请求拦截器

对发送请求前做如下配置信息：

（3）基于 axios 的响应拦截器

获取数据前对数据做如下加工处理：

（4）Fetch 响应结果

使用fetch函数来获取数据以产生Fetch响应结果，如果响应正常返回，首先看到一个response对象，其中包括返回的一堆原始字节，这些字节在收到后，需通过调用方法将其转换为相应格式的数据，比如json，blob或者text等，其中text()函数将返回体处理成字符串类型,json()返回结果和JSON.parse(responseText) 一样，其实现的关键代码如下：

4 总结与展望

为了助力高校在疫情大流行的情况下能高效防控疫情，设计和实现了一个多端多系统的校园疫情防控平台。该平台使用SpringBoot、Vue、Uni-App等框架开发，采用基于JavaScript的开发可视化图表库Apache ECharts、Python selenium动态爬取数据、JWT+Shiro权限认证、Nginx反向代理等技术以及MySQL与Redis缓存数据库。校园疫情防控平台通过多端多系统使得用户可简单高效地助力高校疫情防控。

校园疫情防控平台的特色主要体现在：（1）这是一套专门为高校疫情防控而设计和开发的多端多系统。（2）该平台通过可视化的图表方式以提高高校的疫情防控的智慧性和效率。（3）实现该平台中各端各子系统的技术较前沿和新颖。

我们设计的校园疫情防控平台已通过了压力测试、速度测试，该平台可支持多位用户并发使用，但未在高校推广，未体验高并发下的真实使用。后期将会寻求高校合作，测试高并发下系统的运行情况，同时从用户的使用反馈中不断完善该系统，给用户带来更友好、更流畅的使用体验。

本系统仍在不断完善功能的开发中，后期将推出以下功能：（1）行动轨迹记录功能。通过该功能可获取用户的位置权限，调用百度地图和高德地图接口以绘制用户近期的活动路线和轨迹，为后台疫情信息管理系统提供数据支撑。（2）风险等级评定功能。该功能从手机端采集的疫情数据，根据风险程度，评定为无风险，低风险、中风险、高风险、严重风险这五个等级。（3）应急处理方案功能。该功能为高校管理员提供应急处理方案功能参考，由此更高效地应对高校疫情防控。

[1] 蔡磊,张冲,刘永轩,等.北京市新冠肺炎疫情信息平台的设计与实现[J].北京测绘,2021,35(2):270-274.

[2] 许业辉.福建省新冠肺炎疫情动态分析系统的设计与实现[J].现代测绘,2020,43(3):45-48.

[3] 郑菲,陈晓凤,齐世玲,等.校园疫情防控可视化平台设计与实现[J].电脑知识与技术, 2021,17(20):69-71,77.

[4] 陈瑞. 基于Springboot高并发Java Web开发模式[J].电脑编程技巧与维护,2019(4):27-30.

[5] 陶琳. 基于Spring Boot和Vue框架的高校实验室耗材管理系统的分析与设计[J].电脑知识与技术,2021,17(13):83-85.

[6] DCloud开发者. uni-app开发一次，多端覆盖[EB/OL].https://uniapp.dcloud.io/. 2021-6-6.

[7] hh_虎.uni-app框架简介[EB/OL].https://www.jianshu.com/p/ea4293005855. 2021-6-8.

[8] The Apache Software Foundation. Apache ECharts: 一个基于JavaScript的开源可视化图表库[EB/OL]. http://echarts.apache.org/zh/index.html. 2021-4-16.

[9] Li D, Mei H, Shen Y, et al. ECharts: A declarative framework for rapid construction of web-based visualization[J]. Visual Informatics, 2018, 2(2):136-146.

[10] 彭思喜,彭鹏.基于RBAC的B/S结构学生收费系统安全机制[J].汕头大学学报:自然科学版,2021,36(1):12-20.

[11] 南昌类友科技有限公司旗下LayUI技术团队. LayUI开源模块化前端UI框架[EB/OL].https://www.layui.com/.2021-5-28.

DESIGN AND IMPLEMENTATION OF EPIDEMIC PREVENTION AND CONTROL PLATFORM IN CAMPUS

LI Zhi-hong,*LI Jin-zhong, XIAO Yan-long, ZhONG Ming-shan, ZHOU Xian-liang, ZOU Cong-bo

（School of Electronic and Information Engineering, Jinggangshan University, Ji 'an, Jiangxi 343009, China）

In this paper, an epidemic prevention and control platform in campus was designed and implemented by using the current mainstream framework technologies, including SpringBoot, Vue, Uni-App and other front-end and back-end frameworks, and Apache ECharts, MySQL, Flyway and Redis databases and other technologies, as well as Stylefeng open source technology, Selenium dynamic crawling technology, JWT and Shiro security verification technology. The platform is divided into five subsystems, which are computer terminal epidemic information management, computer terminal intelligence epidemic map data display, computer terminal epidemic knowledge question bank and scour questions, mobile terminal epidemic information reporting and mobile terminal adaptation system of epidemic information management. The design of multi-terminal and multi-system can precisely adapt to the diversity of epidemic prevention in colleges and universities. This platform can effectively deal with the epidemic prevention and control in colleges and universities. Each system of this platform is simple to operate, efficient to manage, easy to maintain, and has high security.

campus epidemic prevention and control; SpringBoot framework; Uni-App framework; Vue framework; Echarts visual chart library

TP319

A

1674-8085(2012)01-0070-08

2021-06-18；

2021-07-12

江西省教育科学“十三五”规划项目（20YB118）

10.3969/j.issn.1674-8085.2012.05.014

李志鸿(2001-)，男，江西上饶人，井冈山大学电子与信息工程学院软件工程专业2019级本科生(E-mail:lzh_create@qq.com)；

*李金忠(1976-)，男，江西吉安人，副教授，博士，主要从事信息检索、人工智能与大数据等方面的研究(E-mail: lijinzhong@jgsu.edu.cn)；

肖延龙(2000-)，男，江西赣州人，井冈山大学电子与信息工程学院网络工程专业2019级本科生(E-mail:xyl342300@163.com)；

钟鸣山(2001-)，男，江西赣州人，井冈山大学电子与信息工程学院软件工程专业2019级本科生(E-mail:2640647225@qq.com)；

周先亮(1999-)，男，江西赣州人，井冈山大学电子与信息工程学院计算机科学与技术专业2019级本科生(E-mail:2488480212@qq.com)；

邹聪波(2000-)，男，江西鹰潭人，井冈山大学电子与信息工程学院计算机科学与技术专业2019级本科生(E-mail: 2237913536@qq.com).