WebApp MVC，“不一樣”的輕量級互連網應用程式開發架構

標籤：style   blog   http   ar   color   os   使用   sp   strong   

 

 

        WebApp MVC 這是一個專門開發互連網程式的開發架構，跟之前的《EFW架構》使用方式不一樣，EFW主要用於開發行業軟體的快速開發；而WebApp又區別與別的MVC架構，比如AspNet MVC，更輕量級，使用也更簡單；

 

WebApp技術特點：

Nvelocity（模板引擎）+UrlRewriter+HttpHandler 為底層技術支撐

bootstrap+JqueryEasyUI 為前端技術支撐

 

介面效果：用WebApp開發的一個簡單網站，外觀簡潔大氣，使用bootstrap讓介面開發變得非常容易，完全擺脫了煩人的CSS設計。第二張圖則把bootstrap與JqueryEasyUI結合在一起使用，可以開發一些複雜的功能；

 

 

 

原始碼目錄結構：分為兩個項目，

WebUI為介面項目，介面檔案都是使用的靜態檔案Html，並沒有使用Aspx檔案，讓我們的發布程式變得非常方便；

Manager項目是Controller與Model的C#代碼；看過之前的《EFW架構》就應該對BusinesEntity、Dao、ObjectModel三個目錄非常熟悉，這是我用物件導向思想結合實際開發情況來解決Model的方案；Controller類與請求的Url有一個映射關係，通過在瀏覽器中輸入Url就可以直接調用Controller中的方法；

 

 

執行流程圖：

 

 

結合上面的流程圖，我們來講解具體的代碼情況。

瀏覽器輸入地址http://localhost/Views/NewEfw/[email protected]_default就會顯示首頁頁面。

 

 

 

首先UrlRewriter把Url解析為/Views/NewEfw/API.aspx?cmd=efw_default，使用UrlRewriter的目的就是讓瀏覽器上顯示的Url看起來更容易理解，解析後的使用者是很難理解的，但是我們程式員應該是很容易看懂的；

 

 

 

接著就到了API.aspx這個核心中轉檔案，它是把Url映射到Controller的關鍵，就是使用HttpHandler 實現的，這裡我們不詳細講解，有興趣的可以網上查一下。

接著看cmd=efw_default這個又涉及到一個設定檔AppUnity.config，就是配置cmd與控制器方法的映射設定檔；這裡efw_default就映射到了efwsiteController檔案的Default方法；

 

 

 

我們接著看efwsiteController這個控制器檔案，其實就是一個普通的CS檔案，其中方法中有兩個屬性ViewData和ViewResult，

ViewData用來儲存介面資料，ViewResult是通過ToView()方法把介面檔案html，通過Nvelocity解析成最後的介面代碼返回給ViewResult輸出在瀏覽器；

而ViewData資料的來源就需要用到Model，這裡我們不詳細討論Model的代碼；

另外，Default方法上面加了一個自訂標籤[AOP(typeof(HeadFooterComponent))]這個有什麼用了？

我們知道網站一般都包括了頁頭與頁尾，這兩個部分在所有頁面中都存在，所以在設計View的時候為了代碼重用，我們使用外部檔案引用head.htm和foot.htm，這樣頁面是解決了代碼重用的問題，而頁面中涉及到的資料後台控制器又怎麼解決了？這使用就要用到Component組件控制器，再通過AOP攔截組件方法給沒個控制器方法加上頁頭頁尾資料；

這裡只是解決此處問題的一種方法，卻讓人看起來非常直觀；

 

 

解決我們看一下View檔案default.htm的代碼，裡面有Nvelocity獨特的標籤代碼，我們在編寫代碼的時候可以簡單學習一下，使用起來還是非常簡單的；

至此我們把流程圖的上半部分已經介紹完了，就是通過在瀏覽器中輸入Url怎麼調用後台控制器，並解析View檔案顯示在瀏覽器；

下半部分是講View怎麼使用Ajax請求Controller返回資料；

 

 

 

 

下面JS代碼是JqueryEasyUI的datagrid控制項請求資料的代碼，url指定了後台控制器的方法；

 

 

 

使用Ajax方式請求Controller的方法與上面返回介面的Controller方法一樣，除了返回的資料用JsonResult來儲存；使用Ajax請求返回的資料都是使用Json格式輸出；

 

 

總結：WebApp MVC原理很簡單，利用了Nvelocity 擺脫了Aspx代碼，再就是把Ajax方式請求控制器的方式與View Url請求控制器方法的方式結合在一起，讓開發變得更簡單；再就是把bootstrap和JqueryEasyUI結合在一起開發介面是比較有特色的，並且效果很不錯；

WebApp MVC，“不一樣”的輕量級互連網應用程式開發架構