PasteTemplate的项目这个项目呢后续会转化成项目模板转化成项目模板后后续需要开发新的项目就可以基于这个模板创建这样就不要copy一个旧的项目然后删删删改改改重命名等操作了

那么本次作者就带来了实物本次主要介绍管理端的内容我们一起来看看

这个是后台目前使用的是HTML原生写的如果说使用VUE的话会更简单这个后续看情况推出

先用原生的原因呢一是顺手二是前期是规划期改动比较多这个项目开发过程我是录制了视频的后续会和项目模板一并放出来!

这个管理端有多少代码?

可能说代码量不太合适我就列出下各个文件的大概情况(文件采用松散编辑模式就是一个花括号就一行的写法所以不存在刻意压缩代码行的问题哈)

文件大小行数说明login/index.html8KB177登陆页面账号密码验证码登陆login.less9KB381登陆页面的样式文件pasteform/index.html12KB212表格列表页面的主UI页面pasteform/index.js22KB682表格页面的主逻辑JS页面pasteform/index.less14KB656表格页面的样式文件pasteform/view.html12KB184表单新增编辑页面的UI文件pasteform/view.js27KB820表单新增编辑页面的逻辑JS代码pasteform/view.less10KB499表单编辑新增页的样式文件index.html11KB225首页也就是菜单页面上图的这个主页面菜单采用API获取的动态方式index.less5KB311首页的样式文件lib/api.js18KB598ajax请求,一些基础函数的转化等,相当于帮助类

还有一些其他的三方组件比如jquery.js,layer.js,daterange.js,pagenum.js,datepicker.js,template.js,wangedit.js等

为啥才这么几个文件?

比如权限的列表页面为pasteform/index.html?pathroleInfo,而用户的列表页面为pasteform/index.html?pathuserInfo

对应的表单页面为pasteform/view.html?pathroleInfo和pasteform/view.html?pathuserInfo

实现原理

在执行UI之前获取对应的模型的模型内容比如新增的时候获取对应的AddDto模型的模型属性包括不限于包含了哪些属性(是否禁用add,edit,del等)有哪些字段字段的特性是哪些还有就是字段的默认值

同理在编辑的时候,会把要编辑的主键带入API中先查询这个UpdateDto的模型数据然后基于ID获取这个模型的值组合后返回给前端

至于表格,请求的时候要读取ListDto和对应的搜索InputQueryDto的内容

表格页面功能介绍

1.左侧的菜单是采用动态模式的看图的中间部分的菜单类型可以看到和左侧的一一对应

2.右侧区域的功能都是动态的貌似除了关键字输入和搜索按钮是固定的其他都是动态控制的

3.搜索区域的内容和类型由后端的InputQueryXXX的模型来控制

6.列表中支持直接显示外表的对应字段比如父级ID那一列直接显示了父级ID对应的权限的名称

外表输入

支持外表输入比如要查询某一个角色有多少用户那么用户列表中角色ID作为筛选那角色ID不能自己手动输入吧

点击后会弹出角色列表页面选择要查询的然后点击确定就会把对应的值输入到输入框中(显示的是友好名)

时间区间

在Model中时间区间其实是由2个字段表示的开始字段和结束字段当然了结束字段需要配置隐藏如下图

有时候查询需要选择某一个状态比如查询禁用的用户有多少查询状态正常的用户有多少(也就是一个select的选项)

在Model中体现为

一些比如文本文本域数字,开关等的输入和基本的一致,约定输入框的名称为Model对应字段的注释部分的前部分后部分则为placeholder,前后部分使用空格隔开

头像图片

单选有一个问题就是选项是固定的也就是要预先写好如果是动态的则使用外表的模式

外表单选

TestTableAddDto{///summary///姓名

模拟短文本输入////summary[MaxLength(32)][Required]public

string

模拟图片上传////summary[MaxLength(128)][ColumnDataType(image,1,head,60*60)]public

string

模拟文本区域的输入////summary[MaxLength(128)]public

string

模拟富文本前端HTML的是使用wangEditv5////summarypublic

string

一般表示状态内定的有点像Enum,关于Enum后续会支持////summary[ColumnDataType(select,

[{\name\:\日类型\,\value\:0},{\name\:\月类型\,\value\:1},{\name\:\年类型\,\value\:2}])]public

int

这里一般用于外表就是选择其他表的一个数据作为输入内容////summary[ColumnDataType(outer,

gradeInfo,

/summary[ColumnDataType(daterange,dateStart,dateEnd)]public

DateTime

/summary[ColumnDataType(hidden)]public

DateTime

在编辑模式中有一个特别的就是外表显示比如上面的外表选择中的选择父级则在编辑中是这样的

对于上面其实比较纠结的地方应该就是字段的特性ColumnDataType

image

字段类型示例说明args1数字1图片数量args2字符cate存放在什么位置上传图片的时候会附带到参数type中args3字符60*60图片是否需要压缩压缩的宽高不压缩的设置为0,比如60*0args4字符arr或str默认值str对应字段的类型是array类型还是string类型如果是string类型多个之间用,隔开

head

字段类型示例说明args1数字1图片数量args2字符cate存放在什么位置上传图片的时候会附带到参数type中args3字符60*60图片是否需要压缩压缩的宽高不压缩的设置为0,比如60*0args4字符arr或str默认值str对应字段的类型是array类型还是string类型如果是string类型多个之间用,隔开

region

字段类型示例说明args1字符region表示地址选择的层级可选region和sub-districtargs2字符str可用值str或者arr

outer

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

outers

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

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

outerdisplay

ListDto中用于外表的显示比如有字段cateInfoId,对应的ExtendCateInfo要标记为outerdisplay,args2配置为extendCateInfo?.name

‘’,否则会显示为[object

字段类型示例说明args1字符cateInfoId表示这个字段的值一般不显示args2字符extendCateInfo?.name

‘’表示显示的名称友好名称需要后端支持,在前端会处理成.display

navigator

表示这个值需要使用页面从另外一个列表中获取这里表示小程序端的,建议使用outer

outerdisplay

‘’表示显示cate.name或者空这个一般用于ListDto中args2字符cateInfo外表的名称对应模板的path可以为空args3字符/pages/cate/index/?modelselect如果对应的表不用模板则直接表示路径

datetime

表示隐藏这个字段一般是主键ID或者外表链接过来的会这配置比如需要给cate添加子项则添加由cate那边过来

这个也适用于ListDto

字段类型示例说明args1字符bind如果不填表示隐藏如果填写了表示页面的query中modelxxx的时候不隐藏,表示非xxx的时候隐藏xxx的时候不隐藏

password

字段类型示例说明args1字符cateid表示使用url中的哪个参数读取值

readyonly

如果是字符串没有设置maxlength默认就会变更成richtext也可以手动强制配置

textarea

如果是字符串设置maxlength且设置的值大于128默认就会变更成textarea也可以手动强制配置

select

字段类型示例说明args1字符[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]表示单选的可选值name是显示

value是值args2字符表示值得类型这里是单个跟随主类型走

selects

字段类型示例说明args1字符[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]表示单选的可选值name是显示

value是值args2字符str表示值得类型是一个数组还是字符串如果是字符串则使用逗号隔开

sort

这个用于表格显示一般表示用于显示外表的数据,这个将弃用使用outerdisplay替换

字段类型示例说明args1字符extendCate.name显示的外表链接示例extendCate?.name

width

表示这个字段在表格得宽度可以为*或者对应得数字,是表格得列的宽度的权重,这个适用于ListDto

字段类型示例说明args1字符60表示这个列的宽度可以为数字也可以是*比如3*这样

orderby

表示基于哪个字段进行排序,这个一般是ListDto表示表格中可以基于哪个字段进行排序查询

字段类型示例说明args1字符id表示使用id正序排序args2字符id

desc表示使用倒叙排序

前端表示使用datalist作为选择数据源前端需要把datalist的id赋值给datalistid默认为字段name,这个规则适用于表单和QueryDto

字段类型示例说明args1字符[{“name”:“正常”,“value”:“1”,“selected”:true}]JSON的字符串也可以为空args2字符data_pro表示调用哪个datalist数据表示datalist的id,和args1互斥args3字符read_pro_datalist()表示需要使用eval执行哪个函数一般和args2配合使用和args1互斥

daterange

主字段需要设置为daterange,其他字段需要设置hidden,在最后组合数据的时候会基于参数生成对应的,应该要设置为可null格式

字段类型示例说明args1字符sdate表示开始时间最后会传送yyyy-MM-dd

00:00:00的格式数据args2字符edate表示结束时间如果你选择2024-08-31,最后上送的会是2024-08-31

00:00:00

特殊限定限定于class的表示禁用这个模型的哪些功能这个一般用于ListDto因为这些功能都在列表页面

字段类型示例说明args1字符add表示忽略新增也就是不显示新增按钮args2字符edit表示忽略编辑表示列表中没有编辑的这个选项,有些数据只能看不需要新增和编辑args3字符del表示这个表没有删除页面UI中不需要删除按钮

1.index.js和view.js有很多重复的函数可以考虑把他们2个综合一下后续好维护

2.一些特殊的常用的功能的实现比如作者的PasteSpider中大量的使用了datalist

3.如何在小程序上接入毕竟这个项目的初衷就是为了解决小程序上大量表单输入和编辑的问题而提出的方案

案例项目和项目模板视频如下

PasteTemplate项目模板的制作过程和最佳CRUD的实现介绍解放重复的CRUD操作

项目源码