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结合在一起开发界面是比较有特色的,并且效果很不错;