VUE+Element 前端应用开发框架功能介绍

前面介绍了很多ABP系列的文章《ABP框架使用》，一步一步的把我们日常开发中涉及到的Web API服务构建、登录日志和操作审计日志、字典管理模块、省份城市的信息维护、权限管理模块中的组织机构、用户、角色、权限、菜单等内容，以及配置管理模块，界面的高级查询处理等内容，并根据我们在Winform领域多年的开发经验，完成了系统功能在Winform界面下的实现，并利用工具实现快速的Winform界面生成工作；而在循序渐进VUE+Element 前端应用开发文章《循序渐进VUE+Element》中，则介绍了结合ABP+Vue+Element来构建BS的前端解决方案，通过Vue+Element实现的前端界面展示，界面美观大方；而且业务内容以模块化组装的Web界面，非常利于大型复杂系统的开发，极大提供了效率。

1、ABP框架背景知识介绍

ABP是ASP.NET Boilerplate的简称，ABP是一个开源且文档友好的应用程序框架。ABP不仅仅是一个框架，它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型。学习使用ABP框架也有一段时间了,一直想全面了解下这个框架的整个来龙去脉，并把想把它使用历程整理成一个系列出来，不过一直没有下笔来写这篇文章的开篇，就是希望能够深入了解，再深入了解一些，希望自己能够理解透彻一些，不能误人子弟，也不想和网上千篇一律的翻译官网的内容，官网的英文介绍也已经很详细了，于是我觉得还是以实际使用的过程进行一定的整理会更好。

初次了解ABP框架，对它还是非常惊艳的，它基本上是.NET 领域架构的集大成者，几乎囊括了我们.NET领域排的上名的各种技术应用，而且它本身可以支持.net framework和.net core两种技术流派，对它的介绍也是非常感兴趣。

1）ABP框架的特点

我们来大概了解下ABP框架涉及到的内容。

• 依赖注入，这个部分使用 Castle windsor （依赖注入容器）来实现依赖注入，这个也是我们经常使用IOC来处理的方式；
• Repository仓储模式，已实现了Entity Framework、NHibernate、MangoDB、内存数据库等，仓储模式可以快速实现对数据接口的调用；
• 身份验证与授权管理，可以使用声明特性的方式对用户是否登录，或者接口的权限进行验证，可以通过一个很细粒度的方式，对各个接口的调用权限进行设置；
• 数据有效性验证，ABP自动对接口的输入参数对象进行非空判断，并且可以根据属性的申请信息对属性的有效性进行校验；
• 审计日志记录，也就是记录我们对每个接口的调用记录，以及对记录的创建、修改、删除人员进行记录等处理；
• Unit Of Work工作单元模式，为应用层和仓储层的方法自动实现数据库事务，默认所有应用服务层的接口，都是以工作单元方式运行，即使它们调用了不同的存储对象处理，都是处于一个事务的逻辑里面；
• 异常处理，ABP框架提供了一整套比较完善的流程处理操作，可以很方便的对异常进行进行记录和传递；
• 日志记录，我么可以利用Log4Net进行常规的日志记录，方便我们跟踪程序处理信息和错误信息；
• 多语言/本地化支持，ABP框架对多语言的处理也是比较友好的，提供了对XML、JSON语言信息的配置处理；
• Auto Mapping自动映射，这个是ABP的很重要的对象隔离概念，通过使用AutoMaper来实现域对象和DTO对象的属性映射，可以隔离两者的逻辑关系，但是又能轻松实现属性信息的赋值；
• 动态Web API层，利用这个动态处理，可以把Application Service 直接发布为Web API层，而不需要在累赘的为每个业务对象手工创建一个Web API的控制器，非常方便；
• 动态JavaScript的AJax代理处理，可以自动创建Javascript 的代理层来更方便使用Web Api，这个在Web层使用。

除了这些重要特性外，ABP框架还有很多一些特别的功能或者概念。

• 多租户支持（每个租户的数据自动隔离，业务模块开发者不需要在保存和查询数据时写相应代码；
• 软删除支持（继承相应的基类或实现相应接口，会自动实现软删除）
• 系统设置存取管理（系统级、租户级、用户级，作用范围自动管理）
• EventBus实现领域事件(Domain Events)
• 模块以及模块的依赖关系实现插件化的模块处理等等

ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有 域对象Entities、仓储对象Repositories、域服务接口层Domain Services、域事件Domain Events、应用服务接口Application Services、数据传输对象DTOs等。

ABP官方网站：http://www.aspnetboilerplate.com，从里面可以查看很详细的案例和文档说明，可以根据需要下载不同类型的基础框架。

ABP GitHub源码地址：https://github.com/aspnetboilerplate，可以下载整个基础的框架内容，以及相关的样板案例代码。

基于ABP框架基础上，我们整理完善了整个权限体系，以及基于这个基础上进行的业务系统快速开发，我们整理后的ABP快速开发框架的架构图示，如下图所示（以字典模块为例说明）

 

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

在前端处理中，主要就是利用Vuex模式中的Store对象里实现对Action和Mutation的请求处理，获取数据后，实现对State状态中的数据进行更新。如果仅仅是当前页面的数据处理，甚至可以不需要存储State信息，而直接通过前端封装的API类获取到返回的数据，直接更新到界面视图上即可。

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

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

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

 

2、基于Vue + Element前端ABP框架功能介绍

1）登录界面

 系统登录界面效果如下所示。

  或者

 其中里面的文本内容，我们都是以国际化处理内容。

 

2）主体框架界面

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

首页内容区包括了一些常规的统计展示信息和各种图表综合展示内容。

我们来看看图表展示的效果图，其中柱状图效果如下所示。

 饼状图效果如下所示。

 曲线图效果如下所示。

 其他类型，极坐标和散点图形

 或者曲线和柱状图组合的图形

 其中顶部导航条，提供查询、全屏切换、修改布局大小、多语言选择菜单、头像及快捷菜单处理。

 

3）用户管理界面

用户列表包括分页查询及列表展示、以及可以利用按钮进行新增、编辑、查看用户记录，或者对指定用户进行重置密码操作。

 

我们把常规的列表界面，新增、编辑、查看、导入等界面放在一起，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意所示。

 用户编辑界面如下所示。

 当然可以查看这个用户本身拥有的权限功能点和拥有的菜单，如下界面所示。

  

4）组织机构管理

组织机构主要就是一个层级的对象关系，一般包含但不限于公司、部门、工作组等的定义，其中组织机构包含用户成员和角色成员的关系，如下界面所示。

 

 组织机构可以修改机构名称和对应的父类节点，如下界面所示。

 组织机构包含的成员可以添加多个人员记录，其中可以对组织成员列表进行添加、删除的操作。。

 单击机构列表界面中组织成员部分的【添加成员】按钮，弹出对话框选择添加组织成员。

 

组织机构中角色列表界面如下所示，其中可以对角色列表进行添加、删除的操作。

 单击机构列表界面中角色部分的【添加角色】按钮，弹出对话框选择添加角色。

 

   

5）角色管理

角色信息没有层级关系，可以通过列表展示。

 其中角色包含权限分配、角色成员和拥有菜单的维护，如下是角色编辑界面，包含角色基本信息、拥有权限、包含成员、拥有菜单的管理等。菜单对于角色来说，应该是一种界面资源，可以通过配置进行管理对应角色用户的菜单。

编辑界面如下所示。

角色的权限包含系统可以用的权限，并可以勾选为角色设置所需的功能点，如下界面所示。

 

 用户成员则和机构的用户管理一样，可以指定多个用户，这里不再赘述。

而菜单对于角色来说，应该是一种界面资源，可以通过配置进行管理对应角色用户的菜单，如下界面所示。

 通过配置好角色包含的菜单，用户登录系统后，系统根据当前用户角色具有的菜单项目，动态构建显示对应的列表菜单及筛选可用路由列表。

 

6）功能管理

 严格来说，ABP框架并没有统一管理好权限功能点的，它没有任何表来存储这个功能集合，而是通过派生AuthorizationProvider的子类来定义权限功能点

我在这个基础上引入了一个权限功能的表用来存储功能点的，然后提供管理界面来动态维护这些功能点。如下界面所示。

 

我们刚才在角色里面看到可以分配的权限内容，就是基于这个权限表的信息展示。

这样我们可以动态添加或者批量添加所需要的功能点，并且和整个权限管理模块串联起来，形成一个完整的控制体系。

 

另外我们还可以通过左侧树列表的按钮管理列表，可以添加、编辑、删除或级联删除对应的节点及其下面所有子节点。

 

系统登录后，客户端自动获取对应用户的角色功能点，然后我们每次打开一个新的业务窗体，客户端会进行界面的权限逻辑控制，如果没有权限的，那么不可以访问操作，如下是禁止了产品信息的导入、导出、新增、编辑等操作功能，如下界面所示产品界面被动态取消相关权限后，界面禁止了某些操作功能。

 

7）菜单管理

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

在ABP + Vue + Element 快速开发框架里面，我们BS前端的菜单和其CS的菜单是各自分开的，我们在后台的权限模块系统中维护菜单内容并分配给对应角色用户，在用户登录系统后，动态加载菜单展示，并通过菜单的配置信息，跳转到对应的路由上去进行页面展示处理。

菜单资源管理的列表界面界面如下所示

 

单击左侧树列表项目，会在右侧展示对应父节点下的菜单列表。

在右侧的列表按钮中，可以对已有的菜单进行编辑，菜单编辑界面如下所示。

我们可以通过选择图标按钮进行菜单图标的选择，如下是选择菜单图片的界面。

 

  

8）系统登录日志

登录日志，这个就是用户尝试登录的时候，留下的记录信息，其中包括用户的登录用户名，ID，IP地址、登录时间，以及登录是否成功的状态等信息。

这个登录日志，就是在系统登录尝试的时候，留下的记录，可供管理员进行跟踪了解某个账户的使用情况，也可以根据这些登录信息进行一个统计报表的分析。

查看明细界面如下所示。

  

9）系统审计日志 

审计日志，设置我们在访问或者调用某个应用服务层接口的时候，横切面流下的一系列操作记录，其中记录我们访问的服务接口，参数，客户端IP地址，访问时间，以及异常等信息，这些操作都是在ABP系统自动记录的，如果我们需要屏蔽某些服务类或者接口，则这些就不会记录在里面，否则默认是记录的。

审计日志的明细展示界面如下所示。

 

10）字典管理

字典管理界面，左侧列出字典类型，并对字典类型下的字典数据进行分页展示，右侧则利用分页展示对应字典类型的字典数据，字典管理界面如下所示。

字典大类在左侧列表进行维护，可以进行新增、编辑、删除等常规操作。

 而对应字典大类的新增或者编辑窗体界面如下。

 批量添加字典内容的界面如下所示。

 

11）产品列表展示

产品列表要展示一个产品相关的内容，包括展示产品的图片，以及产品信息介绍等内容。

展示界面中的顶部，我们利用Element的界面组件定义一个走马灯的展示效果，如下所示。

产品信息的另一个列表展示界面如下所示。

产品信息的编辑界面如下所示。

产品详细说明里面，我们采用富文本编辑，这里采用了 Tinymce 第三方组件来实现编辑处理，展示效果如下所示。

产品信息查看界面，可以对图片进行预览展示操作。

 

12）图标管理

在VUE+Element 前端应用中，图标是必不可少点缀界面的元素，因此整合一些常用的图标是非常必要的，还好Element界面组件里面提供了很多常见的图标，不过数量不是很多，应该是300个左右吧，因此考虑扩展更多图标，我引入了vue-awesome组件，它利用了Font Awesome的内置图标，实现了更多图标的整合。

Element图标管理界面如下：

基于Vue-Awesome的图标管理如下所示。

其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的展示颜色。