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

贴代码科技-致力于开发更加适用的应用

已于 2024-09-07 10:31:03 修改

阅读量1.8k

点赞数 28

分类专栏： .net Core 前端 ABP 文章标签： html adb PasteTemplate

于 2024-09-06 21:40:45 首次发布

本文链接：https://blog.youkuaiyun.com/Apeart/article/details/141968620

版权

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

基于之前的理念，我开发了一个命名为PasteTemplate的项目，这个项目呢后续会转化成项目模板，转化成项目模板后，后续需要开发新的项目就可以基于这个模板创建，这样就不要copy一个旧的项目，然后删删删，改改改，重命名等操作了
强迫症，一个项目的名字就得统一，心里才舒服
那么本次作者就带来了实物，本次主要介绍管理端的内容，我们一起来看看
在这里插入图片描述
这个是后台，目前使用的是HTML原生写的，如果说使用VUE的话，会更简单，这个后续看情况推出！
先用原生的原因呢，一是顺手，二是前期是规划期，改动比较多，这个项目开发过程我是录制了视频的，后续会和项目模板一并放出来!

这个管理端有多少代码?

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

文件	大小	行数	说明
login/index.html	8KB	177	登陆页面，账号密码验证码登陆
login.less	9KB	381	登陆页面的样式文件
pasteform/index.html	12KB	212	表格列表页面的主UI页面
pasteform/index.js	22KB	682	表格页面的主逻辑JS页面
pasteform/index.less	14KB	656	表格页面的样式文件
pasteform/view.html	12KB	184	表单新增编辑页面的UI文件
pasteform/view.js	27KB	820	表单新增编辑页面的逻辑JS代码
pasteform/view.less	10KB	499	表单编辑新增页的样式文件
index.html	11KB	225	首页，也就是菜单页面，上图的这个主页面，菜单采用API获取的动态方式
index.less	5KB	311	首页的样式文件
lib/api.js	18KB	598	ajax请求,一些基础函数的转化等,相当于帮助类

还有一些其他的三方组件，比如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,这个是可以交互的！