一个前端与后端分离的架构实例.docx

一个前端与后端分离的架构实例看了《系统架构：Web应用架构的新趋势---前端和后端分离的一点想法》 这篇文章，对前端与后端的分离非常认同，这样做对于系统的维护是有相当大的好处的。正好自己也设计了一个这样的系统，于是把它拿出来，和大家讨论一下。这个架构，与其说是想出来，还不如说是我做系统总结出来的最佳实践。我们做的系统，前端的页面基本都是使用 JavaScript 的富户端页面，主要应用的框架用，jquery、jqueryui、knockout js、Durandal、另外，还有自己封装的一些 UI 组件，后端的主要采用到的技术有 OData、MVC、Linq to SQL 以及自己写的一个权限管理组件，数据库采用的是 SQL Server 2005。下面向大家介绍一下各模块的功能以及其划分的目的，我们先从用户界面看起吧。一、关于前端的 dataProvider简单点说，就是一个给界面调用的数据访问层，很多人都人这样的疑问，在这里加一个数据访问层，是不是多余？只要你做的前端，你都会碰到下面这些问题：1、一个产品或者项目，前端与后端是同时进行了，这时候，根本没有后端的接口，甚至可以说，连个接口的定义都没有。作为前端开发人员，你如何去开展自己的工作？2、作为前端开发人员，你有没有碰到，因为后端的接口挂掉，导致你的工作没法继续做下去的情形？3、作为前端开发人员，往往免不了要和第三方的接口进行对接，你有没有碰到过，和你做对接的人员，突然因为项目紧，被抽走了，留给你的只有一堆需要传N个参数，传了后接着出“对象为空”的异常呢？你根本不知道哪里参数传错了。面对这些接口，你除了破口大骂，得不到任何帮助。4、作为前端开发人员，你有没有试过，你向后端的开发组，要一个接口，他们需要讨论个几天，然后再花几天才能给你，给你之后，还不能用，又得再花几天时间调试呢？如果你向我一样，都曾经都碰过这些问题，你就不会怀疑这个 dataProvider 存在的必要了，有了这个 dataProvider，可以最大减少后端接口对前端开发的影响。下面是一个 dataProvider 的实例：var?dataProvider?=?(function?()?{??????var?fakeProvider?=?{?????????countries:?new?Countries()?????};??????var?realProvider?=?{?????????countries:?new?JData.WebDataSource()?????};??????//下面的接口，根据情况二选一?????return?fakeProvider;?//这个是假的?dataProvider，从本地读?????return?realProvider;?//这个是真正?dataProvider，从接口读?})();?从上面可以看出来，这个 dataProvider 使用了工厂模式来创建，它有两个实例，fakeProvider和realProvider，fakeProvider是用来提供一些模拟数据，而realProvider提供从接口读取出来的数据。当没有接口，或者接口挂掉，我们可以先从 fakeProvider 来读取数据。等接口好了，切换到 realProvider 。二、关于用户界面输入的验证1、数据的验证。用户在界面输入数据后，接着调用 dataProvider 里的接口对数据进行处理，但是在向服务端提交之前，得先对数据进行验证。那个这个验证如何进行呢？dataProvider先从服务端获实体的描述信息，这些描述包括但不限于：主外键、属性的验证信息（比如是否可空），当然，这个实体信息是可以缓存起来，以便重用的。然后 dataProvider 再根据这个描述信息来对数据进行验证。2、错误信息的显示当验证到某一个属性不合法，验证信息的模块就在页面查找出对应输入控件，它是怎么查找的呢？比如说，Contry 的 Name 输入为空是不可以的。那它就先查找 id 为Coutry的元素，然后再Coutry元素下面再找id 或者 name 为 Name 的控件，如果找不到则直接弹窗显示错误信息。例如：form?id=Country????????input?name=Name/?/form?三、关于后端使用 OData1、作为后端开发人员，你有没有碰到过这种前端开发人员，今天让你加一个字段，好，加了，然后打包发布。明天又让你加一个字段。后天突然又说，前两天加的字段，不需要，你会不会有种想喊“操”的冲动？2、作为后端开发员员，你有没有碰到过这种前端开发人员，今天跟你说接口不够用，要加个 GetUserByName 的方法，明天又说，还得加个 GetUserByEmail 的方法？然后，过了一段时间，