2023年2月

在我们开发各种应用的时候,都会碰到很多不同的问题,这些问题涉及架构、模块组合、界面处理、共同部分抽象等方面,我们这里以Winform开发为例,从系统模块化、界面组件选择、业务模块场景划分、界面基类和辅助类处理、代码生成工具辅助开发等方面介绍在实际项目开发过程中碰到的困境和相关的解决方案,以便分析其中是如何逐步提高效率和整体用户体验的。

1、系统模块化

软件和建筑工程很类似,都是需要构建一个庞大而功能完整的一个系统,而工程化也意味着需要多人协作,那么就需要把一个庞大的系统横向或者纵向划分为各个可以独立施工完成的模块,虽然各个模块之间有所衔接或者交互,但是基本上可以以模块化的方式来构建,这个也是工程化开发的精髓所在。

以一个软件管理系统为例,我们尽可能把精力焦点放在客户的业务需求上,而对于常规的如权限控制、字典管理等一些常用的内容,由于它们的处理逻辑在特定领域上基本上比较固定一些,可以尽可能独立并重复使用,

而有时候,以某个特定的业务来说,同时很多处理规则也是不变的,因此也可以以业务模块的方式来划分,从而类似通用模块的方式重复使用。

模块化类似小孩子搭积木的方式构建一个所要的形状,虽然软件和建筑在这方面肯定更加复杂化,但是模块化系统是大势所趋,也是简化开发、易于维护、提高系统健壮性的重要举措。

2、界面组件选择

在Winform内置的传统样式里面,虽然提供了很多很好的界面组件,不过整体效果还是比较古板。为了增强界面的处理效果,我们一般使用一些第三方的界面套件作为Winform开发的基础,这个除了可以提高整体界面的效果外,还在很多控件层面提供丰富的处理和响应。

以前尝试过各种类型的界面套件,最终还是对DevExpress情有独钟,不仅仅是因为它是大软件公司开发的界面套件,也是因为它在界面层次提供了很多丰富的界面组件和强大的属性设置,能够极大满足各种界面复杂的要求。

使用DevExpress界面套件,可以使得我们开发的界面更加漂亮,用户体验也更好。

或者类似效果

3、业务模块的场景划分

前面说过,一个系统为了简化开发、易于维护、提高系统健壮性的可以把它按功能方式划分为各个独立模块进行开发或者重用,而对于业务模块来说,我们也还可以进一步细分。

一般系统界面中,大多数标准方式是展示业务数据的查询列表,然后在根据需要对特定记录进行编辑、查看、删除等操作。

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

如对于列表内容的展示,一般展示效果如下所示,主要展示数据库里面的二维表信息。

除了列表界面,另外一个就是对数据的明细展示界面了,这个界面内容可以更加多元化,如在里面承载各种控件,如文本、日期、图片、下拉列表、树形列表,以及我们自定义的一些控件,如对于附件的通过管理展示控件。

有了这些标准的展示效果,我们就可以参照这些,使用代码生成工具辅助页面内容的生成的了,生成规则以数据库元数据为参考即可。

4、界面基类和辅助类的处理

我们以常规业务模块界面来分析,主要有明细查看或编辑界面、列表界面,那么这些界面为了方便使用,我们可以抽象一部分界面处理逻辑或者共有部分内容,放在界面基类BaseEdit或者BaseDock等基类里面,如下界面所示。

尽可能把一些涉及到业务数据的处理通用规则放到基类,而变化部分则在子类进行处理即可。这样可以简化生成界面的代码,以及提高可重用率,减少维护的难度和代码臃肿。

对于一般的业务系统,可能都会涉及到不同数据库的使用,如SQLServer、Oracle、Mysql、PostgreSQL等数据库,那么这部分,可以通过使用微软企业库或者其他ORM方式进行处理,以实现系统对多种数据库的良好支持。

5、代码生成工具辅助开发

通过上面的介绍,通用部分作为模块独立使用,业务模块的界面主要划分列表和编辑查看界面两部分,而各自又进行了一定的基类抽象处理,那么相对来说已经简化很多了,不过对于业务数据来说,我们还是需要做很多重复性的工作,如界面显示、界面赋值及调用接口处理等操作,这些对业务对象固定的话,其实也是规则类似的,那么这部分我们结合代码生成工具进行批量生成即可,生成后进行一定的微调,可以极大降低出错的几率,减少代码的编写量。

在我们开发软件的时候,解决方案项目基于一定的分层组织,每个项目分层中,各个类的关系也是确定的,借助辅助工具(结合模板引擎)可以快速生成我们所需要的代码,并极大提高我们软件的开发效率,Database2Sharp代码生成工具就是一款专门针对我们自己框架结构配套的开发工具。

Database2Sharp代码生成工具,主要是基于数据库提取的元数据信息,根据表的信息和关系,字段信息等内容,生成我们框架所需要分层的类代码。

对于Winform开发,可以根据Winform框架或者混合框架的窗体界面类,生成标准的界面代码,列表界面默认具有分页查询、导入导出、高级查询、编辑、删除事件绑定,编辑界面则具有获取数据并显示在控件,保存后执行更新或者写入的操作。

7、其他

除了前面介绍的部分外,一般大的方面,我们还可以以业务方式做一些独立的组件模块,以方便重复使用,这个是大的方面。

模块化,一般需要构建好对应的框架架构,每个独立的模块,都是遵循统一的框架架构方式处理,可以极大提高代码的开发效率和降低维护的难度。

Winform开发架构如下所示。

而对于混合方式的Winform开发,那么还设计Web API模块的部署,以及客户端对Web API调用的封装,如下所示。

小的方面,还可以进一步划分一些常用的界面处理元素,如自定义控件的方式进行特殊组件的开发工作。如随笔《
在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件
》、《
在Winform系统界面中对进展阶段的动态展示和处理
》。

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

我们前面介绍了Vue+Element前端的接口是调用后端的ABP框架发布的API接口服务,API接口服务通过Swagger公布对应的接口信息供我们前端开发使用,提供非常好的便利;而我们使用Vue+Element的前端框架,也是需要对后端接口API的调用进行一个简单的抽象基类封装,使得常规的增删改查等常规接口继承基类即可使用,而不需要累赘、重复的代码;另外Vue+Element通过页面进行获取数据的过程中,可以传入对应的API参数条件,如分页信息和查询条件信息,这样就基本满足了一个常规的查询获取数据列表的操作,获得的数据绑定在界面的Table控件上即可。

1、ABP框架的后端接口实现

我根据项目之间的关系,整理了一个架构的图形,如下所示。

上图中,其中橘红色部分就是我们为各个层添加的类或者接口,分层上的序号是我们需要逐步处理的内容,我们来逐一解读一下各个类或者接口的内容。

ABP框架后端项目解决方案视图如下所示。

其中在Web.Host中整合了Swagger,ABP+Swagger负责API接口的发布展示管理,如下是API接口的管理界面。

进一步查看GetAll的API接口说明,我们可以看到对应的条件参数,如下所示。

这些是作为查询条件的处理,用来给后端获取对应的条件信息,从而过滤返回的数据记录的。

那么我们前端界面也需要根据这些参数来构造查询界面,我们可以通过部分条件进行处理即可,其中MaxResultCount和SkipCount是用于分页定位的参数。

在应用服务层接口类里面,重写CreateFilteredQuery可以设置GetAll的查询规则,重写ApplySorting则可以指定列表的排序顺序。

或者菜单模块的处理如下所示。

子类一般就是实现这些函数重写即可,因为在基类处理函数里面,已经整合了各自的调用逻辑,整合了条件处理、分页、排序等条件函数。

以下是基类CrudAppService的GetAll函数实现。

2、Vue+Element的前端框架API类的封装

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

一般来说,我们页面模块可能会涉及到Store模块,用来存储对应的状态信息,也可能是直接访问API模块,实现数据的调用并展示。在页面开发过程中,多数情况下,不需要Store模块进行交互,一般只需要存储对应页面数据为全局数据状态的情况下,才可能启用Store模块的处理。

通过WebProxy代理的处理,我们可以很容易在前端中实现跨域的处理,不同的路径调用不同的域名地址API都可以,最终转换为本地的API调用,这就是跨域的处理操作。

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

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

其中JS类的BaseApi具有常规的增删改查接口,如下所示。

3、Vue+Element的前端框架的页面查询和数据展示

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

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

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

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

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

如对于菜单管理列表来说,我们前端定义了一个表单用于查询处理,可以根据显示名称和创建时间进行查询,如下代码所示。

前面我们介绍了前端API调用的封装类,如下结构所示。

那么我们前端页面需要引入对应的菜单Api类,如下引用即可。

我们在页面模块的JS里面定义了data属性包括用于承载数据列表的list和分页信息pageinfo,如下代码所示。

根据页面输入的条件和data里面存储的分页信息,那么我们就可以根据条件进行服务器端的数据请求了。

上面构造了条件,然后根据条件,直接调用menuApi的类进行处理获取列表即可。

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

循序渐进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变量方式解决弹出编辑对话框界面无法触发更新的问题

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变量方式解决弹出编辑对话框界面无法触发更新的问题