CRUD的最佳实践,联动前后端,包含微信小程序,API,HTML等(二)

CRUD老生常谈,但是我搜索了一圈,发觉几乎是着重在后端,也就是API部分!
无外乎2个思路
1.归总的接口,比如一个接口,实现不同表的CRUD
2.基于各自的表,使用代码生成器实现CRUD
个人来说是推荐2,虽然代码多了,其实结构更加清晰,而且!而且!后端对安全尤为重要!!!
啥?你说前端就不安全了???
前端!那不叫安全,那叫用户体验,体验懂否?
后端!那才是安全关口!重要的门户!!!!
如果使用1的方式,你会发觉到后续代码越来越臃肿,各种判断,到最后就像上了重庆的立交桥转个不停!
上次我们说到小程序的页面表单的动态化,先看下本次的要点
在这里插入图片描述
既然是系统,那肯定也少不了后台管理端的了,这里我使用的是原生的HTML,如果你喜欢那个VUE,其实可以按照这个思想自己实现!

##!!!VUE是前端点歪了技能树的产物!!!##

WebApi新增

距离上次的一发布后,后端接口我做了如下的调整!在WebApi中

        /// <summary>/// 读取AddDto的数据模型/// </summary>/// <returns></returns>[HttpGet]public PasteBuilderHelper.VoloModelInfo ReadAddModel(){var _model = PasteBuilderHelper.ReadModelProperty<WebsiteNoticeAddDto>(new WebsiteNoticeAddDto());return _model;}/// <summary>/// 读取UpdateDto的数据模型/// </summary>/// <returns></returns>[HttpGet]public async Task<PasteBuilderHelper.VoloModelInfo> ReadUpdateModel(int id){var _info = await _dbContext.WebsiteNotice.Where(x => x.Id == id).AsNoTracking().FirstOrDefaultAsync();if (_info != null && _info != default){var dto = ObjectMapper.Map<WebsiteNotice, WebsiteNoticeUpdateDto>(_info);var _dataModel = PasteBuilderHelper.ReadModelProperty<WebsiteNoticeUpdateDto>(dto);return _dataModel;}var _model = PasteBuilderHelper.ReadModelProperty<WebsiteNoticeUpdateDto>(new WebsiteNoticeUpdateDto());return _model;}/// <summary>/// 读取ListDto的数据模型/// </summary>/// <returns></returns>[HttpGet]public PasteBuilderHelper.VoloModelInfo ReadListModel(){var _model = PasteBuilderHelper.ReadModelProperty<WebsiteNoticeListDto>(new WebsiteNoticeListDto());var _query_model = PasteBuilderHelper.ReadModelProperty(new InputQueryWebsiteNotice());if (_query_model != null){_model.QueryProperties = _query_model.Properties;}return _model;}

注意看上面的,加了ListDto和InputQueryWebsiteNotice
InputQueryWebsiteNotice是什么鬼?

        /// <summary>/// 按页查询对象/// </summary>/// <param name="input"></param>/// <returns></returns>[HttpGet]public async Task<PagedResultDto<WebsiteNoticeListDto>> Page([FromQuery] InputQueryWebsiteNotice input){var _query = _dbContext.WebsiteNotice.Where(t => 1 == 1);var _pagedto = new PagedResultDto<WebsiteNoticeListDto>();if (input.page == 1){_pagedto.TotalCount = await _query.CountAsync();}var dataList = await _query.OrderByDescending(x => x.Id).Page(input.page, input.size).AsNoTracking().ToListAsync();if (dataList == null || dataList.Count == 0){throw new PasteSoftException("没有查询到数据", 204);}var temList = ObjectMapper.Map<List<WebsiteNotice>, List<WebsiteNoticeListDto>>(dataList);_pagedto.Items = temList;return _pagedto;}

看上面,知道了吧?说白点就是列表的时候的查询项!
啥玩意???咋查询搞里面去了???

查询支持

看最新的页面
在这里插入图片描述
上面是某一个表的对应的列表的页面,上面的信息中,处理下方的页码,上方的新增,查询和刷新按钮,其他的都是后端控制的!!!
对,是其他的所有的(表格的线不算哈!),比如这个表对应有几个查询项,就是上面举例子的
InputQueryWebsiteNotice控制的!
以下是页面打开后第一次获取的数据模型数据
在这里插入图片描述
通过读取对应的Dto的内容,控制前端的UI
看下我的查询的模型

    /// <summary>/// 站点公告查询 站点公告的查询项/// </summary>public class InputQueryWebsiteNotice: InputSearchBase{/// <summary>/// 标题 点击键入基于标题查询/// </summary>[MaxLength(16)]public string title { get; set; } = "";/// <summary>/// 状态 默认值为-1表示不查询/// </summary>public int state { get; set; } = -1;/// <summary>/// 开关 基于开关类型查询/// </summary>public bool status { get; set; } = false;/// <summary>/// 开始日期/// </summary>public DateTime? sdate { get; set; } = null;/// <summary>/// 结束日期/// </summary>public DateTime edate { get; set; }}

如何给定其他属性,比如必填,默认值等?
其实只要和Dto一样,把对应的Attribute标注上去即可,数据模型的规则传递给前端后,前端根据规则生成UI即可!
这里有几个规定
对于DateTime类型,如果可为null的,也就是标注了 ?的则数据类型为DateTime ,其中required为false
如果不为Null类型的,则数据类型为DateTime,其中required为true

总结优势

那是不是意味着,一个项目的管理端可以做到只有4个页面!!!
1.登陆到页面
2.菜单页面
3.对应表的列表显示页面,显示表格数据等,兼顾外表的选择!
4.表单页面,兼顾新增,编辑
4个页面即可实现项目的后台管理端,涉及的功能包括不限于,图片上传等,数据列表展示,表单的新增和编辑,日期选择等!
关键点,页面的代码不多,比如我的表格数据页面的代码行才300行不到!
表单页面的代码才500行不到
我的测试页面有些规则还没有提取出来,比如数据项的格式校验等!

需要注意点

数据类型

由于涉及不同端,在数据类型上肯定有不一样的地方,比如后端的存储类型为string,在前端的表示就很多了,
比如昵称,签名内容,文章描述,文章内容,头像的地址,甚至日期等都可以使用string表示,这就需要一个协商,也就是转化,把后端类型转化,翻译成前端类型的函数,这个需要使用方自己实现,和后端协商一致即可!
比如我的规则,如果String类型,长度没有限制,则在前端翻译成richtext,如果长度小于128限定,则为text,如果长度>128则为textarea

指定类型

有些类型,后端没有,或者是没法表示,因为我们的原则是尽量后端控制前端,比如images,比如region,这就需要我们后端在模型上动手脚了!
比如我的一个案例

    /// <summary>/// 用于标记字段有查询的属性/// </summary>public class DataTypeAttribute : Attribute{/// <summary>/// /// </summary>private string Name { get; set; }/// <summary>/// /// </summary>public DataTypeAttribute(string _name = ""){Name = _name;}/// <summary>/// /// </summary>/// <returns></returns>public override string ToString(){return Name.ToString();}}

上面这个属性是自定义的,可以自己命名,后面前端基于这个进行处理即可,比如:

        /// <summary>/// 头像/// </summary>[DataType("image")]public string Head { get; set; }

这样前端在遇到这个字段的时候,读取到他的属性DataType为image,那么前端对这个字段进行渲染的时候,就使用image的类型来处理!
同样的道理,你可以实现更多的,比如单选,选项内容,等可以通过自定义的属性来实现!

写在最后

通过以上的思路,我们可以实现
1.安全,所有的属性信息是dto模块的,我们开放给前端的,前端才能够查询到
2.对模型的字段的规则,前后端都支持,前端是为了体验,后端是为了安全!
3.我们不需要为了新增一个字段而去修改前端了!

目前的代码还在完善中,后续我们会把这个功能添加到PasteTemplate(.netCore的WebApi项目模板)和PasteBuilder右键代码生成器中!

下期,作者将提供实际项目的案例展示,和其中做的一些处理等!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/409729.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Harmony鸿蒙应用开发:解决Web组件加载本地资源跨域

鸿蒙开发文档中有一节 加载本地页面 提到了可以通过 $rawfile 方法加载本地 HTML 网页&#xff1a; Index.ets 1Web({ src: $rawfile("local.html"), controller: this.webviewController })但是如果在 local.html 中需要引用一些静态资源&#xff0c;例如图片、JS、…

MMS论文中关于语种识别的内容摘要

MMS论文中关于语种识别的内容摘要 前言语种识别相关内容实验结论 前言 摘要翻译一些内容。 论文地址请看这里 语种识别相关内容 Whisper支持LID&#xff0c;可以区分99种不同的语言&#xff1b;有人使用wav2vec 2.0实现LID&#xff0c;数据集中包含10种亚洲语言&#xff1b;…

JavaScript - Ajax

Asynchronous JavaScript And XML&#xff0c;异步的JavaScript和XML 作用: 数据交换&#xff1a;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据。异步交互&#xff1a;可以在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新部分网页的技术…

[新手入门]1台电脑+1个电视+2个软件(sunshine+moonlight) 解决黑神话悟空没有hdmi线的痛...

sunshinemoonlight 解决黑神话悟空 本地串流投屏 背景:偶然间在B站发现了sunshinemoonlight方案,替代hdmi线,做本地串流...于是心灵手巧的我开始尝试踩坑之路:1.准备安装包2.开始安装2.1 笔记本windows安装sunshine2.2 遇到了第一个坑.Fatal: ViGEmBus is not installed or run…

无需多部备用机,云手机方便又便宜!

云手机&#xff0c;是云计算技术的又一创新应用&#xff0c;它通过在云服务器上虚拟出带有原生安卓操作系统的手机实例&#xff0c;为用户提供了一种全新的手机使用体验。无需携带多部手机&#xff0c;只需通过云手机&#xff0c;便可轻松实现多账号管理、应用运行及数据存储等…

【物理学】什么是运动学和动力学?

Kinematics 和 Kinetics 是力学中的两个重要分支&#xff0c;它们虽然都涉及物体的运动&#xff0c;但关注的方面不同。 Kinematics&#xff08;运动学&#xff09; Kinematics 主要研究物体的运动&#xff0c;而不涉及导致运动的力。它关注的是运动的几何特性&#xff0c;比…

基于SSM的学生管理系统的设计与实现(包含源码、sql脚本、导入视频教程)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的学生管理系统2拥有三种角色 管理员&#xff1a;学生管理、教师管理、课程管理、个人信息管理等教师&#xff1a;添加课程、录入成绩、查看选课名单和结课、个人信息等学生&…

i.MX6裸机开发(11)——DDR测试

本章参考资料&#xff1a;《IMX6ULRM》(参考手册)。 学习本章时&#xff0c;配合《IMX6ULRM》Chapter 33: Multi Mode DDR Controller (MMDC) 一起阅读&#xff0c;效果会更佳&#xff0c;特别是涉及到寄存器说明的部分。 特别说明&#xff0c;本书内容是以i.MX6U系列控制器资…

SSRF漏洞实现

目录 ssrf简介SSRF(Server-Side Request Forgery:服务器端请求伪造) SSRF题1 前期介绍 方法1&#xff1a;ssrfredis写入webshell 扫ip&#xff1a;端口 使用工具写木马 SSRF题2 ssrffastcgi未授权访问写入webshell 环境搭建&#xff1a; 攻击&#xff1a; ssrf简介 SS…

UE5学习笔记18-使用FABRIK确定骨骼的左手位置

一、在武器的骨骼资产中创建一个新的插槽 二、在动画类中添加代码 xxx.h UPROPERTY(BlueprintReadOnly, Category Character, meta (AllowPrivateAccess "true"))/** 蓝图只读 类型是Character 允许私有访问 */ FTransform LeftHandTransform;//拿武器时知道左手…

【数模资料包】最新数模国赛word+latex模版|数模常用的算法python+matlab代码

【2024最全国赛研赛数模资料包】C君珍贵国一数模资料&#xff5c;最新数模国赛wordlatex模版&#xff5c;数模常用的算法pythonmatlab代码 国赛指&#xff1a;高教社杯全国大学生数学建模竞赛&#xff0c;研赛指&#xff1a;华为杯研究生数学建模竞赛。资料内容具体看文末卡片…

Java:BigDecimal 解决小数运算失真问题

文章目录 BigDecimal代码 BigDecimal 解决小数运算失真问题 解决方法&#xff1a;转换为BigDecimal对象 代码 package com.zhang.math;import java.math.BigDecimal;/*** Author: ggdpzhk* CreateTime: 2024-08-25*/ public class BigDecimalTest {public static void main(…

C++初学者指南-5.标准库(第二部分)–特殊容器

C初学者指南-5.标准库(第二部分)–特殊容器 pair<A , B> 包含两个相同或不同类型的值 tuple<A , B> C11 包含许多相同或不同类型的值 optional C17 包含一个类型为 T 的值或没有值 variant<A,B,C,…> C17 包含一个类型为A、B或C的值…… any C17 包含任…

redis--主从复制,哨兵模式,Redis Cluster模式

源码安装 [rootredis-node1 ~]# tar zxf redis-7.4.0.tar.gz [rootredis-node1 ~]# ls redis-7.4.0 redis-7.4.0.tar.gz#安装编译工具 [rootredis-node1 redis-7.4.0]# dnf install make gcc initscripts-10.11.6- 1.el9.x86_64 -y#执行编译命令 [rootredis-node1 redis-7.4.0…

【计算机网络】名词解释--网络专有名词详解

在网络通信中&#xff0c;有许多专业术语和概念&#xff0c;它们共同构成了网络通信的基础。以下是一些常见的网络术语及其定义和相互之间的关系&#xff1a; 一、网络基础 1.1 电路交换&#xff1a;电路交换是一种在数据传输前建立专用通信路径的通信方式。在通信开始前&…

如何使用ssm实现品牌手机销售信息系统

TOC ssm246品牌手机销售信息系统jsp 第一章 绪 论 1.1背景及意义 系统管理也都将通过计算机进行整体智能化操作&#xff0c;对于品牌手机销售信息系统所牵扯的管理及数据保存都是非常多的&#xff0c;例如管理员&#xff1b;主页、个人中心、用户管理、商品分类管理、商品信…

Linux数据相关第1个服务_备份服务rsync

1、备份服务概述 备份服务&#xff1a;需要使用到脚本&#xff0c;打包备份&#xff0c;定时任务 备份服务&#xff1a;rsyncd 服务&#xff0c;不同主机之间数据传输 特点: rsync是个服务也是命令使用方便&#xff0c;具有多种模式传输数据的时候是增量传输 增量与全量&am…

跟着B站前端面试总结回顾前端基础知识(一)

组件划分标准 组件划分_哔哩哔哩_bilibili 在前端Vue开发中&#xff0c;组件的划分是构建高效、可维护应用的关键步骤。Vue组件的划分标准通常基于多个方面的考虑&#xff0c;包括但不限于功能独立性、复用性、可维护性和可扩展性。以下是一些Vue组件划分的标准&#xff1a; …

使用CORS解决跨域问题

CORS&#xff08;Cross-Origin Resource Sharing&#xff09;跨域资源共享 因为浏览器的同源策略才出现了跨域问题。 CORS是一套机制&#xff0c;用于浏览器校验跨域请求。 它的基本理念是&#xff1a; 只要服务器明确表示允许&#xff0c;则校验通过服务器明确拒绝或没有表…

二分查找【算法 09】

二分查找算法详解 二分查找&#xff08;Binary Search&#xff09;是一种高效的查找算法&#xff0c;前提是数据必须是有序的。相比于线性查找&#xff0c;二分查找的时间复杂度从 O(n) 降低到了 O(log n)&#xff0c;适合处理大规模的数据查找问题。本文将详细介绍二分查找的原…