jtopo的项目实战（一）

前言

        初识jtopo是因为项目中需要一个能够动态绘制网络拓扑图的插件，不但能画出基本的网络拓扑结构，还要能够标识出网络设备的类型以及端口设置，甚至是网络连线的流量信息等，基于这个需求查找了很多资料，初步选中了几款类似功能的插件，综合考虑成本、操作的简便性、画图的效率以及上手难易程度后，最终选定使用jtopo。

 

废话不多说，进入主题

        网上的版本不多，但版本差异很大，我们选用的版本是jtopo-0.4.8-dev.js，前端采用了jQuery，jtopo，layui来实现，设计用的是vscode作为编辑器，后端是java实现。拿到版本后，简单的验证了下一些功能，发现可以实现一些基本的操作，创建节点、手动的更换节点图片、创建连线等。但想要在项目中使用，还是很粗糙，比如说：

1.节点不支持动态的更换图标

2.节点连线的文字标识过于丑陋

3.节点不支持双击操作

4.拓扑图所有的元素不能拖动后自动保存

5.右键菜单没有开关

6.起始节点的连线没有从边缘出发

7.没有生成缩略图的接口

（更多详细的功能后面再说，这里就不在一一列举了。）

 

接下来，讲详细讲解各个功能的具体实现，有兴趣的童鞋，欢迎留言互动，你们的留言，是我前进的动力，如果觉得博主写的不错，欢迎打赏哈。

 

1.实现节点动态的更换图标

        更换图标是指更换单个节点的图标，所以必选选中某一个节点，再弹出图标选择框，列举出可以选择的图标，效果如下：

 

 弹窗用的是layer.open，具体图标展示中增加了自定义属性val，来标识当前图标的id，当用户选中具体图标点击确定后，回传图标ID和节点ID到服务端，剩余的图标替换工作由服务端来完成，提交成功后，刷新当前拓扑图，从服务端获取json数据重新绘制即可，以下是关键部分的代码实现

 

 

提交部分的逻辑如下：

 

最终替换后的效果：

 

最后，博主有一个小小的心愿，就是希望大家点一下下方的点赞、分享和收藏，博主希望大家都支持下，后期有好的东西我会继续分享给大家。