前面介绍了很多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是一个开源且文档友好的应用程序框架。目前基于.net core5.0基础上进行开发，框架支持SQLServer、Mysql、Oracle等常用数据库的配置切换。
1）框架特点
基于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的图标管理如下所示。
其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的展示颜色。
