AngularJS每当因MVC的Web项目受到行使Web API和一直连接两种方法混合式接入

每当本人前面介绍的混合式开发框架中,其界面是因Winform的实现方式,后台使用Web
API、WCF服务以及一直连接数据库的几乎种艺术混合式接入,在Web项目遭到我们啊可以使用这种措施实现混合式的连片方式,虽然Web
API或者WCF方式的调用,相对直接连接数据库方式,响应效率达略差一些,不过扩展性强,也堪调更多之配备连,包括移动使用接入,网站接入,Winfrom客户端连着,这样好使劳动逻辑相对独立,负责提供接口即可。这种办法吃不过有代表性的就是是时Web
API的广泛应用,促进了逐条接入端的高速支付和单独维护,极大提高了互开发的速与频率。在商家备受,我们得合理规范好各种工作服务的Web
API接口,各个应用接入端可以独立开发,也可以交外包团队进行开发即可。

1、Winform混合式接入方式回顾

从今平开始,我们的Web API
的筹划目的就是是以让各种不同之以进行对接的,例如需要连接Winform客户端、APP程序、网站先后、以及微信下等等,由于Web
API层作为一个国有的接口层,我们即便生好管了一一界面应用层的数一致性。

AngularJS 1

达成图介绍了各种应用在Web
API的接口层之上,一般景象下,我们这层的接口都是供规范的各种接口,以及针对性位的征处理等等,在Web
API层更多考虑的事务范围的连锁接口,而在逐个界面层,考虑的是何许对Web
API进行更为的包装,以有益调用,虽然Winform和Web调用Web
API的体制有所不同,不过我们要可以针对Web API的客户端封装层进行录取的。

每当Winfrom界面调用混合式接入的接口方式,它的示意图如下所示,主要的思绪是经一个合的外衣层Facade接口层进行服务提供,以及客户端调用的包处理接口。

AngularJS 2

趁着Web
API层的科普应用,这种措施带了很酷的灵活性,通过在框架层面对各个层的基类进行包装,可以大大简化所待的编码,以及供合、丰富的根底接口供调用。

由于Winform调用Web API的时光,客户端对Web
API层进行了一个粗略的包裹,这种措施可简化对Web
API接口的用,只需要经过调用封装类,并传相关的参数就可以抱序列化后的靶子(包括基础对象同自定义类对象)。

这种封装的计,由于对基类的联实现,以及提供对URL地址、参数的组装等处理,非常有利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项目遭到展开混合式接入的兑现过程。

 

2、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后台逻辑代码类似视图的控制器对象,但是真麻烦一些,相当给我们尚需在Web界面的后台控制器Controller上于封装下系的处理接口。

当一切基于混合式接入方式的Web
项目中,对于Web API接口的运用,整个项目之布局如下所示。

AngularJS 5

发生了这些图示的证明,我们该对总体来一个大体的摸底,对于更为的细节问题,我们可能还未是极明了,需要坐现实的档次代码工程开展介绍。

1)对于数据库层

我们可以设想的是多种数据库的接支持,如SQLServer、Oracle、SQLite、Access,或者PostgreSQL的支撑,这些都是因关系项目数据库的支持,具有老好之而是替代性和正式一致性。

她可以经以统一的SQL或者有由定义的SQL语句进行,或者经囤过程实现,均可以实现相应的功效。

对此数据库不同之支撑方案,我这边用了Enterprise
Library的数据库访问组件进行一致性的支撑,这样可以下降各个不同数据库模型的处理,统一采用这种组件访问方式,实现不同数据库的走访。

 

2)对于事情逻辑层

政工逻辑层,是发出几乎单不同的层进行归纳的动。如项目被之骨干层如下所示,包括了政工逻辑层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的接口类提供了基类的保管,和我们其他模块的做法无异于。

    /// <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服务之封装层,那么我们用独自一个Web
API封装层,也就算是***Caller层,包含了一直看数据库方式、Web
API服务接口访问方式,或者加上WCF服务走访方式相当之封装层。

斯层的目的是动态读取Web API 接口的URL地址,以及包装对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 界面层

夫Web界面层,主要就是是消费Facade层接口实现,用来获取数据展示在界面及的,我们界面上通过HTML

  • JS
    Ajax的章程,实现自MVC控制器接口获取数据,那么我们为便于,依旧在控制器层进行抽象,以便对正常的计减到基类里面,这样子类代码就不要再行了。

这般的改动,对于我们都部分MVC项目以来,视图处理代码不需要另外变更,只需要控制器对数据看的处理调整即可,从而实现MVC普通方式获取数据的界面层,顺利转移到因Web
API +直接访问数据库两者合的混合式方式达成。

原一直访问数据库的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<IUserService>,整体性的接口变化挺有些,很容易接通至混合式方式的拜访。

在Web界面端的视图里面,我们大多就是是依据HTML +
AjaxAngularJS的Javascript方式贯彻数量的互动处理的,包括显示数据,提交修改等等操作。

平我们可以经过JS的函数进行抽象,把基本的处理函数,放到一个类库里面,方便界面层使用,然后引入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项目开展讲解介绍,贯穿了全套数据传的路径以及调用路线,当然其中还有好多细节方面有待细讲,以及需要有些比较巧妙的重组封装处理,整个目的就是期凭借混合式的顾思路,实现多数据连接方式的适配整合,以及极特别程度简化子类代码的编撰,并且通过使用代码生成工具对总体框架的逐一层代码的更动,我们关心的要害转移至什么样促成不同工作的接口上来,从而令我们能快速开复杂的使用,而且同时会成立保障好各个品种之代码。

一样词话总结所有开发:简单、统一、高效。

相关文章