基于ExtJS的科研項目申報及評審系統(tǒng)的設(shè)計與實現(xiàn)

摘 要 針對某高職院校要求開發(fā)具有良好用戶體驗和可維護性的網(wǎng)上科研項目申報及評審系統(tǒng)的需要，闡述了基于ExtJS+Servlet+MyBatis的網(wǎng)上科研項目申報及評審系統(tǒng)的設(shè)計與實現(xiàn)。詳述系統(tǒng)所使用的關(guān)鍵技術(shù)。分析了系統(tǒng)所采用的架構(gòu)并給出了核心功能的實現(xiàn)。應(yīng)用實踐表明，ExtJS框架可以作為開發(fā)具有良好用戶體驗的Web應(yīng)用的另一選擇。

【關(guān)鍵詞】ExtJS 項目申報與評審 AJAX B/S架構(gòu)

隨著網(wǎng)絡(luò)技術(shù)的普及以及管理模式的變革，高職院校的科研項目申報及評審工作，大多由傳統(tǒng)的手工處理方式提升為由計算機軟件系統(tǒng)輔助管理。而且，高職院校在選購管理軟件時，也傾向于由原來行業(yè)內(nèi)統(tǒng)一，標準化的軟件系統(tǒng)，向個性化訂制服務(wù)軟件系統(tǒng)的轉(zhuǎn)變。

Web應(yīng)用中基于B/S（瀏覽器/服務(wù)器）多層體系架構(gòu)以其客戶端和服務(wù)器端分離的優(yōu)點而受到廣泛的關(guān)注。然而，傳統(tǒng)的B/S架構(gòu)沒有采用良好的軟件設(shè)計模式和開發(fā)框架，開發(fā)的JSP、ASPX頁面中通常既包含表示層的數(shù)據(jù)又嵌入了業(yè)務(wù)邏輯的程序代碼，存在系統(tǒng)維護難度高、頁面交互性和表現(xiàn)能力差的不足。本文針對某高職院校對網(wǎng)上科研項目申報及評審系統(tǒng)的實際需求，采用ExtJS框架，綜合運用Ajax技術(shù)、Servlet技術(shù)和MyBatis持久化框架，設(shè)計并實現(xiàn)網(wǎng)上科研項目申報及評審系統(tǒng)。

1 采用關(guān)鍵技術(shù)

1.1 Ajax技術(shù)

Ajax（Asynchronous JavaScript and XML，異步JavaScript和XML）是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，Ajax技術(shù)的核心是XMLHttpRequest對象。使用XMLHttpRequest對象，客戶端應(yīng)用程序向服務(wù)器發(fā)送請求，并處理服務(wù)器的響應(yīng)，在處理過程中，可以避免阻塞客戶端用戶操作，Web頁面也不需要頻繁重新加載，就能產(chǎn)生局部刷新的效果，從而使用戶具有良好操作體驗。

1.2 ExtJS框架

ExtJS是一個用JavaScript編寫的，與后臺開發(fā)技術(shù)無關(guān)的前端Ajax框架，可以直接應(yīng)用到Java、.Net、Php開發(fā)語言中，前后臺之間通過JSON/XML實現(xiàn)數(shù)據(jù)傳遞。

ExtJS技術(shù)主要用于構(gòu)建UI（User Interface，用戶界面），也可用來開發(fā)RIA（Rich Internet Application，富客戶端）應(yīng)用程序。ExtJS擁有豐富的表單控件，它整合CSS，XML等多項技術(shù)，從實現(xiàn)的界面效果到數(shù)據(jù)解析及異常處理都非常出色，并且能夠兼容不同的瀏覽器。ExtJS不需要在客戶端安裝任何插件，使用ExtJS構(gòu)建的RIA應(yīng)用可與桌面程序媲美，它正逐步成為開發(fā)擁有良好用戶體驗的Web應(yīng)用的新選擇。

1.3 JSON技術(shù)

JSON（JavaScript Object Notation，JS對象標記）是一種輕量級的數(shù)據(jù)交換格式。它采用完全獨立于語言的文本格式，易于人閱讀和編寫，也易于機器解析和生成。JSON語法極其簡單，對于那些輕量級的AJAX應(yīng)用，相對與XML數(shù)據(jù)而言，JSON得到了更廣泛的使用，成為理想的數(shù)據(jù)交換格式。

1.4 MyBatis框架

MyBatis是J2EE應(yīng)用開發(fā)中的一個持久化框架，它通過配置的XML文件或注解實現(xiàn)對象與存儲過程，SQL語句的關(guān)聯(lián)，并可實現(xiàn)動態(tài)生成SQL語句。MyBatis與JDBC相比，簡化了相關(guān)代碼的實現(xiàn)，讓程序?qū)⒅饕Ψ旁赟QL語句上，通過其提供的映射方式，自由靈活生產(chǎn)（或半自動化）滿足需要的SQL語句，修改也比較容易。

2 系統(tǒng)設(shè)計

2.1 架構(gòu)設(shè)計

系統(tǒng)架構(gòu)采用MVC模型設(shè)計，該模型由表現(xiàn)層、控制層和模型層構(gòu)成，每一層采用不同的技術(shù)實現(xiàn)，層與層之間使用不同技術(shù)進行數(shù)據(jù)交互。系統(tǒng)架構(gòu)由ExtJS+Servlet+JSON+MyBatis技術(shù)構(gòu)成，如圖1所示。

架構(gòu)詳細描述：表示層使用ExtJS實現(xiàn)用戶界面及用戶請求。服務(wù)層使用Servlet實現(xiàn)用戶請求及響應(yīng)。實現(xiàn)層使用Java技術(shù)實現(xiàn)系統(tǒng)業(yè)務(wù)的處理。數(shù)據(jù)訪問層使用MyBatis實現(xiàn)數(shù)據(jù)持久化。數(shù)據(jù)庫使用MySql5.5實現(xiàn)業(yè)務(wù)數(shù)據(jù)的存儲。

處理主流程：用戶從瀏覽器發(fā)出的請求（異步請求）至服務(wù)層；服務(wù)層根據(jù)請求調(diào)用實現(xiàn)層業(yè)務(wù)處理模塊進行業(yè)務(wù)處理；業(yè)務(wù)處理完成后，一方面通過數(shù)據(jù)訪問層接口與數(shù)據(jù)庫管理系統(tǒng)對數(shù)據(jù)進行持久化處理；另一方面，實現(xiàn)層將用戶請求結(jié)果回傳給服務(wù)層，并經(jīng)由服務(wù)層規(guī)范化后，返回給瀏覽器并呈現(xiàn)給用戶。

2.2 功能設(shè)計

科研項目申報及評審系統(tǒng)由系統(tǒng)管理、申報子系統(tǒng)和評審子系統(tǒng)三個部分組成，功能結(jié)構(gòu)如圖2所示。

（1）系統(tǒng)管理，實現(xiàn)用戶—角色—權(quán)限的安全管理策略，一個用戶可以擁有多個角色，一個角色也可以包含多個權(quán)限。以此實現(xiàn)用戶—權(quán)限的最大靈活性。

（2）申報子系統(tǒng)，由項目申報、項目修改及項目瀏覽三個部分組成，用于科研工作者與科研管理者用戶通過瀏覽器便利地實現(xiàn)科研項目的申報、修改、查詢?yōu)g覽、統(tǒng)計以及申報書導出等功能。

（3）評審子系統(tǒng)，由專家管理、項目分配、項目評審和評審管理四個部分組成。主要用于科研管理者用戶將待評審的科研項目分配給指定的評審專家，以及評審專家對分配的科研項目實施評審?？蒲泄芾碚哂脩艨梢怨芾怼⒉樵兒徒y(tǒng)計各評審專家評審的評審情況。

3 核心功能模塊實現(xiàn)

3.1 前后端數(shù)據(jù)通信

本系統(tǒng)利用ExtJS已經(jīng)封裝的Ajax特性，可以無需刷新瀏覽器頁面，直接通過異步方式將客戶端的請求提交給服務(wù)層，并處理服務(wù)層的響應(yīng)。ExtJS的Ajax組件支持JSON或XML等數(shù)據(jù)格式。與采用XML格式的數(shù)據(jù)相比較，JSON格式數(shù)據(jù)具有數(shù)據(jù)規(guī)模小，編程簡單等優(yōu)點，故本系統(tǒng)采用JSON格式數(shù)據(jù)進行通信。表示層使用Ext.Ajax.request組件，請求代碼如下：endprint

編程實現(xiàn)時，使用ExtJS的Ext.define組件，將上述代碼封裝在一個名稱為exRequest類中成獨立的模塊。并利用組合技術(shù)，將exRequest組合到應(yīng)用類（如：登錄管理）中，并注冊對事件“completed”的響應(yīng)，以達到利用ExtJS的事件處理機制，實現(xiàn)頁面編碼與Ajax請求的分離。

3.2 服務(wù)層的接口實現(xiàn)

服務(wù)層是聯(lián)系表示層和模型層的紐帶，服務(wù)層調(diào)用模型層的業(yè)務(wù)邏輯處理接口，實現(xiàn)對系統(tǒng)業(yè)務(wù)數(shù)據(jù)的增加、修改、刪除、查詢、統(tǒng)計、打印及導出等處理功能。請求服務(wù)（ServiceAction）抽象類與部分業(yè)務(wù)請求實現(xiàn)類（HdPmpProjectApply[項目申報服務(wù)]和HdPmpProjectEvalute[項目評審]）關(guān)系，如圖3所示。

方法request（）是頁面請求執(zhí)行引擎，而response（）是服務(wù)層響應(yīng)執(zhí)行引擎，這兩個方法不能被重寫，其它抽象方法（doSeek，doModify，doDelete，…），在不同的業(yè)務(wù)實現(xiàn)類中被重寫。采用這中接口方式，進一步達到規(guī)范服務(wù)層操作，重點關(guān)注業(yè)務(wù)邏輯處理以及降低重復代碼編寫的目的。

3.3 數(shù)據(jù)持久化實現(xiàn)

系統(tǒng)采用MyBatis框架實現(xiàn)數(shù)據(jù)的持久化。MyBatis應(yīng)用程序首先創(chuàng)建SqlSessionFactory實例，其作用相當于一個數(shù)據(jù)庫連接池；然后SqlSessionFactory通過配置的XML文件獲取一個SqlSession，請求執(zhí)行SQL語句；執(zhí)行完成后需要釋放SqlSession。實現(xiàn)核心代碼如下：

4 結(jié)束語

經(jīng)實際應(yīng)用測試，科研項目申報及評審系統(tǒng)能達到預期功能和性能目標，滿足用戶管理工作的需要，具有較好的實際應(yīng)用價值。實踐表明，采用ExtJS技術(shù)實現(xiàn)基于B/S模式的Web應(yīng)用系統(tǒng)，能縮短開發(fā)周期，提高Web應(yīng)用系統(tǒng)的可維護性和可擴展性，可以作為開發(fā)擁有良好用戶體驗的Web應(yīng)用的另一新選擇。

參考文獻

[1]魏焱，李邈.基于ExtJS的VPN管理系統(tǒng)的設(shè)計與實現(xiàn)[J].通信技術(shù)，2017（06）：1323-1327.

[3]鄧源清，石智偉.售票網(wǎng)站后臺管理系統(tǒng)架構(gòu)設(shè)計與實現(xiàn)[J].軟件導刊，2017（05）：96-98.

[4]張小龍，孔勇強等.基于Extjs+SSH框架的電子商務(wù)系統(tǒng)[J].中國科技信息，2017（10）：65-67.

[5]周珅.基于ExtJS的通用層級關(guān)系組件的設(shè)計和實現(xiàn)[J].數(shù)字通信世界，2017（05）：261-262.

[6]Brett McLaughlin著，OReilly Taiwan公司編譯.深入淺出Ajax[M].南京：東南大學出版社，2008：28-40.

[7]張旗.淺析Ajax框架在Web系統(tǒng)中開發(fā)與應(yīng)用[J].科技廣場，2008（08）：223-225.

[8]趙俊昌，祝紅濤，吳越人.精通JS之ExtJS框架[M].北京：化學工業(yè)出版社，2011.

[9]http：//json.org/json-zh.html.

[10]文歡歡等.基于Mybatis和JDBC的分頁查詢研究[J].電腦知識與技術(shù)，2015（25）：165-167.

[11]榮艷冬.關(guān)于Mybatis持久層框架的應(yīng)用研究[J].信息安全與技術(shù)，2015（12）：86-88.

[12]姜娜，孔浩，張子鋒.高校業(yè)務(wù)系統(tǒng)中基于MyBatis實現(xiàn)可復用的DAO模型[J].昭通師范高等?？茖W校學報，2012（05）：31-34.

[13]陳玲，夏汛.利用Mybatis的動態(tài)SQL實現(xiàn)物理分頁[J].數(shù)字技術(shù)與應(yīng)用，2011（11）：227.

作者簡介

彭春富（1970-），男，湖南省澧縣人。碩士學位。高級工程師。主要研究方向為軟件工程。

作者單位

常德職業(yè)技術(shù)學院 湖南省常德市 415000endprint