贴代码框架PasteForm特性介绍之outer,outers,object,objects,outerdisplay

简介

PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管理端只有Html+js版本的，后续将支持小程序，Vue等

案例源码

案例源码在

https://gitee.com/pastecode/paste-template

不定期升级

AllInDto!

通过引入PasteForm，一个项目哪怕100个数据表，一般的管理页面也才不到10个，除非有非常多的特殊功能，否则都能用PasteForm中的表格和表单来实现！

本次的特性介绍，涉及的东西会多一些，你可以下载源码后，看看详细的，我们先来查看下各个特性的信息

outer

表示一个值需要从外表获取，编辑的时候如何显示? 比如fatherId,extendRole

字段	类型	示例	说明
args1	字符	cateInfo	外表的名称，对应模板的path,或者路径，路径一定附带了/字符示例./abc.html
args2	字符	extendCates	表示显示的数据，需要和下面2个配合，是一个当前的扩展，目标数组要配置hidden
args3	字符	id	获取返回对象的属性，一般为id
args4	字符	name	id的友好名称显示,这里指的是外表，比如cateId，需要打开catelist页面，选择后，返回cate,则name作为友好显示,id作为实际值

outers

outer的复数版本，表示可以从外部列表中选择多个，比如在创建账号的时候给他绑定多个角色，就用这个！

字段	类型	示例	说明
args1	字符	cateInfo	外表的名称，对应模板的path,或者路径，路径一定附带了/字符示例./abc.html
args2	字符	extendCates	表示显示的数据，需要和下面2个配合，是一个数组，目标数组要配置hidden
args3	字符	id	获取返回对象的属性，一般为id
args4	字符	name	id的友好名称显示,这里指的是外表，比如cateId，需要打开catelist页面，选择后，返回cate,则name作为友好显示,id作为实际值

outerdisplay

ListDto中用于外表的显示，比如有字段cateInfoId,对应的ExtendCateInfo要标记为outerdisplay,args2配置为extendCateInfo?.name || ‘’,否则会显示为[object object]

字段	类型	示例	说明
args1	字符	cateInfoId	表示这个字段的值，一般不显示
args2	字符	extendCateInfo?.name	表示显示的名称，友好名称，需要后端支持,在前端会处理成.display
args3	字符	name	表示显示的字段

object

适用于表单页面，表示从另外一个表单新增数据，比如用户的收货地址，在表单的时候，打开一个新的表单，进行信息填写后，返回一个obj，这个时候是没有写入数据库的,所以在返回的时候需要显示
和outer有点像，不过回传的是一个object类型！如果是编辑的时候？需不需要上传到API表示编辑了?打开表单的时候会传递model=object这个参数过去，表示叫子表单不要做API入库操作
引入session_key作为信息传递，使用本地存储进行过手!

注意这个子模型也是需要建立对应的API的，不过不需要建立新增和编辑的接口，因为被上一级涵盖了！

字段	类型	示例	说明
args1	字符	roleInfo	一般使用path也可以使用页面的路径
args2	字符	id	新增的时候无用，主要是编辑的时候，基于这个id和path去数据库查询新的数据
args3	字符	name	表示显示的是这个object的哪个字段，一般在编辑的时候可见

objects

object的复数版本，表示一个集合，比如一个会员有多个爱好，新增的时候，打开子表单，填写多个爱好的object信息体返回,在显示的时候，如果一个字段不足以显示???是否支持多个字段联动显示?

字段	类型	示例	说明
args1	字符	roleInfo	一般使用path也可以使用页面的路径
args2	字符	id	新增的时候无效，编辑的时候表示从数据库查询信息，也作为删除的key使用
args3	字符	name	表示显示的是这个object的哪个字段，一般在编辑的时候可见

UI

我们先来看下效果图

上图是结果，看作图和有图的内容，其实是对应的，在点击后面的标记特性为object和objects的时候，会打开新的页面，如下图

而如果点击的是outer,outers特性的字段，则如下图

其实他们的区别就是outer是表示从现有的数据库中获取某条数据，作为当前数据的外表，比如你要获得角色ID！
而object,objects表示的是获取一个object对象，不一定有id,是直接从现成的form中获取！

Dto

    /// <summary>/// object outer 案例/// </summary>public class ObjectDto{///<summary>///姓名 模拟短文本输入///</summary>[MaxLength(32)][Required]public string Name { get; set; }///<summary>///文本区域 模拟文本区域的输入///</summary>[MaxLength(128)]public string Desc { get; set; }///<summary>///文本区域 长度大于128则自动为textarea///</summary>[MaxLength(256)]public string Text { get; set; }/// <summary>/// 角色/// </summary>[PasteOuter("gradeInfo","extendGrade","id","name")]public int GradeId { get; set; }/// <summary>/// 角色/// </summary>[ColumnDataType("outers","gradeInfo", "extendGrade", "id", "name")]public int[] grade_ids { get; set; }/// <summary>/// 角色的扩展信息，编辑的时候显示用/// </summary>[PasteHidden]public GradeShortModel ExtendGrade { get; set; }/// <summary>/// 外表时间/// </summary>[PasteObject("mod1","","id","name")]public Model1 date2 { get; set; }/// <summary>/// 外表字符/// </summary>[ColumnDataType("objects","mod2", "id", "mark", "")]public Model2[] str2 { get; set; }}/// <summary>/// /// </summary>public class Model1{/// <summary>/// ID 这个用于排重/// </summary>public int Id { get; set; }/// <summary>/// 名称 这个用于显示到UI/// </summary>[MaxLength(32)]public string Name { get; set; }}/// <summary>/// /// </summary>public class Model2{/// <summary>/// ID 这个用于排重/// </summary>public int Id { get; set; }/// <summary>/// 名称 这个用于显示到UI/// </summary>[MaxLength(32)]public string Mark { get; set; }/// <summary>/// 描述/// </summary>[MaxLength(64)]public string Desc { get; set; }}

也就是object的时候，是读取的对应的Model1,Model2的信息，其实也是通过PasteForm的逻辑实现的，我们看下对应的API接口！

API

        /// <summary>/// outer outers object objects/// </summary>/// <returns></returns>[HttpGet][Route("/api/app/obj/readAddModel")]public PasteBuilderHelper.VoloModelInfo ReadAddModel4(){var _model = PasteBuilderHelper.ReadModelProperty<ObjectDto>(new ObjectDto());return _model;}/// <summary>/// object的外援/// </summary>/// <returns></returns>[HttpGet][Route("/api/app/mod1/readAddModel")]public PasteBuilderHelper.VoloModelInfo ReadAddModel5(){var _model = PasteBuilderHelper.ReadModelProperty<Model1>(new Model1());return _model;}/// <summary>/// object的外援/// </summary>/// <returns></returns>[HttpGet][Route("/api/app/mod2/readAddModel")]public PasteBuilderHelper.VoloModelInfo ReadAddModel6(){var _model = PasteBuilderHelper.ReadModelProperty<Model2>(new Model2());return _model;}

PasteForm路径规则

说到上面不得不说路径规则
在PasteForm中，默认API有这么几个

/api/app/xxx/readAddModel/api/app/xxx/readUpdateModel/api/app/xxx/readListModel/api/app/xxx/item/api/app/xxx/updateItem

其中/app/一般一个项目配置一个，默认是app
可以在下面地方配置

            context.Services.Configure<Volo.Abp.AspNetCore.Mvc.AbpAspNetCoreMvcOptions>(options =>{options.ConventionalControllers.Create(typeof(PasteTemplateApplicationModule).Assembly, option =>{option.UseV3UrlStyle = true;option.RootPath = "app";});});

也就是说如果一个字段配置为object,objects，则他对应的类型应该就有一个对应的API，比如上面的
/api/app/mod2/readAddModel

更多特性见

贴代码PasteForm专题介绍

我们下期见!