基于Web的大学生计算机设计大赛报名网站的开发

基于Web的大学生计算机设计大赛报名网站的开发

媛麻+：

摘要 I
关键词 I
Abstract I
Key words I
前言 1
1 开发环境及技术 1
1.1 开发环境 1
1.2 开发技术 1
2 需求分析 2
2.1 功能需求分析 2
2.2 用户角色分析 2
2.3 系统用例分析 3
3 开发内容 4
3.1 系统功能结构 4
3.2 数据库 5
3.2.1 概念结构 5
3.2.2 逻辑结构 8
3.2.3 物理结构 9
3.3 功能模块 11
3.3.1 登录模块 11
3.3.2 注册模块 12
3.3.3 消息模块 13
3.3.4 搜索模块 14
3.3.5 管理比赛模块 14
4 实现功能 16
4.1 登录实现 16
4.2 注册实现 16
4.3 消息实现 17
4.4 搜索实现 18
4.5 管理比赛实现 18
5 测试 19
5.1 测试目的 19
5.2 测试方法 19
5.3 测试结果 20
6 总结与展望 21
参考文献 22
致谢 23

摘要

对于传统计算机比赛的举办方式而言，工作量巨大，容易出现错误是很大的一个问题。本文将设计出一套Web应用程序来代替线下举办的比赛，另外设计平均分配算法，将报名人尽可能平均的分配给评审人进行评审。
本次开发的Web应用程序用到的技术是Vue和Spring Boot，数据库采用关系型数据库MariaDB，运行环境为Linux。
该程序是由前端Vue框架和后端Spring Boot框架进行开发。前台功能包括登录、注册（分学生和老师用户组）、查看比赛、报名比赛（仅学生操作）、评审（仅老师操作）、查看消息、查看公告、修改个人信息、发送消息（仅老师操作）、查看比赛结果等操作。管理员的后台功能由：用户管理，组管理，比赛审核、比赛管理、消息管理、发布公告、报名评分管理、评论管理、标签管理、分类管理等操作。

关键词

Vue；Vuex；Spring Boot；Element UI；MyBatis-Plus

Abstract

For the traditional way of holding computer competitions, the huge workload and the tendency to make mistakes is a big problem. In this paper, we will design a web application to replace the contest held offline, and additionally design an even distribution algorithm to distribute the registrants as evenly as possible to the judges for judging.
The technologies used in this developed web application are Vue and Spring Boot, the database is MariaDB, a relational database, and the running environment is Linux.
The application is developed by front-end Vue framework and back-end Spring Boot framework. Front-end functions include login, registration (divided into student and teacher user groups), view contest, register contest (student operation only), review (teacher operation only), view messages, view announcements, modify personal information, send messages (teacher operation only), view contest results and other operations. The administrator’s background functions consist of: user management, group management, competition review, competition management, message management, announcement, registration and scoring management, comment management, tag management, category management and other operations.

Key words

Vue；Vuex；Spring Boot；Element UI；MyBatis-Plus
前言
以往人们参加比赛需要到现场填写报名表、缴费、拍照等一系列繁琐的步骤，然而报名人可能因字迹潦草、信息填写不完整等问题导致工作人员录入信息出错。如果报名人数多，工作人员人手不足，也会增大出错几率（张琳，2009）。
然而在互联网飞速发展的今天，已然成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用（王心慧，2007）。成为政府、企事业单位信息化建设中的重要组成部分，倍受人们的重视（赵浩翔，2019）。因此各种比赛举办方都认识到了网上比赛的优势，开始结合自己的实际情况开发网上报名系统，基于网络的比赛系统正成为人们研究的热点之一。
现阶段，网站已成为世界互联网中的一个重要力量，现今的社会，人们已经离不开了网络，网络已经成为人与人，人与社会之间交流的一种重要形式，他能够把事情的复杂化转为简单化（陆峰，2007）。而大学生计算机设计大赛网站，恰好是世界互联网迅猛发展过程中的必然产物，学生能够通过网站进行报名（罗坤，2021），不管是其便捷程度，准确度，还是对于工作人员的审核工作，都是一种良性的发展，因此设计并开发出该网站将是符合新时代的发展规律。

1 开发环境及技术
1.1 开发环境
该Web应用程序采用B/S模式（金明俐，2021）（田海晴，2021），在macOS Monterey 12.0.1操作系统上面进行开发，使用IntelliJ IDEA 2021.3.1作为开发工具、Navicat Premium 16作为数据库管理工具、Google Chrome浏览器作为测试程序。
1.2 开发技术
（1）Vue
前端使用Vue框架进行开发，它是一套用于构建用户界面的渐进式JavaScript框架，Vue的核心库只关注视图层，便于第三方库或既有项目整合（李广宏，2019）。
（2）Vuex
在前端框架中使用Vuex进行集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化（刘启伟，2022）。
（3）Vue Router
使用Vue Router路由管理器实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单（蔡泽铭等，2020）。
（4）Element UI
前端采用Element UI桌面端组件库进行开发，使得设计样式、图标、文本、元素的位置等在界面中保持一致性。
（5）Spring Boot
后端使用Spring Boot进行开发，它是Spring本身的扩展，使开发、测试和部署更加的方便（周黎宁，2021）。解决了Spring配置多等问题，精简项目，对开发以及维护来说节约了很大的成本。
（6）MyBatis-Plus
使用MyBatis的增强工具帮助后端更好的开发，强大的CRUD操作，自动生成主键、自定义全剧以通用操作、分页插件、支持多种数据库。
（7）JsonWebToken
这是一个开放标准协议，主要用来分布式的单点登录场景，可以使用跨域认证解决方案，实现自动刷新token的方案。
（8）MariaDB
数据库采用MariaDB关系型数据库，它完全兼容MySQL，并从10.0版本开始数据特征、线程池、子查询优化、性能等都超越了MySQL。
2 需求分析
2.1 功能需求分析
网站的主要功能模块有登录注册模块、信息展示模块、消息模块、前台比赛管理模块、评审模块、比赛审核模块、搜索比赛模块、查看评审结果排名模块。
登录功能：用户输入手机号或邮箱、密码、验证码后点击登录按钮，后端查询出账号对应的数据，然后比较密码是否相同，最后提示登录成功或失败。
注册功能：注册共三步，第一步需要输入姓名、手机号、邮箱、密码，点击下一步后，到数据库查询手机号和邮箱是否存在，如果存在则提示并清除对应输入框的内容。第二步输入学校、地址、选择性别和生日；第三步选择身份，身份只能是学生或者老师，选择学生则直接显示出提交按钮。选择老师会弹出加入组或是创建组，选择加入组会弹出一个窗口，窗口提示输入一个五位数的编码，编码查询数据库成功即可加入，否则提示并弹出创建组的窗口。选择创建组会提示输入名称和编码，验证完成会关闭窗口并显示出提交按钮。
首页展示：展示一个最新比赛，要求拥有倒计时功能，显示报名开始、报名结束、比赛开始、比赛结束的时间。展示比赛列表，展示公告通知。
消息功能：点击右上角的消息按钮弹出消息列表，删除已读消息和删除选中消息功能。消息列表中展示标题，时间，发布人和已读未读状态，点击跳转到详情页面，并将未读消息转为已读。
管理比赛：该功能只有老师可用。展示一个比赛列表和添加比赛按钮，列表中的数据是该用户组下的所有比赛，列表中展示比赛名称、发布人、审核状态、报名人数、发送消息、修改比赛、评审、删除功能。
评审功能：该功能只有报名结束后才可使用。第一次进入评审功能会根据“平均分配算法”生成一个JSON文件，在文件中查找该用户负责评审的用户并展示。如果查找不到会重新执行一次“平均分配算法”。
比赛审核：添加或修改比赛后，该比赛会进入一个待审核的状态，后台管理员查看该比赛是否合规并给予通过或不通过的审核状态，不通过需要给与一个理由。
搜索功能：用户输入一个字符串，在数据库查找符合该字符串的比赛并展示。
评审结果：用户在个人中心点击评审完成的比赛后，会跳出一个窗口，该窗口展示参赛人、评审人、排名、得分、评语。
2.2 用户角色分析
根据需求，该Web应用程序的角色可分成三类：学生、老师和网站管理员，一共三个角色。
（1）学生
学生用户可以进行登录、修改个人信息、报名比赛、搜索比赛、查看比赛、查看消息和查看比赛结果等操作。
（2）老师
老师用户拥有游客的所有操作，学生除去报名之外的所有操作。另外，老师可以进行发布比赛、修改比赛、删除比赛、发送消息、评审比赛等操作。
（3）管理员
管理员的主要任务是对Web应用程序的管理操作。这个角色需要管理整个网站的数据，且不能进行学生和老师相关的操作，智能进行组管理、用户管理、比赛管理、消息管理、报名评分管理和审核管理。

2.3 系统用例分析
学生的用例有登录、修改个人信息、报名、查看评审结果、查看消息、删除消息、查看公告、退出登录。学生用例如图2-1所示。

图2-1 学生用例图
老师的用例有登录、修改个人信息、比赛管理、评审比赛、发送消息、查看消息、删除消息、查看公告、退出登录。老师用例如图2-2所示。

图2-2 老师用例图
管理员的用例有登录、发送公告、管理组、管理报名评分、管理标签。管理消息、管理比赛、管理老师、管理分类、管理评论、管理学生、审核比赛。管理员用例如图2-3所示。

图2-3 管理员用例图
3 开发内容
3.1 系统功能结构
系统的功能结构如图3-1所示。

图3-1 系统功能结构图
（1）学生
登录：用户输入手机号（或邮箱）、密码和验证码进行登录。
个人信息修改：用户需要进入到个人中心的页面，方可修改固定的一些个人资料，而不是全部。
查看成绩：展示学生参加的比赛的成绩、排名、评语和评审人。
报名：学生需要在规定时间内报名，在其他时间报名不可用。
（2）老师
比赛管理：仅展示老师所属组下面的所有比赛，可以根据业务需求可以添加比赛、删除比赛、修改比赛。
评审比赛：报名结束后才可使用，该比赛所属组的任意老师首次进入该功能会执行“平均分配算法”生成一个json文件，并将算法生成的结果拼凑成一个sql语句，将查询出的结果返回给前端展示。当其他老师进行评审时，会直接从json文件中查找结果，而不是重新执行算法。
发送消息：用户选择比赛后面的发送消息后，弹出一个窗口，输入标题和内容发送后，该比赛的所有报名用户会收到一条消息。
（3）管理员
消息管理：管理员查看消息的发布人、接收人、消息标题、消息内容。并且可以发送消息给选中的用户，或是发送公告。
报名评分管理：管理员管理所有学生的报名和评分，包括查看报名的比赛、比赛得分、评审人、评语。
审核比赛：管理员查看比赛的审核状态，如果是未审核则需要进行审核，可选择通过或不通过，不通过需要输入不通过的理由。
标签管理：管理员查看标签的ID、标签名称、标签创建时间和标签修改时间。根据页面上的按钮，可以对标签进行添加、修改、删除操作。
评论管理：管理员查看评论的ID、内容、比赛名称、评论人、评论发布日期、评论修改日期、点赞总数、踩总数。根据前端给予的功能按钮进行对应的操作。

3.2 数据库
3.2.1 概念结构
本程序拥有五个实体，分别为：组、用户、消息、比赛、报名评分。
组实体属性如图3-2所示。

图3-2 组实体属性图
学生实体属性如图3-3所示。

图3-3 学生实体属性图

比赛实体属性如图3-4所示。

图3-4 比赛实体属性图
消息实体属性如图3-5所示。

图3-5 消息实体属性图
老师实体属性如图3-6所示。

图3-6 老师体属性图
管理员实体属性如图3-7所示。

图3-7 管理员实体属性图
评论实体属性如图3-8所示。

图3-8 评论实体属性图
分类实体属性如图3-9所示。

图3-9 分类实体属性图
标签实体属性如图3-10所示。

图3-10 标签实体属性图
报名评分实体属性如图3-11所示。

图3-11 报名评分实体属性图
在该程序中，实体之间存在着各种对应关系，如：1对1、1对N、N对N，这些实体之间的关系形成了一个全局的ER图，如图3-12所示。

图3-12 全局E-R图
3.2.2 逻辑结构
根据逻辑结构分析，在该程序中共有五个相应的关系模式，它们为：
组关系模式（组ID，组名称，组编码）
用户关系模式（用户ID，姓名，性别，出生日期，学校，地址，手机号，邮箱，用户组，密码）
比赛关系模式（比赛ID，比赛标题，比赛开始时间，比赛内容，比赛结束时间，比赛宣传图，发布人，所属组，报名开始时间，报名结束时间，比赛审核状态，比赛审核说明）
消息关系模式（消息ID，接收人，标题，内容，发布人，时间，读取状态）
报名评分关系模式（报名评分ID，比赛ID，参赛者，评审状态，评审人，评审内容，成绩）
3.2.3 物理结构
现在针对已有的逻辑结构设计出最适合应用要求的物理结构。
组表，如表3-1所示。
表3-1 组表
字段名 数据类型 是否为空 约束条件 默认值 说明
group_id INT 否 主键 自增长 组ID
group_name VARCHAR(10) 否 唯一键 组名称
encoding CHAR(5) 否 唯一键 组编码
学生表，如表3-2所示。
表3-2 学生表
字段名 数据类型 是否为空 约束条件 默认值 说明
id INT 否 主键 自增长 用户ID
name VARCHAR(10) 否 姓名
sex TINYINT(1) 否 性别
birthday DATE 否 出生日期
school VARCHAR(20) 否 学校
address VARCHAR(50) 是 地址
phone CHAR(10) 否 唯一键 手机号
email CHAR(100) 否 唯一键 邮箱
group_id INT 否 外键 用户组
password CHAR(32) 否 密码（MD5）
比赛表，如表3-3所示。
表3-3 比赛表
字段名 数据类型 是否为空 约束条件 默认值 说明
contest_id INT 否 主键 自增长 比赛ID
contest_title varchar(50) 否 比赛标题
contest_text longtext 否 比赛内容
url varchar(255) 否 比赛宣传图
promulgator INT 否 外键 发布人
group_id INT 否 外键 所属组
reg_start_time DATETIME 否 报名开始时间
reg_end_time DATETIME 否 报名结束时间
start_time DATETIME 否 比赛开始时间
end_time DATETIME 否 比赛结束时间
status TINYINT(1) 否 FALSE 比赛审核状态
status_text VARCHAR(255) 是 NULL 比赛审核说明
消息表，如表3-4所示。
表3-4 消息表
字段名 数据类型 是否为空 约束条件 默认值 说明
message_id INT 否 主键 自增长 消息ID
recipient INT 否 外键 接收人
title varchar(20) 否 消息标题
text text 否 消息内容
sender INT 否 外键 发布人
time DATETIME 否 当前时间 发布时间
status TINYINT(1) 否 FALSE 消息读取状态
老师表，如表3-5所示。
表3-5 老师表
字段名 数据类型 是否为空 约束条件 默认值 说明
id INT 否 主键 自增长 用户ID
name VARCHAR(10) 否 姓名
sex TINYINT(1) 否 性别
birthday DATE 否 出生日期
school VARCHAR(20) 否 学校
address VARCHAR(50) 是 地址
phone CHAR(10) 否 唯一键 手机号
email CHAR(100) 否 唯一键 邮箱
group_id INT 否 外键 用户组
password CHAR(32) 否 密码（MD5）
管理员表，如表3-5所示。
表3-6 管理员表
字段名 数据类型 是否为空 约束条件 默认值 说明
id INT 否 主键 自增长 报名评分ID
username CHAR(20) 否 用户名
password CHAR(32) 否 密码（MD5）
名称 VARCHAR(10) 否
评论表，如表3-5所示。
表3-7 评论表
字段名 数据类型 是否为空 约束条件 默认值 说明
Id Int(4) 否 主键 自增长 评论ID
Text Text 否 内容
User_Id Int(4) 否 外键 评论人
contest_id Int(8) 否 外键 比赛id
Create_Time DateTime 否 创建日期
Update_Time DateTime 否 更改日期
Like_Count lint 否 点赞数
Dislike_Count Int 否 踩数
分类表，如表3-5所示。
表3-8 分类表
字段名 数据类型 是否为空 约束条件 默认值 说明
Id Int(4) 否 主键 自增长 Id
Cate_Name VarChar(16) 否 名称
Cate_Sort Int(2) 否 排序
Cate_Desc VarChar(100) 否 描述
Create_Time DateTime 是 创建的日期
Update_Time DateTime 是 更新的日期
标签表，如表3-5所示。
表3-9 标签表
字段名 数据类型 是否为空 约束条件 默认值 说明
Id Int(4) 否 主键 自增长 标签的编号
Tag_Name VarChar(12) 否 标签的名称
Create_Time DateTime 否 创建的日期
Update_Time DateTime 否 更改的日期
报名评分表，如表3-10所示。
表3-10 报名评分表
字段名 数据类型 是否为空 约束条件 默认值 说明
scores_id INT 否 主键 自增长 报名评分ID
contest_id INT 否 外键 比赛ID
contestant INT 否 外键 参赛者
status TINYINT(1) 否 FALSE 评审状态
judge INT 是 外键 NULL 评审人
text text 是 NULL 评审内容
result TINYINT(3) 是 NULL 成绩
3.3 功能模块
3.3.1 登录模块
Login.vue是登录页面，该页面需要用户输入账号（手机号或邮箱）、密码和验证码，前端将填写的信息发送到后端，后端将数据与数据库进行匹配，如果匹配成功，成功则返回一个token给前端（程晓旭，2002）。前端再将token传给后端，后端解密后将用户数据传给前端，并存储在Vuex里面，最后跳转到首页。登录功能流程如图3-13所示。

图3-13 登录功能流程图
3.3.2 注册模块
Register.vue是注册页面，该页面分为三步，各个步骤的详细情况如下：
（1）注册第一步
第一步需要输入姓名、手机号、邮箱、密码（需要满足6-16位，且至少包含一位数字和字母），点击下一步后，前端将手机号和邮箱发送到后端，后端在数据库查询手机号和邮箱是否存在，如果存在则提示并清除对应输入框的内容；
（2）注册第二步
第二步需要输入学校、地址、选择性别和生日；
（3）注册第三步
第三步选择身份，身份只能是学生或者老师，选择学生则直接显示出提交按钮。选择老师会弹出加入组或是创建组，选择加入组会弹出一个窗口，窗口提示输入一个五位数的编码，将编码传入后端匹配数据库，匹配成功即加入成功，匹配失败会提示并弹出创建组的窗口；选择创建组会提示输入组名称和组编码，前端验证完成后，由后端将数据存入数据库。最后前端关闭所有弹出窗口，将隐藏的提交按钮显示出来，用户点击提交，后端校验全部数据，返回注册成功与否的结果。
注册模块流程如图3-14所示。

图3-14 注册功能流程图
3.3.3 消息模块
消息功能属于UserInfo.vue文件其中的一部分。该功能需要登录后才可使用，右上角的消息角标展示有多少条未读消息，点击后打开消息“抽屉”，展示所有消息的标题、发送时间、发布人和已读未读状态。点击消息列表中的一个，程序将跳转至内容页面，将详细内容、发布人、发布时间展示到页面上；点击删除已读可删除所有已读的消息。消息块流程如图3-15所示。
在消息模块中存在查看详情、删除选中和删除已读这三个子功能。
（1）查看消息详情
查看消息需要点击消息列表中的任意一条消息，前端将消息id传入后端，后端将查询到的结果返回前端，由前端跳转到详情页面，并将数据展示；
（2）删除选中消息
该功能首先需要点击左侧多选框进行选择，然后点击删除选中消息按钮，前端将选中的消息id发送给后端，由后端将这些消息从数据库中删除，并返回删除成功或失败的结果，前端展示出来；
（3）删除已读消息
点击删除已读消息按钮后，由后端将该用户所有已读的消息进行删除，并返回删除成功或失败；

图3-15 消息功能流程图
3.3.4 搜索模块
Header/index.vue文件其中一部分是搜索功能，而搜索出来的结果将由Search.vue页面展示出来。该功能需要在顶部的搜索框输入搜索内容，前端将数据发送给后端，后端通过查询数据获取查询结果，由前端展示。搜索模块流程如图3-16所示。

图3-16 搜索功能流程图
3.3.5 管理比赛模块
Manage/index.vue是管理比赛功能的主页面。该功能需要老师用户登录后才可使用，页面拥有添加比赛子功能；展示用户所属组的全部比赛，并且每一行根据数据不同属性拥有不同子的功能：发送消息、修改比赛、删除比赛和评审比赛。另外该页面还有发送消息的子功能，需要输入标题和内容后发送，接收消息的对象是该比赛的所有报名者。管理比赛模块流程如图3-17所示。

图3-17 管理比赛流程图
在管理比赛模块中，存在添加比赛、修改比赛、删除比赛、发送消息和评审比赛这五个子功能。
（1）添加比赛和修改比赛
添加比赛和修改比赛这两个子功能共用一个页面Contest.vue。该页面根据输入的数据不同所展示的内容也不同，如果有数据输入为修改比赛，没有则为添加比赛。该页面需要输入的数据有比赛名称、图片URL地址、比赛内容、报名开始时间、报名结束时间、比赛开始时间和比赛结束时间（ZHANG，2021）。全部输入完成才能提交，并且该比赛会进入审核状态，由后台管理员审核后方可展示在发现页面；
（2）删除比赛
删除比赛功能集成在管理比赛模块中。
（3）发送消息
发送消息功能集成在比赛管理模块。点击发送消息后，会弹出一个窗口，需要输入消息标题和内容，点击发送后，由后端进行处理，将发送消息的结果返回前端进行展示；
（4）评审比赛
评审比赛子功能在Score.vue页面，进入Score.vue页面需要先展示被评审人列表，展示被评审人列表在Review.vue页面，该页面需要比赛报名结束后才可使用。进入后，后端会查找操作系统用户目录下.ReviewAllot/group?/Contest#.json文件（其中?表示用户组的ID，#表示比赛ID）中对应的值。如果找不到则执行平均分配算法，将结果值拼成sql语句查询，把查询出的结果在前端展示出来，然后点击评审或查看。进入Score.vue页面进行评审或修改。
平均分配算法首先获取用户的id、评审老师列表和报名学生列表，将报名学生的人数除以评审老师的人数，随后计算出他们的商和余，执行createMap()函数，如果有余数需要传入商值和余值，如果没有余数只传入商值即可。随后用用户id去找map中对应的值并返回。算法流程如图3-18所示

图3-18 平均分配算法流程图
4 实现功能
4.1 登录实现
登录功能由前端将用户输入的数据发送给后端，后端首先判断存储在session的验证码是否与用户输入的一直，然后将输入的账号和密码跟数据库进行匹配，如果正确就返回一个token给前端，否则返回账号密码错误的信息。登录功能的页面如图4-1所示。

图4-1 登录页面
4.2 注册实现
注册功能由三部分注册，第一步会将手机号和邮箱发送给后端进行数据验证，如果数据不存在数据库才可进行下一步，登录第一步页面如图4-2所示；第二步输入相应的信息，由前端进行验证和约束才可进行下一步，登录第二步页面如图4-3所示；第三步需要选择学生和老师身份，选择学生直接跳出提交按钮。登录第三步页面如图4-4所示。

图4-2 登录第一步页面

图4-3 登录第二步页面

图4-4 登录第三步页面
4.3 消息实现
消息功能需要用户登录后才可使用。登录后，点击右上角的消息按钮弹出消息“抽屉”，展示消息标题、时间、发布人和状态，点击消息将会向后台发送消息id的数据，后端根据消息id将消息详情返回给前端，前端打开一个页面进行展示，同时消息的状态由未读转为已读（方生，2021）。
删除消息需要勾选左侧多选框，前端将勾选的消息id发送到后端，后端操作数据库进行删除。与删除多条消息不同的是，删除已读是将用户id发送给后端。消息页面如图4-5所示。

图4-5 消息页面
4.4 搜索实现
搜索功能是将用户输入的搜索内容发送到后端，后端查询数据库，将模糊查询的列表返回给前端进行展示。搜索页面如图4-5所示。

图4-6 搜索页面
4.5 管理比赛实现
管理比赛只能老师才可使用。进入该页面后台将该用户所属组的所有比赛查询出来给前端展示出来，管理比赛页面如图4-7所示。
评审比赛需要在管理比赛页面点击比赛列表后面的评审按钮，进入到一个展示评审对象的页面，点击评审对象后，将展示评审对象的信息（薄志强，2020），评审页面如图4-8所示。

图4-7 管理页面

图4-8 评审页面
5 测试
5.1 测试目的
测试的目的主要是保证Web应用程序上线之后，各个功能能够正常平稳且没有bug的运行下去，因为测试的本质就是找出应用程序与需求的不同之处，如发现两者不一致，则表示出现了问题。未测试的程序可能会影响后续的使用体验，导致不符合设计要求（张恩程，2018）。测试结果会帮助开发者更好的优化程序。
5.2 测试方法
功能测试是一个重要的环节，一般可分为两种：黑盒测试和白盒测试（QU，2021）。本次测试采取黑盒测试来进行。为确保Web应用程序能够正常使用，本次测试将选择部署至服务器运行，另寻一台主机进行各个用户的各项业务功能测试。详细信息查看表5-1至表5-2
表5-1 服务器环境
名称 版本 说明
操作系统 CentOS Linux release 8.2.2004 (Core) Linux系统的发行版之一
Java jkd-8u321(1.8) Java开发工具包
数据库 MariaDB 10.5.12 Mysql数据库的一个分支
代理Web服务器 Nginx 1.20.1 部署静态页面
表5-2 用户主机环境
名称 版本
操作系统 macOS Monterey 12.3.1
浏览器 Google Chrome 101.0.4951.54

5.3 测试结果
登录功能的测试，首先测试正确的账号、密码和验证码，测试结果查看表5-3；其次测试正确的账号和密码，错误的验证码，最后测试正确的账号，错误的密码，正确的验证码，测试结果查看表5-4。
表5-3 登录成功测试
前置条件 用户未登录
测试方法 黑盒测试
输入数据 13886961359,13886961359,正确的验证码
执行步骤 点击登录
预期输出 登录成功，跳转到首页
实际结果 登录成功，跳转到首页
结论 通过
表5-4 登录失败测试
前置条件 用户未登录 用户未登录
测试方法 黑盒测试 黑盒测试
输入数据 13886961359,13886961359,错误的验证码 13886961359,admin,正确的验证码
执行步骤 点击登录 点击登录
预期输出 提示：验证码已失效，请刷新！ 提示失败
实际结果 提示：验证码已失效，请刷新！ 提示失败
结论 通过 通过
消息功能的测试，登录成功后，点击右上角的消息按钮，弹出消息“抽屉”。首先点击消息列表，将跳转到消息详情页面，测试结果查看表5-5；再次打开消息列表，选中三条消息，并点击删除按钮，测试结果查看表5-6。
表5-5 查看消息详情测试
前置条件 用户已登录
测试方法 黑盒测试
输入数据 无
执行步骤 点击消息列表中的一个
预期输出 跳转至消息详情页面
实际结果 跳转至消息详情页面
结论 通过
表5-6 删除选中消息测试
前置条件 用户已登录
测试方法 黑盒测试
输入数据 无
执行步骤 点击消息按钮，选中三条消息，点击删除
预期输出 提示：删除成功。且消息列表不显示已删除的消息
实际结果 提示：删除成功。且消息列表不显示已删除的消息
结论 通过
搜索功能的测试：搜索框输入“2022”并点击搜索，测试结果查看表5-7。
表5-7 搜索比赛测试
前置条件 无
测试方法 黑盒测试
输入数据 2022
执行步骤 点击搜索按钮
预期输出 跳转页面，并展示搜索的结果
实际结果 跳转页面，并展示搜索的结果
结论 通过
发送消息的测试，点击任意报名人数大于1后面的发送消息按钮，输入“测试标题”，“测试内容”，测试结果查看表5-8。
表5-8 发送消息测试
前置条件 老师用户登录
测试方法 黑盒测试
输入数据 测试标题，测试内容
执行步骤 点击发送按钮
预期输出 提示：发送成功。并且其他用户收到信息
实际结果 提示：发送成功。并且其他用户收到信息
结论 通过
在本节中主要进行了功能测试，且全部通过，得出本Web应用程序开发的各个功能均可以正常运行，响应迅速，基本满足需求，符合预期结果。
6 总结与展望
本文首先介绍了Web应用程序对互联网发展的重要性。其次介绍了开发此程序所需的环境以及所使用的技术和数据库。随后进行总体需求分析，本部分主要由功能需求分析、用户角色分析、系统用例分析组成。功能需求分析主要是针对各个功能进行详细的拆解介绍；用户角色分析是以角色的角度，来分析出各个角色应该拥有什么样的功能；系统用例分析展示了各个角色的用例图。最后进行设计、代码实现和测试的操作。设计出三大模块分别拥有的功能，设计出数据库如何存储数据，设计出功能步骤，将它们一一实现。并且测试各个功能是否达到要求。
程序虽已完成，但仍有不足之处，在今后的工作中将会从下面这些方面加以完善：
（1）从功能上看：该程序基本实现了全部需求，唯一出现的问题是消息角标展示偶尔出现与实际不符的情况，分析原因可能是因为后台数据库查询出的结果比更新数据库要快，导致数据库还没更新就已经返回结果给前端了，后续将学习新的知识来解决此问题。
（2）从界面上看：随着Web 3.0的发展，市面上出现的各种Web程序眼花缭乱，人们对前端界面的美观度有了较高的要求。本程序还需进一步设计前端样式，达到符合现代审美的要求。
（3）从便捷性看：当今人手一部手机，但并不是人人都有电脑，本程序之适配了PC端的页面样式，没有适配移动端，可能导致用户体验感差，后续还需进一步优化，更新成为响应式网站
（4）从安全性看：该程序的安全性可能存在问题，
程序还存在以下几个需要完善的问题：安全性、数据约束性和日志生成；人脸识别自动获取身份信息是进一步研究的方向，真正实现自动化报名。
参考文献
[1] 薄志强. 基于SSM框架的网上商城系统的设计与实现[D]. 西安电子科技大学, 2020.
[2] 程晓旭. 动态网页设计技术的分析和比较[J]. 计算机应用研究, 2002(12).
[3] 蔡泽铭等. 基于Vue.js的信息管理系统前端架构[J]. 电子技术与软件工程. 2020, (18).
[4] 方生. 基于“Vue.js”前端框架技术的研究[J]. 电脑知识与技术. 2021, 17(19).
[5] 金明俐. 基于Spring Boot与Vue框架的叫号系统的设计与实现[D]. 中国地质大学(北京), 2021.
[6] 陆峰. 网络考试系统及Web服务设计与实现[D]. 华中师范大学, 2007.
[7] 李广宏. vue.js前端应用技术分析[J]. 中国新通信. 2019, 21(20).
[8] 罗坤. Web开发技术实践课程中的协作教学分析[J]. 电子技术, 2021(10).
[9] 刘启伟. 基于Vue.js框架的Web前端开发工具的设计与实现[D]. 北京邮电大学, 2022.
[10] 田海晴. 基于SpringBoot和Vue框架的共享运营管理平台的设计与实现[D]. 山东大学, 2021.
[11] 王心慧. 在线考试系统的设计与实现[D]. 哈尔滨工程大学, 2007.
[12] 张恩程. 网上考务报名系统的设计与实现[D]. 扬州大学, 2018.
[13] 赵浩翔. 基于SSM框架的网上商城系统的设计与实现[D]. 北京邮电大学, 2019.
[14] 张琳. 基于多层B/S结构的全国计算机等级考试网上报名系统设计[D]. 西安电子科技大学, 2009.
[15] 周黎宁. 基于Spring Boot的Web快速开发框架[J]. 电脑编程技巧与维护, 2021, (09).
[16] Qu Xiaona. Application of Java Technology in Dynamic Web Database Technology[J]. Journal of Physics: Conference Series, 2021, 1744(4).
[17] Zhang Fang, Sun Guiling, Zheng Bowen, Dong Liang. Design and Implementation of Energy Management System Based on Spring Boot Framework[J]. Information, 2021, 12(11).
 
致谢
昨日看花花灼灼，今朝看花花欲落。大学韶华将尽，回首过往，宛如云烟，绚丽多彩，又有所慊。瞬时感慨万千，提笔唯存谢言。
儿行千里母担忧，父欲筑道暨长久。每次破晓就要出远门的我，前一天都会看到妈妈帮我筹备东西忙上忙下，听到爸爸嘱咐我不要把重要物品落在家。直到临行前，妈妈都会塞给我好多好多“惊喜”，而我嫌麻烦拒绝了她的好意。妈妈有让人掉眼泪的魔法，总能在暗夜里为我捧出漫天云霞。小时候爸爸就把我护在他的身后，心怀壮志的少年一路成长，现在早已越过了他的肩膀。想着以前他也是个鲁莽的少年，直到成为了我的父亲，为我撑起了一片天。如果不是岁月步步紧逼，他也想帮我把路铺到很远很远，无奈自己已到了中年，他只能将自己留在这个苦寒的“冬天”，把我推向那个他也很向往的“春天”。父母给予小王子一座爱的城堡，想让小王子成为他们一生的骄傲，可是飞鸟羽翼尚还轻薄，只得将他们撰入毕业书稿。
自幼长于祖翁舍，只道外婆惦外孙。从小在外公外婆家长大，他们对顽皮的我都疼爱有加。小学那时候住校，时常都有回家的幻想，但是呢，每个周末外公都会骑上他的二八大杠，来实现我的愿望。还记得那个前面架着特制小板凳的二八大杠，它成为了我童年的专属领航。外婆没有烦过我哭哭啼啼的童年，还做了我一辈子避雨的屋檐。日复一日，年复一年，直到现在，她还是会把好吃的留到我回去的那一天，可是啊，读书在外的我已很少回到外婆身边。岁月的沧海湍急匆忙，她用自己的年华换我幼儿无恙，而我，又能拿什么换走她的白发苍苍。
自去自来梁上燕，相亲相近水中鸥。在我曲折的成长旅途，离不开亲人们的照顾，虽然他们不是我的亲生父母，但会给我如深海般的眷注。还有那么多兄弟姐妹，陪我走了这么长的路，就算未来不是一样的脚步，也愿我们能够复旧如初。
有朋自远方来，而又奔赴远方。大学这几年，我遇到了很多人间星光，是征战赛场掀起惊涛骇浪，是行于绿道伴同黯然神伤，是初创之时感悟万事难当，是跨年之际与共随波飘荡，是粗衣淡饭惠赠满口余香，或是兼差打卡享受明媚春光……这人间朝朝暮暮，我也知道人来人往烟雨无数，最后我们终将各自奔赴，但永远欢迎你们再次光顾。
天长地久有时尽，然谢恩师无绝期。十余载求学路，自知才疏识浅，天资不及仲永，机敏不及甘罗。但幸逢春雨，悉力教诲，以谐育人，不袒尖子，不弃垫底，不增过错，然助其改过。所谓师者，应当传道受业解惑。春雨润春笋，执笔写师尊。谆谆如父语，殷殷似友人。轻盈数行字，失写其厚恩。愿师明安稳，得益皆星辰。
余幼时家贫，但任不知奋进。蹉跎岁月后，方明知识之重，但不及身家。今天下，每闻官者不做为，观俗人甚愚昧，叹之。实如此，无权、无势、无财者，无力而为也。昔日入学，满腔热血，望一己之力改变世界；此番毕业，空空如也，愿春去秋来再次始业。
辞不达意，意难尽言。家亲友师，予以深谢；赤县神州，愿之昌盛；田夫野老，怡然自乐。
虽昔往，但终去。然别矣，学子期！

张恣豪
二零二二年五月·武汉