WebApp MVC，「不同」的輕量級互聯網應用程序開發框架

 

 

        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/page@efw_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結合在一塊兒開發界面是比較有特點的，而且效果很不錯；