在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()

通过Web API接口返回结果的统一封装处理，我们定义了相关的格式如下所示。

其中result是返回对应的对象信息，如果没有则返回null.

如果是分页查询返回结果集合，其结果如下所示。

展开单条记录明细如下所示。

 

Vue&Element的前端的架构设计：

而Vue&Element的前端的架构设计，也借鉴了我们ABP框架的前端管理部分，详细也可以了解下我的相关随笔《循序渐进VUE+Element》。

Vue&Element的前端的架构设计如下所示。

引入了前后端分离的Vue + Element 作为前端技术路线，那么前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

一般来说，我们页面模块可能会涉及到Store模块，用来存储对应的状态信息，也可能是直接访问API模块，实现数据的调用并展示。在页面开发过程中，多数情况下，不需要Store模块进行交互，一般只需要存储对应页面数据为全局数据状态的情况下，才可能启用Store模块的处理。

通过WebProxy代理的处理，我们可以很容易在前端中实现跨域的处理，不同的路径调用不同的域名地址API都可以，最终转换为本地的API调用，这就是跨域的处理操作。

前端根据ABP后端的接口进行前端JS端的类的封装处理，引入了ES6类的概念实现业务基类接口的统一封装，简化代码。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、操作日志、登录日志等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。

2、WebApi+Vue&Element的前端界面展示

 主体框架界面采用的是基于后台配置的菜单动态生成，左侧是菜单，右边顶部是特定导航条和内容区，这个和我们ABP框架的前端界面是一致的。

系统主界面的开发，基本上都是标准的界面，在系统左侧放置系统菜单，右侧中间区域则放置列表展示内容，但是在系统菜单比较多的时候，就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表，这样通过树形列表的收缩折叠，就可以放置非常多的菜单功能了。

用户管理界面，沿袭Bootstrap框架的布局进行管理，通过用户机构方式，快速展示用户分页列表，如下界面所示。

机构管理界面如下所示。

 角色管理界面如下所示。

其角色的编辑界面如下所示，包括了基础信息、用户、菜单、权限等项目。

 整个系统的菜单，既可以通过默认Mock的初始菜单，也可以通过后端API获得的菜单资源，动态在界面上进行展示，系统界面左侧的菜单是动态获取并展示出来的，结合路由的判断可以限制用户访问的菜单权限。

菜单管理界面如下所示。

 菜单资源在角色管理中分配给具体角色，即可实现对菜单的动态控制管理了。

 前端的界面管理，依旧可以通过分拆模块的方式，完成更加方便的组合处理

 利用模块化的处理方式，我们可以把界面部分内容作为一个组件进行封装处理，如在权限管理中，我们定义了一部分重用的组件界面，如下所示。

 

 定义好各种界面的自定义组件后，在主界面中进行Import导入使用即可，非常方便重用。