基于TypeScript和HTML的动态网络拓扑结构及设计方法与流程

基于typescript和html的动态网络拓扑结构及设计方法
技术领域
1.本发明涉及数据处理技术领域，具体地说是一种基于typescript和html的动态网络拓扑结构及设计方法。


背景技术：

2.typescript是一种由微软开发的自由和开源的编程语言。它是javascript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
3.html：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语：head)、和“主体”部分(英语：body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
4.在实际应用中，当对一条数据有三种以上的处理流程时，依据简单的判断逻辑处理数据显然不是最好的选择。故如何根据用户需求，基于typescript和html自定义数据处理流程，使得数据处理更加便捷是目前亟待解决的技术问题。
5.专利号为cn104301178b的专利文献公开了一种基于稳态迁移控制的复杂动态网络拓扑结构估计器及方法，其中，状态变量传感器将实时监测到的状态信息数据实时传输到稳态监测与记录仪，并同步向稳态迁移控制器反馈复杂动态网络系统的状态变量信息；稳态监测与记录仪为稳态迁移控制器提供稳态迁移控制所需的启动指令，稳态迁移控制器收到状态变量信息后生成稳态迁移控制信号并作用于所控制的复杂动态网络系统；拓扑估计器根据稳态监测与记录仪所传输的稳态响应数据后实现对复杂动态网络拓扑结构进行估计。该技术方案是对复杂的动态网络拓扑结构进行估计，不能根据用户需求，基于typescript和html自定义数据处理流程，使得数据处理更加便捷。


技术实现要素：

6.本发明的技术任务是提供一种基于typescript和html的动态网络拓扑结构及设计方法，来解决如何根据用户需求，基于typescript和html自定义数据处理流程，使得数据处理更加便捷的问题。
7.本发明的技术任务是按以下方式实现的，一种基于typescript和html的动态网络拓扑结构设计方法，该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：
8.构建网络拓扑结构；
9.获取子节点数据，添加子节点并将数据存在二维数组中；
10.在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；
11.对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；
12.所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；
13.调用接口保存网络拓扑图配置数据，适时应用：完成整个网络拓扑结构后，保存该工作流模板，将配置项数据存入数据库中，在其他视频文件需要用该工作流模板时进行修改时，选择需要的工作流模板进行应用。
14.作为优选，网络拓扑结构采用用基本的div标签及具体细节样式完成；输入模块标记为“口
‑”
；完成模块标记为
“‑
口”，由此罗列出，整个拓扑结构具体如下：
15.第一行出现的结构为
“‑
口”、
“‑‑”
；
“‑
口”表示有子节点；
“‑‑”
表示无子节点；
16.非第一行出现的结构为“|-口-|”、“|-口”、
“‑
口-|”、
“‑
口”、
“‑‑
|”和
“‑‑”
；其中，“|-口-|”表示仅有一个子节点，并且整个工作流模板最大长度为1；“|-口”表示超过两个子节点、并且整个工作流模板最大长度大于1的第一个子节点；
“‑
口-|”表示超过两个子节点、并且该行长度与整个工作流模板最大长度相等的最后一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑‑
|”和
“‑‑”
均表示无子节点；
17.在每个子节点中，加入编辑、删除及添加子节点功能图标。
18.更优地，获取子节点数据，添加子节点并将数据存在二维数组中具体如下：
19.获取输入节点可以添加的子节点数据并选择：从后端接口获取可添加的输入节点数据；
20.在下拉列表中选择后，在网络拓扑结构创建出一行，节点名称的数据暂时存入一个二维数组的第一行第一列；
21.创建出第一行后，再次点击输入节点的添加图标，继续创建第二行，节点数据存入数组的第二行第一列，以此类推创建多行。
22.更优地，在各行子节点中继续添加子节点数据具体如下：
23.点击第一行第一列的子节点中的添加图标，继续获取可创建的子节点数据并添加，此时子节点数据下拉列表中应过滤掉当前子节点的数据，选择其他节点数据进行创建，创建后数据存入数组的第一行第二列中；
24.每行中的可继续添加的子节点数据都与输入节点相同，只是在点击添加图标时过滤掉已经使用过的节点值。
25.更优地，对每个新增的子节点进行配置或删除操作具体如下：
26.在各行子节点中删除子节点：当完成一部分网络拓扑结构后，可能会出现需要删除的子节点；
27.在各行子节点中编辑子节点配置项：编辑配置项是以弹窗的方式实现，设置完成后根据子节点坐标把配置项数据存入二维数组中，同时在数据中加入一个设置完成的属性，用来显示当前子节点是否配置完成。
28.更优地，在各行子节点中删除子节点具体如下：
29.在一行中有三个子节点，点击最后一个子节点的删除图标，仅删除最后一个子节点；
30.点击第二个子节点的删除图标，要删除第二个及第三个子节点；
31.点击第一个子节点的删除图标，要删除当前行所有的子节点；
32.每次确认删除后，重新获取整个网络拓扑结构的最大长度，根据最大长度重新在
二维数组中加入空对象来渲染页面；
33.当所有子节点都被删除后，仅展示输入和完成节点。
34.更优地，在数组中相应位置加入空对象来渲染整个网络拓扑结构具体如下：
35.渲染页面时，使用的是二维数组中的数据，根据数据中是否存在name属性来判断是否有子节点，进而渲染成子节点或者直线线条；
36.每次添加子节点后，需要取到整个网络拓扑结构的最大长度，对小于该最大长度值的各行，需要在数组中加入空对象，使整个网络拓扑结构变得完整。
37.一种基于typescript和html的动态网络拓扑结构，该结构是基于上述的基于typescript和html的动态网络拓扑结构设计方法构建的动态网络拓扑结构。
38.一种电子设备，包括：存储器和至少一个处理器；
39.其中，所述存储器存储计算机执行指令；
40.所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上述的基于typescript和html的动态网络拓扑结构设计方法。
41.一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行时，实现如上述的基于typescript和html的动态网络拓扑结构设计方法。
42.本发明的基于typescript和html的动态网络拓扑结构及设计方法具有以下优点：
43.(一)本发明可以动态地修改网络拓扑结构中的子节点及其配置项，把数据处理流程封装在工作流模板中，使得处理数据更加便捷；
44.(二)本发明是参考静态网络拓扑结构而开发的一种动态的网络拓扑结构，用户根据业务需求自行添加子节点，自主设定子节点的排序和子节点中的配置项，设定好之后保存工作流模板，处理数据时直接调用工作流模板进行处理；
45.(三)用户可以从输入节点添加子节点，在子节点中继续添加子节点，还可进行删除、编辑配置项等操作，完成一个网络拓扑结构；
46.(四)本发明在添加数据之前，展示输入节点及完成节点，输入节点显示添加子节点功能；点击输入节点中的添加子节点图标，展示可选的子节点名称，选择后创建子节点并展示子节点可用操作；点击子节点的编辑、删除、添加子节点图标，进行后续一系列操作；创建完成之后，如若空校验通过，可以保存整个网络拓扑结构数据并与后端交互，存入相应的表结构中。
附图说明
47.下面结合附图对本发明进一步说明。
48.附图1为基于typescript和html的动态网络拓扑结构设计方法的流程框图。
具体实施方式
49.参照说明书附图和具体实施例对本发明的基于typescript和html的动态网络拓扑结构及设计方法作以下详细地说明。
50.实施例1：
51.如附图1所述本发明的基于typescript和html的动态网络拓扑结构及设计方法，
该方法是创建视频文件数据处理的工作流网络拓扑结构，具体如下：
52.s1、构建网络拓扑结构；
53.s2、获取子节点数据，添加子节点并将数据存在二维数组中；
54.s3、在各行子节点中继续添加子节点数据，存入二维数组的同时对二维数组进行处理；
55.s4、对每个新增的子节点进行配置或删除操作，将数据存入二维数组中；
56.s5、所有数据存入二维数组中，并在数组中相应位置加入空对象来渲染整个网络拓扑结构；
57.s6、调用接口保存网络拓扑图配置数据，适时应用：完成整个网络拓扑结构后，保存该工作流模板，将配置项数据存入数据库中，在其他视频文件需要用该工作流模板时进行修改时，选择需要的工作流模板进行应用。
58.本实施例步骤s1中的网络拓扑结构采用用基本的div标签及具体细节样式完成；输入模块标记为“口
‑”
；完成模块标记为
“‑
口”，由此罗列出，整个拓扑结构具体如下：
59.①
、第一行出现的结构为
“‑
口”、
“‑‑”
；
“‑
口”表示有子节点；
“‑‑”
表示无子节点；
60.②
、非第一行出现的结构为“|-口-|”、“|-口”、
“‑
口-|”、
“‑
口”、
“‑‑
|”和
“‑‑”
；其中，“|-口-|”表示仅有一个子节点，并且整个工作流模板最大长度为1；“|-口”表示超过两个子节点、并且整个工作流模板最大长度大于1的第一个子节点；
“‑
口-|”表示超过两个子节点、并且该行长度与整个工作流模板最大长度相等的最后一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑
口”表示超过两个子节点、并且该行长度与整个工作流模板最大长度不相等的非第一个节点；
“‑‑
|”和
“‑‑”
均表示无子节点；
61.③
、在每个子节点中，加入编辑、删除及添加子节点功能图标。
62.本实施例步骤s2中的获取子节点数据，添加子节点并将数据存在二维数组中具体如下：
63.s201、获取输入节点可以添加的子节点数据并选择：从后端接口获取可添加的输入节点数据；
64.s202、在下拉列表中选择后，在网络拓扑结构创建出一行，节点名称的数据暂时存入一个二维数组的第一行第一列；
65.s203、创建出第一行后，再次点击输入节点的添加图标，继续创建第二行，节点数据存入数组的第二行第一列，以此类推创建多行。
66.本实施例步骤s3中的在各行子节点中继续添加子节点数据具体如下：
67.s301、点击第一行第一列的子节点中的添加图标，继续获取可创建的子节点数据并添加，此时子节点数据下拉列表中应过滤掉当前子节点的数据，选择其他节点数据进行创建，创建后数据存入数组的第一行第二列中；
68.s302、每行中的可继续添加的子节点数据都与输入节点相同，只是在点击添加图标时过滤掉已经使用过的节点值。
69.本实施例步骤4中的对每个新增的子节点进行配置或删除操作具体如下：
70.s401、在各行子节点中删除子节点：当完成一部分网络拓扑结构后，可能会出现需要删除的子节点；
71.s402、在各行子节点中编辑子节点配置项：编辑配置项是以弹窗的方式实现，设置完成后根据子节点坐标把配置项数据存入二维数组中，同时在数据中加入一个设置完成的属性，用来显示当前子节点是否配置完成。
72.本实施例步骤s401中的在各行子节点中删除子节点具体如下：
73.s40101、在一行中有三个子节点，点击最后一个子节点的删除图标，仅删除最后一个子节点；
74.s40102、点击第二个子节点的删除图标，要删除第二个及第三个子节点；
75.s40103、点击第一个子节点的删除图标，要删除当前行所有的子节点；
76.s40104、每次确认删除后，重新获取整个网络拓扑结构的最大长度，根据最大长度重新在二维数组中加入空对象来渲染页面；
77.s40105、当所有子节点都被删除后，仅展示输入和完成节点。
78.本实施例步骤s5中的在数组中相应位置加入空对象来渲染整个网络拓扑结构具体如下：
79.s501、渲染页面时，使用的是二维数组中的数据，根据数据中是否存在name属性来判断是否有子节点，进而渲染成子节点或者直线线条；
80.s502、每次添加子节点后，需要取到整个网络拓扑结构的最大长度，对小于该最大长度值的各行，需要在数组中加入空对象，使整个网络拓扑结构变得完整。
81.实施例2：
82.本发明的基于typescript和html的动态网络拓扑结构，该结构是基于实施例1中的基于typescript和html的动态网络拓扑结构设计方法构建的动态网络拓扑结构。
83.实施例3：
84.本发明还提供了一种电子设备，包括：存储器和至少一个处理器；
85.其中，所述存储器存储计算机执行指令；
86.所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行本发明任一项所述的基于typescript和html的动态网络拓扑结构设计方法。
87.处理器可以是中央处理单元(cpu)，还可以是其他通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现成可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通过处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
88.存储器可用于储存计算机程序和/或模块，处理器通过运行或执行存储在存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现电子设备的各种功能。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器还可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，只能存储卡(smc)，安全数字(sd)卡，闪存卡、至少一个磁盘存储期间、闪存器件、或其他易失性固态存储器件。
89.实施例4：
90.本发明还提供了一种计算机可读存储介质，其中存储有多条指令，指令由处理器加载，使处理器执行本发明任一实施例中的基于typescript和html的动态网络拓扑结构设
计方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或cpu或mpu)读出并执行存储在存储介质中的程序代码。
91.在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
92.用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如cd-rom、cd-r、cd-rw、dvd-rom、dvd-ram、dvd-rw、dvd+rw)、磁带、非易失性存储卡和rom。可选择地，可以由通信网络从服务器计算机上下载程序代码。
93.此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。
94.此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的cpu等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。
95.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。