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結合在一起開發界面是比較有特色的,並且效果很不錯;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM