wenmo8 发布的文章

ABP
是ASP.NET Boilerplate的简称,ABP是一个
开源
且文档友好的
应用程序框架
。ABP不仅仅是一个框架,它还提供了一个
最徍实践
的基于
领域驱动设计(DDD)
的体系结构模型。ABP框架可以说是.net core整合非常多技术点的一个很好的框架,整个涉及到很多非常多方面的知识。我们来大概了解下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层使用。

1、ABP应用框架项目结构

一般我们涉及到的ABP框架,可能解决方案上都会有这些项目。

而这些项目使用了ABP框架的底层框架模块,使用基础模块可以极大简化应用框架的规模,提高效率,并抽象常规的功能和约定处理,如下所示。

基础的ABP框架实现(地址
https://github.com/aspnetboilerplate/aspnetboilerplate
),这个是我们所说的ABP框架的核心实现;

上面提到的在基础ABP框架基础上实现处理的ABP应用框架,如下所示。

它主要是分为下面几个项目分层。

Core领域核心层
,领域层就是业务层,是一个项目的核心,所有业务规则都应该在领域层实现。这个项目里面,除了定义所需的领域实体类外,其实可以定义我们自己的自定义的仓储对象(类似DAL/IDAL),以及定义自己的业务逻辑层(类似BLL/IBLL),以及基于AutoMapper映射规则等内容。

EntityFrameworkCore
实体框架核心层,这个项目不需要修改太多内容,只需要在DbContext里面加入对应领域对象的仓储对象即可。

Application.Common和
Application应用层

:应用层提供一些应用服务(Application Services)方法供展现层调用。一个应用服务方法接收一个DTO(数据传输对象)作为输入参数,使用这个输入参数执行特定的领域层操作,并根据需要可返回另一个DTO。

Web.Core Web核心层
,基于Web或者Web API的核心层,提供了对身份登陆验证的基础处理,没有其他内容。

Web.Core.Host Web API的宿主层
,也是动态发布Web API的核心内容,另外在Web API里面整合了Swagger,使得我们可以方便对Web API的接口进行调试。

Migrator数据迁移层
,这个是一个辅助创建的控制台程序项目,如果基于DB First,我们可以利用它来创建我们项目的初始化数据库。

2、ABP框架的动态Web API

我们知道,一般我们发布需要实现Web API的发布,需要创建对应的Web API控制器类,然后在Web API应用中注册对应的路由来处理。由于ABP框架的Application Service层已经是无限接近Web API层的定义了,而且本身ABP框架已经抽象划分了几个不同的分层,再引入一个类似Application Service层的Web API层,显得多余且累赘,所以ABP框架约定了Application Service层继承接口和命名规则,也是为引入动态Web API做铺垫的,用一个通用的Host层,统一动态发布所有的Web API层,减轻了繁复且累赘的Web API 控制器的定义。

使用ABP自带的例子来说明,例如有如下的接口定义。

public interfaceITaskAppService : IApplicationService
{
GetTasksOutput GetTasks(GetTasksInput input);
voidUpdateTask(UpdateTaskInput input);voidCreateTask(CreateTaskInput input);
}

然后其使用动态发布Web API的方式类似如下逻辑所示。

Configuration.Modules.AbpWebApi().DynamicApiControllerBuilder.For<ITaskAppService>("tasksystem/task").Build();

当然这个是对于特定的接口的处理,通用的动态Web API发布处理,会通过反射获得对应的接口列表,然后是逐一进行处理的。

我们这里如果需要详细追究ABP的动态Web API发布的规则处理,可以参考ABP的基础框架部分,了解
DynamicApiControllerBuilder
的处理逻辑即可。

而ABP框架动态发布Web API,对应的控制器的方法,约定会根据命名规则进行处理,默认一般为Post,规则如下所示:

  • Get
    : 如果方法名以 'Get'开始
  • Put
    : 如果方法名以 'Put' 或 'Update' 开始
  • Delete
    : 如果方法名以 'Delete' 或 'Remove' 开始
  • Post
    : 如果方法名以 'Post' 、 'Create'  或  'Insert' 开始.
  • Patch
    : 如果方法名以 'Patch' 开始.
  • 默认以 POST 方式作为 HTTP 动作.

有了动态发布Web API层,我们就不需要在Web API层中复制一份类似Application Service的定义和实现了,这样可以省却很多麻烦事情,减少维护的代码。

3、依赖注入的仓储模式

ABP使用并提供常规的依赖注入。可以简单地注入任何依赖项(例如:IRepository <Authorization.Tasks.Task>)

依赖注入其实也是IOC,实现了接口的控制反转,可以在程序启动的时候,统一根据接口加载对应的实现,而使用的时候,我们只需要知道接口的使用方法即可。现在的Entity Framework 实体框架都是基于IOC实现的了。

我们这里假设您已经知道依赖注入带来的好处和大概的处理,依赖注入一般分为构造函数的注入,和属性注入。让我们来看看一个具体的依赖注入实现的代码。

public classTaskAppService : ApplicationService, ITaskAppService
{
private readonly IRepository<Task>_taskRepository;public TaskAppService(IRepository<Task>taskRepository)
{
_taskRepository
=taskRepository;
}
public asyncTask UpdateTask(UpdateTaskInput input)
{
Logger.Info(
"Updating a task for input:" +input);var task = await_taskRepository.FirstOrDefaultAsync(input.TaskId);if (task == null)
{
throw new UserFriendlyException(L("CouldNotFindTheTaskMessage"));
}

ObjectMapper.MapTo(input, task);
}
}

这里的_taskRepository 就是仓储接口的依赖注入,这个具体的实现是在启动的时候,有IOC容器进行动态的加入。使用的时候我们在各个函数里面都是调用对应的仓储接口(而不是实现)来处理信息的。

属性注入的做法类似只是提供了一个Public的属性定义供动态设置属性接口。

public classPersonAppService
{
public ILogger Logger { get; set; }privateIPersonRepository _personRepository;publicPersonAppService(IPersonRepository personRepository)
{
_personRepository
=personRepository;
Logger
=NullLogger.Instance;
}
public void CreatePerson(string name, intage)
{
Logger.Debug(
"Inserting a new person to database with name =" +name);var person = new Person { Name = name, Age =age };
_personRepository.Insert(person);
Logger.Debug(
"Successfully inserted!");
}
}

ABP的依赖注入基于 Castle Windsor框架。Castle Windsor最成熟的DI框架之一。还有很多这样的框架,如Unity,Ninject,StructureMap,Autofac等等。

接口的实例初始化,一般我们启动程序的时候,使用IoC容器进行统一的处理,如下所示。

var container = newWindsorContainer();

container.Register(
Component.For
<IPersonRepository>().ImplementedBy<PersonRepository>().LifestyleTransient(),
Component.For
<IPersonAppService>().ImplementedBy<PersonAppService>().LifestyleTransient()
);
var personService = container.Resolve<IPersonAppService>();
personService.CreatePerson(
"John Doe", 32);

而在ABP框架里面,一般可以通过 IocManager 来根据程序集统一进行接口的实例化处理,按照约定注册程序集。

IocManager.RegisterAssemblyByConvention(Assembly.GetExecutingAssembly());

Assembly.GetExecutingAssembly()得到一个对包括此代码的程序集的引用。按照约定,ABP自动注册所有 Repositories, Domain Services, Application Services, MVC 控制器和Web API控制器。

另外,ABP框架的数据处理采用了EF框架的仓储模式来处理数据的增删改查等处理,可以实现多种数据库的兼容,而且能够抽象实现常规数据操作接口,以及提供非常方便的LINQ处理方式。

在ABP中,仓储类要实现IRepository接口。在ABP基础模块中,它的接口定义如下所示。

对于仓储类,IRepository定义了许多泛型的方法。比如: Select,Insert,Update,Delete方法(CRUD操作)。在大多数的时候,这些方法已足已应付一般实体的需要。

一般我们定义一些对应的DTO以及领域对象,然后依据对应的接口来实现业务对象的仓储处理。

例如对于字典类型来说,定义的领域对象如下所示。

namespaceMyProject.Dictionary
{
[Table(
"TB_DictType")]public class DictType : FullAuditedEntity<string>{/// <summary> ///类型名称/// </summary> [Required]public virtual string Name { get; set; }/// <summary> ///字典代码/// </summary> public virtual string Code { get; set; }/// <summary> ///父ID/// </summary> public virtual string PID { get; set; }/// <summary> ///备注/// </summary> public virtual string Remark { get; set; }/// <summary> ///排序/// </summary> public virtual string Seq { get; set; }
}
}

然后在应用层就直接使用通用的仓储对象接口即可。

    /// <summary>
    ///字典类型应用服务层实现/// </summary>
[AbpAuthorize]public class DictTypeAppService: MyAsyncServiceBase<DictType, DictTypeDto, string, DictTypePagedDto, CreateDictTypeDto, DictTypeDto>, IDictTypeAppService
{
/// <summary> ///标准的仓储对象/// </summary> private readonly IRepository<DictType, string>_repository;public DictTypeAppService(IRepository<DictType, string> repository) : base(repository)
{
_repository
=repository;
}

............

}

因为这些通用的仓储对象接口已经很多,常规都是够用的,而不需要进行特定仓储对象的自定义封装处理,否则徒增烦恼。

很多程序可能都会有一个首页综合展示系统的相关信息,如汇总信息,图表统计、待办业务、提醒信息等内容,在Web上可能叫做Dashboard仪表板,或者首页页面,不管哪种叫法,都是综合展示一些信息,提供一些信息展示或者处理工作的入口,我们在Winform里面,有时候也需要这样的仪表板首页,这个使用DevExpress的控件组的话,可以使用WidgetView控件来实现。

1、DevExpress默认案例

DevExpress的Demo样例提供了一些WidgetView的样式,如下所示。

通过上面的案例,我们可以看到,利用WidgetView可以创建很丰富的汇总、报表、待办等相关内容,只要处理得当,可以为我们的Dashboard首页提供很丰富的综合内容展示。

2、WidgetView的使用介绍

WidgetView的使用,如果要较好掌握它的使用,需要了解DocumentManager、WidgetView、Document、StackGroup的概念是什么,以及它们之间的关系。

我们可以通过窗体的设计器来创建一个DocumentManager,其中DocumentManager里面包含一个WidgetView,用来做视图管理的;然后在设计模式上创建多个对应的Document,而Document是用来管理对应展示的内容的(如自定义用户控件),StackGroup等是用来管理Document布局展示的,除了StackLayout外,可以通过WidgetView的LayoutMode属性设置其他布局类型,如Table Layout, Flow Layout 以及 Free Layout等。如下是在设计模式下创建几个空白的Document以及使用的LayoutMode 为StackLayout来排版Document的排列方式。

如果需要在设计模式下维护WidgetView的一些内容,可以通过窗体下面的DocumentManager对象进行维护。

以上的Demo就是简单的创建几个空白的Document以及常规的StackLayout的方式排版,运行得到界面效果如下所示。

一般实际情况下,我们是在首页上综合展示各种报表内容、图表内容、待办信息等内容的,那么各个模块的内容,可以使用自定义用户控件来处理,然后综合展示即可,实际情况下,首先我们先创建用户控件界面,以及实现好各个内容的展示;然后我们可以在设计模式下指定不同Document下容纳的控件信息,也可通过动态创建的方式创建所需要的内容。

以下是我使用代码动态构建的WidgetView界面,通过动态创建DocumentManager、Document,以及加载各种自定义用户控件,组合成下面的界面效果。

用户自定义控件界面,我们在Controls里面放置各种不同内容的用户控件,如下界面方案中的项目文件界面所示。

动态创建WidgetView相关的内容比较简单,我这里把所有相关的代码一并贴出,方便了解。

    /// <summary>
    ///动态构建的Widget View/// </summary>
    public partial classFrmWidget2 : DevExpress.XtraEditors.XtraForm
{
publicFrmWidget2()
{
InitializeComponent();
}
private void FrmWidget2_Load(objectsender, EventArgs e)
{
AddDocumentManager();
}

WidgetView view;
StackGroup group1, group2;
voidAddDocumentManager()
{
var docMananger = newDocumentManager(components);
view
= newWidgetView();
docMananger.View
=view;
docMananger.ContainerControl
= this;

view.AllowDocumentStateChangeAnimation
=DevExpress.Utils.DefaultBoolean.True;
group1
= newStackGroup();
group2
= newStackGroup();
group1.Length.UnitType
=LengthUnitType.Star;
group1.Length.UnitValue
= 2;
view.StackGroups.AddRange(
newStackGroup[] { group1, group2 });//添加文档 AddDocuments();//设置布局显示 view.LayoutMode =LayoutMode.StackLayout;
view.DocumentSpacing
= 3;//tableLayout的行列定义//构建每个文档所属的ColumnIndex和RowIndex this.view.Rows.Clear();this.view.Columns.Clear();
List
<Point> points = new List<Point>();for (int i = 0; i < 3; i++)
{
this.view.Rows.Add(newRowDefinition() { });for (int j = 0; j < 2; j++)
{
this.view.Columns.Add( newColumnDefinition());
points.Add(
newPoint(i, j));
}
}
Random random
= newRandom();foreach (Document document inview.Documents)
{
Point newLocation
=points[random.Next(points.Count)];
document.RowIndex
=newLocation.Y;
document.ColumnIndex
=newLocation.X;
points.Remove(newLocation);
}
//添加 Document对象到group1不是必须的,因为所有新创建的文档都是默认放置到第一个StackGroup中.//group1.Items.AddRange(new Document[] { view.Documents[0] as Document, view.Documents[1] as Document }); view.Controller.Dock(view.Documents[view.Documents.Count - 3] asDocument, group2);
view.Controller.Dock(view.Documents[view.Documents.Count
- 2] asDocument, group2);
view.Controller.Dock(view.Documents[view.Documents.Count
- 1] asDocument, group2);
}
/// <summary> ///动态添加用户控件作为Widget视图的文档内容/// </summary> voidAddDocuments()
{
CreateDocument(
typeof(Calendar), "日历控件", Color.Blue);
CreateDocument(
typeof(ToDoList), "待办列表4", Color.Yellow);
CreateDocument(
typeof(News), "消息信息", Color.Navy);
CreateDocument(
typeof(TodoControl), "待办控件", Color.Red);
CreateDocument(
typeof(MyDateControl), "日期控件", Color.Green);
CreateDocument(
typeof(Mail), "邮箱信息", Color.Purple);
}
/// <summary> ///创建指定的文档/// </summary> /// <param name="controlType">文档用户控件对象类型</param> /// <param name="caption">标题</param> /// <param name="backColor">背景色</param> void CreateDocument(Type controlType, stringcaption, Color backColor)
{
//创建用户控件 var control = Activator.CreateInstance(controlType) asControl;//创建指定的文档 var document = view.AddDocument(control) asDocument;
document.Caption
=caption;//背景色 document.AppearanceCaption.BackColor =backColor;
}
}

以上就是DevExpress的WidgetView的各种相关内容的介绍,以及介绍在设计模式下、代码动态构建两种方式下的处理方式,希望对你了解这个特殊的控件有所帮助。

世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍。我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息,以变化规律拥抱变化的内容。如对于服务端来说,后端代码中类的继承关系和特殊的接口名称规律,我们可以根据用户选中的表,获取表之间的字段和关系信息,生成各种DTO和接口类等代码文件;而前端界面来说,也是依照数据库的表信息、字段信息等内容,实现查询区域、查询列表、新增界面、编辑界面、查看界面、导入导出界面等内容进行相应的生成,并整合相关的界面事件关系,可以实现相关处理的按钮动作处理。本篇随笔介绍如何使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面。

1、ABP框架架构及前端代码生成分析

ABP框架是基于最新.net core 的技术方向,应用非常广泛的一个技术框架系列,它整合了很多.net core 领域相关开发技术,后端主要是发布Web API方式实现数据和前端的交互的,因此前端可以基于Web API基础上实现多种平台的对接,可以是常规的BS框架,如Vue+Element 前端路线,也可以是Winform/WPF的前端框架接入等。ABP框架的大概架构如下所示,顶端是展示层的各种前端的接入方式。

后端内容,我在前面一些随笔介绍比较多了,而且也在较早的时候,提供了ABP框架的快速代码生成《
利用代码生成工具生成基于ABP框架的代码
》,前端部分,Winform的代码生成也在前面随笔进行了使用介绍《
ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程
》,本篇随笔主要介绍ABP框架的Vue+Element前端界面的快速生成操作。

和ABP框架的Winform界面生成类似,在实现代码生成之前,我们需要有一套成熟的界面组织方式,也就是我们常规的界面布局处理,依照这些为基准,我们使用代码生成工具的模板引擎,编写对应的模板,然后结合代码工具内核提供的数据库信息,整合生成对应的代码文件夹和文件即可。

前面介绍过ABP后端框架,ABP+Swagger UI 负责API接口的开发和公布,如下是API接口的管理界面。

ABP框架后端接口的常规处理,如增删改查等接口命名都一致,参数方面也比较一致,因此给我们提供更好的API客户端类的封装提供更好的抽象模式,我们把常规的增删改查等常规接口封装在基类,子类只需要有继承关系即可,除非自定义接口函数,一般不需要额外增加前端的js代码。

如有DIctType、DictData等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

而视图是Vue +Element的组合体,一般为常规的表格列表,包含查询条件,以及整合增删改查的功能入口,如下视图界面所示。

如果带有树列表的需求,最好能够整合树列表的生成处理界面,以及SplitPanel的风格区域管理。

对于列表视图界面来说,我们一般整合新增、编辑、查看、导入导出等常规界面在一起,通过不同的弹出对话框处理即可实现各种业务处理的界面入口。

基于上面的介绍,我们只需要提供两个部分,一个是Api类的继承子类,一个是视图界面的内容,整合多个对话框和对应按钮操作入口的处理界面,如下所示包含Api封装类文件和Vue + Element界面视图。

2、 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

有了上面的介绍,我们已经知道需要生成那些文件了,因此在代码生成工具Database2Sharp上增加一个功能入口,编写好对应的模板代码,然后整合规则生成对应文件即可,这里进行相关使用功能的介绍。

首先,我们打开代码生成工具,展开对应数据库的表信息,如下界面所示。

然后在表或者数据库上右键 出现菜单,选择【代码生成】【ABP的Vue+Element界面代码】,如下所示。

接着在出来的对话框上选择对应数据库和表进行生成,一步步执行即可。

在最后的界面上,会出来选择生成代码的表,以及需要选择对应的布局,包括一个是普通查询列表的界面,以及一个左侧带有树形列表的界面两个布局,我们根据需要选择即可。

生成的文件里面,包括有JS文件

以及对应目录下的视图文件,后缀名为vue

我们把根目录Src下的文件夹及相关文件复制到VS Code里面,可以默认路径,也可以把视图文件归类自己喜欢的目录里面(
我这里调整路径menu/index为security/menu了
),并调整路由文件,增加对应的视图入口

前端会根据用户包含的可访问菜单列表,自动过滤对应的路由,实现我们菜单入口访问对应路由了。

整合编译前端,启动后端ABP服务,并运行查看我们刚刚创建的前端界面,如下所示。

原始的查看明细界面如下所示

生成界面,无论从整体布局,以及列表的展示,和各个功能按钮入口,都已经给我们完善好了,我们一般还是需要进行调整一下。

简化下界面查询条件,以及整理一下列表展示内容,得到调整界面如下所示。

调整后的查看明细界面如下所示。

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面,能够是我们提高代码的开发效率,以及降低出错的机会,同时可以很好的统一整套界面的界面样式和做法,事半功倍。

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理


循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

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

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用


循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用


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


循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

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

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

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

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

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

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

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便。组件封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件(component)是vue的最强大功能之一,组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。本篇随笔介绍前端框架中常用到的一些组件封装处理,用于简化界面、隐藏实现细节的目的。

1、组件封装的需要

在我们开发一个主要界面的时候,一般需要排列很多内容,各个部分的内容可能会在其他界面上比较常见,那么这些如果是简单的使用原始的Element界面组件,以及简单的复制处理的话,页面代码比较臃肿,而且随着不断的复制过去使用,各部分的界面又不在统一了。这个时候如果把那些相同的功能,抽象出来抽离成组件,通过组件引用方式就会显得格外省事了。

在Winform开发中,我们知道有很多常见的用户自定义控件,就是对常规界面内容的一些通用部分进行封装,拖动过来即可使用。现在VUE+Element 前端应用的组件开发也很容易,把界面代码和Vue的控制逻辑JS代码组合一起形成一个小组件,通过使用Prop的方式传入所需参数,由组件内部控制界面的展示逻辑及事件处理,那么界面调用组件的时候就非常简洁,这样我们主页面上的代码量就降低不少,也方便代码的维护。

例如对于常规的字典下拉列表,我们希望绑定一个字典类型就可以实现系统的下拉列表的显示,那么我们可以封装这个常见的界面内容为一个字典组件。

还有对于树列表及其过滤实现等常规的处理,我们也可以通过简单的封装,实现树列表的展示,这样我们传入对应的树列表数据即可呈现所需要的树状列表内容。

另外,还有一种情况,是界面内容太多,我们把它按内容划分为不同的界面组件,然后页面进行独立的维护,主界面直接一行代码即可集成所需的内容板块,极大减少主界面的代码铺陈。

例如:对于权限系统中的每个角色,除了包含基本信息外,还会包含拥有的权限(功能控制点)、包含用户,以及拥有的菜单,其中权限是用来控制界面元素,如操作按钮的显示的,而拥有的菜单,则是用户以指定账号登录系统后,获得对应角色的菜单,然后构建对应的访问入口的。角色界面模块UML类图如下所示。

那么对应界面元素上,我们就应该以不同的Tab来展示这些信息,每个Tab内容部分就可以作为一个独立的界面组件来开发。

在比如,组织机构里面添加成员和添加角色的操作UML图。

其中添加成员、添加角色,涉及界面的列表数据展示以及对应的添加展示操作,独立一个界面组件还是比较方便的,而且添加成员 ,在角色维护模块里面也需要用到,那么可以兼容两个场景来设计组件模块。

2、界面组件的封装处理

在VUE+Element 的前端场景中,想要封装好一个组件,一般要熟练掌握的三个技能:1、父组件传值到子组件(props) 2、子组件传值到父组件($emit)3、插槽使用(slot)。对于一个独立的组件,props是用来为组件内部注入核心内容;$emit用来使这个组件通过一些操作来融入其它组件中。

我们来详细分析下前面介绍的组件场景。

对于字典模块来说,一般如果需要实现和系统字典模块里面的Api对接,并展示对应字典类型的下拉列表,实现代码如下所示。

<el-selectv-model="searchForm.ProductType"filterable clearable placeholder="请选择">
  <el-optionv-for="(item, key) in typeList":key="key":label="item.value":value="item.key"
  />
</el-select>

然后在JS逻辑里面使用字典的API获取对应数据,然后绑定到typeList属性上面即可。这样的逻辑如果每个用到字典的地方都需要这样处理,代码显然比较臃肿,而且使用组件封装更方便。

我们在Componen目录下创建一个Common目录,然后在其中添加一个my-dictdata.vue文件,用来封装字典内容处理的。

如果我们完成组件的编写,那么引用组件只需要一行代码即可实现相同的功能了。

<my-dictdatav-model="searchForm.ProductType"type-name="商品类型" />

以及在页面的组件里面引入这个自定义组件即可。

import myDictdata from '@/components/Common/my-dictdata'exportdefault{
components: { myDictdata },

如果为了简便,也可以在main.js里面统一全局引入。

这样相对于使用原始的Element界面组件,既有界面代码,又有JS代码,这样的一行代码就实现功能,显得非常简洁。

为了了解其中的奥秘,我们对组件的开发过程进行简单的了解,其中组件界面部分的代码如下所示,和上面的差不多。

<template>
  <el-selectv-model="svalue"filterable clearable placeholder="请选择">
    <el-optionv-for="(item, index) in dictItems":key="index":label="item.Text":value="item.Value"
    >
      <spanstyle="float: left;color:yello;">
        <iclass="el-icon-tickets"style="color:blue;" />{{ item.Text }}</span>
    </el-option>
  </el-select>
</template>

然后在JS部分引入字典操作的Api类,以及定义Prop属性typeName,如下所示。

并对传入Model值进行监控

我们在Mounted的实现里面,增加对字典数据的请求绑定,如下所示。

对于树形列表

一般来说它的使用代码如下所示。

还是可以感觉比较臃肿,如果放到主页面里面,会占用很多代码行,维护起来也不方便,而且树列表也是一个常见的界面展示内容,可以通过简单的封装进行减少主页面的代码量。

同样我们可以通过封装一个树列表组件

我们可以在my-tree.vue里面定义很多常见的的Prop属性,以方便调用的时候传入对应的值来改变界面的呈现。

这样主界面调用组件来实现功能的时候,只需要一行界面代码即可。

<myTree:data="treedata"icon-class="el-icon-price-tag"@nodeClick="nodeClick" />

相应的处理获得treedata的操作,是下面的函数

    getTree() { //树列表数据获取
      var param ={
SkipCount:
0,
MaxResultCount:
1000,
Tag:
'web' //Web端专用 }
menu.GetAll(param).then(data
=>{this.treedata = [];//树列表清空 var list =data.result.itemsif(list) { //使用getJsonTree函数,实现对二维表转换为嵌套树对象集合 var newTreedata =getJsonTree(list, {
id:
'id',
pid:
'pid',
children:
'children',
label:
'name'}); this.treedata =newTreedata
}
});
},

而对于部分页面组件的方式,这种一般不是很通用的组件,一般我们可以把它放在同一个目录上的Components目录里面,如下是权限模块里面用到的一些界面内容组件封装。

完成添加成员、添加角色的界面组件后,我们就可以在组织机构界面里面引入使用。

角色管理,我们也依据这个来对模块的内容进行划分,不同业务设计不同的界面组件,最后整合一起使用即可。

<el-dialogtitle="查看信息":visible="isView":modal-append-to-body="false"@close="closeDialog">
  <el-col>
    <el-tabsvalue="basicPage"type="border-card">
      <el-tab-panename="basicPage"label="基本信息">
        <el-formref="viewForm":model="viewForm"label-width="120px">
          <el-form-itemlabel="角色名">
            <el-inputv-model="viewForm.name"disabled/>
          </el-form-item>
          <el-form-itemlabel="角色显示名">
            <el-inputv-model="viewForm.displayName"disabled/>
          </el-form-item>
          <el-form-itemlabel="角色描述">
            <el-inputv-model="viewForm.description"type="textarea"disabled/>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-panename="permitPage"label="权限">
        <rolefunctionref="rolefunction":role-id="selectRoleId" />
      </el-tab-pane>

      <el-tab-panename="userPage"label="用户">
        <roleuserref="roleuser":role-id="selectRoleId":can-add="false":can-delete="false" />
      </el-tab-pane>

      <el-tab-panename="menuPage"label="菜单">
        <rolemenuref="rolemenu":role-id="selectRoleId" />
      </el-tab-pane>
    </el-tabs>
  </el-col>
  <divslot="footer"class="dialog-footer">
    <el-buttontype="success"@click="closeDialog">关闭</el-button>
  </div>
</el-dialog>

或者

以上就是我们封装一些常见通用组件,以及页面模块的组件,主要的目的就是可以简化主调用界面的代码,以及提高使用的效率。

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理


循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

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

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用


循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用


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


循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

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

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

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

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

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

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

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下。这样的处理,如果文档很多,且仅仅需要电子文档的就很麻烦了,需要打印再盖章再扫描,而且电子文档往往有失真的问题。本篇随笔介绍如何在在Winform程序中使用Spire.Pdf实现页面添加印章处理,解决这一痛处。

1、在PDF增加印章处理

首先我们来了解下,用Adobe Acrobat Reader 进行文档的印章处理下,看看如何实现的,后面再用软件实现自动的添加。

印章的来源,我们需要一个图片格式的印章。那么我们可以通过盖章到白纸上,然后拍照进行抠图,把图片弄成PNG的透明图片,也可以使用在线的印章生成工具生成图片,然后在进行适当的加工。

在做图章之前,我们先用Photoshop处理好图片,并保存图片为PDF格式的文件。

首先用Adobe Acrobat Reader打开一个PDF文档,然后找到对也给你的工具选项卡,选择图章功能,如下图所示。

然后会切换到文档的自定义图章功能上,如下所示。

然后选择创建自定义图章,导入刚才做好的PDF格式图片印章即可。

印章创建好后,就可以在文档中调用印章模板进行添加了,也就是调用印章调板处理。

拖动到文档的任意位置即可实现电子印章的添加了,添加后的文档界面效果如下所示。

2、在Winform程序中使用Spire.Pdf实现页面添加印章处理

以上是通过手工操作,在Adobe Acrobat Reader上添加印章,并给PDF文档指定位置添加印章的过程,这样的处理,已经可以减少电子档的扫描失真问题,并可以减少很多繁琐的工作。但是如果我们每次都要给很多文档页面添加这样的印章处理,也是很繁琐的事情,那么我们这里就可以编写一个程序,用程序是给每个页面指定位置盖章即可。

我们知道Spire.Pdf是对PDF操作非常不错的一个组件,我们可以利用它来实现我们对这些PDF创建印章和盖章的处理过程。

我们在Winform开发框架模块的综合案例里面,添加一个Demo页面,然后实现这个功能展示一下。

整个代码其实不复杂,如下代码所示。

        private void btnAddImageSign_Click(objectsender, EventArgs e)
{
string signPdf = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "Examples/PdfDemo/TestSign2.pdf");string signImage = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "Examples/PdfDemo/印章.png");

PdfDocument doc
= newPdfDocument();
doc.LoadFromFile(signPdf);
//每页都添加印章 foreach (PdfPageBase page indoc.Pages)
{
PdfRubberStampAnnotation loStamp
= new PdfRubberStampAnnotation(new RectangleF(new PointF(400, 600), new SizeF(120, 120)));
PdfAppearance loApprearance
= newPdfAppearance(loStamp);
PdfImage image
=PdfImage.FromFile(signImage);

PdfTemplate template
= new PdfTemplate(160, 160);
template.Graphics.DrawImage(image,
0, 0);
loApprearance.Normal
=template;
loStamp.Appearance
=loApprearance;

page.AnnotationsWidget.Add(loStamp);
}
//保存文档 var fileSave = FileDialogHelper.SavePdf("ImageStamp.pdf", System.AppDomain.CurrentDomain.BaseDirectory);if(!string.IsNullOrEmpty(fileSave))
{
doc.SaveToFile(fileSave);
Process.Start(fileSave);
}
}

最后页面的效果如下所示,在每页的指定位置,都盖章我们的印章了。

以上处理,就是在Winform程序中使用Spire.Pdf实现页面添加印章处理,可以减轻我们实际工作的繁琐操作。