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

【關(guān)鍵詞】ExtJS 項(xiàng)目申報(bào)與評(píng)審 AJAX B/S架構(gòu)

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

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

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

1.1 Ajax技術(shù)

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

1.2 ExtJS框架

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

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

1.3 JSON技術(shù)

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

1.4 MyBatis框架

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

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

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

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

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

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

2.2 功能設(shè)計(jì)

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

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

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

（3）評(píng)審子系統(tǒng)，由專家管理、項(xiàng)目分配、項(xiàng)目評(píng)審和評(píng)審管理四個(gè)部分組成。主要用于科研管理者用戶將待評(píng)審的科研項(xiàng)目分配給指定的評(píng)審專家，以及評(píng)審專家對(duì)分配的科研項(xiàng)目實(shí)施評(píng)審?？蒲泄芾碚哂脩艨梢怨芾?、查詢和統(tǒng)計(jì)各評(píng)審專家評(píng)審的評(píng)審情況。

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

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

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

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

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

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

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

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

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

作者簡(jiǎn)介

彭春富（1970-），男，湖南省澧縣人。碩士學(xué)位。高級(jí)工程師。主要研究方向?yàn)檐浖こ獭?/p>

作者單位

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