基於Vue的機器學習平臺前端

項目演示地址： http://vidanao.com/ml
》注意1:前端兼容性不太好，360瀏覽器比較兼容;
》注意2:此vidanao.com也是個人我的博文主頁，但目前還沒部署

源碼地址：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...

這裏我使用的是<foreignObject>標籤

問題2：（拖拽使用的是） https://developer.mozilla.org...

拖拽複製SVG面板外的HTML標籤到SVG面板中：思想並無正真的HTML拖拽，
(1)只是經過鼠標按下左鍵 - ->將html中的數據保存在拖拽方法提供的變量中
(2)並拖動
(3)到SVG面板中獲取鼠標最後一次擡起的位置,組裝nodes數據（這裏就自動提交數據到後臺），由於數據是雙向綁定的因此會自動渲染到SVG面板中。

問題3：
四次貝塞爾曲線： https://www.zhangxinxu.com/wo...

在每一個節點中上下都會有0個或多個輸入輸出端點，注意：數據源沒有輸入端點。
每一個端點都有本身的id,鼠標點擊並移動會經過ID找到起始點的位置，並使用path的 四次貝塞爾曲線 畫線 （這裏依然是經過數據的雙向綁定來達到畫線的）

問題4：若是問題3沒問題，問題4就解決了

拖拽某個"node"節點，經過數據源找到與其關聯的輸入輸出端點並對相關的端點間的鏈接線進行計算,在經過數據自動畫出變化

問題5：這個不說了，網上一搜就有！以下演示