摘 要
大学新生报到工作中，除了新生报到外，报到过程还包括支付学费和在抵达时分配宿舍和班级。填写报到表和发放凭证是复杂而耗时的。此外，在报到过程中检索信息也很复杂且容易丢失，因此很难在短时间内处理大量的学生信息。
为了解决这个问题，本文为新生开发了一个基于SpringBoot的可视化报到系统。 该系统不仅大大减少了报到时间，而且避免了学生和家长的长时间等待，减少了学校不同部门之间访问新生信息时的错误，更好地管理了新生信息。
本系统采用IntelliJ IDEA作为开发工具，配合MySQL数据库+MyBatis框架进行数据库的增删改查操作。在设计时，首先，构建系统应用模型，并以此为基础，进行需求分析与概念设计，再到详细设计阶段，进行持续地修改与改进，在测试阶段的进行了多次调试与验证，最终使得设计要求能够以一个功能系统来完成。
本系统主要使用Java语言、MySQL数据库、SpringBoot框架和ECharts可视化图表库来设计与实现。主要实现了新生自助报到、管理员管理学生信息和可视化图表生成的功能。通过对新生报到数据的实时统计与可视化，使新生入学信息更加直观，大大提高管理效率。在提高运行效率的同时，也能够满足学生在日常生活中的需求以及学生宿舍管理员对宿舍进行信息化管理的要求。
文章主要介绍了系统设计思路，功能实现以及运行效果。本系统能够满足各高校在新生报到过程中降低人工工作量的需求。
关键词：新生报到，SpringBoot框架，可视化，MySQL
Abstract
In addition to the new student check-in process at university, the check-in process also involves paying tuition fees and assigning halls of residence and classes upon arrival. Completing the arrival form and issuing vouchers is complex and time-consuming. In addition, retrieving information during the check-in process is complex and easily lost, making it difficult to process large volumes of student information in a short period of time.
To solve this problem, this paper has developed a visual check-in system for new students based on SpringBoot. The system not only greatly reduces check-in time, but also avoids long waiting times for students and parents, reduces errors when accessing new student information between different departments of the school and better manages news student information.
The system uses IntelliJ IDEA as the development tool, with MySQL database+MyBatis framework for database addition, deletion and checking operations. In the design, firstly, the system application model was constructed, and based on this, requirements analysis and conceptual design were carried out, then in the detailed design stage, continuous modifications and improvements were made, and in the testing stage, several debugging and verification were carried out, finally making the design requirements to be completed as a functional system.
The system is designed and implemented using Java language, MySQL database, SpringBoot framework and ECharts visualisation library. The system is designed and implemented using Java, MySQL database, SpringBoot framework and ECharts visualisation library. The main functions are self-check-in of new students, management of student information by administrators and visualisation of chart generation. Through the real-time statistics and visualisation of new student registration data, new student registration information is made more intuitive and greatly improves management efficiency. While improving operational efficiency, it is also able to meet the needs of students in their daily lives and the requirements of student dormitory administrators for information management of dormitories.
The article mainly introduces the system design, function implementation and operation effect. The system can meet the needs of universities to reduce the manual workload in the process of new student check-in.
Keywords: New Student Registration, SpringBoot framework, Visualization, MySQL
第一章 绪论
1.1 课题背景、目的和意义
每年大学的一个重要问题是接待新生。近年来，各高校领导对迎新工作非常重视。在入学前，大学要协调和规划好新生欢迎活动的时间表，以确保各部门，包括学生事务、招生和后勤部门能够协调和规划活动，使新生能够有序地进行入学手续。随着近年来招生人数的迅速增加，各大学不得不投入大量的物资和人员进行迎新活动，以确保新生在入学前做好充分的准备。第一次进入大学，如果还要用复杂的手续来进行报到的话，会让新生有不知道怎么办，也不知道求助谁的苦恼。针对上面的情况，我们可以用现代科技技术来提高新生入学的效率，保证各部门信息的实时更新，避免行政、招生、图书馆等各相关部门的信息重复采集，快速有效的完成新生注册、学费缴纳、宿舍管理等一系列工作，代表了现代大学管理的水平。
管理信息系统是一种管理信息的方式,能够存储、检索和管理数据，利用便利的信息处理功能，为未来做出学术决策，规划组织的长期目标。在现代信息处理技术的帮助下，可视化报到系统的开发实现了高校管理的现代化，保证了高效运作，及时录入和传递新生信息，完成了大学所有行政部门之间与新生有关数据和信息资源的交流，为高校节省了许多人力和财力，真正简化了新生入学程序，落实了新生入学工作的科学性和信息化。
当前高校信息资源的数字化程度较低，尤其对于新生入学，多在半手工阶段进行，无法满足新生有序的报到入学的需求。除了这种情况以外，新生报到大多都集中在一两天的时间，并且现在的新生人数也在不断地增加，但是报到的地方只有那么多，所以说以往的那种入学方式不能满足迅速、准确入学、方便入学需求。因此，如何利用现有网络资源进行高效地入学登记以及对新生实行有效的信息管理已经成为当前高校面临的重要课题。
越来越多的高校根据自身发展的需要，制定了新生入学管理系统的功能要求，不仅要提高工作效率和管理水平，而且要方便各部门之间的信息交流，将各部门上报的统计数据联系起来，统一起来。这些系统旨在及时、准确地收集新生入学统计数据，并向参与信息收集的各部门提供准确的数据。因此，开发新生报到系统可以很好地解决新生入学的难题。
新生报到管理系统是一个综合性先进的管理工具。同时，高校不仅可以提高工作效率，大幅度降低人力成本，加快新生报到速度，还可以快速提供新生报到的统计信息。它还能快速提供新生报到信息的汇总。因此开发和使用新生报到系统是高校发展的一个必然的趋势。
1.2 研究现状
管理信息系统MIS是1985年在美国提出的，是一种现代的、基于决策的管理理论，结合了统计学、运筹学和管理信息学。
现如今，就国外大学而言，他们的学生人数少，程序非常简单，并且他们拥有晚上的设施和成熟的技术，这有利于建立一个成熟的管理系统。首先学生人数相对稳定，没有大的异常波动。其次，他们拥有先进的管理技术，可以应对学生人数的快速增长和学生人数的意外变化。所以说，管理信息系统是值得我们学习和采用的。
我国正在从教育大国向教育强国转变，历届国家领导人都非常重视教育事业的发展，特别是高等教育。全国各地的大学数量持续增长，录取的人数逐年上升。特别是每年数千或数万名新生到来的时候，各大学都要为录取新生做重大准备，这给大学招生人员带来了沉重的负担，他们必须在一两天的有限时间内完成整个录取过程。统计数据显示，在许多像我们这样的学校，新生报到系统还处于起步阶段，导致新生注册的延迟和各部门收集的数据不一致。为改善这种情况的唯一办法是使用自动化的新生报到系统平台，为新生、学校管理者和现场的工作人员提供极大的便利。
1.3 论文的主要工作内容
本可视化新生报到系统旨在及时、准确地收集新生入学统计数据，并向参与信息收集的各部门提供准确的数据。从学生的角度来讲，入学的报到更加的方便；从管理员的角度来讲，可以在节省人力资源和财力资源的情况下，更加方便的对新生报到的数据进行管理。
本系统实现的主要功能有：可视化图表生成、学生信息管理、宿舍管理、设置交通指引、增删改查等功能。本系统主要是给高校的新生和管理员使用的，对于不同的使用者来说，他们都有自己的需求，我们就要提供相应的功能。本系统是使用IDEA软件进行开发的，数据库管理采用的是MySQL，同时借助Apache ECharts可视化图表库并结合所学知识来解决新生数据可视化的实际运行问题。
在系统设计的准备阶段，即确定学生和大学行政部分对新的学生注册系统的需求，主要任务是阅读文献以了解背景和研究情况，进行问卷调查以了解设计的重点，以及根据ECharts等技术文件进行可行性分析。在可视化新生报到系统的设计阶段将着重于各个功能的实施和测试。
1.4 论文结构安排
本文通过六章内容详细说明基于SpringBoot的新生报到系统的构建过程。主要包含以下几个部分：
第一章 绪论。本章主要对系统选题背景、目的和意义进行阐述，还介绍了国内研究现状和国外研究现状，并对该系统的研究思路及方向进行了阐述，并对本文的主要工作及结构安排进行了描述。
第二章 系统相关技术概述。包括Java语言、MySQL数据库技术和可视化技术等。
第三章 系统需求分析。本章的第一部分从技术、经济两方面对该系统作了较为详细的分析，从而确认了该系统的可行性；第二部分是本章的重点，它对一些非功能性需求，如存储、启动困难，安全性等进行了详尽的分析，并对一些涉及到系统过程的用例进行了分析。
第四章 系统设计。主要介绍了系统的总体设计思想，包括系统的设计目标，系统的结构，数据库的设计，以及系统的数据结构。以多层详实的系统结构图，以直观的E-R图及简明的数据库表，阐述了系统的基本架构及数据关系模型，为系统的实现指明了方向。
第五章 系统实现。这一章全面介绍了整个系统的每个模块，显示了学生或管理员方面的每个界面，分析了学生注册数据是如何与数据库结合起来管理的，还显示了每个模块的关键代码。描述了系统可视化的实现方法以及过程。
第六章 系统测试。本章对测试进行了定义，对测试进行了分类，提出了测试的目标，并使用一些使用场景对系统的性能进行了测试，包括登录、管理员对宿舍信息的控制和学生的自我注册功能。
第二章 系统相关技术概述
2.1论文结构安排
可视化新生报到系统需要处理大量数据和它们之间的交互，而这些任务只有在数据库管理软件的帮助下才能解决。在数据库的帮助下，系统可以非常容易地处理数据。选择一个好的数据库对系统的性能有很大的影响，所以在建立系统的时候，选择正确的数据库系统是很重要的。但是MySQL数据库的应用场景有很多，在现在的互联网时代，很多商业网站、购物网站都在使用MySQL，不过对于大部分学生来说，平时使用的都是关系型数据库。这里对关系型数据库和非关系型数据库作出比较，如表2.1。
MySQL 由 MySQL AB 公司开发，具有强安全性、跨平台性、高效性。与 Oracle 等其它关系型数据库相比，MySQL 的缺点主要在于其不支持热备份，且没有针对存储过程的语言设计。
又因为MySQL的使用成本低，所以本可视化新生报到系统采用MySQL作为管理数据库的软件是比较合适的。
表2.1关系型数据库与非关系型数据库对比
| 比较项目 | 关系型数据库 | 非关系型数据库 |
| 成本 | 简单易部署，一般开源 | 收费 |
| 查询速度 | 更快 | 较慢 |
| 存储数据格式 | 键值对等多样化类型 | 基础类型 |
| 扩展性 | 容易水平扩展 | 难扩展 |
| 持久存储 | 不适用 | 适用 |
| 数据一致性 | 最终一致性 | 强一致性 |
| 举例 | MySQL | NoSQL |
2.2 Java语言
Java在许多领域都有了自己的应用。Java已经成为世界上最流行的编程语言之一。它在世界范围内获得了广泛的应用，在美国、日本、欧洲和中国，Java都被认为是最流行的编程语言，尤其是在计算机科学和工程领域。而Java服务器页面技术的引入，使Java成为网络应用的理想开发工具。
Java可以编写桌面应用、Web应用、分布式系统应用和嵌入式系统等。
Java语言是一个全面而且强大的语言，有三个版本：Java标准版（Java Standard Edition,Java SE）、Java企业版（Java Enterprise Edition,Java EE）、Java微型版（Java Micro Edition,Java ME。Java SE可以用来开发客户端独立的应用程序或applet。适合本基于SpringBoot的可视化新生报到系统的开发，所以本系统采用Java语言进行开发。
2.3可视化
数据可视化主要指的是运用计算机图形学知识和图像处理技术，利用图形化手段、图像处理、计算机视觉效果以及交互界面，通过分析、转化以及平面或立体图形包括动画的方式，对数据加以可视化解释，以可交互图形图像的方式来展现数据的方法、理论和技术。这就要求系统开发者能有拥有两种能力，一种是运行图形图形等可视化技术来显示数据，第二种是能够掌握在可视化过程中数据的发展趋势。
可视化技术最初起源于计算机图形学，并被广泛应用于科学计算，渐渐衍生出“科学计算可视化”的概念。可视化是将采集到的地理信息、技术信息等以图表等方式呈现出来，便于科研人员对其进行分析、挖掘。随着物联网、大数据、云计算等新兴技术的兴起，数据可视化也得到了迅猛的发展。数据可视化领域发展迅速，数据可视化的内容越来越多，其重要性也越来越明显。
ECharts是一个基于JavaScript的数据可视化图表库，能够产出由用户自己定制的数据可视化图表，能够直观的显示出数据，图表具有美观性、生动性，能够和数据库实现前后端的交互
本新生报到可视化系统采用UI框架设计界面、使MySQL组合进行后台数据的操作、应用百度的Echarts呈现统计数据。实验结果表明,所提系统能够极大简化招生工作量,对新生的报到工作起到很好的辅助作用。
第三章 系统需求分析
系统需求分析，在系统设计与实现中是非常关键的一个步骤,关系到最终开发的系统功能是否完善。只有在对非功能及功能要求作了细致全面地分析后，才能明确系统所需要达到的目的，并且按照设定的需求进行功能的完善。
3.1可行性分析
本可视化新生报到系统是以学校为主体，以新生为客体，以可视化图表、学生信息管理、搜素、查询、增加数据、删除数据等功能为着眼点，从而实现信息化的新生报到数据的管理。
3.1.1 技术可行性
从技术角度出发，本可视化新生报到系统主要基于SpringBoot框架，采用MySQL 数据库，前端发出Ajax请求，通过路由地址从后台获取Json数据，并且通过SetInterval()函数每隔10s调用一次该函数，以实现ECharts前端显示数据的更新。对于ECharts的应用，有非常详细的文件和实例，并且有非常稳定的技术支持。MySQL数据库属于一个成熟的数据库管理软件，很多网站和软件都以它为基础，它可以实现稳定的数据交换和对前端和后端系统的管理。因此，基于SpringBoot的可视化新生报到系统从技术层面上具有很高可行性。
3.1.2 经济可行性
从经济的角度来看，用于开发和操作系统的软件是免费的，这是一个具有成本效益的开发的重要因素，IDEA软件开发平台，不需要复杂的配置就可以使系统正常运行，并且与大多数PC和手机浏览器兼容。其次，本系统中的数据分析工具，可以让使用者更容易地对资料进行分析与甄别，省时省力。同时，ECharts技术成本低，使用方便，非常适合该系统对新生注册信息进行管理的需要。同时，通过在高校实施虚拟注册，可以大幅度地减少高校的人力、财力等方面的投入，产生良好的经济效果。所以，这个系统在经济上是完全可行的。
3.2 非功能性需求分析
- 存储性高
随着系统的上线，学生的数目、信息量都在不断地增长，会生成大量的日志数据。因此，数据库必须能够处理大量的数据。
可视化新生报到系统应该是简单明了的，页面应该是精美简洁的，功能程序应该是易于理解和使用的。一个简单的手册将帮助用户在短时间内学会如何使用该系统。
信息安全也是一个重要的因素，如果用户和系统的信息没有得到适当的保护，系统的安全性就不能被忽视，因为信息的泄露会导致用户的经济和精神损失。
因为使用者的要求在不断地发展与改变，所以本系统必须随时随着使用者的要求而加入或移除。
系统必须能够对不正常的由使用者输入的资料进行有效且正确的处理。当发生了一些不寻常的事情后，系统会很快恢复到原来的状态。
3.3 系统功能需求分析
本可视化新生报到系统的主要目的是满足新生报到时，管理员便于对新生的信息进行管理，新生一键式报到的需求。
根据高校管理者本身管理时需要处理的业务问题以及新生报到需要实现的功能需求而言，本系统需要实现的主要功能有：学院管理、学生管理、宿舍管理、志愿者管理、基础信息采集、自助报到、一卡通申请等。
管理员登录后台可以上传学院的名称、图片以及报到指南，并执行新增、修改、删除、查询等操作。
管理员登录后台后，点击左侧菜单栏的“学生管理”，通过查询所在学院、学生姓名等来查看学生的基本信息，也可以从系统外部导入学生数据。
管理员可以对宿舍信息进行操作，可以修改宿舍号、宿舍类型、可容纳人数以及宿舍属性，并执行新增、删除、查询等操作。
管理员可以上传志愿者的基础信息，例如：姓名、性别、联系方式和所在院系，也可以对志愿者信息进行修改、删除、查询操作。
学生登录系统后首先上传图片、手机号、家庭住址以及教育经历完成基础信息的采集。
学生填写完基础信息之后，点击“自助报到”，选择缴费的方式，点击已完成缴费，完成报到流程。
学生可以点击“一卡通申请”，上传自己的证件照片，等管理员审核通过之后就有自己的一卡通。
根据身份不同，系统的使用者登录方式、界面不同，需要执行的操作也不
图3.3 学生端流程图
3.4.2 功能用例分析
由于功能相似，这里只对宿舍管理功能进行分析。宿舍管理模块可以让管理员登陆之后，对已有的宿舍信息进行更新。由于新增宿舍是宿舍管理的一个重要功能，对“新增宿舍”的用例进行描述，其具体用例描述如表3.1所示。
表3.1 用例“新增宿舍”的描述
| 描述项 | 说 明 |
| 用例名称 | 新增宿舍 |
| 参与者 | 管理员 |
| 简要说明 | 管理员需要新增宿舍以扩充宿舍的容量。该用例是宿舍管理模块的一部分 |
| 前置事件 | 管理员使用密码成功登入系统并进入宿舍管理界面 |
| 后置事件 | 填写宿舍信息，提交系统 |
| 基本事件流 |
|
| 其他事件流 | 管理员可以随时退出新增宿舍界面； |
| 异常事件流 | 在表单中，出现各式错误 |
3.5 本章小结
本章的第一部分从技术、经济两方面对该系统作了较为详细的分析，从而确认了该系统的可行性；第二部分是本章的重点，它对一些非功能性需求，如存储、启动困难，安全性等进行了详尽的分析，并对一些涉及到系统过程的用例进行了分析。
第四章 系统设计
4.1 系统设计目标
为了简化新生数据的管理，可视化新生报到系统包括可视化图表、学生管理、系部管理和宿舍管理。该系统的优点是实用、美观、先进，能成功解决新生数据管理的问题。也能减少新生报到时所需的时间，新生报到有关工作人员的工作难度。
本可视化新生报到系统的设计目标如下。
基于SpringBoot的可视化新生报到系统主要实现了新生报道时，管理员可随时查看学生的报到信息的需求。
清晰的系统结构使开发人员更容易理解和开发高级功能，有利于系统改进。
实现对基于SpringBoot的可视化新生报到系统建设操作简单的要求，以最大限度地方便用户进行操作、使用。
同时，本系统还保存有大量的学生及管理者的个人资料，以及大量的知识产权类资源，为了避免这些资料的外泄及使用者的财产损失，本系统具有很高的安全性。
4.2 系统结构设计
基于SpringBoot的可视化新生报到系统的功能结构设计，如图4.1所示。
图4.1 系统结构图
4.3 数据库设计
4.3.1 数据库实体
这个以 SpringBoot为基础的可视化的新生报到系统，采用 MySQL数据库，可以快速地储存数据。因此，建立相应的数据库势在必行。在此基础上，提出了一种基于E-R的描述方法，并将各实体及相关关系用E-R图进行描述。
- R图就是用图像和文本来表达各种要素间的相互关系。实体关系图（E-R图）具有直观、高抽象性等特点，常被应用于数据库的设计，当然，它还可应用于新生注册系统的可视化设计。E-R图由实体、属性和关系三个基本元素组成。
部分实体E-R图如图4.2所示。
图4.2 部分实体E-R图
4.3.2 数据库表
- 学院信息表
主要包含学院编号、学院名称、学院图片和学院导航。学院表如表4.1所示。
表4.1 学院信息表
| 字段名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| college_name | 学院名称 | varchar | 64 | N | N |
| college_img | 学院图片 | varchar | 256 | Y | N |
| college_guide | 学院导航 | varchar | 256 | Y | N |
- 交通指引表
主要包含编号、交通指引和图片。交通指引表如表4.2所示。
表4.2 交通指引表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| geo_desc | 交通指引 | varchar | 256 | N | N |
| geo_img | 图片 | varchar | 256 | N | N |
- 缴费记录表
主要包含编号、身份证号、创建时间、缴费状态和缴费金额。缴费记录表如表4.3所示。
表4.3 缴费记录表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| id_card | 身份证号 | varchar | 64 | N | N |
| create_time | 创建时间 | datetime | 255 | N | N |
| status | 缴费状态 | int | 2 | N | N |
| money | 缴费金额 | float | 10，2 | Y | N |
- 专业表
主要包含编号、专业代码、专业名称和学院。专业表如表4.4所示。
表4.4 专业表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| professional_code | 专业代码 | varchar | 64 | N | N |
| professional_name | 专业名称 | varchar | 64 | N | N |
| college | 学院 | varchar | 64 | N | N |
- 宿舍表
主要包含楼栋、房间号、房间类型、可容纳人数和宿舍类型。宿舍表如表4.5所示。
表4.5 宿舍表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int(11) | 11 | N | Y |
| building | 楼栋 | varchar(64) | 64 | N | N |
| room | 房间号 | varchar(64) | 64 | N | N |
| room_type | 房间类型 | varchar(16) | 16 | N | N |
| limit_num | 可容纳人数 | int(11) | 11 | N | N |
| gender | 宿舍类型 | varchar(16) | 16 | N | N |
- 宿舍分配表
主要包含编号、学生编号、宿舍号、床位和所属班级。宿舍分配表如表4.6所示。
表4.6 宿舍分配表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| student_code | 学生编号 | varchar | 64 | N | N |
| room_id | 宿舍号 | int | 11 | N | N |
| bed | 床位 | int | 2 | N | N |
| class_name | 所属班级 | varchar | 64 | N | N |
- 学生卡表
主要包含编号、学生编号、姓名、身份证号、可用余额、班级、学院、专业、审核状态、照片、创建者以及创建时间。学生卡表如表4.7所示。
表4.7 学生卡表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| student_code | 学生编号 | varchar | 64 | N | N |
| student_name | 学生姓名 | varchar | 256 | N | N |
| card_no | 身份证号 | varchar | 64 | N | N |
| money | 可用余额 | double | 10 | N | N |
| class_name | 班级 | varchar | 64 | Y | N |
| college | 学院 | varchar | 64 | Y | N |
| professional | 专业 | varchar | 64 | Y | N |
| status | 状态 | int | 2 | Y | N |
- 学生信息表
主要包含编号、身份证号、学号、学生名称、性别、入学年龄、出生日期、省份、市、区、所在学院、专业等。学生信息表如表4.8所示。
表4.8 学生信息表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| id_card | 身份证号 | varchar | 64 | N | N |
| student_code | 学号 | varchar | 64 | N | N |
| student_name | 学生名称 | varchar | 256 | N | N |
| gender | 性别 | varchar | 16 | N | N |
| age | 入学年龄 | int | 11 | Y | N |
| brithday | 出生日期 | timestamp | 255 | Y | N |
| province | 省份 | varchar | 64 | N | N |
| city | 市 | varchar | 64 | Y | N |
| area | 区 | varchar | 64 | Y | N |
| college | 所在学院 | varchar | 64 | N | N |
| professional | 专业 | varchar | 64 | N | N |
| level | 层次（普本） | varchar | 64 | N | N |
| level_code | 层次简称 | varchar | 16 | Y | N |
| class_name | 班级名称 | varchar | 64 | N | N |
| nation | 民族 | varchar | 64 | Y | N |
| status | 状态 | int | 2 | N | N |
| foreign_class | 外语专业班 | varchar | 64 | Y | N |
| foreign_languages | 外语专业 | varchar | 64 | Y | N |
| education_year | 学制 | int | 11 | Y | N |
| professional_code | 专业简称 | varchar | 64 | Y | N |
| in_grade | 入学年级 | varchar | 4 | Y | N |
| now_grade | 现年级 | varchar | 4 | Y | N |
| professional_grade | 专业年级 | varchar | 64 | Y | N |
| graduation_year | 毕业年份 | varchar | 4 | Y | N |
- 学生基础信息表
主要包含身份证号、学生照片、联系电话、家庭住址、教育经历。学生基础信息表如表4.9所示。
表4.9 学生基础信息表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| id_card | 身份证号 | varchar | 64 | N | N |
| img | 学生照片 | varchar | 256 | N | N |
| phone | 联系电话 | varchar | 11 | N | N |
| address | 家庭住址 | varchar | 1024 | Y | N |
| education | 教育经历 | varchar | 1024 | Y | N |
- 资源表
主要包含功能名称、代码、路径、类型等。资源表如表4.10所示。
表4.10 资源表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 10 | N | Y |
| function_name | 功能名称 | varchar | 64 | N | N |
| function_code | 功能代码 | varchar | 64 | Y | N |
| function_path | 功能路径 | varchar | 11 | N | N |
| function_type | 功能类型 | smallint | 2 | N | N |
| parent_function | 上级功能 | int | 10 | N | N |
| sort | 排序 | int | 10 | N | N |
| status | 状态 | smallint | 2 | N | N |
| creator | 创建人 | int | 10 | N | N |
| create_time | 创建时间 | datetime | 255 | Y | N |
| updator | 修改人 | int | 10 | N | N |
| update_time | 修改时间 | timestamp | 255 | N | N |
- 角色表
主要包含角色名称、代码，状态、创建人、创建时间、修改人、修改时间。角色表如表4.11所示。
表4.11 角色表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 10 | N | Y |
| role_name | 角色名称 | varchar | 64 | N | N |
| role_code | 角色代码 | varchar | 64 | N | N |
| status | 状态 | smallint | 2 | N | N |
| creator | 创建人 | int | 10 | N | N |
| create_time | 创建时间 | datetime | 255 | Y | N |
| updator | 修改人 | int | 10 | N | N |
| update_time | 修改时间 | timestamp | 255 | N | N |
- 用户表
主要包含用户名、密码、手机号、邮箱地址等。用户表如表4.12所示。
表4.12 用户表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 10 | N | Y |
| user_name | 用户名 | varchar | 64 | N | N |
| pwd | 密码 | varchar | 64 | N | N |
| phone | 手机号 | varchar | 11 | Y | N |
| | 邮箱地址 | varchar | 32 | Y | N |
| status | 状态 | smallint | 2 | N | N |
| creator | 创建人 | int | 10 | N | N |
| create_time | 创建时间 | datetime | 255 | Y | N |
| updator | 修改人 | int | 10 | N | N |
| update_time | 修改时间 | timestamp | 255 | N | N |
- 志愿者表
主要包含志愿者姓名、性别、手机号以及所在院系。志愿者表如表4.13所示。
表4.13 志愿者表
| 名称 | 字段意义 | 数据类型 | 字段长度 | 能否为空 | 主键 |
| id | 编号 | int | 11 | N | Y |
| volunteer_name | 志愿者姓名 | varchar | 64 | N | N |
| gender | 性别 | varchar | 16 | N | N |
| phone | 手机号 | varchar | 11 | N | N |
| college | 所在院系 | varchar | 32 | N | N |
4.4本章小结
这一章，主要介绍了系统的设计目标，系统的结构，数据库的设计以及数据库表格的设计。以多层详实的系统架构图、直观的E-R图和简明的数据库表格，阐述了系统的基本架构及数据关联模式，为系统的实现指明了方向。
第五章 系统实现
5.1学生端
5.1.1登录功能模块的实现
学生打开系统后，右侧可以看到有两个文本框输入账号以及密码进行登录，点击登录成功之后跳转到新生报到系统的学生端页面，登录界面如图5.1所示。运用Ajax实现登陆表单的验证，检测用户名密码是否正确，如代码1所示。
图5.1 登录界面图
登录的关键代码如代码1所示：
代码1 登录关键代码
form.on("submit(login)", function (data) {
var datas = "userName=" + data.field.username + "&pwd=" + data.field.password;
$.ajax({
type: "POST",
url: "/login/backLogin",
data: datas,
success: function (result) {
if (result.success == 1) {//登录成功
localStorage.userInfo = JSON.stringify(result.data);
parent.location.href = 'index.html';
} else {
layer.msg(result.error.message, {icon: 5});
}
}
,error:function (result) {
layer.msg("系统异常", {icon: 5});
}
});
return false;
})
$("#toLogin").click(function () {
window.location.href="login.html";
})
5.1.2院系报到指南功能模块的实现
学生登录之后，点击左侧菜单栏的“院系报到指南”，页面上半部分是学校图片，下半部分是各院系的照片以及名称，如图5.2所示。
图5.2 学生登录界面图
点击对应学院可以查看自己学院的报到指南和志愿者信息如志愿者姓名、性别以及联系方式，如图5.3 所示。运用getCollegeList（）方法来获取表单数据，如代码2所示。
图5.3 志愿者信息界面图
院系报到指南的关键代码如代码2所示：
代码2 院系报到指南关键代码
function setCollegeList() {
data = getCollegeList()
htmlstr = ''
for(i=0;i<data.length;i++){
tempStr = '<td width="25%" align="center" valign="middle"><a target="_blank" ' +
'class="Yuanxi PaddingTop30 college" data-url="/college/guideDetail" title="学院详情" style="border: 0;" data-id="'+data[i]['collegeName']+'">' +
'<img border="0" src="'+data[i]['collegeImg']+'" /><br />'+data[i]['collegeName']+'</a></td>'
if (i%4 == 0){
htmlstr = htmlstr+'<tr>'
htmlstr = htmlstr+tempStr
} else if(i%4 == 3){
htmlstr = htmlstr+tempStr
htmlstr = htmlstr+'</tr>'
}else{
htmlstr = htmlstr+tempStr
}
}
$("#collegeList").html(htmlstr)
}
5.1.3基础信息采集功能模块的实现
学生点击左侧菜单栏的“基础信息采集”，可以上传自己的照片、手机号、家庭住址以及教育经历，点击保存并提交，可以把信息同步到数据库中，如图5.4所示。用result.code == property.successCode来判断表单填写是否正确，如果正确显示保存成功，不正确显示系统异常，如代码3所示。
图5.4基础信息采集界面图
基础信息采集的关键代码如代码3所示：
代码3基础信息采集关键代码
form.on('submit(formSubmit)', function(data) {
var url = "/studentBase/save";
var json = $("#roleForm").serialize();
$.ajax({
type:"post",
data:json,
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
successMsg("处理成功");
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
return false;
});
5.1.4我的宿舍功能模块的实现
学生点击左侧菜单栏的“我的宿舍”，可以查看自己的宿舍所在楼栋、宿舍号、宿舍类型以及自己的室友，如图5.5所示。用function.loadData（）方法来获取宿舍的信息，如代码4所示。
图5.5我的宿舍界面图
我的宿舍的关键代码如代码4所示：
代码4我的宿舍关键代码
function loadData() {
$.ajax({
type:"get",
async:false,
url:'/room/getMyRoom',
success:function(result) {
if (result.code == property.successCode) {
var data = result.data
$("#building").val(data.building)
$("#room").val(data.room)
$("#roomType").val(data.roomType)
setRoommateList(data.studentList)
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
}
5.1.5自助报到功能模块的实现
学生点击左侧菜单栏的“自助报到”，可以看到需要缴费的金额，可选择的支付方式有微信、支付宝和银行卡，如图5.6所示。
图5.6自助报到界面图
点击已完成支付按钮，显示报到成功的界面。点击返回可以返回到主页面，如图5.7所示。
图5.7报到成功界面
自助报到的关键代码如代码5所示：
代码5自助报到关键代码
form.on('submit(formSubmit)', function(data) {
var id = $("#id").val()
var url = "/payRecord/payFor"+"?id="+id;
$.ajax({
type:"post",
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
successMsg("缴费成功");
if (payRecordType == "idCard"){
parent.$t.goToPageSimple("/payRecord/success","报到完成","/main");
} else{
parent.$t.goback("/payRecord/manage");
}
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
return false;
});
5.1.6缴费记录功能模块的实现
学生点击左侧菜单栏的“缴费记录”，可以看到的界面，如图5.8所示。
图5.8缴费记录界面图
如果显示未缴费，可以点击去缴费，跳转到缴费界面如图5.9所示。
图5.9缴费界面
缴费记录的关键代码如代码6所示：
代码6缴费记录关键代码
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs cy-page" lay-event="edit" data-url="/payRecord/add?id={{d.id}}" title="缴费">去缴费</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
5.1.7我的报到单功能模块的实现
学生点击左侧菜单栏的“我的报到单”，可以查看自己的基本信息。右上角有打印按钮，学生有需要可以打印出自己的报到单，如图5.10所示。
图5.10我的报到单界面图
我的报到单的关键代码如代码7所示：
代码7我的报到单关键代码
function setTableData(data) {
$("#studentName").text(data.studentName);
$("#college").text(data.college)
$("#studentCode").text(data.studentCode)
$("#professional").text(data.professional)
$("#className").text(data.className)
$("#level").text(data.level)
$("#educationYear").text(data.educationYear)
$("#province").text(data.province)
$("#money").text(data.money)
$("#moneyStatus").text(data.moneyStatus)
$("#room").text(data.room)
$("#bed").text(data.bed) }
5.1.8一卡通申请功能模块的实现
学生点击左侧菜单栏的“一卡通申请”，点击上传图片按钮，上传自己的身份证，然后点击提交申请，申请会同步到管理员端，管理员通过后，学生就会有自己的一卡通，如图5.11所示。
图5.11一卡通申请界面图
一卡通申请的关键代码如代码8所示：
代码8一卡通申请关键代码
form.on('submit(formSubmit)', function(data) {
var url = "/schoolCard/applySchoolCard";
var json = {"img":$("#img").val()};
$.ajax({
type:"post",
data:json,
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
successMsg("已成功提交");
$("#applyBtn").hide()
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
return false;
});
5.1.9我的一卡通功能模块的实现
学生点击左侧菜单栏的“我的一卡通”，如图5.12所示。
图5.12我的一卡通界面图
我的一卡通的关键代码如代码9所示：
代码9我的一卡通关键代码
function loadData() {
$.ajax({
type:"post",
async:false,
url:'/schoolCard/getMySchoolCard',
success:function(result) {
if (result.code == property.successCode) {
data = result.data
setTableData(data)
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
}
5.1.10一卡通充值功能模块的实现
学生点击左侧菜单栏的“一卡通充值”，可以输入自己想要充值的金额，选择支付的方式，点击确认充值，如果充值成功显示充值成功。充值失败会显示系统异常。如图5.13所示。采用Ajax实现动态检测确认充值的按钮，如代码10所示。
图5.13一卡通充值界面图
一卡通充值的关键代码如代码10所示：
代码10一卡通充值关键代码
form.on('submit(formSubmit)', function(data) {
var url = "/schoolCard/chargeSchoolCard";
var json = {"money":$("#money").val()};
$.ajax({
type:"post",
data:json,
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
successMsg("充值成功");
$("#applyBtn").hide()
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
return false;
});
5.1.11一卡通充值记录功能模块的实现
学生点击左侧菜单栏的“一卡通充值记录”，可以查看自己的充值记录，如图5.14所示。用field获取访问表格的成员变量。如代码11所示。
图5.14一卡通充值记录界面图
一卡通充值记录的关键代码如代码11所示：
代码11一卡通充值记录关键代码
function loadTable() {
layui.use('table', function(){
var table = layui.table;
var form = layui.form;
table.render({
elem: '#test'
,url:"/schoolCard/queryChargePage"
,title: '一卡通充值记录数据表',
cellMinWidth: 100,
cols: [[
{type:'numbers', title:'序号', width:80, fixed: 'left', align: "center"},
{field:'createTime', title:'创建时间', templet: function (res) {
return formatDate(res.createTime) }}
,{field:'cardNo',width:300, title:'卡号'}
,{field:'money', title:'充值金额'}
,{field:'beforeMoney', title:'充值前余额'}
,{field:'afterMoney', title:'充值后余额'}
]]
,page: true
});
});
}
5.2管理员端
5.2.1学院管理功能模块的实现
管理员点击左侧菜单栏的“学院管理”，可以对各个学院的的信息进行增删改查的操作，如图5.15所示。
图5.15学院管理界面图
点击编辑，可以上传各学院的图片、学院名称和报到指南，如图5.16所示。
图5.16编辑学院信息界面
学院管理的关键代码如代码12所示：
代码12学院管理关键代码
form.on('submit(formSubmit)', function(data) {
var url = "/college/saveCollege";
var json = $("#roleForm").serialize();
$.ajax({
type:"post",
data:json,
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
if(pageType == "edit"){
successMsg("修改成功");
}else{
successMsg("添加成功");
}
parent.$t.goback("/college/manage");
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
});
return false;
});
5.2.2专业管理功能模块的实现
管理员点击左侧菜单栏的“专业管理”，可以对专业代码、专业名称、所在学院进行增删改查的操作。点击刷新可以实时的获取数据。如图5.17所示。
图5.17专业管理界面图
专业管理的关键代码如代码13所示：
代码13专业管理关键代码
table.render({
elem: '#test'
,url:"/professional/queryProfessionalPage?college="+college+"&professionalName="+professionalName
,title: '专业数据表'
,cols: [[
{type:'numbers', title:'序号', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'professionalCode', title:'专业编码'}
,{field:'professionalName', title:'专业名称'}
,{field:'college', title:'所在学院'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]],page: true});
5.2.3学生管理功能模块的实现
管理员点击左侧菜单栏的“学生管理”，可以对学生的报到状态进行查询，如图5.18所示。使用layui.use()来加载数据列表的数据，如代码14所示。
图5.18学生管理界面图
学生管理的关键代码如代码14所示：
代码14学生管理关键代码
tabBind: function() {
layui.use(['form','upload'], function () {
var form = layui.form;
form.on('submit(formDemo)', function(data){
loadTable();
return false;
});
form.on('select(status)', function(data){
status = data.value
return false;
});
5.2.4宿舍管理功能模块的实现
管理员点击左侧菜单栏的“宿舍管理”，可以对宿舍的基本信息进行增删改查，如图5.19所示。
|
|
宿舍管理的关键代码如代码15所示：
代码15宿舍管理关键代码
form.on('submit(formSubmit)', function(data) {
var url = "/room/saveRoom";
var json = $("#roleForm").serialize();
$.ajax({
type:"post",
data:json,
async:false,
url:url,
success:function(result) {
if (result.code == property.successCode) {
if(pageType == "edit"){
successMsg("修改成功");
}else{
successMsg("添加成功");
}
parent.$t.goback("/room/manage");
} else{
errorMsg(result.msg);
}
}
5.2.5基础信息管理功能模块的实现
管理员点击左侧菜单栏的“基础信息管理”，如图5.20所示。
|
|
基础信息管理的关键代码如代码16所示：
代码16基础信息管理关键代码
table.render({
elem: '#test'
,url:"/studentBase/queryPage?idCard="+idCard
,title: '数据表'
,cols: [[
{field:'idCard', title:'身份证号'}
,{field:'img', title:'学生照片', templet: '#img'}
,{field:'phone', title:'联系方式'}
,{field:'address', title:'家庭住址'}
,{field:'education', title:'教育经历'}
]],page: true
});
5.2.6志愿者管理功能模块的实现
管理员点击左侧菜单栏的“志愿者管理”，如图5.21所示。
|
|
志愿者管理的关键代码如代码17所示：
代码17志愿者管理关键代码
initTable: function() {
var _this=this;
loadTable();
$('#btnAdd').click(function() {
localStorage.volunteerType = "add";
parent.$t.goToPage(this, "/volunteer/manage");
});
},
tabBind: function() {
layui.use(['form'], function () {
var form = layui.form;
});
}
5.2.7报到信息管理功能模块的实现
管理员点击左侧菜单栏的“报到信息管理”，如图5.22所示。
|
|
报到信息管理的关键代码如代码18所示：
代码18报到信息管理关键代码
function setTableData(data) {
$("#studentName").text(data.studentName);
$("#college").text(data.college)
$("#studentCode").text(data.studentCode)
$("#professional").text(data.professional)
$("#className").text(data.className)
$("#level").text(data.level)
$("#educationYear").text(data.educationYear)
$("#province").text(data.province)
$("#money").text(data.money)
$("#moneyStatus").text(data.moneyStatus)
$("#room").text(data.room)
$("#bed").text(data.bed)
}
5.2.8设置交通指引功能模块的实现
管理员点击左侧菜单栏的“设置交通指引”，可以上传交通指引地图供学生查看，如图5.23所示。
|
|
设置交通指引的关键代码如代码19所示：
代码19设置交通指引关键代码
{
geoImg = res.data
$("#geoImg").val(geoImg);
successMsg("上传成功");
}
,error: function(){
successMsg("上传失败");
}
});
5.2.9一卡通申请记录功能模块的实现
管理员点击左侧菜单栏的“一卡通申请记录”，如图5.24所示。
|
|
一卡通申请记录的关键代码如代码20所示：
代码20一卡通申请记录关键代码
if (obj.event === 'approval'){
var json = {"id":data.id,"status":2}
$.ajax({
type:"post",
data:json,
async:false,
url:"/schoolCard/approvalApply",
success:function(result) {
if (result.code == property.successCode) {
successMsg(result.msg);
loadTable();
} else{
errorMsg(result.msg);
}
},
error:function(result) {
errorMsg("系统异常");
}
5.3 数据库连接
Java后端连接到MySQL数据库，管理员就可以实时操作数据，例如添加或删除存储在数据库中的学生信息来交换数据。该数据库可以用数据库管理软件Navicat来管理。
本系统主要采用Mybatis的ORM框架的能力连接Java代码和数据库SQL执行，关键代码如代码21所示：
代码21数据库交互关键代码
public interface CollegeDao {
int deleteByPrimaryKey(Integer id);
int insert(College record);
College selectByPrimaryKey(Integer id);
List<College> selectAll();
int updateByPrimaryKey(College record);
Integer countByCondition();
List<College> selectByCondition(@Param("start") int start, @Param("end") int end);
College getCollegeByName(@Param("collegeName") String collegeName);
}
5.4系统可视化实现
5.4.1新生数据分析模块的实现
管理员点击可视化页面跳转，输入账号密码登入进可视化新生报到系统如图5.25所示。
图5.25可视化系统登录图
页面跳转关键代码如代码22所示：
代码22页面跳转关键代码
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
管理员登录进可视化分析系统之后，可以看到历年的新生报到的数据，如图5.26所示。
图5.26数据可视化页面
5.4.2交通指引可视化模块的实现
学生点击左侧菜单栏的“交通指引”，可以看到学校的地图，红色标记标记的是各学院的位置，根据地图可以查找到自己学院的所在地，还可以对地图进行放大和缩小，如图5.27所示。
图5.27交通指引界面图
该部分主要使用的是百度地图的api接口，先在百度拾取坐标系统里面查找想要标记的点的位置，然后在地图上添加标记，主要代码如代码23所示。
代码23交通指引关键代码
<div id="bmap" class="bmap"></div>
<script type="text/javascript">
var map = new BMapGL.Map('bmap')
var point = new BMapGL.Point(119.947157,32.481818);
map.centerAndZoom(point, 18)
map.enableScrollWheelZoom(true)
var marker1 = new BMapGL.Marker(new BMapGL.Point(119.944635,32.482522));
var marker2 = new BMapGL.Marker(new BMapGL.Point(119.944543,32.480847));
var marker3 = new BMapGL.Marker(new BMapGL.Point(119.944096,32.481004));
var marker4 = new BMapGL.Marker(new BMapGL.Point(119.947291,32.478404));
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
</script>
5.4.3数据可视化模块的实现
通过ECharts结合新生报到的数据生成可视化图表，分别有新生报到年龄分布、新生迁徙图、新生报到性别分布、省份分布、各学院男女生分布以及新生报到民族分布，主要使用的图表有饼状图、柱状图、地图模块，如图5.28所示。
图5.28可视化图表
现对每个类型的图表部分模块进行分析：
- 新生报到年龄分布
该部分采用的是饼状图，能够直观的看出新生大多分布在什么年龄段，能够更加直观清晰的统计出来具体的数字，不像传统的报到模式那样，不能够统计出总体的数字，把鼠标放在饼状图上可以查看每个年龄得人数以及这个年龄得人数占所有新生人数的比重如图5.29所示。
图5.29新生报到年龄分布饼状图
Echarts根据所有数据的值（value），按照这些值的比列来分配它们在饼状图中对应的弧度。饼状图的半径使用series.radius来设置，本饼状图设置的是55%，部分代码如代码24所示：
代码24新生报到年龄分布关键代码
series: [
{
name: '新生报到年龄',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: result1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
- 新生迁徙图
新生迁徙图能够动态的显示新生的流向情况，能够快速、直接的展现数据流向的轨迹和特征，如图5.30所示。
图5.30新生迁徙图
新生迁徙图的制作首先需要在百度地图的拾取坐标系统里面获取每个城市的坐标以及在百度上下载地图，然后用effect来设置特效的动画时间、尾迹长度以及图形标记等，关键代码如代码25所示：
代码25新生迁徙图关键代码
<body>
<div class="viewport">
<div class="column">
<div class="panel">
<div id="map1" class="echartsStatics"></div>
</div>
<div class="panel">
<div id="map2" class="echartsStatics"></div>
</div>
</div>
<div class="column">
<div class="map">
<h3>
<span class="icon-cube"></span>
南京师范大学泰州学院新生迁徙图
</h3>
<div class="chart">
<div id="geo" class="geo"></div>
</div>
</div>
<div class="panel">
<div id="map5" class="echartsStatics"></div>
</div>
</div>
<div class="column">
<div class="panel">
<div id="map3" class="echartsStatics" ></div>
</div>
</body>
- 新生报到省份分布
新生报到省份分布采用的是柱状图，因为新生的人数很多，信息也很多，柱状图能
够方便管理员更直观的查看到每个省份分布的人数以及比较各个省份相互之间的数量关系。鼠标放在每个柱子上可以查看到每个省份的人数，如图5.31所示。
图5.31新生报到省份分布图
该新生报到省份分布的柱状图的制作首先需要在Echarts上找到柱状图的代码框架，然后准备柱状图x轴和y轴的数据，然后获取数据库里面的数据，用到柱状图里面，关键代码如代码26所示。
代码26新生报到省份分布关键代码
var myChart2 = echarts.init(document.getElementById('map2'));
var legend2 = []
var result2 = []
$.ajax({
type:"get",
async:false,
url:"/student/getStaticByProvince",
success:function(result) {
if (result.code = 200) {
data = result.data;
legend2 = data.legend
result2 = data.data
} else {
layer.msg(result.msg);
}
},
error:function(result) {
layer.msg("系统异常");}
});
5.5本章小结
这一章全面介绍了整个系统的每个模块，显示了学生或管理员方面的每个界面，分析了学生注册数据是如何与数据库结合起来管理的，还显示了每个模块的关键代码。描述了系统可视化的实现方法以及过程。
第六章 系统测试
6.1测试定义
系统测试的主要目的是为了排除整个系统可能出现的问题，确保所有方面都能顺利运行，并迅速修复发现的任何错误。
根据划分方式不同，可以将软件测试划分成多种类型，例如按阶段划分、按是否查看代码划分、按是否执行程序划分。按照阶段划分，可以将软件工程划分成单元测试（Unit Testing）、集成测试（Integration Testing）、系统测试（System Testing）、验收测试（Acceptance Testing），各类型测试特点如表6.1所示。
表 6.1 按阶段划分软件测试类型
| 测试类型 | 测试阶段 | 测试对象 | 测试人员 | 测试依据 | 测试方法 | 测试内容 |
| 单元测试 | 编码后 | 最小模块 | 白盒测试工程师 | 代码以及设计文档 | 白盒测试 | 接口测试、局部数据结构测试、路径测试、错误处理测试、边界测试 |
| 集成测试 | 单元测试之后 | 模块间的接口 | 白盒测试工程师 | 单元测试模块及设计文档 | 白盒黑盒测试 | 模块之间数据传输及功能冲突、模块组装功能正确性、全局数据结构、单模块缺陷对系统的影响 |
| 系统测试 | 集成测试之后 | 整个系统 | 黑盒测试工程师 | 需求规格说明文档 | 黑盒测试 | 功能、界面、可靠性、易用性、性能、兼容性、安全性等 |
| 验收测试 | 最后阶段 | 整个系统 | 最终用户或需求方 | 用户需求验收标准 | 黑盒测试 | 功能、界面、可靠性、易用性、性能、兼容性、安全性等 |
6.2测试目的
测试的目的是通过在系统正式运行前对系统的功能进行检测，避免系统今后可能出现的风险，减少人力、物力和时间资源的浪费。将测试结果和测试过程中获得的测试信息作为重要投入，用于随后的项目开发和测试，并避免今后项目开发和测试中再次出现同样的错误。
本系统需要经过系统测试，检验系统中是否存在漏洞和安全隐患，验证该系统能不能符合用户的需要。
6.3测试用例
6.3.1用户登录功能测试
通过输入账户密码，进行登录，具体情况如图6.1所示。
图6.1 用户登录功能测试
首次测试用户登录时可以输入账户密码可以进行登录，但是只能看到可视化图表，不能进行报到操作。查找系统发现需要管理员设置用户的操作权限，管理员授权给学生账号之后才能进行报到注册的操作。
6.3.2管理员宿舍管理功能测试
点击编辑宿舍，填写宿舍所在楼栋、宿舍号、宿舍类型以及可容纳的人数、属性，点击保存按钮，成功新增宿舍，具体情况如图6.2所示。
图6.2管理员宿舍管理功能测试
6.3.3学生自助报到功能测试
选择支付方式点击已完成支付跳转到报到完成页面。如图6.3所示。
图6.3学生自助报到功能测试
6.4测试结果
经过对基于SpringBoot的可视化新生报到系统各模块的功能测试，验证系统功能完全可以满足用户的需求，符合预期设计。本系统操作简单，功能强大，使值得推给各个高校的新生和管理员使用的新生报到系统。
6.5本章小结
本章对测试进行了定义，对测试进行了分类，提出了测试的目标，并使用一些使用场景对系统的性能进行了测试，包括登录、管理员对宿舍信息的控制和学生的自我注册功能。系统的潜在问题被及时发现并解决，这样用户就不会对系统感到沮丧。
总 结
对SpringBoot可视化新生报到系统的部分功能模块进行了简单的测试证明该系统是可以运行并且能够满足用户的要求的，并能够按照预期设计。该系统界面友好，功能强大，对所有新生和管理员都很有用，主要功能有：登录、可视化图表生成、学院管理、院系报到指南、专业管理、学生管理、基础信息管理等。学生端主要实现的功能有基础信息采集、自助报到、一卡通申请、充值等功能。在本系统的开发过程中，主要采用了IDEA软件开发工具+ECharts+MySQL的框架。采用MySQL 数据库，前端发出Ajax请求，通过路由地址从后台获取Json数据，并且通过SetInterval()函数每隔10s调用一次该函数，以实现ECharts前端显示数据的更新。MySQL通过表来存储数据，而Navicat则将数据库操作可视化。
在学习课程中，我能够找出自己的弱点，丰富我的项目经验，并为这项具有挑战性的任务培养独立思考和实践能力。当问题出现时，我向导师和同学寻求帮助，他们耐心地帮助我克服困难。结果，我逐渐完成了我的项目，并且能够使用专业网站和相关文献来指导我的系统设计过程。尽管困难重重，但当项目完成时，我所感受到的喜悦远远超过了辛苦的工作，我觉得这些辛苦是值得的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
