基于ExtJS的高校研究生學(xué)位論文雙盲評(píng)審系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

邢飛燕，施佺，胡祖輝

（1.南通大學(xué)研究生院，南通226019；2.南通大學(xué)交通學(xué)院，南通　226019）

基于ExtJS的高校研究生學(xué)位論文雙盲評(píng)審系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

邢飛燕1，施佺2，胡祖輝1

（1.南通大學(xué)研究生院，南通226019；2.南通大學(xué)交通學(xué)院，南通226019）

0　引言

隨著計(jì)算機(jī)、網(wǎng)絡(luò)和信息技術(shù)的發(fā)展，信息在人們?nèi)粘Ｉ钪惺艿皆絹碓蕉嗟年P(guān)注［1］。尤其在高校，隨著研究生大范圍的擴(kuò)招，使得每年參加盲審的學(xué)生數(shù)也日益增加，如果仍然沿用之前紙質(zhì)送審的方法，不僅增加大量紙質(zhì)印刷與郵寄成本，同時(shí)也大大增加了高校各相關(guān)部門的工作量，降低工作效率。

為了適應(yīng)現(xiàn)代信息化發(fā)展的趨勢(shì)和高校研究生學(xué)位培養(yǎng)工作的迫切需求，迫切需要建立一套Web上可實(shí)現(xiàn)的盲審評(píng)議系統(tǒng)，將其與申請(qǐng)學(xué)位的學(xué)生數(shù)據(jù)庫(kù)掛接，可供各個(gè)學(xué)院的管理部門、教師、學(xué)生、導(dǎo)師和外校評(píng)審專家分權(quán)限共享訪問，更加方便快捷地進(jìn)行學(xué)位論文雙盲評(píng)審的規(guī)范化管理，加強(qiáng)了數(shù)據(jù)的保密性，真正意義上實(shí)現(xiàn)了雙盲評(píng)審。

1　ExtJS簡(jiǎn)介

ExtJS最開始基于YUI（Yahoo User Interface Library）技術(shù)，由技術(shù)人員Jack Slocum開發(fā)，通過參考Java Swing等機(jī)制來組織可視化組件，基于JavaScript和HTML/CSS技術(shù)，還支持JQuery、Prototype等多種JS底層庫(kù)。因此，ExtJS的UI設(shè)計(jì)布局雅致，界面美觀，可以節(jié)約開發(fā)時(shí)間。采用JSON/XML為數(shù)據(jù)解析和交換，能夠減輕服務(wù)器負(fù)荷，快速綁定數(shù)據(jù)到相應(yīng)組件并更新視圖，并能良好地實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)、樹狀結(jié)構(gòu)顯示和分頁(yè)顯示等較為復(fù)雜的UI操作。相對(duì)來說，Ext要比開發(fā)者直接針對(duì)DOM、W3C對(duì)象模型開發(fā)UI組件輕松得多［2-3］。

ExtJS是一個(gè)用JavaScript編寫，與后臺(tái)技術(shù)無關(guān)的前端AJAX框架。因此，ExtJS可用在.NET、Java、PHP等各種語(yǔ)言開發(fā)的應(yīng)用中。

2　系統(tǒng)界面實(shí)現(xiàn)

研究生學(xué)位論文雙盲評(píng)審系統(tǒng)的用戶主要有在校研究生、研究生導(dǎo)師、院系工作人員、校級(jí)工作人員以及外校評(píng)審專家等。系統(tǒng)開發(fā)基于B/S結(jié)構(gòu)模式，前臺(tái)開發(fā)語(yǔ)言為C#語(yǔ)言，后臺(tái)數(shù)據(jù)庫(kù)為SQL Server 2008。整個(gè)系統(tǒng)功能模型如圖1所示。

圖1　研究生學(xué)位論文雙盲評(píng)審系統(tǒng)功能模型圖

被抽檢到的研究生登錄該系統(tǒng)進(jìn)行個(gè)人信息的完善和學(xué)位論文的上傳。論文中不能涉及學(xué)生本人及其導(dǎo)師的基本信息。院級(jí)工作人員可通過該系統(tǒng)對(duì)學(xué)生上傳的論文進(jìn)行審核，一旦發(fā)現(xiàn)任何問題，可以及時(shí)通知學(xué)生進(jìn)行修改。論文審核結(jié)束后，校級(jí)工作人員對(duì)論文進(jìn)行編號(hào)，隨即送去外審，整個(gè)過程快速、簡(jiǎn)潔、保密，大大節(jié)約了時(shí)間成本。

外校的評(píng)審專家根據(jù)拿到的說明書登錄系統(tǒng)進(jìn)行信息注冊(cè)，以此獲取專家用戶名和密碼。注冊(cè)之后可對(duì)論文進(jìn)行下載并評(píng)審。評(píng)審提交之后可直接在系統(tǒng)中將論文評(píng)審意見書打印出來，操作方便快捷。評(píng)審結(jié)束后，審核結(jié)果和意見能夠第一時(shí)間反饋給學(xué)生、導(dǎo)師及其各個(gè)學(xué)院。

系統(tǒng)首頁(yè)界面采用Ext.form.FormPanel類實(shí)現(xiàn)用戶的登錄，用戶名、密碼和驗(yàn)證碼均使用textfield輸入組件，其中密碼的inputType設(shè)置為“password”，并設(shè)置三者的allowBlank為false。頁(yè)面附加了圖形驗(yàn)證碼，提高了系統(tǒng)的安全性。

“登錄”和“重置”按鈕使用Button組件，用handler設(shè)定“重置”按鈕的響應(yīng)事件。當(dāng)點(diǎn)擊“登錄”按鈕后，ExtJS向后臺(tái)服務(wù)器發(fā)送異步請(qǐng)求。如果用戶名、密碼和驗(yàn)證碼均填寫正確，則調(diào)用success中的方法，進(jìn)入與登錄身份相對(duì)應(yīng)的功能頁(yè)面，否則調(diào)用failure中的方法，提示錯(cuò)誤，系統(tǒng)登錄首頁(yè)如圖2所示。

圖2　系統(tǒng)登錄首頁(yè)頁(yè)面

ExtJS在提交過程中使用的是UTF-8編碼，所以要求所有文件均是UTF-8編碼方式。運(yùn)用ExtJS對(duì)界面進(jìn)行編寫時(shí)，可以在JSP頁(yè)面的head區(qū)域加入以下代碼：

學(xué)生可以上傳Word和PDF兩種格式的論文，采用FileUpload控件實(shí)現(xiàn)文件上傳功能。FileUpload控件顯示一個(gè)文本框控件和一個(gè)瀏覽按鈕，用戶可以單擊“瀏覽”按鈕，出現(xiàn)選擇文件對(duì)話框，然后在該對(duì)話框中定位所要上傳的文件，點(diǎn)擊“上傳”按鈕后，文件將自動(dòng)上載至服務(wù)器upload文件夾下。以Word上傳為例，其關(guān)鍵代碼如下：

傳成功！"）；｝，failure:function（）｛Ext.Msg.alert（"系統(tǒng)提示"，"文件上傳失敗！"）；｝｝）；｝else｛Ext.Msg.alert（"系統(tǒng)提示"，"請(qǐng)選擇文件后再上傳！"）；｝｝｝，｛text:'取消'，handler:function（）｛winFielUpload.hide（）；｝｝］｝）；

論文評(píng)審頁(yè)面是該系統(tǒng)最重要的頁(yè)面之一，包括專家對(duì)論文選題、文獻(xiàn)綜述、研究成果、專業(yè)水平、論文寫作、總體意見和存在問題等方面的評(píng)審。頁(yè)面下方包括“臨時(shí)保存”、“確認(rèn)提交”和“打印評(píng)審表”等三個(gè)按鈕。當(dāng)專家填寫好評(píng)審表后，點(diǎn)擊“臨時(shí)保存”按鈕，可將評(píng)審結(jié)果保存至數(shù)據(jù)庫(kù)中，當(dāng)點(diǎn)擊“確認(rèn)提交”按鈕之后，方可打印評(píng)審意見書。該頁(yè)面如圖3所示。

圖3　系統(tǒng)中校外專家評(píng)審頁(yè)面

評(píng)審結(jié)束后，大家最關(guān)注的仍然是評(píng)審結(jié)果頁(yè)面的瀏覽。由于ExtJS只是一個(gè)客戶端框架，與服務(wù)器端技術(shù)無關(guān)，沒有相應(yīng)服務(wù)端的適配層，因此必須提供它需要的數(shù)據(jù)結(jié)構(gòu)［4］。本系統(tǒng)選用JSON傳遞數(shù)據(jù)。

ExtJS提供后臺(tái)數(shù)據(jù)請(qǐng)求控件，如JsonStore，通過配置url和method向后臺(tái)發(fā)送請(qǐng)求。后臺(tái)將JSON格式數(shù)據(jù)響應(yīng)給前臺(tái)。服務(wù)器端處理前臺(tái)傳遞的參數(shù)包括start、limit等，start和limit用來進(jìn)行分頁(yè)查詢，start表示從第幾條數(shù)據(jù)進(jìn)行查詢，limit表示最多返回幾條查詢數(shù)據(jù)。這里默認(rèn)start為0，limit為25，即默認(rèn)每頁(yè)顯示25條數(shù)據(jù)。

前臺(tái)用Ext.data.Store處理從后臺(tái)獲得的字符串，使用Ext.data.HttpProxy從后臺(tái)獲取信息，返回信息中的totalProperty和root分別指數(shù)據(jù)的記錄總數(shù)和當(dāng)前頁(yè)面顯示信息的隊(duì)列。創(chuàng)建lwstore后調(diào)用lwstore.load（｛params:｛start:0，limit:25｝｝）；，創(chuàng)建Ext.grid.GridPanel的Columns中每一列顯示的數(shù)據(jù)都與 lwstore數(shù)據(jù)相對(duì)應(yīng)，設(shè)置列的屬性sortable為true，實(shí)現(xiàn)該列的可排序。loadMask設(shè)置為true，意在開啟讀取數(shù)據(jù)時(shí)的提示功能。在bbar添加分頁(yè)工具條PageBar，可以實(shí)現(xiàn)Grid的分頁(yè)跳轉(zhuǎn)和數(shù)據(jù)刷新等操作。使用Ext.grid.GridPanel中雙擊事件rowdblclick來查看論文評(píng)審結(jié)果。顯示效果如圖4所示。

圖4　查看論文評(píng)審結(jié)果頁(yè)面

3　結(jié)語(yǔ)

ExtJS技術(shù)因其豐富的UI組件庫(kù)和良好的用戶體驗(yàn)，在Web應(yīng)用開發(fā)領(lǐng)域獲得廣泛的應(yīng)用。基于ExtJS技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了適合高校使用的研究生學(xué)位論文雙盲評(píng)審系統(tǒng)，用戶界面友好便捷，頁(yè)面外觀更加漂亮，風(fēng)格更加統(tǒng)一，大大簡(jiǎn)化和規(guī)范了客戶端的開發(fā)。雙盲評(píng)審系統(tǒng)的使用也提高了高校論文盲審工作的質(zhì)量和效率。

［1］顧立業(yè).基于MVC和ExtJS的高校學(xué)生信息管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［D］.大連理工大學(xué)，2013.

［2］高國(guó)瑞.基于ExtJS框架的稅務(wù)在線考試系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［D］.西安電子科技大學(xué)，2012.

［3］王建文等.基于ExtJS的物資管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2010，31（23）:5012-5055.

［4］宋轉(zhuǎn)玲等.基于ExtJS開發(fā)的海洋科學(xué)數(shù)據(jù)共享服務(wù)平臺(tái)［J］.海洋科學(xué)，2010，34（2）:4-9.

ExtJS；Graduate Student；Thesis；Evaluation System

Design and Implementation of Thesis Evaluation System Based on ExtJS

XING Fei-yan1，SHI Quan2，HU Zu-hui1
（1．Department of Graduate，Nantong University，Nantong 226019；2．College of Traffic Nantong University，Nantong 226019）

全國(guó)教育信息技術(shù)研究“十二五”規(guī)劃立項(xiàng)課題（No.136221504）、中國(guó)學(xué)位與研究生教育學(xué)會(huì)研究課題（No.C1-2013 Y06-046）、江蘇省研究生培養(yǎng)創(chuàng)新工程資助項(xiàng)目（No.JGZZ12_081）

1007-1423（2015）19-0068-04

10.3969/j.issn.1007-1423.2015.19.017

邢飛燕（1987-），女，江蘇南通人，碩士，研究方向?yàn)樾畔⒒芾?/p>

2015-05-05

2015-06-25

針對(duì)當(dāng)前高校研究生學(xué)位論文盲審工作的需求，詳細(xì)分析并設(shè)計(jì)基于ExtJS技術(shù)的研究生學(xué)位論文雙盲評(píng)審系統(tǒng)的相關(guān)功能模塊及其實(shí)現(xiàn)的關(guān)鍵技術(shù)。該系統(tǒng)界面美觀，操作方便，不僅減少開發(fā)的工作量與管理的成本，同時(shí)也大大提高工作效率和質(zhì)量。

ExtJS；研究生；學(xué)位論文；評(píng)審系統(tǒng)

Aims at the requirements of the graduate degree thesis evaluation，expounds the design and implementation of thesis evaluation system based on ExtJS，and introduces the relevant function modules，gives the key technology.The system has many advantages such as distinct interface and easy manipulation.The system not only reduces the workload and cost management，but also improves the work efficiency and quality.