在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端

基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品，界面部分采用较新的Bootstrap技术，框架后台数据库支持Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、Access等常规数据库，可通过配置进行自由切换，使用Enterprise Library模块进行数据访问的控制的。Bootstrap开发框架的页面以及后台代码，通过代码生成工具Database2Sharp进行快速开发，实现整体性开发的最大效率提高。

Bootstrap开发框架已经应用在很多客户的BS架构的软件管理系统中，基于底层代码的重用，应客户的需要，我们在这个基础上扩展增加了Vue&Element的前端，由于Vue&Element的前端需要采用Web API的接口，我们在这个基础上借鉴了ABP框架的Web API接口处理及前端管理界面的内容，在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端。

1、Bootstrap框架的架构及增加Web API + Vue&Element前端的处理

Bootstrap框架架构：

在之前Bootstrap开发框架的架构如下所示，其UI层是各种应用功能模块，而底层是和Winform框架、混合框架公用的BLL业务逻辑层等分层，并通过实体层实现数据的传递处理。

数据访问层通过微软企业库，较好统一了数据处理的模型，很容易实现了 Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、达梦、Access等常规数据库的支持操作。

控制器设计：

Bootstrap开发框架沿用了我的《Winform开发框架》和《基于EasyUI的Web框架》的很多架构设计思路和特点，对Controller进行了封装。使得控制器能够获得很好的继承关系，并能以更少的代码，更高效的开发效率，实现Web项目的开发工作，整个控制器的设计思路如下所示。

增加WebApi+Vue&Element前端后的架构设计：

Web API后端的架构设计：

这个是属于前端、后端完全分离的架构设计，后端采用基于Asp.net的Web API技术，并提供按域来管理API的分类，Web API如下架构所示。

通过上面的架构设计，可以看出，底层BLL、DAL、Entity、IDAL、公用类库等分层都是完全通用的，不同的是，我们后端只是提供Web API的接口服务给前端，这个和我们的《ABP框架使用》的理念一致，前后端分离。

为了更好的进行后端Web API控制器的相关方法的封装处理，我们把一些常规的接口处理放在BaseApiController里面，而把基于业务表的操作接口放在BusinessController里面定义，如下所示。

在BaseApiController里面，我们使用了结果封装和异常处理的过滤器统一处理。

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

其中ExceptionHandling 和WrapResult的过滤器处理，可以参考我的随笔《利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理》进行详细了解。

而业务类的接口通用封装，则放在了BusinessController控制器里面，其中使用了泛型定义，包括实体类，业务操作类，分页条件类等内容作为约束参数，如下所示。

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