项目演示地址: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:这个不说了,网上一搜就有!如下演示

基于Vue的机器学习平台前端的更多相关文章

  1. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

  2. 基于Vue.js的uni-app前端框架结合.net core开发跨平台project

    一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...

  3. 基于Vue+ElementUI架构的前端国际化解决方案

    1.项目目录结构 ├── build                      构建相关配置文件 |     |── index.js             webpack的基础配置入口 ├── m ...

  4. 前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台

    基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约.大气,减少初学者或开发者不必要的工作量.后台维护采用的springboot+shiro的方式,为广大爱好者提供展示 ...

  5. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  6. 在微信框架模块中,基于Vue&Element前端的微信公众号和企业微信的用户绑定

    在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号.企业微信等账号绑定特定的系统用户,可以进行扫码登录.微信信息发送等操作,用户的绑定主要就是记录公众号用户的ope ...

  7. 搭建基于python +opencv+Beautifulsoup+Neurolab机器学习平台

    搭建基于python +opencv+Beautifulsoup+Neurolab机器学习平台 By 子敬叔叔 最近在学习麦好的<机器学习实践指南案例应用解析第二版>,在安装学习环境的时候 ...

  8. 开发基于vue前端框架下的系统的UI自动化,记录总结踩的坑

    在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...

  9. 前端基于VUE的v-charts的曲线显示

    目录 前端基于VUE的v-charts的曲线显示 1. 应用背景 2. 分析数据生产者生成 3. 取出数据消费者 4. 前端显示 4.1 安装V-charts插件 4.2 引入veline曲线插件 4 ...

随机推荐

  1. iOS雪花动画、音频图、新闻界面框架、2048游戏、二维码条形码扫码生成等源码

    iOS精选源码 粒子雪花与烟花的动画 iOS 2048游戏 JHSoundWaveView - 简单地声波图.音波图 一个可快速集成的新闻详情界面框架,类似今日头条,腾讯新闻 二维码/条形码扫描及扫描 ...

  2. 迅为iTOP-4418开发板编译Ubuntu

    Ubuntu 系统比较特殊,源码就是它的镜像.Ubuntu 系统通过解压的方式进行烧写,我们也可以通过配置解压出来的 Ubuntu 系统源码文件夹,来配置 Ubuntu 系统.然后通过打包压缩的方式来 ...

  3. 混合欧拉回路poj 1637 Sightseeing tour

    把该图的无向边随便定向,计算每个点的入度和出度.如果有某个点出入度之差为奇数,那么肯定不存在欧拉回路.因为欧拉回路要求每点入度 = 出度,也就是总度数为偶数,存在奇数度点必不能有欧拉回路: 好了,现在 ...

  4. Linux/UNIX 上安装 MySQL

    Linux/UNIX 上安装 MySQL Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址: MySQL - MySQL服务器.你需要该选项,除非你只想连 ...

  5. git 首次提交

    git init# 将本地仓库与码云远程仓库进行关联 git remote add origin git的url地址 git add . git commit -m "描述" # ...

  6. BGP联盟

    ---恢复内容开始--- 1. 每台路由器设置loop back口,r1和r6另外多设置两个 2. R2 R3 R4 R5 R6做ospf 以R2为例: ospf 1 router-id 2.2.2. ...

  7. QTP基本循环异常遍历(代码方式实现)

    0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...

  8. python语法基础-函数-装饰器-长期维护

    ######################################################### # 装饰器 # 装饰器非常重要,面试Python的公司必问, # 原则:开放封闭原则 ...

  9. ospf实验二

    R1,R2,R3为17.1.1.0网段 1. R4先做rip #rip 1 #version 2 #undo sum.. #netwokr 14.0.0.0 实验第四条 标记tag 100 在R4上做 ...

  10. android支付宝首页、蚂蚁森林效果、视频背景、校园电台、载入收缩动画等源码

    Android精选源码 android实现蚂蚁森林效果源码 android仿支付宝首页应用管理(拖拽排序,添加删除) android校园网络电台客户端源码 android实现按钮伸缩效果源码 一款仿i ...