基于EXT.NET的Web應(yīng)用程序快速開發(fā)研究

季嘉明　沈毅俊　方建安

摘要：在探討B(tài)/S架構(gòu)發(fā)展的基礎(chǔ)上，對(duì)當(dāng)前流行的Web應(yīng)用程序的特點(diǎn)，如用戶體驗(yàn)、開發(fā)環(huán)境，開發(fā)周期進(jìn)行分析和比較，并在此基礎(chǔ)上提出一種高效的解決方案3XT.NET。利用EXT.NET、三層架構(gòu)和.NET開發(fā)平臺(tái)，設(shè)計(jì)并實(shí)現(xiàn)基于B/S架構(gòu)的富客戶端庫存管理系統(tǒng)。該系統(tǒng)界面美觀，用戶交互全部采用Ajax方式與后臺(tái)對(duì)接，動(dòng)態(tài)效果好、響應(yīng)快、功能豐富，并且前臺(tái)頁面基本無需式樣表與JS代碼，開發(fā)周期縮短。

關(guān)鍵詞：EXT.NET快速開發(fā)；Ajax三層架構(gòu)； .NET Framework

DOIDOI：10.11907/rjdk.151459

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)文章編號(hào)：16727800（2015）008016404

0 引言

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，特別是動(dòng)態(tài)網(wǎng)頁技術(shù)的不斷成熟，B/S架構(gòu)因統(tǒng)一了客戶端（全部使用瀏覽器），將系統(tǒng)功能實(shí)現(xiàn)的核心部分都集中到服務(wù)器上，簡化了系統(tǒng)的部署、維護(hù)和更新。HTML5、CSS3等新Web技術(shù)的出現(xiàn)，使得普通網(wǎng)頁同樣能呈現(xiàn)如傳統(tǒng)C/S架構(gòu)應(yīng)用程序同樣精致動(dòng)態(tài)的富客戶端用戶界面。然而，由于客戶端全部轉(zhuǎn)移到了瀏覽器上，開發(fā)人員需要掌握HTML、CSS、Javascript等網(wǎng)絡(luò)編程語言，從而導(dǎo)致開發(fā)人員編寫前臺(tái)頁面往往耗費(fèi)大量時(shí)間，無法專注于后臺(tái)業(yè)務(wù)邏輯及數(shù)據(jù)庫代碼[1]。

本文在分析和比較各類動(dòng)態(tài)網(wǎng)頁技術(shù)的基礎(chǔ)上，提出一種針對(duì)企業(yè)web應(yīng)用程序的高效解決方案，即利用三層架構(gòu)、EXT.NET、ASP.NET、ADO.NET等技術(shù)，結(jié)合企業(yè)需求，設(shè)計(jì)并快速開發(fā)出一款商品庫存管理系統(tǒng)。實(shí)驗(yàn)結(jié)果表明，該系統(tǒng)用戶界面友好，業(yè)務(wù)功能強(qiáng)大，開發(fā)周期短。

1 Web應(yīng)用發(fā)展與現(xiàn)狀

1.1 Web服務(wù)器發(fā)展過程

互聯(lián)網(wǎng)應(yīng)用最初，所有Web頁面都是靜態(tài)的，服務(wù)器收到客戶端請(qǐng)求資源后再返回資源。此后，CGI應(yīng)用程序?qū)崿F(xiàn)了在靜態(tài)Web頁面上的動(dòng)態(tài)交互，客戶端發(fā)送的請(qǐng)求使服務(wù)器激活指定的CGI程序，再由它調(diào)用其它程序并收集執(zhí)行結(jié)果，最后轉(zhuǎn)換成能識(shí)別的HTML格式回送給客戶端[2]。不過Java Applet因?yàn)槠洹耙淮尉帉?，隨處可用”的特點(diǎn)，更為流行。開發(fā)人員可以編寫嵌入在Web頁面中的Applet小程序，在所有支持Java的瀏覽器上都可以運(yùn)行[3]。然而，使用Applet時(shí)要求開發(fā)人員必須考慮客戶端版本問題，而且復(fù)雜的Applet在網(wǎng)絡(luò)傳輸量很大，于是開發(fā)人員希望最后發(fā)送給客戶端的依舊是靜態(tài)的Web頁面，只是這一頁面是在服務(wù)器動(dòng)態(tài)生成。為此，能在應(yīng)用服務(wù)器上運(yùn)行的Servlet由Sun公司率先提出。Servlet根據(jù)從客戶端得到的信息，利用整個(gè)服務(wù)器資源，完成所需的業(yè)務(wù)邏輯，再一行一行地打印出HTML文件發(fā)回給客戶端[4]。然而這樣的流程使開發(fā)人員必須考慮到Web頁面的外觀設(shè)計(jì)，希望將Web的圖形設(shè)計(jì)與業(yè)務(wù)邏輯分開，于是針對(duì)服務(wù)器端又出現(xiàn)了新的解決方案，最著名的就是微軟公司的Active Server Pages（ASP）[5]、Sun公司的JavaServer Pages（JSP）[6]和開源的PHP[7]。

1.2 AJAX

雖然服務(wù)器端的發(fā)展使得Web應(yīng)用有了動(dòng)態(tài)效果，但和C/S結(jié)構(gòu)下的富客戶端相比，這些動(dòng)態(tài)生成的原始HTML文件依然顯得有些單調(diào)。為了讓用戶體驗(yàn)更豐富，在此基礎(chǔ)上很多技術(shù)都得到廣泛關(guān)注，但真正稱得上里程碑的是Ajax的出現(xiàn)。在Ajax之前，即使只更新Web頁面上的部分?jǐn)?shù)據(jù)，也必須刷新整個(gè)頁面，而利用Ajax可以異步訪問服務(wù)器，即時(shí)響應(yīng)用戶的請(qǐng)求，同時(shí)只傳輸必須更新的部分頁面，大大提高了Web應(yīng)用的執(zhí)行效率[8]。谷歌、微軟、亞馬遜和雅虎等公司相繼使用Ajax技術(shù)，其已成為新一代Web應(yīng)用炙手可熱的技術(shù)[9]。此后Ajax的概念進(jìn)一步擴(kuò)展，現(xiàn)在幾乎所有不刷新頁面就能實(shí)現(xiàn)請(qǐng)求服務(wù)器的技術(shù)都涵蓋在內(nèi)，包括XHTML、CSS、DOM、XML、XSLT、JavaScript和XMLHttpRequest等技術(shù)[10]。然而，不可避免地要求開發(fā)人員同時(shí)掌握服務(wù)器和客戶端上的多種語言，若想開發(fā)單純由Ajax實(shí)現(xiàn)的富客戶端Web應(yīng)用，僅編寫JavaScript代碼上就需耗費(fèi)大量時(shí)間和精力。對(duì)于普通企業(yè)來說，將大大增加開發(fā)難度和開發(fā)成本。

2 基于EXT.NET快速開發(fā)方案

為降低通過Ajax開發(fā)Web應(yīng)用的難度，很多整合了JavaScript庫的框架出現(xiàn)在了人們的視野中，如Prototype、jQuery、YUI、ExtJS[11]。各類JS框架的出現(xiàn)極大地提高了RIA（富互聯(lián)網(wǎng)應(yīng)用程序）開發(fā)的效率，尤其體現(xiàn)在對(duì)不同瀏覽器的兼容性上。然而，使用精簡了的JS框架并不意味著完全省去JS代碼，仍需大量使用層疊樣式表設(shè)計(jì)UI界面，所以RIA開發(fā)方案依然不算快速。本文提出3XT.NET快速開發(fā)方案，結(jié)合了EXT.NET和三層架構(gòu)開發(fā)理念，依托于.NET 開發(fā)平臺(tái)相關(guān)技術(shù)，高效地開發(fā)出純AJAX、有富客戶端體驗(yàn)的企業(yè)應(yīng)用系統(tǒng)。

2.1 EXT.NET

EXT.NET結(jié)合了.NET Framework和跨瀏覽器的ExtJS庫，是一套支持Ajax、開源的Web控件。其強(qiáng)大之處在于，所有控件都類似于ASP.NET的服務(wù)器控件，可以直接拖拽使用，且精美的動(dòng)態(tài)樣式已經(jīng)封裝于其中，所以無需引入任何樣式表即能呈現(xiàn)精美的用戶界面，可以省下不少CSS和JS代碼，同時(shí)大量使用Ajax+Json的響應(yīng)傳值方式，因此非常適合作為企業(yè)應(yīng)用開發(fā)工具[12]。Ext.NET包含超過100個(gè)高性能的組件，如常用的Gridpanel、menu、button、navigation等。使用EXT.NET，不僅可以使各種豐富多彩的UI更容易被開發(fā)和實(shí)現(xiàn)，還可以進(jìn)行RIA（Rich Internet Applications）的Ajax應(yīng)用開發(fā)[13]。

2.2 三層架構(gòu)

三層架構(gòu)一般指將整個(gè)應(yīng)用程序劃分為表現(xiàn)層（Presentation layer）、業(yè)務(wù)邏輯層（Business Logic Layer）、數(shù)據(jù)訪問層（Data access layer）。目的是為了實(shí)現(xiàn)“高內(nèi)聚低耦合”，為后續(xù)軟件維護(hù)和擴(kuò)展提供便利。其中，表現(xiàn)層主要負(fù)責(zé)呈現(xiàn)用戶界面，接收用戶操作指令并反饋對(duì)應(yīng)的信息，業(yè)務(wù)邏輯層針對(duì)具體的業(yè)務(wù)需求進(jìn)行各種處理，并在需要時(shí)調(diào)用數(shù)據(jù)層接口訪問數(shù)據(jù)庫；數(shù)據(jù)訪問層負(fù)責(zé)為上層提供數(shù)據(jù)服務(wù)，具體表現(xiàn)為提供各類接口用于訪問數(shù)據(jù)庫，對(duì)原始數(shù)據(jù)進(jìn)行操作[14]。

2.3 .NET相關(guān)技術(shù)

.NET Framework是微軟推出的開發(fā)平臺(tái)。使用.NET平臺(tái)中的各類技術(shù)可以很容易地搭建三層架構(gòu)[15]?；贏SP.NET的動(dòng)態(tài)網(wǎng)頁除非修改了頁面或重啟了Web應(yīng)用程序，否則經(jīng)過首次編譯后無需再次編譯。所以，在有二次訪問的情況下，響應(yīng)速度有很大提升。采用服務(wù)器控件概念和“code-behind”方式使表現(xiàn)與邏輯分離，代碼結(jié)構(gòu)更清晰，降低了系統(tǒng)的開發(fā)與維護(hù)難度[16]。ADO.NET是一組.NET Framework提供給.NET開發(fā)人員的類庫，提供了一種訪問各類數(shù)據(jù)源的通用方法以及完善的數(shù)據(jù)訪問服務(wù)，包括SQL server、ODBC、OLE DB數(shù)據(jù)庫、Oracle數(shù)據(jù)源以及XML等 [17]。

3 軟件設(shè)計(jì)

3.1 功能模塊設(shè)計(jì)

本軟件需要實(shí)現(xiàn)的主要功能模塊分為：主倉庫模塊、寄賣管理模塊、銷售模塊、客戶模塊，如圖1所示。

圖1 功能模塊設(shè)計(jì)

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

本系統(tǒng)架構(gòu)采用較為常用的三層架構(gòu)設(shè)計(jì)方案，劃分為表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層。此外，引入模型層，將數(shù)據(jù)對(duì)象實(shí)體和方法分離，以便在多層中進(jìn)行傳遞。

表現(xiàn)層基于EXT.NET框架，位于最外層（最上層），最接近用戶。用于顯示數(shù)據(jù)和接收用戶輸入數(shù)據(jù)，為用戶提供一種交互式操作的界面。負(fù)責(zé)頁面的布局、美工，后臺(tái)數(shù)據(jù)的呈現(xiàn)、排列，用戶操作的接收、反饋。

業(yè)務(wù)邏輯層主要解決業(yè)務(wù)規(guī)則的制定、業(yè)務(wù)流程的實(shí)現(xiàn)等與業(yè)務(wù)需求有關(guān)的算法設(shè)計(jì)。用戶各種操作經(jīng)表現(xiàn)層傳遞至此，經(jīng)過相關(guān)函數(shù)的調(diào)用，邏輯算法的處理，再被傳遞到下一層（數(shù)據(jù)訪問層）執(zhí)行相對(duì)應(yīng)的SQL語句。然后，再將反饋的數(shù)據(jù)交回表現(xiàn)層展示給用戶。

數(shù)據(jù)訪問層也被稱為持久層，其功能主要是負(fù)責(zé)數(shù)據(jù)庫訪問，可以訪問數(shù)據(jù)庫系統(tǒng)、二進(jìn)制文件、文本文檔或是XML文檔。本文使用ADO.NET技術(shù)，結(jié)合SQL映射實(shí)現(xiàn)對(duì)數(shù)據(jù)表的Select，Insert，Update，Delete的操作，如圖2所示。

3.3 數(shù)據(jù)庫設(shè)計(jì)

本系統(tǒng)數(shù)據(jù)庫采用SqlServer2008。針對(duì)所要實(shí)現(xiàn)的功能，建立如圖3所示的表結(jié)構(gòu)。

4 系統(tǒng)實(shí)現(xiàn)

4.1 表現(xiàn)層實(shí)現(xiàn)

（1）EXT.NET框架搭建。

由于表現(xiàn)層不是基于傳統(tǒng)HTML的標(biāo)簽，也不是ASP.NET的服務(wù)器控件標(biāo)簽，而是EXT.NET框架控件，所以首先引入EXT.NET。

首先在項(xiàng)目中添加Ext.Net.dll， Ext.Net.Utilities.dll， Newtonsoft.Jason.dll 3個(gè)文件的引用，然后修改Web.Config 配置。添加內(nèi)容如下：

此外，在每個(gè)aspx文件頁頭必須添加：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext%>

最后，搭建頁面框架，在標(biāo)簽開頭添加EXT.NET控件標(biāo)簽：

ID="ResourceManager1"

runat="server"

DirectMethodNamespace="drcm"

Theme="Gray"/>

至此，EXT.NET框架已搭建完畢，在form中拖入EXT.NET的控件就能完成前臺(tái)頁面設(shè)計(jì)，而無需編寫任何式樣表和javascript代碼。

（2）AJAX實(shí)現(xiàn)無刷新響應(yīng)。

使用EXT.NET能輕松實(shí)現(xiàn)頁面無刷新并快速響應(yīng)，正體現(xiàn)出EXT.NET框架的優(yōu)勢(shì)，具體利用Ajax+Json的方式。

例如前臺(tái)有以下表控件：

Title="當(dāng)前庫存（base）" Height="600">

…

頁面載入時(shí)將后臺(tái)的一張表傳遞到前臺(tái)顯示，只需2行代碼即可，即：

GridPanel1.DataSource = datetable；

GridPanel1.DataBind（）；

相反，將前臺(tái)表中的某一行傳到后臺(tái)，只需在觸發(fā)的方法中寫下2行，就可直接轉(zhuǎn)換成對(duì)象的泛型列表：

string json = e.ExtraParams["Values"]；

List row_catch = JSON.Deserialize >（json）

4.2 業(yè)務(wù)邏輯層實(shí)現(xiàn)

業(yè)務(wù)邏輯層包括SaleService、BaseService、ConsignmentService和CustomerService，分別處理銷售模塊、庫存模塊、寄賣管理模塊和客戶模塊的業(yè)務(wù)邏輯，另外有SysManager類處理系統(tǒng)的通用操作。這些類采用C#語言編寫，在三層架構(gòu)中起著承上啟下的作用。

表現(xiàn)層接收用戶的操作，觸發(fā)相應(yīng)的方法，例如：

protected void button_click（object sender， DirectEventArgs e）{…}

在方法體內(nèi)，僅進(jìn)行簡單的驗(yàn)證操作，然后將數(shù)據(jù)對(duì)象和需求傳遞給業(yè)務(wù)邏輯層的相應(yīng)方法，例如：

protected bool StockUp（Goods good）{…}

在BLL類中的方法體內(nèi)，首先判斷前臺(tái)所要執(zhí)行的動(dòng)作，隨后繼續(xù)調(diào)用相關(guān)其它方法來完成業(yè)務(wù)邏輯。當(dāng)需要進(jìn)行數(shù)據(jù)庫操作時(shí)，并不直接參與，而是使用數(shù)據(jù)層提供的方法，將相應(yīng)的數(shù)據(jù)實(shí)體傳給數(shù)據(jù)層，例如：

protected bool InsertEntity（string operation， ArrayList parValues）{…}

業(yè)務(wù)邏輯層中有些方法只返回布爾類型，提示操作成功或失敗，也有些是返回?cái)?shù)據(jù)，由表現(xiàn)層負(fù)責(zé)展示給用戶。

用戶操作便一層一層向下傳遞，每一層經(jīng)過相應(yīng)處理，將結(jié)果傳遞到下一層。

4.3 數(shù)據(jù)訪問層實(shí)現(xiàn)

數(shù)據(jù)訪問層主要由封裝了的ADO.NET基本代碼的核心操作類crud、SQL映射文件SqlMapCommon.xml和每張表對(duì)應(yīng)的一個(gè)操作類組成。

以操作Customer表的CustomerDB類為例，它包含了對(duì)表增刪改查的基本方法，如：

protected bool Add（Customer newCustomer）{…}

而crud.cs文件包括常用的ADO.NET類和對(duì)象：Connection， Command， DateReader， DataSet， DataAdapter。使用這些類和對(duì)象，封裝編寫了5類數(shù)據(jù)庫核心操作方法，供各表操作類調(diào)用，分別是：

RetrieveDataTable（string statementName， ArrayList parValues ）（獲取一張表），

RetrieveEntities（string statementName， ArrayList parValues ）（獲取一行），

DeleteEntity（string statementName， ArrayList parValues ）（刪除一行），

InsertEntity（string statementName， ArrayList parValues ）（插入一行），

UpdataEntity（string statementName， ArrayList parValues ）（修改一行），

SqlMapCommon.xml映射文件是專門用來寫SQL語句的，里面羅列了所有需要用到的增查改刪語句。

<！[CDATA[

INSERT INTO [sales_list] （[Typ]，[Unit]，[Num]，[Life]，[Price]，[Date]，[Channel]，[Customer]）

VALUES （@0，@1，@2，@4，@5，@6，@8，@9）

]] >

其中，@0，@1...分別對(duì)應(yīng)數(shù)組參數(shù)中序號(hào)。

4.4 模型層實(shí)現(xiàn)

模型層負(fù)責(zé)統(tǒng)一管理其它3層所用到的數(shù)據(jù)實(shí)體，包括4個(gè)類：Sale、Goods、Consignment和Customer。數(shù)據(jù)對(duì)象的所有字段都被封裝為類的屬性，分別由get和set 方法來獲取和修改屬性的值，其它類要使用對(duì)象實(shí)體必須先實(shí)例化。

5 結(jié)語

本文設(shè)計(jì)的商品管理系統(tǒng)在前端頁面無需添加任何CSS或JS代碼，開發(fā)周期短，投入運(yùn)行后使用正常，系統(tǒng)穩(wěn)定。并且前臺(tái)頁面全部采用Ajax技術(shù)，無需刷新頁面，軟件交互性和用戶體驗(yàn)度大大提升。無論是功能，還是界面都能與傳統(tǒng)C/S架構(gòu)的應(yīng)用軟件相媲美。因此，采用3XT.NET解決方案可以有效降低應(yīng)用程序開發(fā)和維護(hù)成本，實(shí)現(xiàn)了軟件需求、用戶體驗(yàn)和開發(fā)開銷之間的平衡。由于整個(gè)系統(tǒng)采用三層架構(gòu)，因此系統(tǒng)修改和升級(jí)方便快捷。

參考文獻(xiàn)：

[1] 畢麗翠. Web應(yīng)用程序快速開發(fā)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2012.

[2] 歐陽喜.如何實(shí)現(xiàn)WWW上的CGI編程[J]. 計(jì)算機(jī)與通信，1998（6）：2627.

[3] 王少鋒，王克宏. 利用Java插入件增強(qiáng)瀏覽器的功能[J]. 計(jì)算機(jī)工程，2000（11）：4344，128.

[4] 羅娟，朱秋萍. 用Active Server Pages創(chuàng)建交互Web應(yīng)用[J]. 計(jì)算機(jī)工程與應(yīng)用，1999（8）：9496.

[5] 楊德華. Web服務(wù)器端的動(dòng)態(tài)網(wǎng)頁技術(shù)[J]. 計(jì)算機(jī)應(yīng)用研究，1999（10）：4044.

[6] 池亞平，方勇. Servlet技術(shù)與應(yīng)用方法[J]. 北京郵電大學(xué)學(xué)報(bào)，2003，S1：137139，143.

[7] 齊克科，唐振云，王春森. 利用PHP實(shí)現(xiàn)網(wǎng)上數(shù)據(jù)操作[J]. 計(jì)算機(jī)應(yīng)用，2001（10）：111113.

[8] 高揚(yáng). 基于.NET平臺(tái)的三層架構(gòu)軟件框架的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)技術(shù)與發(fā)展，2011，02：7780，85.

[9] 王劉楊. .NET平臺(tái)下快速的富客戶端AJAX Web應(yīng)用開發(fā)[J]. 硅谷，2011（17）：8283.

[10] 陳必峰. 基于AJAX的富客戶端技術(shù)及應(yīng)用[J]. 計(jì)算機(jī)科學(xué)，2011（12）：419420，431.

[11] Joe Lennon. Javascript.框架比較.[EB/OL]. http：//www.ibm.com/developerworks/cn/web/wajsframeworks/.

[12] 吳江壽，劉世洪，蘇曉路，等. 基于Ajax技術(shù)的動(dòng)態(tài)匹配檢索[J]. 圖書情報(bào)工作，2009（9）：102104，115.

[13] 呂林濤，萬經(jīng)華，周紅芳. 基于AJAX的Web無刷新頁面快速更新數(shù)據(jù)方法[J]. 計(jì)算機(jī)應(yīng)用研究，2006（11）：199200，223.

[14] 盧冶，徐明，蘇勇. 一個(gè)基于ExtJS技術(shù)的污水管理信息平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)應(yīng)用與軟件，2013（9）：241244.

[15] 陳友良，盛可軍，王陽陽. 基于ASP.NET三層結(jié)構(gòu)軟件的研究與開發(fā)[J]. 現(xiàn)代電子技術(shù)，2010（6）：5860.

[16] 史建江，李世銀，黃興，等. 基于ASP.NET的信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 微計(jì)算機(jī)信息，2008（6）：3233，54.

[17] 江凌，楊平利，楊梅，等. 基于ADO.NET技術(shù)訪問SQL Server數(shù)據(jù)庫的編程實(shí)現(xiàn)[J]. 現(xiàn)代電子技術(shù)，2014（8）：9598.

（責(zé)任編輯：陳福時(shí)）