在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导入使用即可,非常方便重用。