资讯专栏INFORMATION COLUMN

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

Chao / 2184人阅读

摘要:身为菜鸟的我还是很吃力的这句纯属废话前言系统代码比较凌乱,没有结果优化特别前端部分代码比较乱,其中不免包含一些极端的处理方法,请读者提取对自己有用的东西。问题四次贝塞尔曲线在每个节点中上下都会有个或多个输入输出端点,注意数据源没有输入端点。

项目演示地址: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...
这里我使用的是标签
问题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:这个不说了,网上一搜就有!如下演示

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53050.html

相关文章

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

    摘要:身为菜鸟的我还是很吃力的这句纯属废话前言系统代码比较凌乱,没有结果优化特别前端部分代码比较乱,其中不免包含一些极端的处理方法,请读者提取对自己有用的东西。问题四次贝塞尔曲线在每个节点中上下都会有个或多个输入输出端点,注意数据源没有输入端点。 项目演示地址:http://vidanao.com/ml》注意1:前端兼容性不太好,360浏览器比较兼容; 》注意2:此vidanao.com也是...

    Doyle 评论0 收藏0
  • 系统架构

    强力推荐!那些你不能错过的 GitHub 插件和工具 以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流。 GitHub Trending 栏目甚至已经成为 IT 从业人员的新闻日报,每日必读。在之前的一… PostgreSQL 数据库的前世今生 编辑:IT大咖说阅读字...

    Gilbertat 评论0 收藏0
  • 系统架构

    强力推荐!那些你不能错过的 GitHub 插件和工具 以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流。 GitHub Trending 栏目甚至已经成为 IT 从业人员的新闻日报,每日必读。在之前的一… PostgreSQL 数据库的前世今生 编辑:IT大咖说阅读字...

    k00baa 评论0 收藏0
  • 前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 过去与未来

    摘要:巅峰人生年老兵思路上的转变,远比单纯提升技术更有价值本文节选自赵成教授在极客时间开设的赵成的运维体系管理课,是其对自己十年技术生涯的回顾与总结。赵成教授来自美丽联合集团,集团旗下两大主力产品是蘑菇街和美丽说,目前负责管理集团的技术服务团队。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...

    MASAILA 评论0 收藏0
  • 前端学习资源汇总

    摘要:建立该仓库的目的主要是整理收集学习资源,统一管理,方便随时查找。目前整合的学习资源只是前端方向的,可能会存在漏缺比较好的资源,需要慢慢的完善它,欢迎在该上补充资源或者提供宝贵的建议。 说明 平时的学习资源都比较的凌乱,看到好的资源都是直接收藏在浏览器的收藏夹中,这样其实并不方便,整理在云笔记上,也不方便查看修改记录,索性就整理在 github 上并开源出来,希望帮助大家能够更快的找到需...

    SnaiLiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<