【维普】软件工程-基于SpringBoot+Vue的校园防疫系统的设计与实现

目录DesignandimplementationofcampusepidemicpreventionsystembasedonSpringBoot+VueAbstractThecampusepidemicpreventionsystembasedonSpringBoot+Vueisanewapplicationtechnology,whichismainlyusedtocontrolandpreventthespreadofinfectiousdiseasesoncampus.Thesystemadoptsthedevelopmentmodeoffrontendseparation,Thefront-endusesVueframeworkandtheback-endusesSpringBootframework,throughthedatainterfacefordatainteractionanddisplay.Inthissystem,avarietyoffunctionalmodulesareusedtoachieveepidemicpreventionandcontrolmanagement,suchashealthdeclaration,schoolleavingapplication,nucleicaciddetectionpoints,epidemicpreventioninformationmanagement,etc.Amongthem,thehealthdeclarationmanagementmodulecanhelptheschooltoaccuratelyrecordandmanagetheinformationofteachersandstudents,theleavingmodulecancontroltheentranceandexitofcampuspersonnel,andthenucleicaciddetectionpointmodulecanfacilitatethecampuspersonneltoknowthegeographicallocationandspecificinformationofnucleicaciddetectionpoints.Inconclusion,thedesignandimplementationofthecampusepidemicpreventionsystembasedonSpringBoot+Vuecannotonlyimprovethelevelofepidemicpreventionmanagementandemergencyresponseabilityofthecampus,butalsoprovidereferenceforpromotingdigitaltransformationandsmartcampusconstruction.Atthesametime,thesuccessfulimplementationofthesystemwillalsohelpimprovethecountry'sepidemicresponsecapacityandtheconstructionofapublichealthsystem.Keywords：Epidemicpreventionandcontrol;Campus;Vue;SpringBoot第1章绪论1绪论1.1研究背景近几年间，疫情的出现困扰着人们的方方面面，直至今日，针对疫情的政策有所调整，但具体落实政策是为了继续科学有效的提高防控水平，是主动优化而不是被动的，并不是完全放开不防。尽管现在政策已经更改，但疫情短时间内不会消失，还会产生各种新的变种。同时由于校内人员结构复杂、密集度大等因素，如疫情一旦在校内扎根传播，很大程度上会形成规模并暴发流行，其后果十分严重。1.2研究现状关于国外的疫情防控方面，尽管不同国家采取了相应的政策以及在计算机领域进行了对相关系统的研究开发，比如医疗系统以及教育系统[1]，但鲜少有针对防疫本身进行软件开发。国内则对防疫方面更为重视，尤其是人员密集的场所，如社区和校园，都有相应的防疫软件来支持相关工作。为使得工作能顺利开展，系统一般采用统一的数据模型，标准的代码体系，友好的用户界面以及科学的工作操作，为提高工作效率和准确性提供了完善的解决方案[2]。同时，为保障日常生活工作的正常展开以及人民对自身健康情况了解的需要，国内会安排多个核酸检测点方便检测排查[3]，这也是设计防疫系统时要考虑的重点之一。同时，本系统基于目前互联网项目开发的业界标准前后端分离技术进行开发，该技术主要的目标是摆脱前后端架构之间的相互依赖，通过对其进行单独的项目部署实现系统的优化[4]，其拥有着包括定位Bug、并行开发、接口复用等许多优点。通过相应的数据接口,后端程序能够为前端提供业务数据和服务的支撑,而不是关注业务具体的展现逻辑。与此同时，由前端负责组织数据并展示,处理页面的跳转、用户的请求等工作。这种交互模型很好的实现了前后端的解耦和，有着关注点分离,结构清晰的特点，使得校园防疫系统的动态效果能更好的呈现出来[5]。而在传统开发模式中，以Java语言为例,使用JSP作为模板引擎,通过在HTML代码中使用Java代码来封装动态逻辑。当客户端请求JSP页面时,服务器会将JSP编译成为servlet后执行。尽管开发效率较高,但是会使得前后端逻辑耦合严重,并且项目上线后维护也十分不便[6]。而在校园防疫系统中，需要辅导员对其进行长期的维护与更新，使用传统的开发技术自然会造成许多的麻烦。前端方面，本系统选择了Vue框架进行开发。相较于传统的前端框架，Vue框架有着灵活性强、复杂性低、易学习以及更强的性能等优点[7]。除此之外，Vue有着Elementui这样一个相当优秀的UI库，它遵循用户习惯的语言和概念，所有的元素和结构与现实生活的流程、逻辑保持一致，比如设计样式、图标和文本、元素的位置等[8]，这为校园防疫系统的整体UI设计提供了很大的便利。为了实现更加直观和清晰的展示防疫数据信息，本系统选择了ECharts图表库来进行绘图。其能在开源的基础上能提供生动、可交互及可个性化定制的数据可视化图表[9]。与此同时，为了实现在地图上显示核酸监测点的功能效果，本系统选择了高德地图的JavaScriptAPI应用程序接口，除去可兼容性强、架构轻捷、免费的特点，其可视化效果强，完美符合了核酸检测点模块的功能需要[10]。后端方面，本系统选择了SpringBoot框架进行开发。相较于传统的Spring项目的搭建，它有着更为简便的特点，且提供自动配置好的“starter”实现自动配置、自带servlet容器、不需要配置XML配置[11]。因而能大大简化本系统的搭建流程及开发过程。除此之外，MyBatis框架的使用，能使系统自动实现接口的文件,在进行动态的读写分离的同时，对数据库进行访问[12]，从而实现对数据库内账号密码、学生情况等数据的调用。数据库方面，本系统选择使用Navicat来对MySQL进行管理。Navicat支持单一程序，可连接到MySQL，也为数据库管理、开发以及维护提供了非常直观的图形界面，可以用一种安全和更为容易的方式创建、组织、存取和共享信息[13]。相对于较为传统的SQLServe，MySQL数据库系统占空间小，兼容不同的操作系统，安装简单，适合在校园中进行推广[14]。除此之外，MySQL能以复制粘贴、Excel表等多种方式导入和导出数据[15]，这使得防疫相关数据的获取与维护更为简单、方便。以目前的形势来看，无论是在过去还是在未来，一个全面、科学、规范有序的防疫系统，都在疫情的管控方面有着举足轻重的作用。而且不仅仅针对当下流行的新冠疫情，在防治其他传染病时，防疫系统在信息化与智能化的今天也显得至关重要。因此，这一系统仍有着相当良好的前景。1.3研究目的与意义校园疫情防控系统不仅可以实现疫情监测、预警和管控，还可以提高校园疫情防控的效率和精度，从而更好地保障学生和教职工的健康和安全。在提高疫情防控的效率和精度上，校园疫情防控系统通过对学生和教职工的健康状况、活动轨迹等数据的采集和分析，实现对疫情风险的实时监测和预警，并采取相应的管控措施。相比传统的疫情防控方法，校园疫情防控系统可以提高疫情防控的效率和精度，减少人为干预和误判的可能性，从而更好地保障学生和教职工的健康和安全。同时，它也能提高疫情防控的智能化和信息化水平。相比传统的疫情防控方法，校园疫情防控系统可以更快速、准确地发现疫情风险，采取相应的管控措施，有效地降低疫情的传播风险。另一方面，校园疫情防控系统也能培养学生的健康意识和自我防护能力，通过对疫情相关信息的通知，从而提高学生和教职工的健康意识，促进疫情防控工作的顺利开展。总之，校园疫情防控系统旨在通过数据采集、处理、分析和应用，实现对校园疫情防控的全过程监控和管控。该系统可以提高疫情防控的效率和精度，促进信息共享和协同合作，培养学生的健康意识和自我防护能力，是一个重要的研究方向和实践领域。1.4论文结构本论文主要论述校园防疫系统的系统分析、系统总体设计、系统详细设计、具体系统实现以及系统测试部分。本系统主要有如下任务：(1)绪论：主要是介绍了防疫系统的主要研究方向，以及本系统的研究背景和目前国内外防疫系统的发展现状。(2)系统分析：主要从业务分析、功能需求、非功能需求、可行性分析等几个方面出发，方便后续更好的实现相关的开发工作。(3)系统总体设计：先确定系统开发框架及技术，然后对系统各个角色及功能模块进行详细设计，之后再设计数据库，最后设计系统所用的接口。(4)系统详细设计：本部分由交互设计和对象设计两个部分构成，主要包含系统定义的类和时序图。(5)系统实现：本部分对辅导员、班主任、学生三大角色的各个功能实现进行了详细的介绍，包括所使用的技术以及相关成果图的展示。(6)系统测试：为确保系统能正常运行，本系统采用黑盒测试对系统的功能进行测试，并通过表格的方式记录数据，与期望效果进行对比。在论文的最后，进行了对本次毕业设计工作过程的总结，并且对系统的未来提出新的建议与期望。第2章系统分析2系统分析系统分析包含对系统的业务分析，其次通过功能分析、非功能分析和可行性分析确保系统开发的正常运行。在该过程中，业务分析主要是分析校园内防疫系统所需要具有的功能，然后通过需求分析做到精准的满足各项需求，最后通过可行性分析推敲系统的可行性，以确保系统开发的正确性。2.1业务分析本系统的使用人群主要由辅导员、班主任和学生三部分组成。辅导员可以在系统中进行用户管理、离校管理、防疫信息管理等操作。班主任可以进行离校管理、健康打卡管理、查看核酸检测点等操作。学生可以进行离校申请、健康打卡和查看核酸检测点等操作。其中，离校申请业务流程图如图2.1所示。图2.1离校申请业务流程图2.2功能需求分析2.2.1辅导员用例图（1）系统权限：辅导员在点击左侧的系统权限一栏后，可以浏览系统中各项权限，并可以进行修改及删除。其中可查看的权限包括辅导员、班主任、学生三种。（2）防疫信息管理功能：辅导员在点击左侧的防疫信息管理一栏后，可以看到现有的防疫信息。通过点击上方的医务室信息，可以看到医务室相关的具体信息。点击添加防疫信息的按钮后，则会出现用于添加的表单。若有未审批的防疫信息，则可以对其进行审批。（3）离校管理功能：辅导员在点击左侧的离校管理一栏后，便可以查看系统中的学生上传的离校信息及其审批状态。在点击某一条目后，可以看到审批老师，申请原因，离校时间等详细内容。（4）健康打卡功能：辅导员在点击左侧的健康打卡一栏后，可以查看系统中各个用户上传的健康打卡记录，并可以将其作为Excel表导出。在点击添加按钮后，便可以新增健康打卡记录。（5）统计分析功能：辅导员在点击左侧的统计分析一栏后，便可以查看由疫情打卡数及离校人数构成的折线图，同时能看见学生情况的饼图和辅导员配备的柱状图。（6）核酸检测点功能：辅导员在点击左侧的核酸检测点一栏后，便可以在地图上查看校园内的核酸检测点的具体位置及详细信息。将鼠标移至核酸检测点后，可以看到该检测点的具体信息，包括开放时间、地理位置等。辅导员用例图如图2.2所示。图2.2辅导员用例图2.2.2班主任用例图（1）登录功能：班主任进入登录界面后，通过输入自己的账号与密码进行登录。在登陆成功后，系统会自动跳转到班主任用户界面。若密码输入错误，系统会显示密码错误。（2）防疫信息查看功能：班主任可以查看系统中的防疫信息，同时能对防疫信息进行点赞。在点击医务室信息按钮后，便可以看到医务室的详细信息。（3）个人信息功能：班主任登录成功后，可以点击左侧的个人信息一栏，在其中对自己的信息进行修改，包括修改姓名、联系电话、邮箱以及上传头像。（4）离校管理功能：班主任在点击左侧的离校管理一栏后，便可以查看系统中的学生上传的离校申请及其审批状态。通过点击审批按钮，可以输入审批意见及审批结果。（5）健康打卡功能：班主任在点击左侧的健康打卡一栏后，可以查看系统中各个用户上传的健康打卡记录，并可以将其作为Excel表导出。在点击添加按钮后，便可以新增健康打卡记录。（6）核酸检测点功能：班主任在点击左侧的核酸检测点一栏后，便可以在地图上查看校园内的核酸检测点的具体位置及详细信息。将鼠标移至核酸检测点后，可以看到该检测点的具体信息，包括开放时间、地理位置等。班主任用例图如图2.3所示。图2.3班主任用例图2.2.3学生用例图（1）登录功能：学生进入登录界面后，通过输入自己的账号与密码进行登录。在登陆成功后，系统会自动跳转到学生用户界面。若密码输入错误，系统会显示密码错误。（2）防疫信息查看功能：学生可以查看系统中的防疫信息，同时能对防疫信息进行点赞。在点击医务室信息按钮后，便可以看到医务室的详细信息。（3）个人信息功能：学生登录成功后，可以点击左侧的个人信息一栏，在其中对自己的信息进行修改，包括修改姓名、联系电话、邮箱以及上传头像。（4）离校管理功能：学生在点击左侧的离校管理一栏后，便可以查看系统中上传过的离校申请及其审批状态。点击添加按钮可以新增离校申请。对于未通过的申请则可以看到班主任的审批意见并能对其进行修改。（5）健康打卡功能：学生在点击左侧的健康打卡一栏后，可以查看本人的历史健康打卡记录，并可以将其作为Excel表导出。在点击添加按钮后，便可以新增健康打卡记录。（6）核酸检测点功能：学生在点击左侧的核酸检测点一栏后，便可以在地图上查看校园内的核酸检测点的具体位置及详细信息。将鼠标移至核酸检测点后，可以看到该检测点的具体信息，包括开放时间、地理位置等。学生用例图如图2.4所示。图2.4学生用例图2.3非功能需求分析2.3.1网络性能分析在正常的网络环境下进行响应时，服务器上的响应时间应在短响应时间内准确。平均响应时间参考值为1-2秒，峰值响应时间参考值应该控制在3秒之内。比如班主任想要审批离校信息，系统响应的时间应该控制在3秒之内，正常情况下在2秒内可以完成，并且看到审批后的信息。2.3.2系统安全性能分析鉴于防疫系统中包含学生及教职工大量的个人信息及隐私，本系统将采用MD5加密算法确保数据安全。MD5是一种单向加密算法，即可以将数据转化为固定长度的哈希值，但是无法通过这个哈希值反推出原始数据。其拥有速度快、计算简单、输出长度固定等优点，因而在可以对系统安全起到很好的保护作用，例如在存储密码时将其哈希化以保护用户数据安全。2.4可行性分析2.4.1经济可行性本系统通过采用的SpringBoot、MySQL数据库、Vue都是免费使用的软件，并且以上开发软件在应对各种开发功能都有一定的适应能力。并且以上几款软件会定期的进行维护更新，对于使用用户的安全性有一定保障。基于上面几点，确保了系统开发随用的经济在可接受范围。2.4.2操作可行性主观上根据现有的知识，进行过相似的前后端分离项目的开发，积累了一定的经验。客观上前后端分离作为目前广泛使用的一种模式，有着能较为容易的定位bug以及复用接口等优点，开发效率较高。同时相关技术较为成熟，网上有着很多的文章以及资料，大大减少了开发的难度，因此在操作方面上是可行的。2.4.3法律可行性本系统为个人开发设计的毕业设计，里面的具体数据均为测试使用，与现实世界的个人信息无关，不会侵犯他人隐私。同时，该系统严格遵守相关法律法规，不会对国家、集体以及个人的利益造成不良影响，因而本系统具有法律可行性。 第3章系统总体设计3系统总体设计通过对校园内的具体防疫需求进行具体分析后，构思出校园防疫系统相关的总体设计，通过架构、功能模块、数据库、接口等方面的详细设计，方便后续系统的更新与维护。3.1架构设计系统总体架构主要采用BS架构，技术采用了前后端分离技术，物理存储采用MySQL，数据库名称为yiqing。数据层通过读取和写入数据库、缓存数据以及添加、删除、修改和查询数据库，使数据库中的所有数据都可以传递给系统中任意模块。系统具有三大权限控制，分别是辅导员权限、班主任权限和学生权限。系统架构图如图3.1所示。图3.1系统架构图3.2功能模块设计本系统由辅导员模块、班主任模块和学生模块三大模块组成，辅导员可以在系统中进行用户管理、离校管理、防疫信息管理等操作。班主任可以进行离校管理、健康打卡管理、查看核酸检测点等操作。学生可以进行离校申请、健康打卡和查看核酸检测点等操作。系统功能模块图如图3.2所示。图3.2系统功能模块图3.3数据库设计3.3.1系统E-R图系统主要分为三类用户-辅导员、班主任和学生，依据三者的权限不同，对应的模块功能不同，构建出辅导员、班主任和学生三者关联的E-R图，系统E-R图如图3.3所示。图3.3系统E-R图3.3.2数据库表设计本系统的数据库共采用10个数据库表，分别是用户表、学院表、健康情况表、离校申请表、系统日志表，防疫信息表、审批记录表、角色权限表、角色路由表、功能路由表。每个表的详细设计如下所示：(1)用户表（tb_user表）用户表是由用户账号id,具体的账号密码，用户类型以及用户的各项信息组成的。本表的数据类型大多采用varchar进行数据的存储。根据不同的数据判断采用合适长度的数据类型。用户表如表3.1所示。表3.1用户表列名数据类型说明描述idint主键，非空Iduser_idvarchar(20)非空用户编号usernamevarchar(36)非空用户名passwordvarchar(36)非空密码realnamevarchar(36)非空真实姓名user_typetinyint非空用户类型rolesvarchar(255)非空权限majorvarchar（200）非空班级(2)学院表（tb_group表）学院表是由id,学院名以及院内人数组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。学院表如表3.2所示。表3.2学院表列名数据类型说明描述idint主键，非空id、主键remarkvarchar(512)非空学院名amountdouble非空院内人数 (3)健康情况表（tb_health表）健康情况表是由id,学号、行程轨迹等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。健康情况表如表3.3所示。表3.3健康情况表列名数据类型说明描述idint主键，非空id，主键user_idint非空学号typevarchar(20)非空填报时间段visitvarchar(200)非空行程轨迹temperaturedouble非空体温statustinyint非空状态(4)离校申请表（tb_leave表）离校申请表是由id,学号、行程轨迹等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。离校申请表如表3.4所示。表3.4离校申请表列名数据类型说明描述idint主键，非空id，主键user_idint非空学号reasonvarchar(512)非空原因remarkvarchar(100)非空行程轨迹apply_idvarchar(80)非空审批人apply_contentvarchar(100)非空审批意见statustinyint非空状态(5)系统日志表（tb_log表）系统日志表是由id,访问路径、访问IP等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。系统日志表如表3.5所示。表3.5系统日志表列名数据类型说明描述idint主键，非空id、主键optvarchar(255)非空操作urlvarchar(255)非空访问路径http_methodvarchar(255)非空HTTP方法ipvarchar(255)非空访问IP(6)防疫信息表（tb_notice表）防疫信息表是由id,标题、正文等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。防疫信息表如表3.6所示。表3.6防疫信息表列名数据类型说明描述idint主键，非空id、主键titlevarchar(60)非空标题contentvarchar(512)非空正文authorvarchar(60)非空作者thumbint非空点赞typevarchar(30)非空分类(7)审批记录表（tb_record表）审批记录表是由id,审批人、审批意见等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。审批记录表如表3.7所示。表3.7审批记录表列名数据类型说明描述idint主键，非空id、主键leave_idint非空申请IDapply_idvarchar(80)非空审批人apply_contentvarchar(100)非空审批意见(8)角色权限表（tb_role表）角色权限表是由id,权限名、权限描述等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。角色权限表如表3.8所示。表3.8角色权限表列名数据类型说明描述idint主键，非空id、主键keyvarchar(50)非空权限keynamevarchar(50)非空权限名descriptionvarchar(255)非空描述(9)角色路由表（tb_role_route表）角色路由表是由id,权限名、路由id等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。角色路由表如表3.9所示。表3.9角色路由表列名数据类型说明描述idint主键，非空id、主键role_namevarchar(255)非空权限名route_idInt非空路由ID(10)功能路由表（tb_route表）功能路由表是由id,权限名、路由id等多种数据组成的。本表的数据以多种数据类型进行存储。根据不同的数据判断采用合适长度的数据类型。功能路由表如表3.10所示。表3.10功能路由表列名数据类型说明描述idint主键，非空id、主键pidint非空上级菜单的idtitlevarchar(50)非空菜单名rolesvarchar(255)非空权限3.4接口设计本系统采用前后端分离技术，将前端和后端进行分离开发，同时设计模式使用了MVC。后端接口通过Controller、Service、Dao进行三层再分离，每个层负责对应的职责。Controller是表示层的一部分，它主要负责协调Model和View之间的交互。Service层是业务逻辑层，它主要负责处理业务逻辑和数据校验等功能，它通常会被Controller层调用，然后再调用Dao层访问数据。Service层的主要作用包括处理业务逻辑，校验数据，处理事务。Dao层是数据访问层，它主要负责数据的访问和操作。Dao层通常会被Service层调用，然后将结果返回给Service层，再由Service层返回给Controller层。Dao层的主要提供了访问数据库，操作数据和数据库连接管理的功能。因此Service和Dao层是MVC模式中非常重要的两个层，它们分别负责业务逻辑和数据访问。它们之间通过接口进行交互，实现了层与层之间的解耦和功能划分。在开发过程中，Spring框架实现了Service和Dao层的功能，从而简化开发流程和提高代码的可维护性。同时，在HTTP接口请求中，使用了GET、POST、PUT等多种请求。例如在实现健康申报这一模块时，使用GET请求来进行查询操作，对过去的申报记录进行查询。需要新增健康申报记录时，则使用POST请求将新增的数据作为请求体发送到服务器。如需修改之前的记录，会用PUT请求将修改的数据作为请求体发送到服务器，并指定要修改的数据的ID。第4章系统详细设计4系统详细设计4.1对象设计本系统描写了基于SpringBoot+Vue的校园防疫系统的最主要的10个类，分别是辅导员类（sadmin）、班主任类（admin）、学生类（student）、学院（group）、健康情况类（health）、离校申请信息类（leave）、防疫信息类（notice），申请审批类（record）、统计图表类（chart）、核酸地图类（map）。系统类图如图4.1所示。图4.1系统类图4.2交互设计（1）用户登录时序图用户首先点击系统页面“用户”进入到登录首页，输入正确的账号密码完成登录。登录时序图如图4.2所示。图4.2登录时序图(2)用户申报健康情况时序图用户在进入到健康申报页面之后，可以添加自己的健康信息。系统通过对其进行处理，与数据库进行交互。用户申报健康情况时序图如图4.3所示。图4.3用户申报健康情况时序图(3)学生离校申请时序图首先，学生通过点击离校申请模块，便可以填写自己的离校申请信息并等待班主任的审批。学生离校申请时序图如图4.4所示。图4.4学生离校申请时序图(4)辅导员添加防疫信息时序图辅导员在进入到系统后，可以上传最新的防疫信息，通过输入防疫信息的标题、内容等完成添加。辅导员添加防疫信息时序图如图4.5所示。图4.5辅导员添加防疫信息时序图4.3功能流图设计（1）疫情防控信息浏览模块：学生进行登录，登录通过之后点击防控信息界面。信息界面按时间排序显示不同疫情防控信息模块的标签，点击后进入详细页面。学生可以进行点赞，浏览完毕后可以退出浏览，已经浏览过的信息会有已读标志。学生也可以点击医务室图案，会弹出医务室的联系方式和具体信息。疫情防控信息浏览流程图如图4.6所示。图4.6疫情防控信息浏览流程图（2）疫情防控信息维护模块：辅导员进行登录，登录通过之后点击防控信息界面。其中有新增选项，可以添加新的防控信息，并记录添加时的时间。信息界面按时间排序显示不同疫情防控信息模块的标签，点击后进入详细页面。在详细界面可以看到收到的点赞数，同时也可以对防控信息进行更新。点击医务室图案后会弹出医务室的联系方式和具体信息，可以对这部分信息进行修改更新。疫情防控信息维护流程图如图4.7所示。图4.7疫情防控信息维护流程图（3）离校信息报备模块：学生进行登录，登录通过之后点击离校报备界面。进入离校界面之后能看到自己之前的离校记录，并以时间排序。点击进行离校报备按钮后，可以填写离校信息，新增离校记录。新增的离校记录将被标记为未审批状态，待审批通过后被标记为审批通过状态，审批未通过则标记为未通过状态。学生可以对尚未审批的离校记录进行修改。离校信息报备流程图如图4.8所示。图4.8离校信息报备流程图（4）离校信息审批模块班主任进行登录，登录通过之后点击离校审批界面。在界面中能看到学生报备的离校信息，并以时间排序。其中已审批的记录会被标记为已审批状态，尚未审批的记录会被标记为未审批状态。点击记录能看到离校申请的详细信息，并进行审批。对未通过的记录，可以进行留言，阐明未通过的理由。离校信息审批流程图如图4.9所示。图4.9离校信息审批流程图（5）核酸检测点查询模块学生进行登录，登录通过之后点击核酸检测点界面。进入界面之后能看到学校及周边的地图，地图上显示校内及学校周边的核酸检测点。点击核酸检测点能看到开放时间等详细信息。同时学生可以在地图上方的搜索框输入要查询的地点，系统会标记在地图上。核酸检测点查询流程图如图4.10所示。图4.10核酸检测点查询流程图（6）核酸检测点管理模块辅导员进行登录，登录通过之后点击核酸检测点界面。入界面之后能看到学校及周边的地图，地图上显示校内及学校周边的核酸检测点。点击卫星图选项可以将标准图层切换为卫星图。点击路网和路况按钮可以看到相应的信息。同时可以在地图上方的搜索框输入要查询的地点，系统会标记在地图上。核酸检测点管理流程图如图4.11所示。图4.11核酸检测点管理流程图第5章系统实现5系统实现本系统分为三个主要模块，分别是辅导员，班主任和学生。本章将逐个模块介绍其功能的具体实现方法和实现效果。其中，将挑选部分重点模块并对其进行有关核心代码和技术实现方面的专业解释。5.1辅导员模块实现5.1.1登录模块（1）技术实现前端通常会将用户输入的账号密码以JSON形式发送给后端API接口，后端验证这些信息并返回一个表示用户身份验证成功的token给前端。前端获得该token后，进行解码并进入对应的用户端内。（2）功能介绍和实现界面在使用系统时，需要先进行登录操作。在输入辅导员用户的账号和密码后点击登录按钮，系统将会在登录成功后会进入辅导员端，并看到主页图。登录界面如图5.1所示，成功登录后的主页如图5.2所示。图5.1登录界面图图5.2成功登录后的主页图5.1.2用户管理模块（1）技术实现通过使用SpringBoot的数据访问技术，来实现从数据库中获取用户信息，并在前端进行显示及编辑。当辅导员在前端中查询用户信息时，前端应用程序将该信息发送到后端应用程序中，并使用持久化操作从数据库中查询用户信息，并将其返回给前端。（2）功能介绍和实现界面辅导员在成功登录到系统之后可以对系统内的各个用户进行管理操作，并可以添加用户。用户管理界面如图5.3所示，添加用户界面如图5.4所示。图5.3用户管理界面图图5.4添加用户界面图5.1.3防疫信息管理模块（1）核心代码和技术实现addCommit(){console.log(this.addFormdata);//用来存储防疫信息数据add(this.addFormdata)//调用后端API将数据添加到数据库中.then(res=>{if(res.code==0){this.visibleAddForm=false;this.$message({message:"添加成功",type:"success"});this.allStudent()}//检查后端API返回的响应}).catch(error=>{this.$message.error("添加失败");});},在辅导员输入要上传的防疫信息后，将会打印名为addFormdata的数据对象以用于存储具体的防疫信息数据。同时使用add方法来调用后端API将数据添加到数据库中，它接收装有防疫信息的addFormdata对象作为参数，并返回Promise对象。如异步操作成功，它将把填写防疫信息的表单隐藏起来并返回添加成功的提示，最后刷新页面以显示最新的数据。如异步操作失败。则会用Vue框架提供的$message方法，在页面上显示一个错误消息。（2）功能介绍和实现界面在进入辅导员端后，辅导员可以通过点击左侧的防疫信息管理模块，从而看到已有的防疫信息，防疫信息管理界面图如图5.5所示。同时可以点击新增防疫信息按钮对防疫信息进行添加，添加防疫信息界面图如图5.6所示。图5.5防疫信息管理界面图图5.6添加防疫信息界面图5.1.4日志管理模块（1）技术实现通过使用SpringBoot提供的内置Logback日志框架，可以实现对日志的记录，以及在前端中的输出。具体需要在前端调用后端的API接口，获取日志信息，并显示在日志管理页面上。（2）功能介绍和实现界面辅导员可以进入日志管理模块，查看系统的访问地址、来源ip等信息。日志管理界面如图5.7所示。图5.7日志管理界面图5.2班主任模块实现5.2.1个人信息模块（1）技术实现在头像文件的上传中，主要使用了SpringBoot的MultipartFile类来处理上传的文件，并将其保存到指定的目录中。同时在后端中提供一个API接口用于处理文件上传请求，同时会返回文件的URL地址。需要上传时，则在前端调用后端的API接口来上传头像文件，并将返回的文件地址保存到用户的信息中。（2）功能介绍和实现界面班主任登录进入系统后，可以查看并修改自己的个人信息，其中包括头像、电话、邮箱等信息，并将其上传到系统中。个人信息页面如图5.8所示。图5.8个人信息页面图5.2.2离校管理模块（1）技术实现在后端中提供一个API接口，用于获取待审批的申请列表数据，并将其存储在数据库中。该接口会返回离校申请的基本信息，包括学生名，申请时间，申请内容等信息。同时提供另一个API接口用于处理申请审批操作。该接口会接收审批结果和备注等信息，并将其更新到数据库中。从而前端可以调用后端的API接口，获取待审批的离校申请数据，并提交审批结果。（2）功能介绍和实现界面班主任可以对自己班级的离校申请进行审批，审批决定是否通过并写出原因。审批状态会反馈给学生端。离校管理界面如图5.9所示，离校审批界面如图5.10所示。图5.9离校管理界面图图5.10离校审批界面图5.3学生模块实现5.3.1健康打卡模块（1）技术实现除了对健康打卡的具体信息进行传递外，在后端中，使用ApachePOI库来生成Excel文件，并将健康打卡记录写入到Excel文件中。同时根据打卡信息决定Excel文件的样式和格式。之后使用SpringBoot的ResponseEntity来封装Excel文件，并通过API接口将Excel文件返回给前端。从而在前端界面中将返回的Excel文件保存到本地。（2）功能介绍和实现界面学生进入健康打卡模块后，可以新增健康打卡记录，同时能看见自己曾经的打卡记录。在点击“导出Excel”按钮后，可以将之前的打卡记录作为Excel表格形式进行导出。健康打卡记录界面如图5.11所示，新增健康打卡界面如图5.12所示。图5.11健康打卡记录界面图图5.12新增健康打卡界面图5.3.2核酸检测点模块（1）核心代码和技术实现initMap(){AMapLoader.load({key:'f4af97375e5ab7d60ae5c137d6ee8a45',//申请好的Web端开发者Keyversion:'2.0',//指定要加载的JSAPI的版本plugins:['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.Geolocation','AMap.AutoComplete','AMap.PlaceSearch','AMap.Geocoder']//需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap=>{this.map=newwindow.AMap.Map('container',{//设置地图容器idviewMode:'3D',//是否为3D地图模式zoom:16,//初始化地图级别center:[118.899955,31.903678]//初始化地图中心点位置为金陵科技学院})this.map.addControl(newwindow.AMap.Scale())this.map.addControl(newwindow.AMap.ToolBar())this.map.addControl(newwindow.AMap.HawkEye())this.map.addControl(newwindow.AMap.MapType())this.map.addControl(newwindow.AMap.Geolocation())this.auto=newwindow.AMap.AutoComplete(this.autoOptions)this.placeSearch=newwindow.AMap.PlaceSearch({map:this.map})//构造地点查询类在进入核酸检测点页面后，系统便通过使用AMapLoader库来异步加载高德地图JavaScriptAPI，从而方便在地图初始化时使用。在运行时，应高德地图插件需要，指定了一个开发者Key、API版本和需要使用的插件列表。为实现高德地图的初始化以及相关功能的添加，在异步加载高德地图JavaScriptAPI成功后，执行一个Promise对象的处理程序。通过创建一个名为map的地图实例，并将其绑定到页面上。为进一步实现核酸点的相关功能，在项目中添加了一些常用控件，如比例尺、工具条、地图类型等。（2）功能介绍和实现界面用户在进到核酸检测点模块后，可以看到以金陵科技学院为中心的高德地图，图中包含校内的核酸检测点及其具体信息，同时可以查看相关的卫星图。核酸检测点查看图如图5.13所示，卫星图查看图如图5.14所示。图5.13核酸检测点查看图图5.14卫星图查看图第6章系统测试6系统测试6.1测试计划测试前准备：个人计算机，IDEA，JDK1.8，windows10操作环境。在浏览器中启动项目，并且进入前端页面和后台管理系统时没有报错。测试分为两个部分，分别对系统的功能测试和一些非功能测试。测试中将采用较为成熟的黑盒测试技术辅导员，班主任，学生三个模块进行逐个的功能测试，保证系统的各个模块功能运行正常以及检测模块是否符合最终需求。6.2测试用例6.2.1功能测试1、辅导员模块测试在辅导员模块测试中，将对包括登录、防疫信息管理、日志管理、统计分析等多个模块进行测试。辅导员模块测试详情表如表6.1所示。表6.1辅导员模块测试详情表测试名称Sadmin测试模块名称辅导员模块测试方向功能测试测试使用技术黑盒测试编号测试项操作步骤预期结果实际结果结果比较说明S1登录1.首先进入登录页面2.输入账号密码3.完成登录4.进入辅导员界面账号密码正确，登录成功账号密码正确，登录成功通过S21.首先进入登录页面2.输入账号密码3.完成登录4.进入辅导员界面账号密码不正确，登录不成功账号密码不正确，登录不成功通过S31.首先进入登录页面2.输入账号密码3.完成登录4.进入辅导员界面账号密码不存在，登录不成功账号密码不存在，登录不成功通过续表6.1编号测试项操作步骤预期结果实际结果结果比较说明S5防疫信息管理查看已有信息1.登录账号进入辅导员界面首页2.选择防疫信息管理模块进入成功进入成功通过S6添加防疫信息点击“添加防疫信息模块”添加成功添加成功通过S7审批防疫信息1.选择要审批的信息2.对其进行审批审批成功审批成功通过S8日志管理查看详情登录账号进入辅导员界面首页点击日志管理模块成功看到日志详情成功看到日志详情通过S9健康打卡添加健康打卡记录登录账号进入辅导员界面首页进入健康打卡模块点击添加健康打卡记录新增记录成功新增记录成功通过S10搜索健康打卡信息1.登录账号进入辅导员界面首页2.进入健康打卡模块3.点击搜索健康打卡信息搜索成功搜索成功通过S11导出健康打卡记录1.登录账号进入辅导员界面首页2.进入健康打卡模块3.点击导出健康打卡记录导出成功导出成功通过S12个人信息修改个人信息1.登录账号进入辅导员界面首页2.进入个人信息模块3.提交修改好的个人信息修改成功修改成功通过S13离校管理查看学生离校申请1.登录账号进入辅导员界面首页2.进入离校管理模块3.查看学生离校申请信息成功看到具体信息成功看到具体信息通过S14统计分析查看离校及打卡人数曲线图1.登录账号进入辅导员界面首页2.进入统计分析模块3.查看生成的曲线图成功看到生成的图表成功看到生成的图表通过S15查看学生情况饼图1.登录账号进入辅导员界面首页2.进入统计分析模块3.查看生成的饼图成功看到生成的图表成功看到生成的图表通过续表6.1S16统计分析查看班主任配备柱状图1.登录账号进入辅导员界面首页2.进入统计分析模块3.查看生成的柱状图成功看到生成的图表成功看到生成的图表通过S17核酸检测点查看校内核酸检测点1.登录账号进入辅导员界面首页2.进入核酸检测点模块3.查看校内核酸检测点的具体信息成功看到核酸检测点位置及具体信息成功看到核酸检测点位置及具体信息通过S18查找具体地址1.登录账号进入辅导员界面首页2.进入核酸检测点模块3.搜索某个地址地图成功跳转到该地址地图成功跳转到该地址通过2、班主任模块测试本部分将对包括登录、健康打卡、离校管理等多个模块进行测试。班主任模块测试详情表如表6.2所示。表6.2班主任模块测试详情表测试名称Admin测试模块名称班主任模块测试方向功能测试测试使用技术黑盒测试编号测试项操作步骤预期结果实际结果结果比较说明A1登录1.首先进入登录页面2.输入账号密码3.完成登录账号密码正确，登录成功账号密码正确，登录成功通过A21.首先进入登录页面2.输入账号密码3.完成登录账号密码不正确，登录不成功账号密码不正确，登录不成功通过A31.首先进入登录页面2.输入账号密码3.完成登录账号密码不存在，登录不成功账号密码不存在，登录不成功通过A4健康打卡添加健康打卡记录1.登录账号进入班主任界面首页2.进入健康打卡模块3.点击添加健康打卡记录新增记录成功新增记录成功通过A5搜索健康打卡信息1.登录账号进入班主任界面首页2.进入健康打卡模块3.点击搜索健康打卡信息搜索成功搜索成功通过续表6.2A6导出健康打卡记录1.登录账号进入班主任界面首页2.进入健康打卡模块3.点击导出健康打卡记录导出成功导出成功通过A7个人信息修改个人信息1.登录账号进入班主任界面首页2.进入个人信息模块3.提交修改好的个人信息修改成功修改成功通过A8离校管理查看学生离校申请1.登录账号进入班主任界面首页2.进入离校管理模块3.查看学生离校申请信息成功看到具体信息成功看到具体信息通过A9对学生离校申请进行审批1.登录账号进入班主任界面首页2.进入离校管理模块3.审批学生离校申请4.审批完成后的信息显示在系统中信息审批成功信息审批成功通过A10核酸检测点查看校内核酸检测点1.登录账号进入辅导员界面首页2.进入核酸检测点模块3.查看校内核酸检测点的具体信息成功看到核酸检测点位置及具体信息成功看到核酸检测点位置及具体信息通过A11查找具体地址1.登录账号进入辅导员界面首页2.进入核酸检测点模块3.搜索某个地址地图成功跳转到该地址地图成功跳转到该地址通过3、学生模块测试测试说明：通过黑盒测试进行功能测试，对学生的登录、健康申报等不同的部分进行逐一测试，学生模块测试用例与结果表如表6.3所示。表6.3学生模块测试用例与结果表测试名称学生测试模块名称学生模块测试方向功能测试测试使用技术黑盒测试编号测试项操作步骤预期结果实际结果结果比较说明续表6.3U1登录1.首先进入登录页面2.输入账号密码3.完成登录账号密码正确，登录成功账号密码正确，登录成功通过U21.首先进入登录页面2.输入账号密码3.完成登录账号密码不正确，登录不成功账号密码不正确，登录不成功通过U31首先进入登录页面2.输入账号密码3.完成登录账号密码不存在，登录不成功账号密码不存在，登录不成功通过U4健康打卡添加健康打卡记录1.登录账号进入学生界面首页2.进入健康打卡模块3.点击添加健康打卡记录新增记录成功新增记录成功通过U5搜索健康打卡信息1.登录账号进入学生界面首页2.进入健康打卡模块3.点击搜索健康打卡信息搜索成功搜索成功通过U6导出健康打卡记录1.登录账号进入学生界面首页2.进入健康打卡模块3.点击导出健康打卡记录导出成功导出成功通过U7个人信息修改个人信息1.登录账号进入学生界面首页2.进入个人信息模块3.提交修改好的个人信息修改成功修改成功通过U8离校管理查看离校申请审批情况1.登录账号进入学生界面首页2.进入离校管理模块3.查看离校申请审批情况成功看到具体信息成功看到具体信息通过U9新增离校申请1.登录账号进入学生界面首页2.进入离校管理模块3.新增离校申请4.新增的离校申请显示在系统中申请新增成功申请新增成功通过U10核酸检测点查看校内核酸检测点1.登录账号进入学生界面首页2.进入核酸检测点模块3.查看校内核酸检测点的具体信息成功看到核酸检测点位置及具体