基于web前端实现拓扑图文件转为SVG文件的方法及装置

摘要

本发明提供一种基于web前端实现拓扑图文件转为SVG文件的方法及装置，所述方法包括：将拓扑图文件传输给服务端，所述服务端通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息；服务端解析完成后，将所有数据封装成json数据格式；服务端将加密后的数据及版权信息传输给客户端；客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示；用户通过客户端对展示的SVG图形进行操作。根据本发明的方案，实现了将上传的拓扑图文件转化为SVG文件，能够进行展示并操作。

说明书

技术领域

本发明涉及数据处理领域，尤其涉及一种基于web前端实现拓扑图文件转为SVG文件的方法及装置。

背景技术

拓扑图一般指拓扑结构图，拓扑结构图通常是指由网络节点设备和通信介质构成的网络结构图。

绘制出的拓扑图通常既需要保证拓扑图的安全性，又要反馈给多个参与方进行反复修改，这就需要将拓扑图转化为其他格式的文件。

现有技术中，使用原型工具绘制原型文件，再将该原型文件转化为HTML文件，但上述实现方式，无法将拓扑图转化为SVG文件进行展示和编辑。

发明内容

为解决上述技术问题，本发明提出了一种基于web前端实现拓扑图文件转为SVG文件的方法及装置，所述方法及装置，用以解决现有技术中，无法将拓扑图转化为SVG文件进行展示和编辑的问题。

根据本发明的第一方面，提供一种基于web前端实现拓扑图文件转为SVG文件的方法，所述方法包括以下步骤：

步骤S101：基于web前端，上传拓扑图文件；

步骤S102：将拓扑图文件传输给服务端，所述服务端读出并解析所述拓扑图文件，通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息；

步骤S103：服务端解析完成后，将所有数据封装成json数据格式，将封装为json格式后的数据加密，生成版权信息；

步骤S104：服务端将加密后的数据及版权信息传输给客户端；

步骤S105：客户端与服务端采用token认证鉴权，鉴权通过后，客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示；

步骤S106：用户通过客户端对展示的SVG图形进行操作。

进一步地，所述拓扑图文件为vsdx或jpg格式，所述拓扑图文件有水印。

进一步地，所述步骤S106：用户通过客户端对展示的SVG图形进行操作，包括：用户调用操作命令对展示的SVG图形进行操作，客户端记录所述操作，并存储修改后的SVG文件，并使用程序语言将修改后的SVG文件封装为需要的数据交换格式。

进一步地，所述步骤S106后，还包括：

步骤S107：客户端将封装后的数据传送给服务端，服务端解析并存储数据。

根据本发明第二方面，提供一基于web前端实现拓扑图文件转为SVG文件的装置，所述装置包括：

文件上传模块：配置为基于web前端，上传拓扑图文件；

解析模块：配置为将拓扑图文件传输给服务端，所述服务端读出并解析所述拓扑图文件，通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息；

封装模块：配置为服务端解析完成后，将所有数据封装成json数据格式，将封装为json格式后的数据加密，生成版权信息；

传输模块：配置为服务端将加密后的数据及版权信息传输给客户端；

转换并展示模块：配置为客户端与服务端采用token认证鉴权，鉴权通过后，客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示；

修改模块：配置为用户通过客户端对展示的SVG图形进行操作。

进一步地，所述拓扑图文件为vsdx或jpg格式，所述拓扑图文件有水印。

进一步地，所述修改模块包括修改子模块，配置为用户调用操作命令对展示的SVG图形进行操作，客户端记录所述操作，并存储修改后的SVG文件，并使用程序语言将修改后的SVG文件封装为需要的数据交换格式。

进一步地，包括存储模块，配置为客户端将封装后的数据传送给服务端，服务端解析并存储数据。

根据本发明第三方面，提供一种基于web前端实现拓扑图文件转为SVG文件的系统，包括：

处理器，用于执行多条指令；

存储器，用于存储多条指令；

其中，所述多条指令，用于由所述存储器存储，并由所述处理器加载并执行如前所述的基于web前端实现拓扑图文件转为SVG文件的方法。

根据本发明第四方面，提供一种计算机可读存储介质，所述存储介质中存储有多条指令；所述多条指令，用于由处理器加载并执行如前所述的基于web前端实现拓扑图文件转为SVG文件的方法。

根据本发明的上述方案，通过web前端发送请求，服务端读出并解析所述拓扑图文件，通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息，服务端解析完成后，将所有数据封装成json数据格式，客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示。实现了将上传的拓扑图文件转化为SVG文件，能够进行展示并操作。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。

附图说明

构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明提供如下附图进行说明。在附图中：

图1为本发明一个实施方式的基于web前端实现拓扑图文件转为SVG文件的方法流程图；

图2为本发明一个实施方式的基于web前端实现拓扑图文件转为SVG文件的使用方法示意图；

图3为本发明一个实施方式的基于web前端实现拓扑图文件转为SVG文件的装置结构框图。

具体实施方式

定义：

JavaScript：JavaScript(简称“JS”)是一种具有

SVG：SVG是一种

首先结合图1说明为本发明一个实施方式的基于web前端实现拓扑图文件转为SVG文件的方法流程图。如图1所示，所述方法包括以下步骤：

步骤S101：基于web前端，上传拓扑图文件；

其中，所述拓扑图文件可以是vsdx、jpg等格式，所述拓扑图文件允许有水印。

步骤S102：将拓扑图文件传输给服务端，所述服务端读出并解析所述拓扑图文件，通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息；

其中，拓扑图文件上的水印对使用机器学习算法的服务端没有影响，服务端能够读出并解析所述拓扑图文件。

步骤S103：服务端解析完成后，将所有数据封装成json数据格式，将封装为json格式后的数据加密，生成版权信息；

步骤S104：服务端将加密后的数据及版权信息传输给客户端；

步骤S105：客户端与服务端采用token认证鉴权，鉴权通过后，客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示；

步骤S106：用户通过客户端对展示的SVG图形进行操作。

其中，用户调用操作命令对展示的SVG图形进行操作，客户端记录所述操作，并存储修改后的SVG文件，并使用程序语言将修改后的SVG文件封装为需要的数据交换格式。所述操作可以为修改操作，封装的数据交换格式可以为json数据格式。

步骤S106后，还包括：

步骤S107：客户端将封装后的数据传送给服务端，服务端解析并存储数据。

本实施例中，基于web前端实现拓扑图文件转为SVG文件的使用方法，参见图2，图2为本申请一个实施方式的基于web前端实现拓扑图文件转为SVG文件的使用方法示意图。

本发明实施例进一步给出一种基于web前端实现拓扑图文件转为SVG文件的装置，如图3所示，所述装置包括：

文件上传模块：配置为基于web前端，上传拓扑图文件；

解析模块：配置为将拓扑图文件传输给服务端，所述服务端读出并解析所述拓扑图文件，通过机器学习算法读取并解析拓扑图中的元件信息、元件位置信息、连接线以及批注信息；

封装模块：配置为服务端解析完成后，将所有数据封装成json数据格式，将封装为json格式后的数据加密，生成版权信息；

传输模块：配置为服务端将加密后的数据及版权信息传输给客户端；

转换并展示模块：配置为客户端与服务端采用token认证鉴权，鉴权通过后，客户端采用javascript脚本解析所述加密后的数据中的元件信息、元件位置信息、连接线以及批注信息，并将解析出的内容在web前端通过SVG的API绘制图形并展示；

修改模块：配置为用户通过客户端对展示的SVG图形进行操作；

本发明实施例进一步给出一种基于web前端实现拓扑图文件转为SVG文件的系统，包括：

处理器，用于执行多条指令；

存储器，用于存储多条指令；

其中，所述多条指令，用于由所述存储器存储，并由所述处理器加载并执行如前所述的一种基于web前端实现拓扑图文件转为SVG文件的方法。

本发明实施例进一步给出一种计算机可读存储介质，所述存储介质中存储有多条指令；所述多条指令，用于由处理器加载并执行如前所述的基于web前端实现拓扑图文件转为SVG文件的方法。

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机装置(可以是个人计算机，实体机服务器，或者网络云服务器等，需安装Windows或者Windows Server操作系统)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。