基于Vue的机器学习平台前端

项目演示地址：http://vidanao.com/ml
》注意1:前端兼容性不太好，360浏览器比较兼容;

源码地址：https://github.com/Liwengbin/mml

开发背景：
大四上的一次实践，那时一些原因我了解到这个项目的需求，开始接触到了Vue以及SpringBoot,并花时间开始开发这个项目的需求。（身为菜鸟的我还是很吃力的！···这句纯属废话）

前言：
系统代码比较凌乱，没有结果优化,特别前端SVG部分代码比较乱，其中不免包含一些极端的处理方法，请读者提取对自己有用的东西。例如一下5问。请各位大神多多指点！

简介：
该项目只开放到一半就结束了，系统分为简单的两部分：
Vue 的前端 + SpringBoot&Mysql的后端

后端：的话没什么东西，也就是些数据的增删改查，所以不做多说，看源码。

说说前端：

提出几个问题

• 问题1：svg 中包含html标签问题？
• 问题2：将HTML标签拖着到Svg画图面板中，并实时渲染的问题？
• 问题3：俩个（node）节点间连线问题？
• 问题4：拖拽（node）节点连接线跟随变动的问题？
• 问题5：（node）节点鼠标右击菜单问题？

问题1：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/foreignObject

这里我使用的是<foreignObject>标签

问题2：（拖拽使用的是）https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer

拖拽复制SVG面板外的HTML标签到SVG面板中：思想并没有正真的HTML拖拽，
(1)只是通过鼠标按下左键 - ->将html中的数据保存在拖拽方法提供的变量中
(2)并拖动
(3)到SVG面板中获取鼠标最后一次抬起的位置,组装nodes数据（这里就自动提交数据到后台），因为数据是双向绑定的所以会自动渲染到SVG面板中。

问题3：
四次贝塞尔曲线：https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

在每个节点中上下都会有0个或多个输入输出端点，注意：数据源没有输入端点。
每个端点都有自己的id,鼠标点击并移动会通过ID找到起始点的位置，并使用path的 四次贝塞尔曲线 画线 （这里依然是通过数据的双向绑定来达到画线的）

问题4：如果问题3没问题，问题4就解决了

拖拽某个"node"节点，通过数据源找到与其关联的输入输出端点并对相关的端点间的连接线进行计算,在通过数据自动画出变化

问题5：这个不说了，网上一搜就有！如下演示

图片就没拿过来了：原文在思否社区 https://segmentfault.com/a/1190000016659769