ETL平台搭建跳坑系列之jsplumb.js导入

ETL平台搭建跳坑（一）

1、遇到的问题和难题

作为一名前端小白，完成项目任务时也是一个不断挖坑不断跳坑的过程，这两天在完成一个ETL平台导入转换功能的模块，遇到了很多问题，现在也在逐个解决。
1）id调用canvas失败
经多次尝试，发现只能使用ref调用。
在尝试过程中，在无子组件页面中，使用id与ref的效果相同，但是放入到我已经搭载好的页面框架中却只能使用ref。
2）解决掉canvas问题后，发现若全部自己编写绘制转换关系部分的功能，耗时耗力，决定引入相关的开发组件——流程图绘制组件。

2、技术调研

1）通过多方查阅资料，发现由于我使用了页面分区组件，使得无法直接对其dom元素进行操作
vue官网描述：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例调用子组件：给子组件定义<canvasref=”yeah”></canvas>调用这个组件letcanvas=this.$refs.yeah
2）为选择一个适合项目的插件，我进行了一系列的调研
一开始我只是简单的进行了组态插件的搜索，并没有找到一个很好的插件（只找到了一个13年公布关于c语言的开源思路http://www.qtcn.org/bbs/read-htm-tid-57751.html）。之后开始了对流程图js插件的调研，发现同类插件有很多，比较常见的包括以下五种：
flowchart.js、 go.js、 joint.js、 jsPlumb.js、 d3.js
详细介绍请看https://blog.csdn.net/alvinnoending/article/details/52937689

3、选型

通过对这几个js插件的了解，并结合我们自己项目的需求，发现了已有etl工具开发使用了 jsPlumb.js插件，既然有大佬使用过，那我跟着肯定没有问题啦。

4、项目引入过程

虽然我只是按照https://blog.csdn.net/alvinnoending/article/details/52937689这篇文章使用，但是导入过程中遇到了诸多的问题，接下来给大家介绍一下我导入成功的最终步骤。
下载jsplumb.js在vue框架下的插件
下载d3.js插件
核对.json文件是否添加成功

开始调用（调用过程中可以按照本人的参考文章进行）

5、跳坑

导入过程毕竟不是那么的顺利，下面给大家简单介绍一下我遇到的问题以及解决方案。
1）在子组件框架下，因无法id无效导致无法进行调用
暂时还未找到解决方案，选择自己搭建页面布局

2）生命周期渲染问题
最开始发现在methods中效果不理想，放在了mounted里边，得到了解决。为了能够更好的效果，更改到updated中，所有问题完美解决。
mounted：在页面渲染过程中
updated：页面渲染完成后，每次数据发生变化时

3）anchor失效问题
尝试了多种方法，但是从树上拖拽下来的节点并没有anchor，也因此无法进行连线。
d3.seletor产生的节点被封装在nodelist中，是一个节点数组，也因为完美每次只需要添加一个节点，所以在进行anchor添加时传入的参数从node改为node[0]，完美的解决问题

4）链接信息返回
jsPlumb.getAllConnections() 可以返回当前页面所有链接信息