基于ExtJS+ASP.NETMVC的Web系統(tǒng)應(yīng)用設(shè)計(jì)

潘齊欣　石開和　劉春林

摘 要：針對現(xiàn)在常用的Web應(yīng)用系統(tǒng)的構(gòu)建，論文深入研究了當(dāng)前的主流技術(shù)，即ExtJS和ASP.NET MVC等技術(shù)。設(shè)計(jì)了基于ExtJS、ASP.NET和Hibernate的MVC框架，并對該框架的基本結(jié)構(gòu)和運(yùn)行原理進(jìn)行介紹。

關(guān)鍵詞：Web應(yīng)用系統(tǒng)；MVC框架；ExtJS

1 引言

當(dāng)前，在基于Web環(huán)境的各種應(yīng)用程序的設(shè)計(jì)中，人們普遍采用MVC模式，也就是模型-視圖-控制器模式。針對現(xiàn)在人們普遍采用的MVC框架，可以采用多種技術(shù)，比如Strucs、Webwork以及Web.net等。其中，對于采用ASP.NET技術(shù)框架的MVC模式，能夠從更廣泛的層面實(shí)現(xiàn)用戶賬號的輸入，以及各種業(yè)務(wù)邏輯的實(shí)現(xiàn)與用戶顯示界面的分離，從而能夠有效降低對各種大型項(xiàng)目進(jìn)行管理的復(fù)雜性。不僅如此，還能夠有效增加軟件的測試性。通過在軟件開發(fā)人員之間的高校合作，可以實(shí)現(xiàn)整個(gè)軟件項(xiàng)目的高效開發(fā)。

在ExtJS中，包含了功能強(qiáng)大的JS類庫，可以為用戶和開發(fā)人員提供更加豐富的Web設(shè)計(jì)和應(yīng)用體驗(yàn)。所以，文中在對這些基本技術(shù)介紹的基礎(chǔ)上，實(shí)現(xiàn)了對MVC框架的搭建，可以將這種框架稱為ASP.NE+ExtJS+Hibenate框架。接著，在整個(gè)框架的客戶端中還設(shè)計(jì)了ExtJS技術(shù)，而提高用戶界面的體驗(yàn)性能。

2 ExtJS介紹

起初，ExtJS技術(shù)從YUI技術(shù)發(fā)展而來，在對JavaSwing等多種有效機(jī)制參考的基礎(chǔ)上，完成可視化組件的組織?，F(xiàn)在常用的Ext中的UI組件主要借鑒Java語言中的Swing插件技術(shù)，可以為軟件應(yīng)用開發(fā)人員提供跨瀏覽器的類庫?，F(xiàn)在，在已有的ExtJS技術(shù)中，廣泛采用基于Ajax來實(shí)現(xiàn)富客戶端開發(fā)，可以實(shí)現(xiàn)前端用戶界面的創(chuàng)建，且前端的Ajax框架與后臺技術(shù)無關(guān)。

其實(shí)，在Ext中包含了多種控件。這些控件的種類多樣，不僅有文本框、頁面控件、表格控件，還包括了表單控件、標(biāo)簽頁控件以及各種窗口控件等。以這些控件以基本元素，就能夠?qū)崿F(xiàn)方便快捷的編輯。

3 ASP.NET介紹

作為由微軟公司所提供過得一種服務(wù)器端應(yīng)用編程技術(shù)，ASP.NET的中心主要為Web頁面和服務(wù)器控件。通過客戶端，用戶可以將頁面提交到服務(wù)器，而服務(wù)器端的腳本代碼能夠?qū)τ脩羲峁┑臄?shù)據(jù)和控件事件進(jìn)行處理。作為一種近年來廣泛采用的一種Web環(huán)境下的應(yīng)用框架與模式，MVC可以將各種應(yīng)用劃分成模型、視圖與控制器等幾個(gè)不同的組件。在這種模式中，控制器為其核心，視圖負(fù)責(zé)顯示與用戶相關(guān)的界面，而模型的任務(wù)則主要為存儲各種類型的數(shù)據(jù)。所以，可以通過控制器實(shí)現(xiàn)模型與視圖之間的數(shù)據(jù)傳遞與用戶輸入的轉(zhuǎn)換?？梢钥闯?，這種結(jié)構(gòu)下的程序更加清晰，便于在使用中開展各種維護(hù)。

相比較于傳統(tǒng)Web應(yīng)用中所采用的Web表單，ASP.NET中所采用的機(jī)遇MVC模式的設(shè)計(jì)架構(gòu)，可以有效實(shí)現(xiàn)用戶多種操作方式與業(yè)務(wù)流程的分離，從而將項(xiàng)目管理過程中所存在的復(fù)雜問題進(jìn)行簡化，也可以增加測試過程中的可測試性。以MVC架構(gòu)為依托，軟件開發(fā)人員可以同時(shí)針對不用的模塊進(jìn)行開發(fā)，也即是能夠?yàn)檐浖?xiàng)目的并行設(shè)計(jì)與實(shí)現(xiàn)提供條件。

在已有的ASP.NET程序框架中，主要采用如下的方式來降低用戶界面與程序之間的業(yè)務(wù)邏輯：的耦合性的方式主要為：在ASPX頁面文件中包含了用戶界面所需要的組件，而CS代碼中包含了實(shí)現(xiàn)功能業(yè)務(wù)的邏輯代碼；通過用戶界面中所包含的可視化組件的抽象，能夠獲得服務(wù)器控件對象，并能夠通過后臺程序來實(shí)現(xiàn)對象行為的控制。然而，在整個(gè)軟件系統(tǒng)的界面與業(yè)務(wù)邏輯中，會存在不同程度的耦合；而業(yè)務(wù)實(shí)現(xiàn)的代碼、界面控件的代碼以及對數(shù)據(jù)庫進(jìn)行訪問所需要的代碼等不斷混雜，難以進(jìn)行維護(hù)與測試。所以，采用ASP.NET中所提供的MVC框架，則能夠較好的解決此類問題。

基于ASP.NET框架，可以為Web應(yīng)用的開發(fā)提供新穎的解決方案，確保了ASP.NET平臺能夠具備更加清晰的結(jié)構(gòu)。由于ASP.NET框架中采用了全新的語法結(jié)構(gòu)，為軟件界面的設(shè)計(jì)與實(shí)現(xiàn)提供了便利，提高了軟件代碼的可讀性，從根本上降低了組件之間的耦合性，提供整體應(yīng)用程序的開發(fā)效率。

在ASP.NET框架中，控制器為C#類，可以完成用戶輸入的接收，并將結(jié)果顯示到視圖中。在控制器的所有方法中，可以為程序返回視圖，在軟件的視圖層中包含了html文件。

4 框架結(jié)構(gòu)與運(yùn)行原理

4.1 框架結(jié)構(gòu)

文中所采用的MVC框架結(jié)構(gòu)主要如圖1所示?？梢园l(fā)現(xiàn)，其中包括了表現(xiàn)層、控制層、業(yè)務(wù)邏輯層、持久成等多個(gè)層次。

在圖1中所示架構(gòu)中，表現(xiàn)層主要通過ExtJS控件和ASP頁面完成用戶界面的開發(fā)，而在該層中采用ExtJS類庫，可以在提高校驗(yàn)輸入、數(shù)據(jù)獲取與轉(zhuǎn)化等多種功能的基礎(chǔ)上，從系統(tǒng)的控制層獲取多種數(shù)據(jù)信息，進(jìn)而為用戶的使用提供優(yōu)良的體驗(yàn)。

在框架結(jié)構(gòu)的控制層，主要通過ASP.NET MVC技術(shù)來提供控制功能，這樣，就能夠從表示層中獲取數(shù)據(jù)，然后向請求用戶發(fā)送，在此過程中，可以針對從表現(xiàn)層所獲取的數(shù)據(jù)進(jìn)行有效性檢驗(yàn)。通過對各種處理方式的使用，可以獲得想要的結(jié)果；接著，就可以將獲取的數(shù)據(jù)以及視圖向系統(tǒng)反饋。

作為整個(gè)應(yīng)用系統(tǒng)的核心層，業(yè)務(wù)邏輯層可以實(shí)現(xiàn)對各種業(yè)務(wù)數(shù)據(jù)的處理，在此過程中要以業(yè)務(wù)規(guī)則為基準(zhǔn)，對從業(yè)務(wù)處理層到持久層的整個(gè)環(huán)節(jié)進(jìn)行管理，最終通過對持久層中各種接口的調(diào)用，實(shí)現(xiàn)對軟件系統(tǒng)中存在的數(shù)據(jù)的存儲與訪問。

以軟件系統(tǒng)的持久層為基礎(chǔ)，可以為業(yè)務(wù)邏輯層提供全面的數(shù)據(jù)服務(wù)，在持久層中，主要包括了數(shù)據(jù)訪問類和數(shù)據(jù)實(shí)體類。其中，對于數(shù)據(jù)訪問類，能夠以Hibernate為基礎(chǔ)，實(shí)現(xiàn)對數(shù)據(jù)庫的基本操作過程，這主要是由于在DAO中封裝了對數(shù)據(jù)庫進(jìn)行管理的基本操作。

4.2 運(yùn)行原理

在使用過程中，用戶可以通過客戶端來對Ext控件進(jìn)行調(diào)用，完成服務(wù)器申請過程。而通過服務(wù)器可以實(shí)現(xiàn)對Web.xml文件的解析，然后再以XML文件中的配置信息為依據(jù)，將所有用戶的請求通過.net容器實(shí)現(xiàn)處理環(huán)節(jié)；通過用戶提供的地址，.net容器就可以將用戶的各種請求向控制層中的控制類提交。

控制類在獲取用戶請求與參數(shù)信息的基礎(chǔ)上，通過調(diào)用業(yè)務(wù)處理類中的服務(wù)來實(shí)現(xiàn)對用戶的請求。根據(jù)各種業(yè)務(wù)的不同規(guī)則，通過業(yè)務(wù)處理類就可以以數(shù)據(jù)訪問類和數(shù)據(jù)存儲層為依托，實(shí)現(xiàn)全面的交互。進(jìn)而完成對數(shù)據(jù)庫的操作過程；而系統(tǒng)中的業(yè)務(wù)服務(wù)層則可以將得到的結(jié)果發(fā)送給控制層，從而確?？刂茖幽軌?qū)崿F(xiàn)結(jié)果數(shù)據(jù)到Json對象的轉(zhuǎn)換，最后，通過ExtJS控件實(shí)現(xiàn)數(shù)據(jù)顯示過程。

5 框架的實(shí)現(xiàn)

5.1 表現(xiàn)層

在系統(tǒng)的表現(xiàn)層中，可以通過JSP頁面對ExtJS控件的調(diào)用，實(shí)現(xiàn)其構(gòu)建過程，然后，在完成控件的開發(fā)與實(shí)例化處理。在用戶的管理模塊中，表現(xiàn)層，也就是視圖層的構(gòu)成主要包括：userManage.jsp、userManagePanel.js、userSearchForm.js、userSearchResult.js、userManagerWin.js和userInfoForm.js等。其中，userSearchForm.js中給出了多種與查詢相關(guān)的控件，主要從Ext、form和FormPanel中擴(kuò)展；userSearchResult.js為對查詢結(jié)構(gòu)進(jìn)行顯示的控件，主要從Ext、grid和GridPanel中擴(kuò)展；userManagerWin.js為實(shí)現(xiàn)用戶添加的窗體控件，主要從Ext和Window中擴(kuò)展；userInfoForm.js為用戶的信息控件，主要從Ext、form和FormPanel中擴(kuò)展。

前面也介紹過，視圖主要用戶對用戶界面進(jìn)行顯示。因?yàn)閷?yīng)于控制器中的每個(gè)方法，都應(yīng)該向其返回一個(gè)視圖。

5.2 控制層

在系統(tǒng)的控制層中，對其控制器的配置，需要借助Web.xml來實(shí)現(xiàn)，進(jìn)而實(shí)現(xiàn)對用戶的分發(fā)管理進(jìn)程，而在Web.xml中則對主控制器對象與相應(yīng)的URL進(jìn)行了定義。通常，人們都通過控制器來獲取視圖類對象，不僅如此，作為一種重要的子類，其在視圖類中的作用主要為獲取不同類型的視圖，比如，在獲取Web頁面的基礎(chǔ)上，就可以得到相應(yīng)的JavaScript腳本，而通過FileResult則可以得到一個(gè)二進(jìn)制文件。

系統(tǒng)中主控制對象，主要通過Spring中的org.springframework、web.servlet和DispatcherServlet等獲得最終結(jié)果。而在軟件系統(tǒng)的各種服務(wù)啟動過程中，可以實(shí)現(xiàn)配置文件的加載，進(jìn)而實(shí)現(xiàn)系統(tǒng)環(huán)境的配置。可以在類路徑下對各種組件、業(yè)務(wù)層組件、控制層組件以及數(shù)據(jù)訪問層組件等所注解的類進(jìn)行掃描與關(guān)注，之后就可以將相對應(yīng)的類加入到Spring容器，從實(shí)現(xiàn)對輔助類相關(guān)參數(shù)的包裝構(gòu)建。并將用戶請求分發(fā)到特定的控制器中。在Java編碼中，一般通過@RequestMapping來實(shí)現(xiàn)URL的映射與請求，通過@PathVariable、@RequestParam實(shí)現(xiàn)url中參數(shù)的獲取，然后通過序列化Java對象為標(biāo)準(zhǔn)字符串的方式向客戶端發(fā)送。

5.3 業(yè)務(wù)邏輯與數(shù)據(jù)訪問層

對于系統(tǒng)中的邏輯層，主要指根據(jù)各種不同的業(yè)務(wù)規(guī)則實(shí)現(xiàn)業(yè)務(wù)處理的層。在具體的實(shí)現(xiàn)中，可以通過@service進(jìn)行標(biāo)準(zhǔn)，此外，可以將UserInfoService作為業(yè)務(wù)邏輯層的組件，并通過@Autowired實(shí)現(xiàn)對數(shù)據(jù)訪問類的注解。而在整個(gè)系統(tǒng)中的數(shù)據(jù)存儲層實(shí)現(xiàn)交互的位置則可以利用UserIfoDao對數(shù)據(jù)庫進(jìn)行訪問，并利用@Transactionsl實(shí)現(xiàn)事務(wù)的定義與注解。

對于數(shù)據(jù)訪問類DAO的實(shí)現(xiàn)過程中，則包含了對數(shù)據(jù)源的配置，對各種事務(wù)的管理，對數(shù)據(jù)訪問工廠類的構(gòu)建中，實(shí)現(xiàn)對CommonDao基類同步構(gòu)建。而在此過程中，則可以通過@Autowired方式來實(shí)現(xiàn)自動注入數(shù)據(jù)對所構(gòu)建的工程類的注解過程，此外，還可以從org.springframwork或者HibernanteDaoSupport完成擴(kuò)展過程，并實(shí)現(xiàn)一些方法的定義，進(jìn)而完成一些常用數(shù)據(jù)庫操作，比如增加、刪除、修改和查詢等。

6 結(jié)語

論文針對現(xiàn)在常用的Web應(yīng)用系統(tǒng)的構(gòu)建，深入研究了當(dāng)前的主流技術(shù)，即ExtJS和ASP.NET MVC等技術(shù)。大量的應(yīng)用實(shí)踐都表明，文中所闡述的系統(tǒng)構(gòu)建具有簡單易用的特點(diǎn)，可以為中小型的應(yīng)用系統(tǒng)開發(fā)提供幫助，也需要在不斷的應(yīng)用中逐步完善。

[參考文獻(xiàn)]

[1]李成嚴(yán)，馮慧靈.基于開源技術(shù)的U'eb應(yīng)用架構(gòu)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2009，19（8）：27-33.

[2]張宇，工映輝，張翔南.基于Spring的MVC框架設(shè)計(jì)與實(shí)現(xiàn)[J].軟件技術(shù)與數(shù)據(jù)庫.2010，36（4）：59-62.

[3]宋轉(zhuǎn)玲，劉海行，代亮，等.基于ExtJS開發(fā)的海洋科學(xué)數(shù)據(jù)共享服務(wù)平臺[J].海洋科學(xué)，2010，34（2）：4-8.

[4]徐雯，高建華.基于Spring MVC及MyBatis的Web應(yīng)用框架研究[J].微型電腦應(yīng)用，2012，28（7）：1-4.

[5]楊旺明.基于Asp.net的權(quán)限系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與數(shù)字工程，2014，42（3）：482-485.