如何实现一个可视化数据转换的小工具

前端开发过程中,经常有两个不同的组件、或者两个不同的业务模块需要对接,但是双方提供的数据结构又不一致的场景。这个时候就需要一个转换器来实现两个模块无缝对接,通过这个转换器的处理达到数据结构一致的目的。

基本需求梳理

  • 场景中两个相同或者不同数据结构对象,对象是任意数据结构的,对接场景下数据结构是固定的
  • 针对当前场景下转换器处理是相同的
  • 尽量图形化操作就可以换成配置以及预览效果

设计基本思路

实现思路

  • 两个不同的数据结构可以通过字段映射的方式来取值和设置值,实现数据的对接
  • 取值路径和设置值的路径规则最好一条一条保存下来,作为转换器的规则描述
  • 取值路径和设置值路径可以通过lodash的get和set实现
  • 可视化操作可以通过json树的渲染及操作来实现

设计实现思路草图

我根据自己的想法大致设计一下交互方式如下:

实现步骤

json树操作

我找了一下josn树操作的组件,发现react-json-view挺不错的;可以实现值的复制、选择;但是选择是针对叶子节点的,所以这里我使用复制功能来实现,无论是叶子节点还是非叶子节点都可以复制到,(enableClipboard)复制的时候获取当前的path信息即可。另外path多了一层根路径默认是'root',如果不想要操作保存的时候去掉即可。

js 复制代码
// 复制的操作
const enableClipboard = (copy) => {
    const { namespace } = copy;
    if (namespace?.length === 1) { // 复制的根元素
      setSourceKeyPath([])
    } else {
      const curNamespace = namespace.splice(1, namespace.length - 1);
      setSourceKeyPath(curNamespace)
    }
}

路径保存

路径映射保存在数组里。

转换器处理

转换器只需要根据规则数组map处理一下每条规则进行对原数据和目标数据进行取值设置值操作就可以了

js 复制代码
// dataSource 是规则数组
// targetData 是目标数据
// sourceData 是源数据
dataSource.map((item) => {
  set(targetData, item.targetKeyPath, get(sourceData, item.sourceKeyPath))
  return item
});

效果预览

另外数据随机生成我使用的是@faker-js/faker

部署到网站

已经部署到我的个人网站timesky.top/data-conver...

相关推荐
栈老师不回家17 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙23 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠27 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
泉崎27 分钟前
11.7比赛总结
数据结构·算法
你好helloworld29 分钟前
滑动窗口最大值
数据结构·算法·leetcode
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
JSU_曾是此间年少2 小时前
数据结构——线性表与链表
数据结构·c++·算法
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
sjsjs112 小时前
【数据结构-合法括号字符串】【hard】【拼多多面试题】力扣32. 最长有效括号
数据结构·leetcode