基于ExtJS框架的考試系統(tǒng)界面設(shè)計與實(shí)現(xiàn).

葉廣仔 江務(wù)學(xué) 劉曉蔚

東莞職業(yè)技術(shù)學(xué)院計算機(jī)工程系 廣東 523808

0 引言

在系統(tǒng)開發(fā)的過程中，提高代碼的重用性是每一個編程人員都必須考慮的問題。在當(dāng)前的系統(tǒng)前臺界面實(shí)現(xiàn)中，成熟的開發(fā)框架比較少，對代碼的重用性不多，導(dǎo)致要實(shí)現(xiàn)豐富而動態(tài)的前臺，程序員需要編寫大量的腳本，加重了界面編程人員的系統(tǒng)開發(fā)難度。

隨著開發(fā)技術(shù)的不斷改進(jìn)，通過ExtJS框架來實(shí)現(xiàn)用戶界面的編寫將為程序開發(fā)人員帶來很大的便利。ExtJS可以用來開發(fā)富客戶端的AJAX應(yīng)用，通過JavaScript實(shí)現(xiàn)頁面動態(tài)交互以及異步刷新，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端AJAX框架。本文中的考試系統(tǒng)采用ExtJS4開發(fā)客戶端界面，通過其MVC的設(shè)計模式，實(shí)現(xiàn)前臺代碼的高度整合及重用，從而減少代碼的復(fù)雜度以及提高系統(tǒng)的可維護(hù)性。

1 系統(tǒng)界面框架設(shè)計

為了提高代碼的重用性，提高系統(tǒng)的開發(fā)效率，本系統(tǒng)的界面設(shè)計采用了ExtJS框架的MVC模式進(jìn)行開發(fā)。如圖 1所示，考試系統(tǒng)主要采用了四個模塊來完成界面的設(shè)計管理員模塊adminApp、考試模塊examApp、學(xué)生模塊studentApp、教師模塊teacherApp。每個模塊中的controller層實(shí)現(xiàn)邏輯控制、modle與store層實(shí)現(xiàn)與后臺數(shù)據(jù)的交互、view層實(shí)現(xiàn)具體的界面顯示。

如圖2所示為管理員模塊界面的設(shè)計，各目錄中通過各自的 JavaScript文件實(shí)現(xiàn)界面的代碼編寫，使代碼簡潔，層次分明，從而提高代碼的重用性及可維護(hù)性。

圖1 界面設(shè)計目錄結(jié)構(gòu)

圖2 管理員模塊界面設(shè)計

(1) controller目錄中的控制代碼進(jìn)行model層、store層與view層的整合，實(shí)現(xiàn)前臺用戶請求向后臺服務(wù)端的提交，以及動態(tài)接收后臺處理數(shù)據(jù)結(jié)果，下面為 adminController.js實(shí)現(xiàn)管理員模塊中各層的功能業(yè)務(wù)的處理及整合的代碼結(jié)構(gòu)。

其中，this.control()函數(shù)中添加實(shí)現(xiàn)業(yè)務(wù)功能的函數(shù)代碼，models：[]、stores：[]、views：[]中分別添加管理員模塊中需要整合的模型、數(shù)據(jù)源以及視圖文件。

(2) model目錄中的各個js文件與后臺實(shí)體類進(jìn)行對應(yīng)，進(jìn)行數(shù)據(jù)的對象化處理，實(shí)現(xiàn)前臺數(shù)據(jù)的封裝，有利于前臺代碼的面向?qū)ο缶幊?。下面為命題計劃的模型代碼。

以上代碼定義了一個ParperConstruct模型，該模型是從Ext.data.Model模型中繼承下來，包含了‘conId’、‘conCourse’、‘conDemand’等屬性，該模型與服務(wù)器端的cn.edu.dgpt.exam.bean.PaperConstruct類相對應(yīng)。

(3) store目錄中的js文件實(shí)現(xiàn)與后臺的Struct框架中的action進(jìn)行數(shù)據(jù)的交互。以下為allPaperConstructStore.js數(shù)據(jù)源的代碼。

以上代碼定義了一個allPaperConstructStore數(shù)據(jù)源，通過autoLoad屬性指定該數(shù)據(jù)源的數(shù)據(jù)自動從數(shù)據(jù)庫中加載，頁面的數(shù)據(jù)會根據(jù)數(shù)據(jù)庫的數(shù)據(jù)變化而自動地動態(tài)變化，不需要通過頁面刷新。

proxy：屬性指定了與后臺數(shù)據(jù)交換的方式，如url屬性指定調(diào)用后臺命題計劃處理類 PapConstructAction中的列舉所有命題計劃方法 listAll()，獲取所有的命題計劃。另外，reander屬性指定從服務(wù)器端讀取數(shù)據(jù)的格式。

(4) view目錄中的js文件實(shí)現(xiàn)客戶端界面的顯示，與用戶進(jìn)行交互，以下為列舉并更新命題計劃審核狀態(tài)的界面部分代碼。

以上代碼定義了一個listPapConstruct視圖，通過extend屬性指定該視圖為一個grid表格，store屬性指定表格顯示的數(shù)據(jù)源，columns屬性指定表格的標(biāo)題欄內(nèi)容，dockedItems屬性指定表格的分頁欄。

2 主要模塊界面實(shí)現(xiàn)

下面以管理員及教師模塊部分前端界面為例，介紹考試系統(tǒng)的主要模塊界面實(shí)現(xiàn)。

(1) 管理員模塊主要包含部門維護(hù)、專業(yè)維護(hù)、課程維護(hù)、教師維護(hù)、班級維護(hù)、學(xué)生維護(hù)、試卷審批等功能。

1) 課程維護(hù)界面，如圖3所示主要包含課程的添加、更新及刪除等操作，用于維護(hù)考試系統(tǒng)中需要考試的科目，主要包含課程名稱、課程學(xué)分、課程學(xué)時、開課學(xué)年、開課學(xué)期以及課程所屬專業(yè)方向?qū)傩浴?/p>

圖3 課程添加界面

2) 命題計劃審核界面，如圖4所示主要用于審核教師添加的考試命題計劃，管理員可以通過此界面查閱教師提交的考試命題計劃，如果命題計劃符合要求，則可在審核狀態(tài)下指定該命題計劃通過審核，系統(tǒng)會根據(jù)相應(yīng)的命題計劃要求自動組卷來實(shí)現(xiàn)課程考試。

圖4 命題計劃審核

(2) 教師模塊主要包含個人信息維護(hù)、添加試題、制作試卷、批閱試卷等功能，部分界面介紹如下：

1) 試題添加操作界面，教師可通過此界面實(shí)現(xiàn)判斷題、選擇題、填空題、簡答題以及編程題等各種題型的添加操作，如圖5所示，為判斷題添加界面，包含有課程名稱、題目內(nèi)容、答案、試題分值以及試題難度等屬性。

圖5 試題添加界面

2) 命題計劃添加操作界面，教師在制作試卷時，可設(shè)定試題的類型、分值，但教師制作試卷后必須要由管理員審核才能考試。如圖6所示，教師可以指定考試的課程名稱、考試日期、考試時間、考試題型的難度及分值等信息。

圖6 命題計劃指定界面

3 結(jié)束語

本文主要針對考試系統(tǒng)中ExtJS框架的應(yīng)用，以及考試系統(tǒng)前臺代碼MVC模式的分層結(jié)構(gòu)研究，實(shí)現(xiàn)系統(tǒng)客戶端界面代碼的controller層、modle與store層、view層劃分。系統(tǒng)設(shè)計還處于初期階段，在前臺實(shí)現(xiàn)中并沒有引入的ExtJS框架緩存機(jī)制，為了更大的提高系統(tǒng)系能，減少后臺Web服務(wù)器以及數(shù)據(jù)庫服務(wù)器的工作量，今后將在系統(tǒng)性能方面做進(jìn)一步的研究。

[1]鄧偉成,范軼翔,夏翔,黃寧.ExtJs框架下Grid組件的擴(kuò)展及應(yīng)用[J].計算機(jī)應(yīng)用.2012.

[2]劉冰.基于Java代碼重用性的研究[J].電腦與信息技術(shù).2010.

[3]謝規(guī)良,陳曉麗,孫樹棟.基于組件的庫存信息管理系統(tǒng)[J].計算機(jī)工程.2003.

[4]Shea Frederick,Colin Ramsay,Steve 'Cutter' Blades著．Ext JS學(xué)習(xí)指南[M].北京：人民郵電出版社.2009.

[5]衛(wèi)軍,夏慧軍,孟臘春.ExtJS Web應(yīng)用程序開發(fā)指南[M].DynoMedia Inc.2009.

[6]閆俊甫,鄧世昆.基于ExtJS與XML的家庭理財系統(tǒng)的設(shè)計與實(shí)現(xiàn)[J].計算機(jī)與現(xiàn)代化.2012.

[7]吳吉義,平玲娣.Web2.0主流應(yīng)用技術(shù)——AJAX性能分析[J].計算機(jī)工程與設(shè)計.2008.

[8]鞠鳳娟,吳志峰.EXT技術(shù)在Web界面設(shè)計與實(shí)現(xiàn)中的應(yīng)用研究[J].計算機(jī)與現(xiàn)代化.2008.

[9]張鑫,黃燈橋,楊彥強(qiáng).JavaScript凌厲開發(fā)：Ext JS 3詳解與實(shí)踐[M].北京：清華大學(xué)出版社.2010.

[10]楊浩,計算機(jī)程序人員.JavaScript入門與提高[M].清華大學(xué)出版社.1999.

[11]Zakas N C,曹力,張欣.JavaScript高級程序設(shè)計[J].2006.

[12]任偉,林曉東.基于Spring框架和ExtJS的藥品庫房管理系統(tǒng)實(shí)現(xiàn)[J].計算機(jī)工程與設(shè)計.2009.

[13]榮耀,李昕.企業(yè)級 AJAX 框架設(shè)計與實(shí)現(xiàn)[J].南京師范大學(xué)學(xué)報：工程技術(shù)版.2007.

[14]趙永屹,宿紅毅,胡韶輝.基于AJAX與J2EE的新型Web應(yīng)用的設(shè)計與實(shí)現(xiàn)[J].計算機(jī)工程與設(shè)計.2007.

[15]譚力,楊宗源,謝瑾奎.Ajax技術(shù)的數(shù)據(jù)響應(yīng)優(yōu)化[J].計算機(jī)工程.2010.

[16]王建文,張俊明,韓李鵬.基于ExdS的物資管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)[J].計算機(jī)工程與設(shè)計.2010.

[17]任中方,張華,閆明松,等.MVC 模式研究的綜述[J].計算機(jī)應(yīng)用研究.2004.

[18]黎永良,崔杜武.MVC設(shè)計模式的改進(jìn)與應(yīng)用[J].計算機(jī)工程.2005.