注：仅展示部分文档内容和系统截图，需要完整的视频、代码、文章和安装调试环境请私信up主。
目 录
基于WEB开发的高校竞赛网站的设计与实现
摘 要：高校竞赛越来越受到了学校和国家的重视，各大高校分别制定并实施了许多措施来激励学生积极地参与,然而在高校竞赛网站中大多数功能还未完整实现,管理员和用户都存在着工作效率低、数据易出错等问题。
高校竞赛网站前端包括的功能有登录注册、个人中心、竞赛信息、竞赛公告、后台管理；后端包括的功能有个人中心、用户管理、学科分类、竞赛管理、参赛管理、成绩管理。为学生提供了一个发挥自己才能的平台。
高校竞赛网站运用了基于B/S模式进行开发，采用了Java语言，在MySQL数据库的基础上进行功能的实现，为了提高开发效率，系统在开发过程中引入了Springbooot。该网站易于操作，便于管理员对用户进行管理，同时也开发了简洁的界面，便于用户更加方便的运用竞赛网站。
关键字：高校竞赛网站；Springbooot；MySQL
The design and implementation of University Competition Website based on WEB development
Abstract：College competitions have received more and more attention from schools and countries. Colleges and universities have formulated and implemented many measures to encourage students to actively participate. However, most of the functions in the college competition website have not been fully implemented. Administrators and users have problems such as low work efficiency and error-prone data.
The front end of the university competition website includes functions such as login registration, personal center, competition information, competition announcement, and background management. The back-end includes functions such as personal center, user management, subject classification, competition management, competition management, and performance management. It provides a platform for students to play their talents.
The university competition website is developed based on B/S mode, using JAVA language, and realizing the function on the basis of MySQL database. In order to improve the development efficiency, the system introduces springbooot in the development process. The site is easy to operate, easy for administrators to manage users, but also developed a simple interface, easy for users to more easily use the competition site.
Key words: College competition website; Springbooot; MySQL
通过实际情况的调查，高校竞赛系统主要有两类角色[6]。第一类是用户，用户首次登陆必须先注册再登录，登录之后便可以对自己喜欢的科目竞赛进行报名，同时也可以对自己感兴趣的科目进行收藏、查询竞赛成绩等；另一类是管理员，管理员可以管理用户的信息，还可以提供用户进行报名、发布竞赛公告、对用户的信息以及成绩进行管理等。
后台的功能主要有个人中心、用户管理、竞赛学科管理、竞赛信息管理、报名参赛管理、竞赛成绩管理。最后可以得出管理员的用例图，如图3.1所示。
4.2 功能模块的设计
1.总体功能模块设计
高校竞赛网站管理系统，需按照需求分析时明确的功能，对整个网站进行整体结构的设计，并将各功能模块进行划分。本系统根据角色不同将系统分为管理员、用户[8]。前台用户主要有用户账户注册登录，竞赛系统架构检验，后台管理员系统主要为前台用户提供服务，能够对网站的正常运作作保障。系统功能模块图如图4.1所示
2.主要模块的说明:
（1）学科分类模块。其主要目的是对学科进行管理，可以进行增、删、改学科内容。
（2）竞赛信息管理模块。该模块中，学校管理员可以对用户报名的竞赛项目的申请进行审批，授予某个教师对已经存在的竞赛数据查看和成绩上传等权限[9]。
（3）成绩管理模块。当管理员需要添加成绩时，可以点击“修改”按钮，在弹出的界面中输入参赛人ID、参赛项目ID、成绩以及排名信息[9]，管理员将成绩数据上传到系统后，便于参赛学生可以凭据其账号和密码查询相应的竞赛成绩。
（4）用户竞赛信息模块。竞赛信息是模块是用户报名模块的核心之一，班名界面提供了用户参加竞赛的选择，以及该竞赛的发布时间、竞赛时间、报名截止时间、竞赛形式、竞赛地点、竞赛分类。
（7）各联系的实体之间E-R图。如图4.8所示
5系统的实现
5.1 数据库连接的实现
数据库是用来存放系统数据信息的仓库,一个系统必须依靠数据信息才能正常运行[12]。首先就要正确连接数据库，进行数据库的统一配置，而本系统的开发使用了SpringBoot框架，简化了很多代码。其核心代码如下：
server:
tomcat:
uri-encoding: UTF-8
port: 8080
servlet:
context-path: /springbootqc6u3
spring:
datasource:
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/springbootqc6u3?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8
username: root
password: 123456
5.2 用户登录模块的实现
在界面输入对应的账号和密码，并需要填写正确，点击提交以后，系统在数据库后查询到了对应的数据，返回信息给系统，系统进行判断，得到登录成功的提示时，才能进入到系统的首页中,高校竞赛网站的用户登录界面如图5.1所示：
核心代码如下：
<span:style='{"padding":"010px","boxShadow":"000px
rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255,255,255,1)","borderRadius":"002px0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>学科分类</span><div class="item-list">
<div class="lable" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":
"transparent","color":"#fff","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>竞赛科目</div>
<input type="text":style='{"boxShadow":"006pxrgba(255,0,0,0)",
"borderColor":"rgba(216, 216, 216,1)","backgroundColor":"#fff","color":"#333",
"borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"40px"}' name="jingsaikemu" id="jingsaikemu" placeholder="竞赛科目" autocomplete="off" class="layui-input"></div>
<button:style='{"padding":"015px","boxShadow":"000px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","color":"rgba(0,0,0, 1)","borderRadius":"0",
"borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' id="btn-search" type="button" class="layui-btn layui-btn-normal">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索</button>
<button :style='{"padding":"0 15px","boxShadow":"0 0 0px rgba(0,0,0,0)",
"margin":"0 0 0 10px","borderColor":"#409EFF","color":"rgba(0, 0, 0, 1)",
"borderRadius":"0","borderWidth":"0","width":"auto","fontSize":"14px",
"borderStyle":"solid","height":"40px"}' v-if="isAuth('xuekefenlei','新增')" @click="jump('../xuekefenlei/add.html')" type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon"></i>添加</button></form>
5.6 竞赛信息管理功能模块的实现
这个界面是进行搜索竞赛信息的信息,竞赛信息管理界面如图5.5所示：