当前位置:大学毕业论文> 本科论文>材料浏览

关于学科竞赛论文范文写作 高校学科竞赛管理系统的web前端设计和实现相关论文写作资料

主题:学科竞赛论文写作 时间:2024-01-22

高校学科竞赛管理系统的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是一个快速、简洁的JaScript框架,它封装JaScript常用的功能代码,提供一种简便的JaScript设计模式,优化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_se",

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.

结论:关于本文可作为学科竞赛方面的大学硕士与本科毕业论文学科竞赛论文开题报告范文和职称论文论文写作参考文献下载。

基于JavaEE高校德育分管理系统构建探析
摘要:本文分析了目前高校在学生德育分管理方面存在的问题,提出了一种由学生、学生干部和部门共同参与完成的德育分申报、审批系统,阐述了该系统的功能、。

规范高校学科档案管理
[摘 要]在学校的建设和发展过程中,学科档案建设水平对学校教育工作和人才培养工作产生着重要的影响,而要想进一步提高学校学科建设水平,就应该认识到。

基于WEB技术高校毕业审核管理系统建设和实现
摘 要:自2013年以来,高校转型应用技术型大学成为一个趋势,高校毕业生的毕业审核对于高校的应用技术型是一个非常重要的考核标准。因此,设计以及完。

基于管理会计视角高校全面预算管理系统
摘 要:建立现代财政制度是对现行财税体制的继承与重构,要求各级政府和部门要进一步完善治理体系,实现治理能力现代化,建立全面规范、公开透明的现代预。