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

🕗 发布于 2024-11-20 13:02 javascript 前端 开发语言

简介

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专题介绍

我们下期见!

原文地址：https://blog.csdn.net/Apeart/article/details/143895903

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：大模型本地部署实践：Ollama+Open-WebUI（MacOS）
下一篇：A040-基于springboot的智能停车计费系统设计与实现

【MySQL实战45讲笔记】基础篇——事务隔离
简单来说，**事务就是要保证一组数据库操作，要么全部成功，要么全部失败**。在 MySQL 中，事务支持是在**引擎层**实现的。但并不是所有的存储引擎都支持事务，比如MySQL 原生的 MyISAM
阅读更多2024-11-23
MySQL之索引与事务
介绍了MySQL索引的分类，索引的底层数据结构，聚簇索引与非聚簇索引，非聚簇索引导致的回表，索引失效的场景。介绍了事务的特性，事务的隔离级别。
阅读更多2024-11-23
15天大厂真题带刷day1
小美对偶数因子很感兴趣，她将进行 𝑇T 次询问，每次都会给出一个正整数 𝑥x，请你告诉她 𝑥x 是否存在至少一个偶数因子。在一行上输入一个整数 𝑥 (1≤𝑥≤109)x (1≤x≤109) 代表小美询
阅读更多2024-11-23
Fakelocation Server服务器/专业版 Windows11
任务一打开 PowerShell（以管理员身份）命令安装 Chocolatey。任务三打开Fakelocation开源文件 | 查看IP地址。任务四写入Hosts地址文件。任务二可能遇到的错误
阅读更多2024-11-23
Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？
Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？
阅读更多2024-11-23
muduo库的使用
muduo库的使用及其基本原理
阅读更多2024-11-23
Node基本使用
Node基本使用
阅读更多2024-11-23
11 —— 打包模式的应用
需求：在开发模式下想让webpack使用style-loader进行css样式的处理；让它把css代码内嵌在js中；在生产模式下提取css代码。mini-css-extract-plugin插件：提取
阅读更多2024-11-23
04_HDMI20协议解析_General_Control
当通过HDMI传输音频信号时，General_Control是必须要传输的数据包之一, 如果没有，可能会有部分显示器有兼容性问题；General_Control 可以打开或者关闭静音功能；
阅读更多2024-11-23
本地安装YAPI
项目中用到很多的RESTAPI，光靠人工管理或者普通文档肯定是不行的，翻了很多的RESTAPI管理工具，还是选择了YAPI，原因有2，一个是接口位于内网，外网网站上管理测试不到内网接口，另外一个是使用
阅读更多2024-11-23