一种标签页状态管理方法、装置、电子设备及存储介质与流程

1.本技术涉及计算机领域，尤其涉及一种标签页状态管理方法、装置、电子设备及存储介质。


背景技术：

2.随着互联网技术的发展，前端从静态网页发展到动态网页，再进入到新时代的前端。从html发展到html5,css发展到css3，javascript发展到es12,现代浏览器也基本支持这些特性。前端技术和浏览器的发展，使得现在的网页展示越来越丰富，比如动画，游戏，画图等等。所以对前端的要求也越来越高，特别是近几年框架、技术、工具呈爆发式发展。
3.但是相关技术中，对于前端项目的管理局限在基于树状结构对项目内容进行展示，由于层级结构中内容并列状态下内容繁杂且冗余，不利于对前端项目内容进行查看与管理，其中对于标签页的管理操作只能基于树状结构重新写入权限，不能对标签页内容进行便捷管理操作以及批量管理操作，其次对于标签页的交互只能单次去重复操作，一旦中断操作就只能重新操作重复步骤。


技术实现要素：

4.本发明实施例的目的在于提供一种标签页状态管理方法、装置、电子设备及存储介质，以解决标签页管理操作不便捷以及不能对标签页保留历史操作的问题。
5.本发明提供了一种标签页状态管理方法，所述方法包括：获取前端项目的路由信息；根据所述前端项目的路由信息，确定目标标签页状态信息；基于目标标签页状态信息在预设标签页状态管理组件库中确定标签页状态管理组件，并将标签页状态管理组件插入前端项目；将所述标签页状态管理组件与目标标签页构建控制连接，以对所述标签页状态进行管理操作。
6.于本发明的一实施例中，将所述标签页状态管理组件与目标标签页构建控制连接，包括：根据所述标签页状态管理组件确定当前具有映射关系的标签页目标；基于目标标签页状态信息判定当前所述标签页目标的状态，并将所述状态作为标签插入所述标签页状态管理组件；基于与目标标签页构建控制连接后的所述标签页状态管理组件对标签页进行管理操作。
7.于本发明的一实施例中，所述管理操作至少包括增加和删除，所述增加操作包括：判定当前要增加的标签页在前端项目路由信息中的存在状态；若当前要增加的标签页未存在于前端项目路由信息中，则添加与当前要增加的标签页具有映射关系的标签页状态管理组件，并插入所述前端项目中；若当前要增加的标签页存在于前端项目路由信息中，则从前端项目路由信息中读取已存在的与当前要增加的标签页具有映射关系的标签页状态管理组件，并插入所述前端项目中。
8.于本发明的一实施例中，所述管理操作至少包括增加和删除，所述删除操作包括：根据当前所述前端项目的路由信息，确定标签页的层级信息及各标签页的路由信息；根据
所述各标签页的路由信息指定删除单个标签；根据所述标签页的层级信息批量删除标签，所述批量删除标签包括删除其他标签页、删除全部标签页。
9.于本发明的一实施例中，基于与目标标签页构建控制连接后的所述标签页状态管理组件对标签页进行管理操作后，还包括：根据当前所述前端项目的路由信息配置标签页缓存组件；根据所述前端项目的路由信息确定标签页的层级信息；基于所述标签页的层级信息与所述标签页缓存组件对标签页的交互信息进行缓存处理，以实现标签页再次激活后的状态恢复。
10.于本发明的一实施例中，获取前端项目的路由信息之前，还包括：获取前端项目的框架类型信息；根据所述框架类型，获取所述前端项目中的路由文件；根据所述路由文件获得所述前端项目的路由信息。
11.于本发明的一实施例中，获取前端项目的路由信息后，还包括：根据所述前端项目的路由信息确定标签页的层级信息；根据所述标签页层级信息对所述标签页进行序列信息标注，以实现对于标签页的序列性管理操作。
12.本发明实施例还提供了一种标签页状态管理装置，所述标签页状态管理装置包括：信息获取模块，用于获取前端项目的路由信息；组件确定模块，用于根据所述路由信息，确定目标标签页状态信息；基于目标标签页状态信息在预设标签页状态管理模型中确定标签页状态管理组件，并将标签页状态管理组件插入前端项目；管理模块，用于将所述标签页状态管理组件与目标标签页构建控制连接，以对所述标签页状态进行管理操作。
13.本发明实施例还提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述电子设备实现上述任一项所述的标签页状态管理方法实施例。
14.本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机可读指令，当所述计算机可读指令被计算机的处理器执行时，使计算机执行上述任一项所述的标签页状态管理方法实施例。
15.本发明实施例中的一种标签页状态管理方法、装置、电子设备及存储介质，该方法获取前端项目的路由信息，并根据该路由信息确定目标标签页状态信息，再基于目标标签页状态信息在预设标签页状态管理组件库中确定标签页状态管理组件，且将该组件插入前端项目，然后将该组件与目标标签页构建控制连接，以对标签页状态进行管理操作，之后还会基于配置标签页缓存组件对标签页的交互信息进行缓存处理，其中，在前端项目中插入标签页管理组件对标签页进行管理操作，有效提升了对于标签页的管理操作便捷性，而且配置了标签页缓存组件，在对标签页进行交互管理操作后，可以对标签页监护信息进行缓存处理，便于标签页操作在中断后快速载入并继续操作。
16.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本技术。
附图说明
17.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术者来讲，在不付出创造性劳动的前提下，还可以根据这
些附图获得其他的附图。在附图中：
18.图1是本技术的一示例性实施例示出的示例性系统架构的示意图；
19.图2是本技术的一示例性实施例示出的一种标签页状态管理方法的流程图；
20.图3是本技术的一示例性实施例示出的标签页状态管理组件构建控制连接的过程框图；
21.图4是本技术的一示例性实施例示出的标签页管理组件页面结构示意图；
22.图5是本技术的一示例性实施例示出的具体增加标签页a的方法流程图；
23.图6是本技术的一示例性实施例示出的标签页状态管理装置示意图；
24.图7是本技术的一示例性实施例示出的电子设备的计算机系统的结构示意图。
具体实施方式
25.以下将参照附图和特定的具体实施例来说明本发明的实施方式，本领域技术人员可由本说明书中所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。应当理解，优选实施例仅为了说明本发明，而不是为了限制本发明的保护范围。
26.需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图示中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。
27.在下文描述中，探讨了大量细节，以提供对本发明实施例的更透彻的解释，然而，对本领域技术人员来说，可以在没有这些具体细节的情况下实施本发明的实施例是显而易见的，在其他实施例中，以方框图的形式而不是以细节的形式来示出公知的结构和设备，以避免使本发明的实施例难以理解。
28.在本技术中提及的“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
29.图1是本技术的一示例性实施例示出的示例性系统架构的示意图。
30.参照图1所示，系统架构可以包括前端项目101和计算机设备102。其中，前端项目101用于获取前端项目的路由信息，并提供给计算机设备102进行处理。计算机设备102可以是微型计算机、嵌入式计算机、网络计算机等中的至少一种。相关技术人员可以在计算机设备102实现根据前端项目的路由信息，确定目标标签页状态信息，并基于目标标签页状态信息在预设标签页状态管理模型中确定标签页状态管理组件，再将标签页状态管理组件插入前端项目，最后将标签页状态管理组件与目标标签页构建控制连接，以对标签页状态进行管理操作。
31.示意性的，计算机设备102在获取到前端项目101的前端项目的路由信息，并根据该路由信息确定目标标签页状态信息，再基于目标标签页状态信息在预设标签页状态管理模型中确定标签页状态管理组件，且将该组件插入前端项目，然后将该组件与目标标签页构建控制连接，以对标签页状态进行管理操作，之后还会根配置标签页缓存组件对标签页
的交互信息进行缓存处理，其中，在前端项目中插入标签页管理组件对标签页进行管理操作，有效提升了对于标签页的管理操作便捷性，而且配置了标签页缓存组件，在对标签页进行交互管理操作后，可以对标签页监护信息进行缓存处理，便于标签页操作在中断后快速载入并继续操作。
32.图2是本技术的一示例性实施例示出的一种标签页状态管理方法的流程图，该标签页状态管理方法可以用计算处理设备来执行，该计算处理设备可以是图1中所示的计算机设备102。参照图2所示，该报文检测方法的流程图至少包括步骤s210至步骤s240，详细介绍如下：
33.在步骤s210中，获取前端项目的路由信息。
34.在本技术的一个实施例中，在获取前端项目的路由信息之前，还要获取前端项目的框架类型信息，并根据该框架类型，获取前端项目中的路由文件，最后根据路由文件获得前端项目的路由信息。
35.在本技术的一个实施例中，根据路由文件获得前端项目的路由信息后，需要根据前端项目的路由信息确定标签页的层级信息，再根据标签页层级信息对标签页进行序列信息标注，以实现对于标签页的序列性管理操作。
36.在步骤s220中，根据前端项目的路由信息，确定目标标签页状态信息。
37.在本技术的一个实施例中，根据前端项目的路由信息确定路由层级数，由层级数确定当前前端项目中所需管理的标签页个数，分别抽取各标签页的路由信息，并判定出目标标签页的状态信息，其中目标标签页的状态信息包括但不限于运行中、休眠中、暂停运行以及关闭并缓存。
38.在步骤s230中，基于目标标签页状态信息在预设标签页状态管理组件库中确定标签页状态管理组件，并将标签页状态管理组件插入前端项目。
39.在本技术的一个实施例中，基于当前前端项目所用构建框架确定当前前端项目所适配的状态管理库，例如vue、vuex管理库等，基于该管理库对前端项目中的标签页进行全局管理。
40.在本技术的一个实施例中，基于目标标签页状态信息在预设标签页状态管理组件库中调用与当前目标标签页状态相匹配的管理组件，将目标标签页的状态信息及相关路由信息作为管理组件内容填入，以便下一步与标签页进行控制连接的构建，然后将完成的标签页状态管理组件插入前端项目的指定位置，以对标签页进行单一和/或批量管理。
41.其中，预设标签页状态管理组件库是用以对不同标签页的状态匹配其使用的管理组件的工具库，其构建可以是现有管理组件在进行数据抽离后形成的组件框架进行构建，也可以是根据历史操作管理组件的再利用进行构建，在此仅做解释性阐述，具体操作选择可以依据实际需求进行设计与构建，在此不对构建过程做限定。
42.在本技术的另一个实施例中，在其他执行步骤相同的情况下，还可以新建标签页状态管理组件，如图4所示，图4是本技术的一示例性实施例示出的标签页管理组件页面结构示意图，将新建的标签页状态管理组件嵌入前端项目中原本对组件对外接口展示的区域替换为标签页管理组件展示区域，生成标签页状态管理区。
43.在步骤s240中，将标签页状态管理组件与目标标签页构建控制连接，以对标签页状态进行管理操作。
44.在本技术的一个实施例中，将标签页状态管理组件与目标标签页构建控制连接的过程，可以在图3所示的一示例性实施例示出的标签页状态管理组件构建控制连接的过程框图中执行，具体参照图3所示，包括以下步骤：
45.步骤s310，根据标签页状态管理组件确定当前具有映射关系的标签页目标；
46.步骤s320，基于目标标签页状态信息判定当前标签页目标的状态，并将状态作为标签插入标签页状态管理组件；
47.在本技术的一个实施例中，在将标签页目标的状态插入标签页状态管理组件后，根据当前标签页目标的状态确定标签页状态管理组件的显示方式，例如，若当前标签页为运行状态，则对该标签页状态管理组件以区别于其他标签页状态管理组件的亮度进行展示，对于标签页状态管理组件的展示还可以以颜色、大小、透明度、字体以及标注进行展示，在此仅作举例性说明，并不对实际应用中的区别显示方式做具体限定。
48.步骤s330，将插入目标标签页状态标签的标签页状态管理组件作为目标标签页的控件与目标标签页的控制接口进行连接，以对标签页进行管理操作。
49.在本技术的一个实施例中，对标签页进行管理操作包括对标签页的增加操作与删除操作。
50.在本技术的一个实施例中，对于标签页的增加操作包括判定当前要增加的标签页在前端项目路由信息中的存在状态，若当前要增加的标签页未存在于前端项目路由信息中，则添加与当前要增加的标签页具有映射关系的标签页状态管理组件，并插入前端项目中，若当前要增加的标签页存在于前端项目路由信息中，则从前端项目路由信息中读取已存在的与当前要增加的标签页具有映射关系的标签页状态管理组件，并插入前端项目中。
51.在本技术的一个实施例中，对于标签页的删除操作需要根据当前前端项目的路由信息，确定标签页的层级信息及各标签页的路由信息，然后根据各标签页的路由信息实现指定删除单个标签，再根据标签页的层级信息批量删除标签，其中批量删除标签包括删除其他标签页、删除全部标签页。
52.需要注意的是，本技术的实施例中所描述的删除标签页操作还可以包括关闭右侧标签页，该删除操作需要根据标签页路由信息中的层级信息确定当前标签页右侧标签页的层级上下位置，以此来确定对以上层级的标签页进行删除和/或对以下层级的标签页进行删除，本技术实施例中的具体删除操作只做示例性举例。
53.在本技术的一个实施例中，对于标签页的操作还可以包括对标签的排序，对于标签的排序需要相关技术人员手动拖动标签页进行指定顺序排序，在此不做过多阐释。
54.在本技术的一个实施例中，在基于与目标标签页构建控制连接后的标签页状态管理组件对标签页进行管理操作后，还包括根据当前前端项目的路由信息配置标签页缓存组件，然后根据前端项目的路由信息确定标签页的层级信息，最后基于标签页的层级信息与标签页缓存组件对标签页的交互信息进行缓存处理，以实现标签页再次激活后的状态恢复。其中标签页的层级信息决定了对于标签页交互信息缓存的时序性。
55.请参阅图5，图5是本技术的一示例性实施例示出的具体增加标签页a的方法流程图。该方法可以应用于图5所示的实施环境，并由该实施环境中的服前端项目101和/或计算机设备102具体执行。应理解的是，该方法也可以适用于其它的示例性实施环境，并由其它实施环境中的设备具体执行，本实施例不对该方法所适用的实施环境进行限制。
56.图5是本技术的一示例性实施例示出的具体增加标签页a的方法流程图，如图5所示，在一示例性的实施例中，该具体增加标签页a方法包括点击菜单a，获取标签页a的路由信息，然后根据标签页a的路由信息检测是否存在于当前标签页队列中，若存在于当前标签页队列中，则在缓存中查找菜单a，既标签页a对应的标签页管理组件，并显示在前端项目页面中，若标签页a不在当前标签页队列中，则先添加标签a到标签队列中，然后懒加载标签页a所对应的标签页状态管理组件，并将组件写入缓存中，就完成了添加标签页a的操作动作。
57.以下介绍本技术的装置实施例，可以用于执行本技术上述实施例中的标签页状态管理方法。对于本技术系统实施例中未披露的细节，请参照本技术上述的标签页状态管理方法的实施例。
58.图6是本技术的一示例性实施例示出的标签页状态管理装置示意图。该装置可以应用于图2所示的实施环境，并具体配置在计算机设备102中。该装置也可以适用于其他的示例性实施环境，并具体配置在其他设备中，本实施例不对该装置所适用的实施环境进行限制。
59.如图6所示，该示例性的道路形态危险等级生成装置包括：信息获取模块601、组件确定模块602、管理模块603。
60.其中，信息获取模块601，用于获取前端项目的路由信息；组件确定模块602，用于根据路由信息，确定目标标签页状态信息，再基于目标标签页状态信息在预设标签页状态管理模型中确定标签页状态管理组件，并将标签页状态管理组件插入前端项目；管理模块603，用于将标签页状态管理组件与目标标签页构建控制连接，以对标签页状态进行管理操作。
61.本技术的实施例还提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行时，使得电子设备实现上述各个实施例中提供的标签页状态管理方法。
62.图7示出了适于用来实现本技术实施例的电子设备的计算机系统的结构示意图。需要说明的是，图7示出的电子设备的计算机系统700仅是一个示例，不应对本技术实施例的功能和使用范围带来任何限制。
63.如图7所示，计算机系统700包括中央处理单元(central processing unit，cpu)701，其可以根据存储在只读存储器(read-only memory，rom)702中的程序或者从储存部分加载到随机访问存储器(random access memory，ram)703中的程序而执行各种适当的动作和处理，例如执行上述实施例中的方法。在ram 703中，还存储有系统操作所需的各种程序和数据。cpu 701、rom 702以及ram 703通过总线彼此相连。输入/输出(input/output，i/o)接口705也连接至总线704。
64.以下部件连接至i/o接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(cathode ray tube，crt)、液晶显示器(liqu身份crystal display，lcd)等以及扬声器等的输出部分707；包括硬盘等的储存部分708；以及包括诸如lan(local area network，局域网)卡、调制解调器等的网络接口卡的通信部分709。通信部分经由诸如因特网的网络执行通信处理。驱动器也根据需要连接至i/o接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入储存部分708。
65.特别地，根据本技术的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本技术的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的计算机程序。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(cpu)701执行时，执行本技术的系统中限定的各种功能。
66.需要说明的是，本技术实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasable programmable read only memory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compact disc read-only memory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本技术中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的计算机程序。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的计算机程序可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。
67.附图中的流程图和框图，图示了按照本技术各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
68.在上述实施例的对应附图中，连接线可以表示各个部件之间的连接关系，以表示更多的构成信号路径(constituent_signal path)和/或一些线的一个或多个末端具有箭头，以表示主要信息流向，连接线作为一种标识，不是对方案本身的限制，而是结合一个或多个事例性实施例使用这些线有助于更容易地接电路或逻辑单元，任何所代表的信号(由设计需求或偏好所决定)实际上可以包括可以在任意一个方向传送的并且可以以任何适当类型的信号方案实现的一个或多个信号。
69.描述于本技术实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。
70.本技术的另一方面还提供了一种计算机可读存储介质，其上存储有计算机程序，
该计算机程序被处理器执行时实现如前的标签页状态管理方法。该计算机可读存储介质可以是上述实施例中描述的电子设备中所包含的，也可以是单独存在，而未装配入该电子设备中。
71.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本技术的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
72.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本技术实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本技术实施方式的方法。
73.应当注意，本技术可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络pc、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。
74.本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。
75.应当理解的是，本上述内容，仅为本技术的较佳示例性实施例，并非用于限制本技术的实施方案，本领域普通技术人员根据本技术的主要构思和精神，可以十分方便地进行相应的变通或修改，故本技术的保护范围应以权利要求书所要求的保护范围。