基于ExtJS框架的考試系統界面設計與實現.

葉廣仔 江務學 劉曉蔚

東莞職業技術學院計算機工程系 廣東 523808

0 引言

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

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

1 系統界面框架設計

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

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

圖1 界面設計目錄結構

圖2 管理員模塊界面設計

(1) controller目錄中的控制代碼進行model層、store層與view層的整合，實現前臺用戶請求向后臺服務端的提交，以及動態接收后臺處理數據結果，下面為 adminController.js實現管理員模塊中各層的功能業務的處理及整合的代碼結構。

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

(2) model目錄中的各個js文件與后臺實體類進行對應，進行數據的對象化處理，實現前臺數據的封裝，有利于前臺代碼的面向對象編程。下面為命題計劃的模型代碼。

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

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

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

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

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

以上代碼定義了一個listPapConstruct視圖，通過extend屬性指定該視圖為一個grid表格，store屬性指定表格顯示的數據源，columns屬性指定表格的標題欄內容，dockedItems屬性指定表格的分頁欄。

2 主要模塊界面實現

下面以管理員及教師模塊部分前端界面為例，介紹考試系統的主要模塊界面實現。

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

1) 課程維護界面，如圖3所示主要包含課程的添加、更新及刪除等操作，用于維護考試系統中需要考試的科目，主要包含課程名稱、課程學分、課程學時、開課學年、開課學期以及課程所屬專業方向屬性。

圖3 課程添加界面

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

圖4 命題計劃審核

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

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

圖5 試題添加界面

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

圖6 命題計劃指定界面

3 結束語

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

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

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

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

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

[5]衛軍,夏慧軍,孟臘春.ExtJS Web應用程序開發指南[M].DynoMedia Inc.2009.

[6]閆俊甫,鄧世昆.基于ExtJS與XML的家庭理財系統的設計與實現[J].計算機與現代化.2012.

[7]吳吉義,平玲娣.Web2.0主流應用技術——AJAX性能分析[J].計算機工程與設計.2008.

[8]鞠鳳娟,吳志峰.EXT技術在Web界面設計與實現中的應用研究[J].計算機與現代化.2008.

[9]張鑫,黃燈橋,楊彥強.JavaScript凌厲開發：Ext JS 3詳解與實踐[M].北京：清華大學出版社.2010.

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

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

[12]任偉,林曉東.基于Spring框架和ExtJS的藥品庫房管理系統實現[J].計算機工程與設計.2009.

[13]榮耀,李昕.企業級 AJAX 框架設計與實現[J].南京師范大學學報：工程技術版.2007.

[14]趙永屹,宿紅毅,胡韶輝.基于AJAX與J2EE的新型Web應用的設計與實現[J].計算機工程與設計.2007.

[15]譚力,楊宗源,謝瑾奎.Ajax技術的數據響應優化[J].計算機工程.2010.

[16]王建文,張俊明,韓李鵬.基于ExdS的物資管理系統的設計與實現[J].計算機工程與設計.2010.

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

[18]黎永良,崔杜武.MVC設計模式的改進與應用[J].計算機工程.2005.