高校學(xué)科競(jìng)賽管理系統(tǒng)的web前端設(shè)計(jì)與實(shí)現(xiàn)

洪杰++高曼如

摘要：隨著國家高等教育的發(fā)展，大學(xué)生學(xué)科競(jìng)賽已經(jīng)成為培養(yǎng)和提高學(xué)生創(chuàng)新精神協(xié)作精神和實(shí)踐能力的重要手段，各大高校在近幾年的學(xué)科競(jìng)賽管理工作中，仍然存在工作效率低、數(shù)據(jù)易出錯(cuò)等問題，特別在師生的申報(bào)工作方面，不便利性是目前最大的問題。該文主要介紹，基于BOOTSTRAP+JQUERY等技術(shù)，設(shè)計(jì)實(shí)現(xiàn)高校學(xué)科競(jìng)賽管理系統(tǒng)的WEB前端，以使該校管理人員和師生在使用學(xué)科競(jìng)賽管理系統(tǒng)的過程中更為便利。

關(guān)鍵詞：學(xué)科競(jìng)賽管理系統(tǒng)；web前端；BOOTSTRAP；JQUERY；大學(xué)生學(xué)科競(jìng)賽

中圖分類號(hào)：TP311.5 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）30-0100-01

1 BOOTSTRAP和JQUERY簡(jiǎn)介

Bootstrap是由Twitter的兩位前員工Mark Otto和Jacob Thornton在2010年8月份創(chuàng)建的，用于構(gòu)建響應(yīng)式網(wǎng)站的Web前端開源開發(fā)框架。Bootstrap擁有強(qiáng)大的內(nèi)置樣式庫，同時(shí)支持響應(yīng)式布局，就算開發(fā)人員不懂前端的設(shè)計(jì)，也能夠用精簡(jiǎn)的代碼，設(shè)計(jì)出漂亮的界面，并有效適配手機(jī)、平板、PC設(shè)備。它讓前端開發(fā)更快速、簡(jiǎn)單。[1]

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。jQuery兼容各種主流瀏覽器，如CHROME、IE等。[2]

2 系統(tǒng)WEB前端需求分析

2.1 跨瀏覽器兼容性：

瀏覽器兼容性問題指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題[3]。我校學(xué)科競(jìng)賽系統(tǒng)，面向的用戶群體是學(xué)科競(jìng)賽的管理人員和競(jìng)賽指導(dǎo)教師，他們都屬于普通的互聯(lián)網(wǎng)用戶， 因此兼容大部分主流的瀏覽器是基本的需求之一。

2.2 前端防止表單重復(fù)提交

網(wǎng)絡(luò)延遲的情況常存在于WEB系統(tǒng)的使用中，用戶在提交表單內(nèi)容保存時(shí)，很可能會(huì)多次點(diǎn)擊submit導(dǎo)致重復(fù)提交，數(shù)據(jù)庫中就會(huì)產(chǎn)生重復(fù)數(shù)據(jù)，在后端，通常采用Token令牌防止數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫，在前端，仍然需要防止這種情況的出現(xiàn)，以便有更好的用戶體驗(yàn)。

2.3 自適應(yīng)移動(dòng)端界面

高校學(xué)科競(jìng)賽系統(tǒng)在參賽申報(bào)功能環(huán)節(jié)，包含較多的文字錄入操作，雖然不是很適合移動(dòng)端來操作實(shí)現(xiàn)，但對(duì)于用戶的少量?jī)?nèi)容修改需求， 以及培訓(xùn)記錄錄入、獎(jiǎng)勵(lì)申請(qǐng)等功能，若能夠有移動(dòng)端的操作界面支持，用戶的操作便利性也會(huì)有較大的提升。

2.4 表單數(shù)據(jù)校驗(yàn)，提交失敗時(shí)保留用戶原始輸入

高校學(xué)科競(jìng)賽系統(tǒng)在參賽申報(bào)、培訓(xùn)記錄錄入、獎(jiǎng)狀上傳、獎(jiǎng)勵(lì)申請(qǐng)等功能環(huán)節(jié)，都包含了對(duì)提交信息的校驗(yàn)，大部分校驗(yàn)，我們可以在前端用戶提交之前完成，而有少量校驗(yàn)，我們需要提交到后端進(jìn)行校驗(yàn)。在完成校驗(yàn)后，用戶提交數(shù)據(jù)，若返回錯(cuò)誤，必須要保留用戶原始輸入，以便能夠在原來的基礎(chǔ)上做修改。

3 系統(tǒng)WEB前端技術(shù)實(shí)現(xiàn)

通過以上的需求分析，使用BOOTSTRAP+JQUERY技術(shù)來實(shí)現(xiàn)上述需求，具體的實(shí)現(xiàn)方案如下：

3.1 BOOTSTRAP解決跨瀏覽器兼容性和自適應(yīng)移動(dòng)端界面需求

首先在Bootstrap 3版本中，就具備了對(duì)大部分瀏覽器的兼容性，各類HTML元素效果在不同瀏覽器下，都有幾乎相同的效果。其次，Bootstrap 3版本一開始就是對(duì)移動(dòng)設(shè)備友好的，開發(fā)者可以使用柵格功能，實(shí)現(xiàn)移動(dòng)設(shè)備和PC屏幕差異性的界面，以適應(yīng)使用。

3.2 JQUERY實(shí)現(xiàn)前端防止表單重復(fù)提交

JQUERY實(shí)現(xiàn)前端防止表單重復(fù)提交的思路是，在用戶點(diǎn)擊提交按鈕時(shí)，將按鈕設(shè)置為不可用，具體的核心代碼實(shí)現(xiàn)如下：

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

var ts = $（this）；

var ts_old_val = ts.val（）；

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

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

3.3 JQUERY實(shí)現(xiàn)表單數(shù)據(jù)校驗(yàn)、提交失敗時(shí)保留用戶原始輸入

采用AJAX提交表單信息，并在前端提醒用戶“正在提交中”，數(shù)據(jù)統(tǒng)一在后端進(jìn)行校驗(yàn)，AJAX返回校驗(yàn)結(jié)果，然后向用戶展示。核心代碼如下：

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） {

……}}）；

該方案的優(yōu)點(diǎn)是，只需要在后端統(tǒng)一控制數(shù)據(jù)的校驗(yàn)，便于校驗(yàn)規(guī)則的修改調(diào)整；AJAX提交數(shù)據(jù)，在用戶不手動(dòng)刷新頁面的情況下，用戶原始輸入得以保留。

4 結(jié)束語

采用綜上的方案進(jìn)行系統(tǒng)前端實(shí)現(xiàn)，經(jīng)用戶的使用反饋表明，采用BOOTSTRAP和JQUERY技術(shù)，能夠很好地解決本文分析出的前端問題，不僅適用于高校的學(xué)科競(jìng)賽系統(tǒng)，也適合解決其他所有WEB類系統(tǒng)的基本前端問題。

參考文獻(xiàn)：

[1] 李靜. 基于Bootstrap的響應(yīng)式校園電子商務(wù)網(wǎng)站設(shè)計(jì)[J]. 電腦知識(shí)與技術(shù)， 2017， 13（14）：225.

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

[3] 劉曉娟. 網(wǎng)頁瀏覽器兼容性問題綜述[J]. 軟件導(dǎo)刊， 2016， 15（4）：174-176.endprint