前端编辑页面修改后和原始数据比较差异

在软件研发过程中,会遇到很多编辑页面,有时编辑页面和新增页面长的基本上一样,甚至就是一套页面供新增和编辑共用。编辑页面的场景比较多,例如:

场景一、字段比较多,但实际只修改了几个字段,如果把所有字段都回传给后端,冗余字段(未作变更的字段)修改就会有很多,而这些未作变更的字段中还有一些字段是后台有翻译和转换的(例如金额、类型、状态等),如果把这样的字段回传给后台,就会造成数据的变更(其实不想变更),和预期是严重不符的。

场景二、还有一些比较复杂的编辑页面,它会有大集合嵌套小集合,甚至还有多层嵌套的场景,在修改时,可能对各个层级的集合又有一些新增、修改、删除的操作。

场景三、场景一和场景二的混合场景。

基于这些复杂的场景,如果能够的精确的区分开哪些做了新增、哪些做了变更、哪些删掉了,就会让我们的前后端研发小伙伴更轻松的应对这些复杂场景。

接下来,我把我对这种复杂场景的处理方案分享出来,大家可以参考,共同探讨,看看还有没有更好的解决方案(前端使用的是vue的环境):

处理原理:
1、进入编辑页面时,将查询出来的数据复制成两份,一份作为初始数据,一份作为修改数据
2、比对初始数据和修改数据的差异(新增的、修改的、删除的)
3、将差异数据提交给后台,后台进行分门别类处理

比对算法:

/**
 * 比较两个对象的差异
 * 应用场景:编辑页面中,表单字段比较多(主页面,明细页面),而修改项很少,只需要将修改的字段和必要字段传递给后台就可以,不用传递表单中的所有字段(默认是传递所有字段)
 * @param {Array/Object} original 原始对象
 * @param {Array/Object} modified 修改后对象
 * @param {Array} primaryKeys 主键(后台是根据主键修改数据)
 * @param {Array} excludeKeys 过滤字段(不参与比较的字段)
 * @return {Object} diffObject 返回有变更的对象字段
 */
export function obtainingObjectsDiffrences(original, modified, primaryKeys = ['id'], excludeKeys = []) {
  let diffObject = {}
  // 如果当前为数组,先分别区分哪些需要新增、修改、删除
  if (typeof original === 'object' && Array.isArray(original) && typeof modified === 'object' && Array.isArray(modified)) {
    diffObject = subObtainingObjectsDiffrences(original, modified, primaryKeys, excludeKeys)
  } else if (typeof original === 'object' && typeof modified === 'object') {
    // 当前对象字段是否有变更
    let levelDiffFlag = false
    // 主键
    let primaryKey
    for (const key in original) {
      if (!excludeKeys.includes(key)) {
        if (typeof original[key] === 'object' && Array.isArray(original[key]) && typeof modified[key] === 'object' && Array.isArray(modified[key])) {
          const subDiffObject = subObtainingObjectsDiffrences(original[key], modified[key], primaryKeys, excludeKeys)
          if (Object.keys(subDiffObject).length !== 0) {
            diffObject[key] = subDiffObject.modifiedArray
            diffObject[key + 'New'] = subDiffObject.newArray
            diffObject[key + 'Removed'] = subDiffObject.removedArray
          }
        } else if (typeof original[key] === 'object' && typeof modified[key] === 'object') {
          const subDiffObject = obtainingObjectsDiffrences(original[key], modified[key], primaryKeys, excludeKeys)
          if (Object.keys(subDiffObject).length !== 0) {
            diffObject[key] = subDiffObject
          }
        } else if (original[key] !== modified[key]) {
          // 更新modifiedData对象中的属性值
          diffObject[key] = modified[key]
          levelDiffFlag = true
        }
      }
      if (primaryKeys.includes(key)) {
        primaryKey = key
      }
    }
    // 设置主键字段值
    if (levelDiffFlag && primaryKey !== undefined) {
      diffObject[primaryKey] = original[primaryKey]
    }
  }
  return diffObject
}

/**
 * 比对数组之间的差异(新增、修改、删除)
 * @param {Array} original 原始数组
 * @param {Array} modified 修改后的数组
 * @param {Array} primaryKeys 主键列表
 * @param {Array} excludeKeys 不参与比对的字段
 * @return {Object} diffObject 返回有差异的数组
 */
function subObtainingObjectsDiffrences(original, modified, primaryKeys, excludeKeys) {
  const diffObject = {}
  // 子列表主键
  let subPrimaryKey
  for (const key in original[0]) {
    if (primaryKeys.includes(key)) {
      subPrimaryKey = key
    }
  }
  // 具有相同主键的初始列表
  const commonOrignal = original.filter(itemA => modified.some(itemB => itemA[subPrimaryKey] === itemB[subPrimaryKey]))
  // 具有相同主键的修改列表
  const commonModified = modified.filter(itemA => original.some(itemB => itemA[subPrimaryKey] === itemB[subPrimaryKey]))
  // 删除列表
  const removedArray = original.filter(itemA => !modified.some(itemB => itemA[subPrimaryKey] === itemB[subPrimaryKey]))
  if (removedArray.length !== 0) {
    diffObject.removedArray = removedArray
  }
  // 新增列表
  const newArray = modified.filter(itemA => !original.some(itemB => itemA[subPrimaryKey] === itemB[subPrimaryKey]))
  if (newArray.length !== 0) {
    diffObject.newArray = newArray
  }
  // 修改条目:如果属性值是对象,则递归调用obtainingObjectsDiffrences进行比较
  const modifiedArray = []
  commonOrignal.forEach(subOrignal => {
    const subModified = commonModified.filter(item => item[subPrimaryKey] === subOrignal[subPrimaryKey])[0]
    const subModifiedObject = obtainingObjectsDiffrences(subOrignal, subModified, primaryKeys, excludeKeys)
    if (Object.keys(subModifiedObject).length !== 0) {
      modifiedArray.push(subModifiedObject)
    }
  })
  if (modifiedArray.length !== 0) {
    diffObject.modifiedArray = modifiedArray
  }
  return diffObject
}

调用示例:

const originalUserList = [{
        userId: 'a1',
        username: 'tom',
        password: '123456',
        remarks: 'asdfasdfadsf',
        roles: [{
          roleId: 'r1',
          roleName: '管理员',
          remarks: 'asdfasdfadsf',
          menus: [{
            menuId: 'm1',
            menuName: '用户管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm2',
            menuName: '角色管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm3',
            menuName: '菜单管理',
            remarks: 'asdfasdfadsf'
          }]
        }]
      }, {
        userId: 'a2',
        username: 'cat',
        password: '123456',
        remarks: 'asdfasdfadsf',
        roles: [{
          roleId: 'r1',
          roleName: '管理员',
          remarks: 'asdfasdfadsf',
          menus: [{
            menuId: 'm1',
            menuName: '用户管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm2',
            menuName: '角色管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm3',
            menuName: '菜单管理',
            remarks: 'asdfasdfadsf'
          }]
        }]
      }]
      const modifiedUserList = [{
        userId: 'a1',
        username: 'tom',
        password: '123456789',
        remarks: 'asdf',
        roles: [{
          roleId: 'r1',
          roleName: '管理员',
          remarks: 'asdf',
          menus: [{
            menuId: 'm1',
            menuName: '企业管理',
            remarks: 'asdf'
          }, {
            menuId: 'm3',
            menuName: '菜单管理',
            remarks: 'asdf'
          }]
        }]
      }, {
        userId: 'a3',
        username: 'tom1',
        password: '12345686',
        remarks: 'asdfasdfadsf',
        roles: [{
          roleId: 'r1',
          roleName: '管理员',
          remarks: 'asdfasdfadsf',
          menus: [{
            menuId: 'm1',
            menuName: '用户管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm2',
            menuName: '角色管理',
            remarks: 'asdfasdfadsf'
          }, {
            menuId: 'm3',
            menuName: '菜单管理',
            remarks: 'asdfasdfadsf'
          }]
        }]
      }]
      const diff = obtainingObjectsDiffrences(originalUserList, modifiedUserList, ['userId', 'roleId', 'menuId'], ['remarks'])
      console.log('原始列表', originalUserList)
      console.log('修改列表', modifiedUserList)
      console.log('差异列表', diff)

调用结果:

 结语

1、对于比较差异的返回字段的命名,前后端小伙伴可以商量着来

2、如果后端的新增保存方法是saveOrUpdate的通用方法,前端可以把对应的新增列表和修改列表合并了

3、如果后端的删除是removeByIds的方法,前端可以把返回的removeArray再按照主键过滤一下

4、注意2和3是要后端统一进行事务处理的,不要前端单独调用后端新增的、修改的、删除的方法

这是我的处理方案,供参考,如果有更有方案可以一起探讨

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

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

相关文章

STM32/AT32 MCO管脚输出时钟配置

前言:最近在学以太网通讯,发现RMII接口配置的时钟管脚有MCU自己输出,想要看看是怎么输出的,对此进行记录 1、交接项目项目上使用的是PA8管脚来输出时钟50MHZ,提供给上面refclk。 先看手册 PA8的复用功能具备将MCU时钟…

分布式链路追踪——Dapper, a Large-Scale Distributed Systems Tracing Infrastructure

要解决的问题 如何记录请求经过多个分布式服务的信息,以便分析问题所在?如何保证这些信息得到完整的追踪?如何尽可能不影响服务性能? 追踪 当用户请求到达前端A,将会发送rpc请求给中间层B、C;B可以立刻作…

算法:双指针解决数组划分和数组分块问题

文章目录 实现原理实现思路典型例题移动0复写0快乐数盛最多水的容器有效三角形的个数三数之和四数之和 总结 在快速排序或者是其他和数组有关的题目中,有很经典的一类题目是关于数组划分的,数组划分就是把数组按照一定的规则划分为不同的区间&#xff0c…

【【典型电路设计之片内存储器的设计之RAM的Verilog HDL描述一】】

典型电路设计之片内存储器的设计之RAM的Verilog HDL描述一 RAM是随机存储器,存储单元的内容可按需随意取出或存入。这种存储器在断电后将丢失所有数据,一般用来存储一些短时间内使用的程序和数据。 其内部结构如下图所示: 例:用…

PL 侧驱动和fpga 重加载的方法

可以解决很多的问题 时钟稳定后加载特定fpga ip (要不内核崩的一塌糊涂)fpga 稳定复位软件决定fpga ip 加载的时序 dluash load /usr/local/scripts/si5512_setup.lua usleep 30 mkdir -p /lib/firmware cp -rf /usr/local/firmare/{*.bit.bin,*.dtbo} …

拥塞控制(TCP限制窗口大小的机制)

拥塞控制机制可以使滑动窗口在保证可靠性的前提下,提高传输效率 关于滑动窗口的属性以及部分机制推荐看TCP中窗口和滑动窗口的含义以及流量控制 拥塞控制出现的原因 看了上面推荐的博客我们已经知道了,由于接收方接收数据的能力有限,所以要通…

LLM架构自注意力机制Transformers architecture Attention is all you need

使用Transformers架构构建大型语言模型显著提高了自然语言任务的性能,超过了之前的RNNs,并导致了再生能力的爆炸。 Transformers架构的力量在于其学习句子中所有单词的相关性和上下文的能力。不仅仅是您在这里看到的,与它的邻居每个词相邻&…

Go语言入门指南:基础语法和常用特性(下)

上一节,我们了解Go语言特性以及第一个Go语言程序——Hello World,这一节就让我们更深入的了解一下Go语言的**基础语法**吧! 一、行分隔符 在 Go 程序中,一行代表一个语句结束。每个语句不需要像 C 家族中的其它语言一样以分号 ;…

Ajax介绍

1.与服务器进行数据交换:通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据。 2.异步交互:可以在 不重新加载整个页面 的情况下,与服务器交换数据并 更新部分网页 的技术,如: 搜索联想、用户名是否可…

ChatGpt开源项目完美运行配置-ChatGml2

(以下所有软件均可免费在网盘获取。) 任务描述 本节任务是安装和配置chatgpt项目所需的软件以及chatgpt项目所需要的python库包,同时编写python代码来完成chatgpt项目的人机对话功能。 实验工具 显卡GTX1070(专用内存需要大于等…

[JavaWeb]【五】web后端开发-Tomcat SpringBoot解析

目录 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2.3 关闭TOMCAT 2.4 常见问题 2.5 修改端口号 2.6 部署应用程序 三 SpringBootWeb入门程序解析 前言:tomcat与SpringBoot解析 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2…

BOXTRADE-天启量化分析平台 系统功能预览

BOXTRADE-天启量化分析平台 系统功能预览 系统功能预览 1.登录 首页 参考登录文档 2. A股 行情与策略分析 2.1 A股股票列表 可以筛选和搜索 2.2 A股行情及策略回测 2.2.1 行情数据提供除权和前复权,后复权数据;外链公司信息 2.2.2 内置策略执行结果…

matlab 检测点云中指定尺寸的矩形平面

目录 一、概述1、算法概述2、主要函数二、代码示例三、结果展示四、参数解析输入参数名称-值对应参数输出参数五、参考链接一、概述 1、算法概述 detectRectangularPlanePoints:检测点云中指定尺寸的矩形平面 <

git快速入门

常用指令 git config --global user.email yinweitingptxinke.com git config --global user.name yinweiting git commit -m "日志消息" filename git reflog 查看精简版本信息 git log 查看详细版本信息 注意:这里设置的用户签名和将来登录的GitHub的账号没有任…

【HCIP】01.RSTP

STP的缺点 STP对计时器的依赖&#xff08;需要等固定30s&#xff09;STP重收敛速度过程慢&#xff08;30s或50s&#xff09;拓扑变化机制太慢&#xff08;高度中央集权&#xff0c;需要上报到根桥再下发TCN&#xff09; RSTP 802.1W&#xff0c;收敛速度更快&#xff0c;能够…

Python程序设计基础:random库的使用

文章目录 一、常见的random库函数二、应用实例 一、常见的random库函数 在使用Python语言进行编程计算时&#xff0c;计算机完成的计算主要是确定的&#xff0c;但是在将其进行应用时&#xff0c;人们会模拟现实生活中的现象和活动&#xff0c;希望其增加一些随机性&#xff0…

econml介绍

EconML简介 EconML: A Python Package for ML-Based Heterogeneous Treatment Effects Estimation EconML是一个通过机器学习方法从观察数据中估计heterogeneous treatment effects的Python包。该软件包是微软研究院ALICE项目的一部分&#xff0c;目的是将最新的机器学习方法…

神经网络改进:注重空间变化,权重参数调整,正则化, 熵的简单理解

目录 神经网络改进&#xff1a;注重空间变化 将高纬空间映射到地位空间便于表示&#xff08;供给数据&#xff09; 将地位空间映射到高纬空间进行分类聚合&#xff08;达到可分状态&#xff08;K-means&#xff09;&#xff09; 神经网络改进&#xff1a;权重参数调整 自注…

【RabbitMQ】RabbitMQ整合SpringBoot案例

文章目录 1、前情提要【RabbitMQ】2、RabbitMQ-SpringBoot案例 -fanout模式2.1 实现架构总览2.2 具体实现2.2.1生产者2.2.1消费者 1、前情提要【RabbitMQ】 【RabbitMQ】消息队列-RabbitMQ篇章 RabbitMQ实现流程 2、RabbitMQ-SpringBoot案例 -fanout模式 2.1 实现架构总览…

maven打出jar中动态替换占位符

使用场景&#xff1a; maven打出的jar中pom.xml动态替换占位符 有些时候某些公共工具jar包被项目引用后发现公共jar的pom.xml中的version依然还是占位符&#xff0c;例如下面 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok<…