AngularJS在遵照MVC的Web项目中央银行使Web API和一向连接两种办法混合式接入

在自家事先介绍的混合式开发框架中,其界面是依照Winform的兑现方式,后台使用Web
API、WCF服务以及一向连接数据库的三种形式混合式接入,在Web项目中大家也能够运用那种方式完成混合式的过渡格局,尽管Web
API或然WCF方式的调用,相对直接连接数据库格局,响应效用上略差一些,然而扩充性强,也能够调整越来越多的装备连接,包括运动应用接入,网址接入,Winfrom客户端连着,那样能够使得劳动逻辑相对独立,负责提供接口即可。那种办法中最有代表性的就是时下Web
API的广泛应用,促进了一1接入端的迅速支付和独立维护,一点都不小提升了互动开发的快慢和作用。在小卖部中,大家得以合理规范好种种工作服务的Web
API接口,种种应用接入端能够单独开发,也得以付出外包共青团和少先队拓展开发即可。

一、Winform混合式接入格局回看

从一发轫,我们的Web API
的规划指标正是为着给各个差别的选用实行对接的,例如要求连接Winform客户端、应用软件程序、网址先后、以及微信应用等等,由于Web
API层作为三个国有的接口层,大家就很好确认保证了各样界面应用层的数量一致性。

AngularJS 1

上海体育场合介绍了种种应用在Web
API的接口层之上,一般情状下,大家那层的接口都以提供正规的各样接口,以及对地位的辨证处理等等,在Web
API层越多着想的事情范围的相干接口,而在各样界面层,考虑的是哪些对Web
API进行更为的卷入,以有利于调用,纵然Winform和Web调用Web
API的建制有所不一致,但是我们仍是能够对Web API的客户端封装层实行录取的。

在Winfrom界面调用混合式接入的接口方式,它的示意图如下所示,主要的笔触是经过1个联合的假相层Facade接口层实行劳动提供,以及客户端调用的包装处理接口。

AngularJS 2

乘势Web
API层的宽广使用,这种方式带来了分外大的八面见光,通过在框架层面对种种层的基类举办李包裹装,能够大大简化所需的编码,以及提供联合、丰裕的底子接口供调用。

鉴于Winform调用Web API的时候,客户端对Web
API层举行了三个简便的包装,那种方法得以简化对Web
API接口的选取,只需求通过调用封装类,并传播相关的参数就足以获取种类化后的指标(包含基础对象和自定义类对象)。

那种封装的方法,由于对基类的集合完成,以及提供对U陆风X八L地址、参数的组装等拍卖,极度便利Winform界面后台代码进行调用
,加速Winfom界面功能的开支。例如大家从越来越细化的架构图上,能够看来完整各种层的有个别基类(浅豆绿部分)。

AngularJS 3

在依据Web API层的塑造上,我们提供了Web
API服务层的提供了BaseApiController和BusinessController<B, T> 的Web
API控制器基类对平常的政工处理实行李包裹装;在Web
API服务调用层上,大家提供了BaseApiService<T>的基类举行打包常规接口;

还要提供IBaseService<T>的Facade门面层的联合接口,以及CallerFactory<T>的调用格局供Winform后台代码进行接口调用。

那种在Web
API的基本功上举办接口的卷入,可以小幅简化接口的调用,同时也可以提须求Web端的后台控制器选取,万分有益使用,上边就介绍在Web项目中展开混合式接入的贯彻进程。

 

二、Web混合式接入介绍

 参照Winform混合式接入的点子,大家也足以应用那种办法利用于Web框架上,具体的道岔关系如下所示。

AngularJS 4

上航海用教室结合了三种非经常用的接入格局:Web
API服务对接、直接连接数据库的连片,一种具有相当强大的表征,一种具有高效的拜会作用,各有其利用场景,大家在不相同的工作环境进行配置,使其适应大家实际的行使即可,一般景色下,我们提议选择Web
API方式实行塑造整个工作系统的生态链。

Web
API的接口调用,能够经过二种办法进行,一种是行使纯JS框架,类似AngularJS的措施,通过其控制器进行连锁接口的调用;还有壹种形式,采取Asp.NET的MVC格局,前端界面通过JS调用后端的控制器达成多少处理,具体逻辑有后端逻辑控制器实行Web
API的拍卖,大家那边运用后者,以促成相比弹性的拍卖。

冲突Winform来说,Web上的插花情势衔接相对复杂一些,纵然Winform的界面类似Web的MVC中的视图HTML代码,Winform后台逻辑代码类似视图的控制器对象,然而真正麻烦1些,也正是我们还亟需在Web界面包车型地铁后台控制器Controller上在封装下相关的处理接口。

在任何基于混合式接入方式的Web
项目中,对于Web API接口的应用,整个项指标构造如下所示。

AngularJS 5

有了这个图示的求证,我们应有对总体有叁个大概的打听,对于越来越的细节难题,大家或者依然不是太驾驭,要求以切实的品类代码工程实行介绍。

一)对于数据库层

我们能够设想的是多种数据库的过渡支持,如SQLServer、Oracle、SQLite、Access,可能PostgreSQL的帮助,这么些都以根据关系型数据库的支撑,具有很好的可替代性和专业1致性。

它们能够通过遵从统1的SQL可能部分自定义的SQL语句进行,只怕通过存款和储蓄进度完成,均能够兑现相应的效应。

AngularJS,对此数据库分化的支撑方案,小编那里运用了Enterprise
Library的数据库访问组件进行一致性的支撑,那样能够减低各类区别数据库模型的拍卖,统一运用那种组件访问格局,达成区别数据库的造访。

 

二)对于事情逻辑层

业务逻辑层,是有多少个分歧的层开展总结的选取。如项目中的核心层如下所示,包蕴了业务逻辑层BLL、数据访问层DAL(差异的兑现层)、数据访问接口层IDAL、以及传递数据的Entity实体层。

AngularJS 6

这一个模块,在相继层上都有正统的基类用来促成对接口大概成效的包裹处理。

如BLL层的三番伍回关系如下

    /// <summary>
    /// 基于BootStrap的图标
    /// </summary>
    public class BootstrapIcon : BaseBLL<BootstrapIconInfo>

如IDAL层的持续关系如下

    /// <summary>
    /// 基于BootStrap的图标
    /// </summary>
    public interface IBootstrapIcon : IBaseDAL<BootstrapIconInfo>

据说Oracle的数额访问层在DALOracle里面,大家看出起持续关系如下。

    /// <summary>
    /// 基于BootStrap的图标
    /// </summary>
    public class BootstrapIcon : BaseDALOracle<BootstrapIconInfo>, IBootstrapIcon

实业层继承关系如下所示。

    /// <summary>
    /// 基于BootStrap的图标
    /// </summary>
    public class BootstrapIconInfo : BaseEntity

这一个模块,由于有了基类的包装处理,多数逻辑不用再重写代码,关于它们具体的内容,能够参见从前的支出框架介绍文章了然,那里不再赘言,首要用以介绍别的模块层的一而再关系。

 

3)对于Web API服务层

Web API假使工作模块相比较多,能够参照小编上篇随笔《Web
API项目中采用Area对事情实行分类管理
》使用Area区域对事情拓展分类管理,壹般景色下,大家为种种Web
API的接口类提供了基类的管理,和大家其余模块的做法1样。

    /// <summary>
    /// 所有接口基类
    /// </summary>
    [ExceptionHandling]
    public class BaseApiController : ApiController

以及

    /// <summary>
    /// 本控制器基类专门为访问数据业务对象而设的基类
    /// </summary>
    /// <typeparam name="B">业务对象类型</typeparam>
    /// <typeparam name="T">实体类类型</typeparam>
    public class BusinessController<B, T> : BaseApiController
        where B : class
        where T : WHC.Framework.ControlUtil.BaseEntity, new()

如此,基本的增加和删除改查等常规接口,大家就足以在基类里面平昔调用业务逻辑类完结多少的拍卖,具体的业务子类那不须要重写这一个接口完成了。

        /// <summary>
        /// 查询数据库,检查是否存在指定ID的对象
        /// </summary>
        /// <param name="id">对象的ID值</param>
        /// <returns>存在则返回指定的对象,否则返回Null</returns>
        [HttpGet]
        public virtual T FindByID(string id, string token)
        {
            //如果用户token检查不通过,则抛出MyApiException异常。
            //检查用户是否有权限,否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ViewKey, token);

            T info = baseBLL.FindByID(id);
            return info;
        }

对于HttpGet和HttpPost的预订,大家对此正规的获取数据,使用前者,假设对数码发生修改,或然须要复杂类型的参数,使用POST形式处理。

子类的存在延续关系如下所示

    /// <summary>
    /// 权限系统中用户信息管理控制器
    /// </summary>
    public class UserController : BusinessController<User, UserInfo>

如此这几个UserController就持有了基类的全方位效能,只须求完毕部分特定的接口处理即可。

譬如我们能够定义二个新的Web API接口,如下所示。

        /// <summary>
        /// 通过用户名称获取用户对象
        /// </summary>
        /// <param name="userName">用户名称</param>
        /// <param name="token">访问令牌</param>
        /// <returns></returns>
        [HttpGet]
        public UserInfo GetUserByName(string userName, string token)
        {
            //令牌检查,不通过则抛出异常
            CheckResult checkResult = CheckToken(token);

            return BLLFactory<User>.Instance.GetUserByName(userName);
        }

这般对于Web API架构来说,控制器的成套继承关系大致如下所示。

AngularJS 7

倘使选用Area区域来对工作模块进行分类,那么任何Web
API项目标构造如下所示,各样业务区域分别,有利于对事情模块代码的保卫安全,当中BaseApiController和BusinessController则是对健康Web
API接口的包装处理。

AngularJS 8

 

4)对于Web API封装层

为了兑现Winform混合式框架和Web混合式框架的一道利用Web
API服务的封装层,那么大家必要单独2个Web
API封装层,也正是***Caller层,包涵了直白访问数据库格局、Web
API服务接口访问情势,也许加上WCF服务走访格局等的封装层。

其一层的目标是动态读取Web API 接口的U途锐L地址,以及包装对Web
API接口访问的麻烦细节,是调用者能够简单、迅速的拜会Web API接口。

凡事Web
API封装层的架构,就是基于Facade接口层进行分化的适配,如直接待上访问数据库格局、Web
API服务走访方式的适配处理,以便在客户端调用的时候,自动从差别的接口完成实例化对象,从差别方法来收获所必要的接口数据。

AngularJS 9

对于用户User对象的话,大家来举三个例证来表达Caller层之间的后续关系。

在Facade层的接口定义如下所示。

    public interface IUserService : IBaseService<UserInfo>

在WebAPI的Caller层完结类代码如下所示。

    /// <summary>
    /// 基于WebAPI方式的Facade接口实现类
    /// </summary>
    public class UserCaller : BaseApiService<UserInfo>, IUserService

对此直接连接情势,达成类的代码如下所示。

    /// <summary>
    /// 基于传统Winform方式,直接访问本地数据库的Facade接口实现类
    /// </summary>
    public class UserCaller : BaseLocalService<UserInfo>, IUserService

这般大家整理下它们关系如下图所示。

AngularJS 10

对于差异的工作模块,我们遵照对应区别的Facade层接口实现不相同的Caller层,那样即使有好多种类模块,我们单独维护起来也惠及广大,在Winform客户端可能Web端调用Caller层的时候,须求引入对应的Caller层项目,以及业务宗旨层Core。

譬如大家必要在使用的时候,同时引进Core层和Caller层,如下是项目中的部分引用关系。

AngularJS 11

 

5)对于Web 界面层

其1Web界面层,首要便是消费Facade层接口完成,用来获取数据体以后界面上的,大家界面上经过HTML

  • JS
    Ajax的法子,完成从MVC控制器接口获取数据,那么大家为了便利,依然在控制器层进行抽象,以便对平常的点子抽到基类里面,那样子类代码就不要再行了。

如此那般的改动,对于大家已有个别MVC项目以来,视图处理代码不需求任何变更,只供给控制器对数码访问的处理调整即可,从而完毕MVC普通形式获取数据的界面层,顺遂转移到基于Web
API +直接待上访问数据库两者合1的混合式格局上。

原来一直访问数据库的MVC视图控制器的宏图,基本上类似于Web  API
中央控制制器的陈设性进程,如下所示。

AngularJS 12

而对此MVC的Web界面层,以混合式形式来访问数据,大家要求引入一个新的控制器来贯彻适配处理。

那般营造出来的继续关系图,和方面Web的MVC控制器类似。

AngularJS 13

分裂的是,里面调用的其余访问数据的主意,从原本BLLFactory<T>到CallerFactorry<T>的更换了,那样就兑现了从简单的一贯访问数据库方式,切换来混合式访问数据的措施,在Web框架之中,能够安顿为间接待上访问数据库,也能够配备为通过Web
API情势访问数据,相当有利。

譬如说继承关系类的代码如下所示。

    /// <summary>
    /// 基于混合访问方式的用户信息控制器类
    /// </summary>
    public class UserController : ApiBusinessController<IUserService, UserInfo>

个中对于Web 界面端的控制器,使用混合式访问方式的后台控制器代码如下所示。

        /// <summary>
        /// 根据角色获取对应的用户
        /// </summary>
        /// <param name="roleid">角色ID</param>
        /// <returns></returns>
        public ActionResult GetUsersByRole(string roleid)
        {
            ActionResult result = Content("");
            if (!string.IsNullOrEmpty(roleid) && ValidateUtil.IsValidInt(roleid))
            {
                List<UserInfo> roleList = CallerFactory<IUserService>.Instance.GetUsersByRole(Convert.ToInt32(roleid));
                result = ToJsonContent(roleList);
            }
            return result;
        }

也正是从古板的BLLFactory<User>转换为了CallerFactory<IUser瑟维斯>,全体性的接口变化相当的小,很简单接通到混合式格局的拜会。

在Web界面端的视图里面,大家大约正是基于HTML +
Ajax的Javascript方式贯彻数量的并行处理的,包罗展现数据,提交修改等等操作。

同一大家能够由此JS的函数进行抽象,把宗旨的处理函数,放到3个类Curry面,方便界面层使用,然后引进JS文件即可。

@*脚本引用放在此处可以实现自定义函数自动提示*@
<script src="~/Scripts/CommonUtil.js"></script>

如上面所示,是调用JS自定义函数达成列表数据的绑定操作。

            $("#Dept_ID").on("change", function (e) {
                var deptid = $("#Dept_ID").val();
                BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
            });

也许去除的JS代码如下所示

                    var postData = { ids: ids };
                    $.post("/User/ConfirmDeleteByIds", postData, function (json) {
                        var data = $.parseJSON(json);
                        if (data.Success) {
                            showTips("删除选定的记录成功");
                            Refresh();//刷新页面数据
                        }
                        else {
                            showTips(data.ErrorMessage);
                        }
                    });

以及对有个别JS列表树,以及下拉列表,都得以运用JS函数达成长足的处理,如下所示。

                var treeUrl = '/Function/GetFunctionJsTreeJsonByUser?userId=' + info.ID;
                bindJsTree("jstree_function", treeUrl);

                $('#lbxRoles').empty();
                $.getJSON("/Role/GetRolesByUser?r=" + Math.random() + "&userid=" + info.ID, function (json) {
                    $.each(json, function (i, item) {
                        $('#lbxRoles').append('<option value="' + item.ID + '">' + item.Name + '</option>');
                    });
                });

 

如上正是本人从全部基于混合式访问的Web项目展开教学介绍,贯穿了全体数据传输的途径和调用路线,当然个中还有为数不少细节方面有待细讲,以及须要有的比较巧妙的结缘封装处理,整个目标就是梦想凭借混合式的造访思路,完成三种数额连接情势的适配整合,以及最大程度简化子类代码的编写制定,并且通过动用代码生成工具对总体框架的逐条层代码的更动,大家关注的关键转移到怎样落到实处不一样工作的接口上来,从而使得大家能够非常的慢支付复杂的选拔,而且又能合理有限支撑好各种门类的代码。

一句话总括全体开发:简单、统一、高效。

相关文章