高校学科竞赛管理系统的web前端设计与实现

洪杰++高曼如

摘要：随着国家高等教育的发展，大学生学科竞赛已经成为培养和提高学生创新精神协作精神和实践能力的重要手段，各大高校在近几年的学科竞赛管理工作中，仍然存在工作效率低、数据易出错等问题，特别在师生的申报工作方面，不便利性是目前最大的问题。该文主要介绍，基于BOOTSTRAP+JQUERY等技术，设计实现高校学科竞赛管理系统的WEB前端，以使该校管理人员和师生在使用学科竞赛管理系统的过程中更为便利。

关键词：学科竞赛管理系统；web前端；BOOTSTRAP；JQUERY；大学生学科竞赛

中图分类号：TP311.5 文献标识码：A 文章编号：1009-3044（2017）30-0100-01

1 BOOTSTRAP和JQUERY简介

Bootstrap是由Twitter的两位前员工Mark Otto和Jacob Thornton在2010年8月份创建的，用于构建响应式网站的Web前端开源开发框架。Bootstrap拥有强大的内置样式库，同时支持响应式布局，就算开发人员不懂前端的设计，也能够用精简的代码，设计出漂亮的界面，并有效适配手机、平板、PC设备。它让前端开发更快速、简单。[1]

jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery兼容各种主流浏览器，如CHROME、IE等。[2]

2 系统WEB前端需求分析

2.1 跨浏览器兼容性：

浏览器兼容性问题指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题[3]。我校学科竞赛系统，面向的用户群体是学科竞赛的管理人员和竞赛指导教师，他们都属于普通的互联网用户， 因此兼容大部分主流的浏览器是基本的需求之一。

2.2 前端防止表單重复提交

网络延迟的情况常存在于WEB系统的使用中，用户在提交表单内容保存时，很可能会多次点击submit导致重复提交，数据库中就会产生重复数据，在后端，通常采用Token令牌防止数据存储到数据库，在前端，仍然需要防止这种情况的出现，以便有更好的用户体验。

2.3 自适应移动端界面

高校学科竞赛系统在参赛申报功能环节，包含较多的文字录入操作，虽然不是很适合移动端来操作实现，但对于用户的少量内容修改需求， 以及培训记录录入、奖励申请等功能，若能够有移动端的操作界面支持，用户的操作便利性也会有较大的提升。

2.4 表单数据校验，提交失败时保留用户原始输入

高校学科竞赛系统在参赛申报、培训记录录入、奖状上传、奖励申请等功能环节，都包含了对提交信息的校验，大部分校验，我们可以在前端用户提交之前完成，而有少量校验，我们需要提交到后端进行校验。在完成校验后，用户提交数据，若返回错误，必须要保留用户原始输入，以便能够在原来的基础上做修改。

3 系统WEB前端技术实现

通过以上的需求分析，使用BOOTSTRAP+JQUERY技术来实现上述需求，具体的实现方案如下：

3.1 BOOTSTRAP解决跨浏览器兼容性和自适应移动端界面需求

首先在Bootstrap 3版本中，就具备了对大部分浏览器的兼容性，各类HTML元素效果在不同浏览器下，都有几乎相同的效果。其次，Bootstrap 3版本一开始就是对移动设备友好的，开发者可以使用栅格功能，实现移动设备和PC屏幕差异性的界面，以适应使用。

3.2 JQUERY实现前端防止表单重复提交

JQUERY实现前端防止表单重复提交的思路是，在用户点击提交按钮时，将按钮设置为不可用，具体的核心代码实现如下：

$（'#ajax_sub'）.click（function （） {

var ts = $（this）；

var ts_old_val = ts.val（）；

ts.val（'提交中……'）；

ts.attr（"disabled"，true）；}）；

3.3 JQUERY实现表单数据校验、提交失败时保留用户原始输入

采用AJAX提交表单信息，并在前端提醒用户“正在提交中”，数据统一在后端进行校验，AJAX返回校验结果，然后向用户展示。核心代码如下：

var data = new FormData（$（"#myform"）[0]）；

$.ajax（{

url： '/Sqb/ajax_save'，

type： 'POST'，

data： data，

cache： false，

processData： false，

contentType： false，

dataType： "json"，

success： function （msg） {

……}}）；

该方案的优点是，只需要在后端统一控制数据的校验，便于校验规则的修改调整；AJAX提交数据，在用户不手动刷新页面的情况下，用户原始输入得以保留。

4 结束语

采用综上的方案进行系统前端实现，经用户的使用反馈表明，采用BOOTSTRAP和JQUERY技术，能够很好地解决本文分析出的前端问题，不仅适用于高校的学科竞赛系统，也适合解决其他所有WEB类系统的基本前端问题。

参考文献：

[1] 李静. 基于Bootstrap的响应式校园电子商务网站设计[J]. 电脑知识与技术， 2017， 13（14）：225.

[2] York R. Web Development with jQuery[M]. John Wiley & Sons， 2015.

[3] 刘晓娟. 网页浏览器兼容性问题综述[J]. 软件导刊， 2016， 15（4）：174-176.endprint