MVC WebAPI 三层分布式框架开发

版权声明：本文为博主原创文章，未经博主允许不得转载。

前言：SOA（面向服务的架构）是目前企业应用开发过程中普遍采用的技术，基于MVC WebAPI三层分布式框架开发，以此适用于企业信息系统的业务处理，是本文论述的重点。此外，插件技术的应用，富客户端jQuery实现技术，本文也对其具体实现做以说明。相关示例解决方案可以参考GitHub资源，在文章结尾给出。

1. 系统分层体系架构设计

分布式三层系统简单分为数据访问层，业务逻辑层和前端展现层。分层架构设计是构建大型分布式系统的必要手段，因为可以使得系统健壮，可扩展。

SOA即面向服务的架构，可以帮助企业构建灵活，扩展性强的复杂业务系统，按照服务的理念进行功能交付，调用方也不用去知道实现一方的具体细节；双方是按照统一消息格式，接口方式进行交互的。

SOA的实现是基于以Web服务的方式发布Api接口，目前WebAPI是一种Restfule形式的Web服务，相比WCF的复杂性，WebAPI的开发效率更高，而且在配置时也不需要客户端和服务端的xml配置。

企业核心业务数据可以让桌面、Web、平板、手机或物联设备访问，所以需要统一API接口，WebApi作为业务逻辑处理服务能够满足接口访问和接口之间交互的需求。

2.基础类库模块

2.1 数据访问：Dapper-微型ORMapping框架

Dapper的优势：
1，Dapper是一个轻型的ORM类。代码就一个SqlMapper.cs文件，编译后就40K的一个很小的Dll.

2，Dapper很快。Dapper的速度接近与IDataReader，取列表的数据超过了DataTable。

3，Dapper支持Mysql,SqlLite,Mssql,Oracle等一系列的数据库，当然如果你知道原理也可以让它支持Mongo db

4，Dapper的r支持多表并联的对象。支持一对多 多对多的关系。并且没侵入性，想用就用，不想用就不用。无XML无属性。代码以前怎么写现在还怎么写。

5，Dapper原理通过Emit反射IDataReader的序列队列，来快速的得到和产生对象。性能实在高。

6，Dapper 是C#实现，支持.net framework 各种版本；

7，Dapper语法十分简单。并且无须迁就数据库的设计。

国外大型网站采用的有：

–StackOverflow, StackExcahnge等。。。

读取500条记录，并做简单对象的序列化操作时间对比如下图：

2.2 DataRepository类

•实现数据实体操作封装

-Insert—插入

-Update—更新

-Delete—删除

-Select—选取

-Paged—分页

2.3  ServiceBase类

•实现业务实体对象的操作封装

–Insert—插入

–Update—更新

–Delete—删除

–Select—选取

–Paged—分页

2.4 服务实现类

-实现Iservice接口

-继承ServiceBase基类

 

2.5 WebAPI服务发布

API Controller：

--[HttpGet]

--[HttpPost]

--[HttpPut]

--[HttpDelete]

2.6 动态加载插件

-系统的扩展性

-系统的变化性

-客户二次开发

-MEF

–运行时加载

 

2.7 AutoMapper—实体对象之间转换

•两个实体类

–EPProduct – 数据实体

–Product– 业务实体

•转化示例代码

–EPProduct p =ProductRepository.Get(long.Parse(id));

–AutoMapper.Mapper.CreateMap<EPProduct, Product>();

–Productentity =AutoMapper.Mapper.Map<EPProduct, Product>(p)

 

2.8 面向接口编程--Ioc框架

•SimpleInjector

–静态类型

–编译阶段

•MEF

–动态类型

–运行时阶段

 

3.富客户端开发

3.1 Asp.NETMVC 富客户端开发

•Model

–WebAPI (服务接口)

•Controller

–路由

•View

–页面

–

•富客户端

–Ajax 局部刷新

– 鼠标、键盘响应事件等

–如Gmail邮箱等应用示例

3.2 Jquery插件

•Layout—Jquery Layout

•DataGrid – SlickGrid –性能非常高

•Tree– Jstree/Ztree –评价都不错

•Tab– Jquery Tools

•Toolbar– Jquery Tools

•Dialog– Jquery Tools

•Form–Jquery Tools

3.3 前端页面Ajax调用：
GET/POST/PUT/DELETE

1. /***
2. * HttpGet获取服务端数据
3. * @url 业务数据
4. * @data
5. */
6. $.doHttpClientGet = function(url, fn) {
7. $.getJSON(url, fn);
8. }
9. /***
10. * HttpPut更新数据到服务端
11. * @url 业务数据
12. * @data
13. */
14. $.doHttpClientUpdate = function(url, data, fn) {
15. $.ajax({
16. url: url,
17. type: 'PUT',
18. data: data,
19. dataType: 'json',
20. contentType: 'application/json',
21. success: fn
22. });
23. }
24. /***
25. * HttpDelete删除数据
26. * @url 业务数据
27. * @data
28. */
29. $.doHttpClientDelete = function(url, data, fn) {
30. $.ajax({
31. url: url,
32. type: 'DELETE',
33. data: data,
34. dataType: 'json',
35. contentType: 'application/json',
36. success: fn
37. });
38. }
39. /***
40. * HttpPost保存数据
41. * @url 业务数据
42. * @data
43. */
44. $.doHttpClientSave = function(url, data, fn) {
45. $.ajax({
46. url: url,
47. type: 'POST',
48. data: data,
49. dataType: 'json',
50. contentType: 'application/json',
51. success: fn
52. });
53. }
54. /***
55. * ajax获取服务端数据
56. * @url 业务数据
57. * @data
58. */
59. $.doAjaxGet = function(url, fn) {
60. //$.getJSON(url, fn);
61. $.ajax({
62. url: url,
63. type: "GET",
64. dataType: 'json',
65. //data: data,
66. contentType: 'application/json',
67. success: fn
68. });
69. }
70. $.doAjaxPost = function(url, data, fn) {
71. $.ajax({
72. url: url,
73. type: 'POST',
74. data: data,
75. dataType: 'json',
76. contentType: 'application/json',
77. success: fn
78. });
79. }
80. //构造html的通用方法
81. $.buildHTML = function(tag, html, attrs) {
82. // you can skip html param
83. if (typeof (html) != 'string') {
84. attrs = html;
85. html = null;
86. }
87. var h = '<' + tag;
88. for (attr in attrs) {
89. if (attrs[attr] === false) continue;
90. h += ' ' + attr + '="' + attrs[attr] + '"';
91. }
92. return h += html ? ">" + html + "</" + tag + ">" : "/>";
93. }
94. //构造JsTree的通用方法
95. $.fn.buildJsTree = function (url, fn) {
96. var object = require(['jstree'], function(){
97. $.jstree._themes = "/PlatJS/Scripts/jstree/themes/";
98. var myTree = $(this).jstree({
99. "json_data": {
100. "ajax": {
101. "url": url,
102. "type": "GET",
103. "dataType": "json",
104. "contentType": "application/json charset=utf-8",
105. "success": fn
106. }
107. },
108. "plugins": ["themes", "json_data", "ui"]
109. });
110. })
111. }

3.4 如何调试？

•Fiddler--*****5star

FireBug for Firefox

•查看HTML,CSS,Javascript等

•监控下载图片资源时间线

•完善友好的调试

 

Firefox的RestClient插件—Rest Client测试插件

http://localhost:8081/ProductSys.WebAPI/api/order/insertwith?type="insertwith“

[HttpPost]

public HttpResponseMessageInsertWith(Order entity, string type)

 

http://localhost:8081/ProductSys.WebAPI/api/order/4

[HttpDelete]

public HttpResponseMessage Delete(string id)

3.5 Web异常错误代码

•100-199– Informational

•200-299– Client request successful

•300-399– Client request redirected, further action necessary

•400-499– Client request incomplete

•500-599– Server error

 

4. Javascript 类语法

4.1 常见问题

•Namespace(命名空间)

–默认为全局范围，有潜在类型冲突隐患

•SelfExecuting Fuction (自执行匿名函数)

•Objectand Array (对象和数组初始化)

–不要使用new 关键字

•NullOr Empty (检查NULL)

4.2 Javascript-自执行匿名函数

1. //Self-Executing Anonymous Func: Part 2 (Public & Private)
2. (function( skillet, $, undefined ) {
3. //Private Property
4. var isHot = true;
5. //Public Property
6. skillet.ingredient = "Bacon Strips";
7. //Public Method
8. skillet.fry = function() {
9. var oliveOil;
10. addItem( "\t\n Butter \n\t" );
11. addItem( oliveOil );
12. console.log( "Frying " + skillet.ingredient );
13. };
14. //Private Method
15. function addItem( item ) {
16. if ( item !== undefined ) {
17. console.log( "Adding " + $.trim(item) );
18. }
19. }
20. }( window.skillet = window.skillet || {}, jQuery ));
21. <pre name="code" class="javascript">//Public Properties
22. console.log( skillet.ingredient ); //Bacon Strips
23. //Public Methods
24. skillet.fry(); //Adding Butter & Fraying Bacon Strips
25. //Adding a Public Property
26. skillet.quantity = "12";
27. console.log( skillet.quantity ); //12
28. //Adding New Functionality to the Skillet
29. (function( skillet, $, undefined ) {
30. //Private Property
31. var amountOfGrease = "1 Cup";
32. //Public Method
33. skillet.toString = function() {
34. console.log( skillet.quantity + " " +
35. skillet.ingredient + " & " +
36. amountOfGrease + " of Grease" );
37. console.log( isHot ? "Hot" : "Cold" );
38. };
39. }( window.skillet = window.skillet || {}, jQuery ));
40. try {
41. //12 Bacon Strips & 1 Cup of Grease
42. skillet.toString(); //Throws Exception
43. } catch( e ) {
44. console.log( e.message ); //isHot is not defined
45. }

1. </pre>

 

4.3 对象和数组初始化

1. //建议申明对象或数组的写法
2. var person = {},
3. keys = [];
4. //申明复杂对象或数组的写法
5. var person = {
6. firstName: "Elijah",
7. lastName: "Manor",
8. sayFullName: function() {
9. console.log( this.firstName + " " +
10. this.lastName );
11. }
12. },
13. keys = ["123", "676", "242", "4e3"];

4.4 判断对象是否为NULL(c#)

1. // <span >C# 例子. 不要在Javascript中这样写</span>
2. if ( someString != null &&
3. someString.length > 0 ) {
4. //Do something here...
5. }
6. // C# 例子 检查字符串是否为空
7. if ( !string.IsNullOrEmpty(someString) ) {
8. //Do something here...
9. }

4.5 判断对象是否为NULL(javascript)

1. Javascript中的正确写法
2. // Simplified JavaScript syntax to check for
3. // undefined, null, & empty string values
4. if ( someString ) {
5. //Do something here...
6. }

4.6 设置缺省值(c#)

 

1. <span style="color: rgb(255, 0, 0);">// C# 例子，不要在Javascript这样写</span>
2. if ( someString == null ) {
3. someString = "default Value";
4. }
5. // Slightly better, but don't do this either
6. someString = someString ? someString : "default value"; <pre name="code" class="javascript">请在Javascript按如下格式写
7. // JavaScript syntax to set a default value
8. someString = someString || "default value";

 

 

4.7 不同类型的比较操作符(==, !=)

•// Unexpected Comparisons using the== Operator

•0         ==  ''        //true

•0         ==  '0'       //true

•false     ==  '0'       //true

•null      ==  undefined //true

•'\t\r\n ' ==  0         //true

 

4.8 不同类型的比较操作符(===, !==)

•// Expected Comparisons using the ===Operator

•0         === ''        //false

•0         === '0'       //false

•false     === '0'       //false

•null      === undefined //false

•'\t\r\n ' === 0         //false

 

4.9 不可取的数组遍历操作符for…in

1. var myArray = [], name;
2. myArray[5] = "test";
3. console.log( myArray.length ); //6
4. for ( name in myArray ) {
5. console.log( name, myArray[name] );
6. //Outputs...
7. //   5, test
8. }

4.10 正确的数组遍历操作符for…;…;

1. var myArray = [], name;
2. myArray[5] = "test";
3. console.log( myArray.length ); //6
4. for ( var i = 0, length = myArray.length; i < length; i++ ) {
5. console.log( i, myArray[i] );
6. //Outputs...
7. //   0, undefined
8. //   1, undefined
9. //   2, undefined
10. //   3, undefined
11. //   4, undefined
12. //   5, test
13. }

1. for ( var name in object ) {
2. //Your code here
3. }
4. /* Check if object has property before
5. iterating, because functions inherited
6. from prototype are also included */
7. for ( var name in object ) {
8. if ( object.hasOwnProperty(name) ) {
9. //Your code here
10. }
11. }

 

5. RequireJS 模块化脚本
RequireJS 是一个非常小巧的 JavaScript 模块载入框架，是 AMD 规范最好的实现者之一。最新版本的 RequireJS 压缩后只有 14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用 RequireJS 必将使的前端代码质量得以提升。

 

RequireJS 作为 JavaScript 文件的加载器，还是可以完成异步非阻塞的文件加载。

1. define(['Controllers/Main/ListView'], function (ListView) {
2. function start() {
3. var users = JSON.parse(localStorage.users);
4. ListView.render({ users: users });
5. }
6. return {
7. start: start
8. };
9. });

 

6. 网络资源

6.1 NuGet—快捷获取软件包

•充分利用开源软件包，避免重复制造轮子；

•也可以自己发布软件包，回馈社区，先进技术的积累可以节约项目成本。

6.2 技术资源

 

•Asp.net MVC WebAPI

–RestfulWeb Service的发展

•Jquery

–官网

–插件开发

•RequrieJS

–Javascript模块化开发框架

•Dapper

–微型ORMapping 框架

•EntityFramework

–Microsoft实体框架

 

7. 总结：

本文基于MVC WebAPI实现分布式三层架构，实现了通用数据访问操作，业务实体和数据实体的交互操作，业务模块之间的接口交互；实现了插件化的加载技术。此外限于篇幅，对于流程化的设计，会在下文论述，主要会谈及到工作流Api和WebApi的交互。

 

 

代码示例说明：

提供的示例RequireMVC199中，可以看一下ProductSys.WebApi的服务层代码，前端代码看RequireMvc199的WebApplication项目即可。

完整示例，可以看一下ProductList页面的代码，这个示例是完整的，包括文件：

WebApplication 包括：

\Controllers

--ProductController.cs

\ViewJS

\Controllers

\Product

--product-list.js

--product-detail.js

\Views

\Product

--productlist.cshtml

WebApi 包括：

ProductSys.WebApi

\Controllers

--ProductController.cs

ProductSys.ServiceImp

\Service

--ProductService.cs

 

解决方案下载地址：

https://github.com/besley/Plat2012

 

新版本下载：

http://github.com/besley/slickone

 

后记：

不断有朋友问到，是否有新版本？是否支持ORACLE？目前在最新的版本里已经解决这些问题。你可以在Slickflow的项目里面看到，即仍然是Mvc, WebApi和Dapper的架构，但是简化甚多，真是物至简方可尽其用，希望大家一起学习讨论。谢谢大家关注。