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

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

基本需求梳理

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

设计基本思路

实现思路

  • 两个不同的数据结构可以通过字段映射的方式来取值和设置值,实现数据的对接
  • 取值路径和设置值的路径规则最好一条一条保存下来,作为转换器的规则描述
  • 取值路径和设置值路径可以通过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...

相关推荐
小镇程序员14 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐16 分钟前
前端图像处理(一)
前端
程序猿阿伟24 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒25 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪34 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背37 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
djk88881 小时前
.net6.0(.net Core)读取 appsettings.json 配置文件
json·.net·.netcore
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5