前面介绍了很多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的图标管理如下所示。

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

VUE+Element 前端应用开发框架功能介绍的更多相关文章

  1. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  2. 循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  3. 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

    在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对 ...

  4. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  5. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  6. 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  7. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  8. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  9. 在微信框架模块中,基于Vue&Element前端的事件和内容的管理

    在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了.通过入口,我们可以响应用户菜单的事件,如响应 ...

随机推荐

  1. Flannel和Calico网络插件工作流程对比

    Flannel和Calico网络插件对比   Calico简介 Calico是一个纯三层的网络插件,calico的bgp模式类似于flannel的host-gw Calico方便集成 OpenStac ...

  2. C# ref and out

    相同点: 1. ref 和 out 都是按地址传递的,使用后都将改变原来参数的数值: 2. 方法定义和调用方法都必须显式使用 ref 或者 out关键字: 3. 通过ref 和 ref 特性,一定程度 ...

  3. MySQL之四 存储引擎

    1.介绍 存储引擎MySQL中的"文件系统" MySQL体系结构 InnoDB存储引擎介绍 My1SAM 和InnoDB区别  mysql MariaDB [(none)]> ...

  4. Zeebe服务学习3-Raft算法与集群部署

    1.背景Zeebe集群里面保证分布式一致性问题,是通过Raft实现的,其实这个算法用途比较广泛,比如Consul网关,也是通过Raft算法来实现分布式一致性的. 首先简单介绍一下Raft: 在学术界, ...

  5. 剑指 Offer 29. 顺时针打印矩阵 + 蛇形矩阵 + 模拟 + 思维题

    剑指 Offer 29. 顺时针打印矩阵 Offer_29 题目描述: 题解分析: 题目的初衷是将这道题当做一个简单题处理 这道题一开始想的太复杂了,其实可以参考迷宫广度优先搜索的过程,只不过在选定一 ...

  6. Java 基础加强 02

    基础加强·反射 和 枚举 类的加载概述和加载时机 * A:类的加载概述 * 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载.连接.初始化来实现对这个类的初始化 * 加载 * 就是指 ...

  7. 2020年12月-第01阶段-前端基础-HTML常用标签

    1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...

  8. T1215拯救公主

    1 #include <cstdio> 2 #include <queue> 3 #include <set> 4 #include <cstring> ...

  9. 对控制器类型“StudentController”的操作“Edit”的当前请求在下列操作方法之间不明确:

    "/"应用程序中的服务器错误. 对控制器类型"StudentController"的操作"Edit"的当前请求在下列操作方法之间不明确:类型 ...

  10. Spring Native 项目,把 Spring 项目编译成原生程序!

    Spring Native 是什么 优点 缺点 原生镜像(native image)和常规 JVM 程序的区别 前置条件:GraalVM 支持的语言 关键特性 GraalVM 下的 Java 微服务 ...