高分求教高手,如何用js生成网络拓扑图

JavaScript016

高分求教高手,如何用js生成网络拓扑图,第1张

各个应用系统、服务器信息及系统直接的调用都录入到数据库中.

前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据,然后在UI上动态绘制出关系图来.

如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。

jsPlumb是一款绘制可拖拽的拓扑图js插件,可同时支持jQuery、MooTools、YUI3三种js库,并可兼容Firefox、chrome、IE6以上等主流浏览器。详见官网:https://jsplumbtoolkit.com。

本例子是我用jsPlumb自己开发的一个demo,实现了拓扑图的分级结构,以及拖拽、点击、显示、隐藏等功能,依赖于jQuery库。

操作手册:(基于 uni-app,uniCloud 的 admin 管理项目模板。)

本人 微信号 :jays611(如有插件问题及时反馈)

web版展示地址: http://jstopo.top/ups/#/grid/gridMax 【vue原生页面版本】

uniapp版 :用户名:admin 密码:123456

网站实例: https://static-8e60622e-007d-44eb-a48f-3ad0c830810e.bspapp.com/topo/#/pages/jstopo/index

2.部分函数说明: