[含视频和源码]CRUD的最佳实践,联动前后端,包含微信小程序,API,HTML等(三)

2024-09-07 13:12

本文主要是介绍[含视频和源码]CRUD的最佳实践,联动前后端,包含微信小程序,API,HTML等(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

关说不练假把式,在上一,二篇中介绍了我心目中的CRUD的样子
在这里插入图片描述

基于之前的理念,我开发了一个命名为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等

为啥才这么几个文件?

看上图至少有4个表为啥才这么几个文件?
文件复用了
比如权限的列表页面为pasteform/index.html?path=roleInfo,而用户的列表页面为pasteform/index.html?path=userInfo
对应的表单页面为pasteform/view.html?path=roleInfo和pasteform/view.html?path=userInfo
在这里插入图片描述

实现原理

在执行UI之前,获取对应的模型的模型内容,比如新增的时候,获取对应的AddDto模型的模型属性,包括不限于,包含了哪些属性(是否禁用add,edit,del等),有哪些字段,字段的特性是哪些,还有就是字段的默认值!
同理在编辑的时候,会把要编辑的主键带入API中,先查询这个UpdateDto的模型数据,然后基于ID获取这个模型的值,组合后返回给前端
至于表格,请求的时候要读取ListDto和对应的搜索InputQueryDto的内容!

表格页面功能介绍

在这里插入图片描述
从上图中可以看到大概几个要点!
1.左侧的菜单是采用动态模式的,看图的中间部分的菜单类型可以看到和左侧的一一对应!
2.右侧区域的功能都是动态的,貌似除了关键字输入和搜索按钮是固定的,其他都是动态控制的
3.搜索区域的内容和类型由后端的InputQueryXXX的模型来控制
4.新增,编辑和删除按钮由对应模型的ListDto控制
5.列表中支持排序,比如上图的ID,排序,层级等
6.列表中支持直接显示外表的对应字段,比如父级ID那一列,直接显示了父级ID对应的权限的名称
7.支持状态快编,也就如上图的switch,这个是可以交互的!

外表输入

在这里插入图片描述
支持外表输入,比如要查询某一个角色有多少用户,那么用户列表中,角色ID作为筛选,那角色ID不能自己手动输入吧
点击后,会弹出角色列表页面,选择要查询的,然后点击确定,就会把对应的值输入到输入框中(显示的是友好名)
在这里插入图片描述
在Model中是这样配置外表选择的
在这里插入图片描述

时间区间

有些时候需要查询时间区间,比如本月新增的用户有多少
在这里插入图片描述
在Model中,时间区间其实是由2个字段表示的,开始字段和结束字段,当然了结束字段需要配置隐藏,如下图

单选

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

在这里插入图片描述
在Model中体现为:
在这里插入图片描述

表单页面功能介绍

表单页面也就是新增数据,或者编辑,如下

基本输入

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

头像图片


不单单支持单图,还支持多图模式!

富文本模式

在这里插入图片描述
系统采用的是wangEdit v5的版本

时间模式

时间上支持单时间和时间区间模式
在这里插入图片描述

单选模式

在这里插入图片描述
单选有一个问题,就是选项是固定的,也就是要预先写好,如果是动态的,则使用外表的模式

外表单选

在这里插入图片描述
点击和表格那边的操作模式是一样的
在这里插入图片描述
要实现这些功能,只需要在对应的Model做属性的标记即可,如下

    ///<summary>///测试表 用于测试CURD的表///</summary>public class TestTableAddDto{///<summary>///姓名 模拟短文本输入///</summary>[MaxLength(32)][Required]public string Name { get; set; }///<summary>///头像 模拟图片上传///</summary>[MaxLength(128)][ColumnDataType("image","1","head","60*60")]public string Head { get; set; }///<summary>///年龄 模拟输入number///</summary>[Range(5, 90, ErrorMessage = "年龄必须限定在5~90之间!")]public int Age { get; set; }///<summary>///文本区域 模拟文本区域的输入///</summary>[MaxLength(128)]public string Desc { get; set; }///<summary>///富文本 模拟富文本,前端HTML的是使用wangEditv5///</summary>public string Blog { get; set; }///<summary>///加入日期 模拟必填时间的输入///</summary>public DateTime JoinDate { get; set; }///<summary>///单选 一般表示状态,内定的,有点像Enum,关于Enum后续会支持///</summary>[ColumnDataType("select", "[{\"name\":\"日类型\",\"value\":0},{\"name\":\"月类型\",\"value\":1},{\"name\":\"年类型\",\"value\":2}]")]public int DateType { get; set; }///<summary>///角色ID 这里一般用于外表,就是选择其他表的一个数据作为输入内容///</summary>[ColumnDataType("outer", "gradeInfo", "", "id", "name")]public int GradeId { get; set; }///<summary>///成绩 模拟前端限定2位小数///</summary>public double Score { get; set; }/// <summary>/// 会员周期 会员生效区间/// </summary>[ColumnDataType("daterange","dateStart","dateEnd")]public DateTime DateStart { get; set; }/// <summary>/// 会员周期 会员生效区间/// </summary>[ColumnDataType("hidden")]public DateTime DateEnd { get; set; }}

至于编辑模式,其实编辑模式和新增模式的字段属性标记同样适用!
在编辑模式中有一个特别的,就是外表显示,比如上面的外表选择中的选择父级,则在编辑中是这样的
在这里插入图片描述

补充

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

image

相对于后面的 head 来说,这里是大图模式,在ListDto中表示使用图片的模式渲染

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

head

使用方式同 image 这里表示的是小图标模式

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

region

小程序中的地区选择,可以配置精确度,到区还是到县

字段类型示例说明
args1字符region表示地址选择的层级,可选region和sub-district
args2字符str可用值str或者arr 表示返回的数据类型,str的时候用,隔开

outer

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

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

outers

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

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

outerdisplay

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

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

navigator

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

字段类型示例说明
args1字符cate.name || ‘’表示显示cate.name或者空这个一般用于ListDto中
args2字符cateInfo外表的名称,对应模板的path,可以为空
args3字符/pages/cate/index/?model=select如果对应的表不用模板,则直接表示路径

datetime

默认的yyyy-MM-dd HH:mm:ss的格式

字段类型示例说明
args1字符yyyy-MM-dd HH:mm:ss表示时间使用的格式

hidden

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

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

password

密码框模式

query

需要和 hidden 配合使用一般,表示在表单的时候使用哪个参数作为数据

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

readyonly

表示这个字段是只读的,一般是编辑的时候生效

richtext

如果是字符串,没有设置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

表示排序,表示字段的顺序,一般表格比较会使用这个

字段类型示例说明
args1数字0小的排在前面,默认为0

link

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

字段类型示例说明
args1字符extendCate.name显示的外表链接,示例extendCate?.name || ''表示显示cate.name或者空这个一般用于ListDto中

width

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

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

orderby

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

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

datalist

前端表示使用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
args3字符yyyy-MM-dd 00:00:00表示时间的格式化,默认使用yyyy-MM-dd 00:00:00

disable

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

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

目前还在思考有哪些常用的需要添加进来,

目前还是缺少很多东西的
1.index.js和view.js有很多重复的函数,可以考虑把他们2个综合一下,后续好维护
2.一些特殊的常用的功能的实现,比如作者的PasteSpider中大量的使用了datalist
3.如何在小程序上接入,毕竟这个项目的初衷就是为了解决小程序上大量表单输入和编辑的问题而提出的方案
4.后续大家如何使用,如何按照自己的需求修改规则等

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

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

项目源码
项目源码已放置Gitee,点击访问

我们下期见

这篇关于[含视频和源码]CRUD的最佳实践,联动前后端,包含微信小程序,API,HTML等(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145151

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

Java ArrayList扩容机制 (源码解读)

结论:初始长度为10,若所需长度小于1.5倍原长度,则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1:数组默认长度         2:这是一个共享的空数组实例,用于明确创建长度为0时的ArrayList ,比如通过 new ArrayList<>(0),ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL