CN111858959A - 组件关系图谱的生成方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请适用于数据展示技术领域，提供一种组件关系图谱的生成方法和装置，其方法通过获取图谱生成指令，根据图谱生成指令中含有的用于生成组件关系图谱的基准组件信息对前端系统进行语义分析，以从前端系统中获取与基准组件具有关联关系的所有组件。进而基于目标图谱模板对基准组件以及与基准组件具有关联关系的所有组件进行布局，从而按照目标图谱模板生成对应的组件关系图谱，其中，目标图谱模板通过所述前端系统预先设定的选取规则确定。上述方法可以让开发人员更为清晰地确定组件的整体架构和功能边界，以及让测试人员更为准确地评估组件的变更差异和风险边界。

Description

组件关系图谱的生成方法、装置、计算机设备及存储介质

技术领域

本申请涉及数据展示技术领域，尤其涉及一种组件关系图谱的生成方法、装置、计算机设备及存储介质。

背景技术

Vue和React都是JavaScript的用户界面设计(UI)框架，这两种框架均是由数据驱动视图，框架只有骨架，其它诸如路由、状态管理等功能都是采用与框架分离的组件。且它们都具有自己的构建工具，支持虚拟DOM实现快速渲染和组件化开发，常用于以组件化形式搭建前端系统。采用Vue或React框架搭建前端系统过程中需要通过选择不同的组件进行拼装来完成系统对应业务的功能支持。然而，在拼装过程中组件层层嵌套，组件与组件之间的依赖关系复杂，导致开发人员和测试人员对前端系统全局观的了解受到限制。

目前，对于采用Vue或React框架搭建的前端系统，缺乏一种组件关系图谱生成工具用以执行在Vue或React框架搭建的前端系统中生成组件关系图谱的方法。这使得采用Vue或React框架搭建前端系统过程中，开发人员容易因难以识别组件的功能边界而致使系统业务功能的缺失或损坏，开发效率低。而测试人员也会因为难以正确把握组件变更带来的风险边界而致使测试策略单一，缺乏灵活性，且测试效率低、效果差。

发明内容

有鉴于此，本申请实施例提供了一种组件关系图谱的生成方法、装置、终端及计算机存储介质，可以实现在Vue或React框架搭建的前端系统中生成组件关系图谱。

本申请实施例的第一方面提供了一种组件关系图谱的生成方法，包括：

获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；

根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；

基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

结合第一方面，在第一方面的第一种可能实现方式中，所述前端系统由Vue框架或React框架构建生成。

结合第一方面，在第一方面的第二种可能实现方式，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，包括：

获取所述前端系统的源程序文件；

对所述源程序文件进行上下文分析，生成展现所述源程序文件中所有组件间的关联关系的树状结构；

基于所述基准组件信息，对所述树状结构进行基准定位以及按照预设的关键字匹配规则进行上下文分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

结合第一方面，在第一方面的第三种可能实现方式中，所述获取图谱生成指令中还包括图谱规则需求信息，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，还包括：

根据所述图谱规格信息确定所述前端系统的遍历范围；

按照所述遍历范围遍历在所述前端系统中的组件，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

结合第一方面，在第一方面的第四种可能实现方式中，所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤之前，还包括：

按照所述前端系统设定的选取规则从图谱模板库中选取用于生成组件关系图谱的目标图谱模板，其中，所述图谱模板库中配置有HTML格式图谱模板、json格式图谱模板以及图片格式图谱模板中的一种或多种。

结合第一方面的第四种可能实现方式，在第一方面的第五种可能实现方式中，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤，包括：

为所述组件关系图谱配置组件搜索和突出显示功能，通过采用高亮形式将搜索的组件呈现在HTML格式的组件关系图谱中。

结合第一方面的第四或第五种可能实现方式，在第一方面的第六种可能实现方式中，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤，包括：

为所述组件关系图谱配置组件代码搜索功能，通过在所述组件关系图谱中设置代码详情链接来获取组件对应的代码信息。

本申请实施例的第二方面提供了一种组件关系图谱的生成装置，所述组件关系图谱的生成装置包括：

获取模块，用于获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；

处理模块，用于根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；

执行模块，用于基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

本申请实施例的第三方面提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在计算机设备上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方面提供的组件关系图谱的生成方法的各步骤。

本申请实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方面提供的组件关系图谱的生成方法的各步骤。

本申请实施例提供的一种组件关系图谱的生成方法、装置、电子设备和存储介质具有以下有益效果：

通过获取图谱生成指令，根据图谱生成指令中含有的用于生成组件关系图谱的基准组件信息对前端系统进行语义分析，以从前端系统中获取与基准组件具有关联关系的所有组件。进而基于目标图谱模板对基准组件以及与基准组件具有关联关系的所有组件进行布局，从而按照目标图谱模板生成对应的组件关系图谱，其中，目标图谱模板通过所述前端系统预先设定的选取规则确定。上述方法可以让开发人员更为清晰地确定组件的整体架构和功能边界，以及让测试人员更为准确地评估组件的变更差异和风险边界。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请第一实施例提供的一种组件关系图谱的生成方法的实现流程图；

图2为本申请第一实施例提供的一种由Vue框架或者React框架搭建的前端系统的组件示意图；

图3为本申请第二实施例提供的一种组件关系图谱的生成方法的实现流程图；

图4为本申请第三实施例提供的一种组件关系图谱的生成方法的实现流程图；

图5为本申请第五实施例提供的一种组件关系图谱的生成装置的结构框图；

图6为本申请第六实施例提供的一种电子设备的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

Vue和React都是JavaScript的用户界面设计(UI)框架，且具有自己的构建工具，可以用于快速搭建开发环境。它们都支持服务器端渲染、支持虚拟DOM实现快速渲染，支持组件化开发，支持父组件向子组件传送数据、支持native方案。且Vue和React都由数据驱动视图，框架只有骨架，而其它诸如路由、状态管理等功能都是框架分离的组件。本申请旨在提供一种组件关系图谱的生成方法，通过在Vue框架或者React框架搭建的前端系统中设计并安装一个组件关系图谱生成插件，以通过该插件实现在Vue或React框架搭建的前端系统中执行生成组件关系图谱的方法，使得开发人员/测试人员在执行系统开发/测试过程中可以通过触发该插件运行来生成对应的组件关系图谱。

请参阅图1，图1为本申请第一实施例提供的一种组件关系图谱的生成方法的实现流程图。详述如下：

步骤S11：获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息。

本实施例通过在前端系统中安装插件的方式来实现在前端系统中执行组件关系图谱的生成方法。而且在本实施例中，前端系统由Vue框架或React框架构建生成。具体地，首先在前端系统中设计并安装一个组件关系图谱生成插件，该插件用于执行本申请提出的组件关系图谱的生成方法。然后，开发人员/测试人员可以通过在该前端系统中针对用户界面的任一组件执行诸如点击事件、输入事件等操作事件来生成一图谱生成指令，该图谱生成指令用于触发该组件关系图谱生成插件运行。其中，该针对的用户界面的组件即为用于生成组件关系图谱的基准组件。基准组件信息包括该基准组件在Vue框架或者React框架搭建的前端系统中所对应的的位置信息以及组件模块文件信息等。

在一些具体实现中，上述插件通过node(基于Chrome V8引擎的JavaScript运行环境)开发得到。插件可以通过npm install的方式安装在前端系统里，以交付给开发人员开发使用。插件还可以通过拖拽的方式添加至前端系统相应的浏览器中，以交付给测试人员测试使用。

步骤S12：根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件。

本实施例中，获得图谱生成指令后，触发安装于前端系统中的组件关系图谱生成插件运行。通过运行该插件，可以根据图谱生成指令中用于生成组件关系图谱的基准组件信息，对前端系统进行语义分析，从前端系统的所有组件中获取得到与基准组件具有关联关系的所有组件。

在一些具体实现中，根据基准组件在前端系统中所对应的的位置信息，实现在前端系统中进行基准定位，以此确定此次将要生成的组件关系图谱的基准位置，即基准组件为组件关系图谱的根节点。根据基准组件对应的组件模块文件信息，通过Npm run命令(执行脚本命令，Npm为一个基于Node.js的包管理工具，全称为Node Package Manager)在前端系统的文件路径下运行，实现对前端系统进行语义分析，实现以该基准组件为中心遍历前端系统中的所有组件，从前端系统中获取得到与基准组件具有关联关系的所有组件。

举例说明，例如前端系统中具有组件A～G 7个组件，请参阅图2，图2为本申请第一实施例提供的一种由Vue框架或者React框架搭建的前端系统的组件关系示意图，如图2所示，组件A、组件B为两个并列的组件，组件C和组件D为组件A的两个并列的下级组件，组件E为组件C的下级组件，组件F为组件B的下级组件，组件G为组件F的下级组件。那么：假设图谱生成指令中的基准组件为组件A，则以组件A为中心可获得与组件A具有依赖关系的组件即为组件C、组件D和组件E；假设图谱生成指令中的基准组件为组件B，则以组件B为中心可获得与组件B具有依赖关系的组件即为组件F和组件G；假设图谱生成指令中的基准组件为组件C，则以组件C为中心可获得与组件C具有依赖关系的组件即为组件A和组件E；假设图谱生成指令中的基准组件为组件D，则以组件D为中心可获得与组件D具有依赖关系的组件即为组件A；假设图谱生成指令中的基准组件为组件E，则以组件E为中心可获得与组件D具有依赖关系的组件即为组件A组件C；假设图谱生成指令中的基准组件为组件F，则以组件F为中心可获得与组件F具有依赖关系的组件即为组件B组件G；假设图谱生成指令中的基准组件为组件G，则以组件G为中心可获得与组件G具有依赖关系的组件即为组件B组件F。

步骤S13：基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

本实施例中，系统中配置有多种图谱生成的图谱模板，上述组件关系图谱生成插件可依据需求选用不同的图谱模板，以此生成不同格式的组件关系图谱。而且，针对于每一种图谱模板，均设定有对应的选取规则。在一些具体实现中，设定图谱模板的选取规则时，可以通过业务参数定义的方式在前端系统中按照实际需求进行制定，结合开发人员/测试人员的对业务页面的需求建立系统中各业务页面分别对应与其中一种图谱模板相关联，进而根据基准组件来识别将要生成的组件关系图谱属于哪个业务页面，进而基于该业务页面来选取此次生成组件关系图谱的图谱模板。举例说明，例如按照开发人员需求制定业务页面A对应关联的图谱模板为X，业务页面B对应关联的图谱模板为Y，业务页面C对应关联的图谱模板为Z。即在此选择规则下，若基准组件属于业务页面A，则选择图谱模板X作为目标图谱模板来生成组件关系图谱。由此，当按照预设的选取规则选取了目标图谱模板之后，即可根据该目标图谱模板对基准组件以及与基准组件具有依赖关系的所有组件进行布局，从而按照该目标图谱模板生成对应的组件关系图谱。可以理解的是，业务页面与图谱模板之间的关联方式可以是一对一的关联(一个业务页面与一种图谱模板关联)、也可以是多对一的关联(即多个业务页面与一种图谱模板关联)。需要说明的是，图谱模板的选取规则可依据用户的实际需求设定，此处不作限制。

以上可以看出，本实施例提供的一种组件关系图谱的生成方法，通过获取图谱生成指令，根据图谱生成指令中含有的用于生成组件关系图谱的基准组件信息对前端系统进行语义分析，以从前端系统中获取与基准组件具有关联关系的所有组件。进而基于目标图谱模板对基准组件以及与基准组件具有关联关系的所有组件进行布局，从而按照目标图谱模板生成对应的组件关系图谱，其中，目标图谱模板通过所述前端系统预先设定的选取规则确定。上述方法可以让开发人员更为清晰地确定组件的整体架构和功能边界，以及让测试人员更为准确地评估组件的变更差异和风险边界。

请参阅图3，图3为本申请第二实施例提供的一种组件关系图谱的生成方法的实现流程图。相对于第一实施例，本实施例提供的组件关系图谱的生成方法在步骤S12包括步骤S21～S23。详述如下：

S21：获取所述前端系统的源程序文件；

S22：对所述源程序文件进行上下文分析，生成展现所述源程序文件中所有组件间的关联关系的树状结构；

S23：基于所述基准组件信息，对所述树状结构进行基准定位以及按照预设的关键字匹配规则进行上下文分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

本实施例对前端系统进行语义分析过程中，首先，获取前端系统的源程序文件，然后通过语义分析对前端系统结构上正确的源程序文件进行上下文组件分析。举例说明，例如可以基于Spring提供的IOC容器来对源程序文件进行上下文分析。其中，Spring是一种具有分层架构优势的开源框架，IOC容器则用于管理分层架构中各个组件的整个生命周期，在本实施例的一些具体实现中，可以通过Spring对源程序文件中组件与组件之间的关联关系进行解耦处理，由此分析出源程序文件中所引用的各个组件之间的关联关系。进而，通过树状结构展现源程序文件中所引用的各组件相互之间的关联关系。其中，源程序实际是有一些特定语义的字母组成，例如对于组件来说commponent和import是关键字，因而本申请的组件关系图谱生成插件可以通过类似于关键字查找匹配来获取与基准组件具有关联关系的组件。具体地，根据基准组件在前端系统中的位置信息进行定位，从而得到在源程序文件中的定位行，进而对定位行通过一系列关键字匹配规则进行上下文分析，最后推断出某个文件存在哪些组件，以此类推，整个源程序文件中的组件都可以分析出来，然后根据源程序文件的目录结构和组件的相互引用关系，即可获取与基准组件具有关联关系的所有组件。

可以理解的是，本实施例的一些具体实现中，还可以通过单个页面的dom结构分析该页面使用的具体组件，然后通过语义分析，仅仅把与该页面的组件布局具有关联关系的所有组件找出来。上述实现可以让测试人员轻松的在待测试页面中快速识别单个页面的组件布局。

请参阅图4，图4为本申请第三实施例提供的一种组件关系图谱的生成方法的实现流程图。相对于第一实施例和第二实施例，其获取的图谱生成指令中还包括有图谱规则需求信息。此时，本实施例提供的组件关系图谱的生成方法在步骤S12包括步骤S31和S32。详述如下：

S31：根据所述图谱规格信息确定所述前端系统的遍历范围；

S32：按照所述遍历范围遍历在所述前端系统中的组件，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

本实施例中，还可以基于开发人员/测试人员执行的操作事件，使得生成的图谱生成指令中还包括有图谱规格需求信息，从而按照该图谱规格需求信息来生成对应的组件关系图谱。例如按照开发人员/测试人员的需求可以将其需要生成的图谱分为系统规格和页面规格等两种规格，由此，可以依据图谱规格需求信息即可按照开发人员/测试人员的需求生成整个系统完整规格的组件关系图谱或是系统某个页面规格的组件关系图谱。若图谱生成指令中包含的图谱规格需求信息为系统规格，则此时，根据该图谱规格需求信息可以确定整个前端系统的所有组件为遍历范围，通过遍历整个前端系统中的所有组件，来获取与该基准组件具有关联关系的所有组件。若图谱生成指令中包含的图谱规格需求信息为页面规格，则此时，限定前端系统中基准组件所对应页面中的所有组件为遍历范围，从而通过遍历基准组件所对应页面中的所有组件，来获取与该基准组件具有关联关系的所有组件。

上述实施例可以由开发人员/测试人员在触发插件时根据其意图选择此次需要生成的组件关系图谱所对应的图谱规格信息。由此，可以按照开发人员/测试人员意图来生成对应规格的组件关系图谱，灵活性好。

本申请的第四实施例中，还可以在前端系统中预设一个图谱模板库，在该图谱模板库中保存多种图谱模板，例如，包括但不限于HTML格式的图谱模板、json格式的图谱模板、图片格式的图谱模板中的一种或多种。在本实施例中，基于该预设的图谱模板库，通过设定图谱模板的选取规则，使得图谱模板库中的每一个模板具有一个对应的选取规则。在一些具体实现中，该选取规则可以设定为是组件属性，例如组件在前端系统中的页面位置，预先建立图谱模板与前端系统中的一个或多个页面位置之间的映射关系。由此，在获得基准组件后，按照前端系统设定的选取规则，识别基准组件在前端系统中的页面位置，然后根据预先建立的图谱模板与页面位置之间的映射关系从图谱模板库中选取出用于生成组件关系图谱的目标图谱模板。其中：

HTML(Hyper Text Markup Language，超文本标记语言)是一种标记语言，可以通过在文本文件中添加标记符的方式告诉浏览器如何显示其中的内容。HTML格式的图谱模板适用于大型的由Vue框架或者React框架搭建的前端系统以及相对复杂的前端页面等。基于HTML格式的图谱模板生成的组件关系图谱可以从应用或者组件树根节点出发逐步展开，可以实现聚焦感兴趣的组件，从而避开整个组件树复杂图谱的干扰。

JSON(JavaScriptObject Notation,JS对象简谱)是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。基于JSON格式的图谱模板生成的组件关系图谱可以将组件的关联关系及组建的代码一并提交至代码仓库中，由代码仓库进行存储管理。这样，通过使用版本分支管理工具中的diff功能，比较不同版本之间的差异，可以快速获得系统版本间组件依赖关系的差异，进而更好地评估组件变更带来的风险边界。

基于图片格式的图谱模板生成的组件关系图谱仅用于展示，不具备编辑等操作功能，结构简单，当用户仅用于了解系统全局观时，可采用图片格式的图谱模板来生成组件关系图谱，图谱生成过程简单快捷、耗时短、占用内存小。

本实施例的一些具体实现中，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则按照HTML格式的图谱模板生成对应的组件关系图谱时，还包括为组件关系图谱配置组件搜索和突出显示功能，以采用高亮形式将搜索的组件呈现在HTML格式的组件关系图谱中。具体地，在HTML格式下，通过为图谱配置搜索和突出显示功能，用户可以快速查找某个组件在整个前端系统或者在前端系统单个页面中的所在位置，并且将搜索到的组件会以高亮形式呈现在HTML格式的组件关系图谱中。举例说明，例如通过诸如组件的名称、组件的属性等关键字进行语义匹配，将命中的组件形成一个下拉列表显示于图谱中，通过点击该下拉列表中的目标组件，即可直接跳转至该目标组件所在位置，并且在图谱中对该目标组件进行高亮显示。基于HTML格式下组件关系图谱的组件搜索和突出显示功能，可以实现通过图谱从应用或者组件树根节点出发逐步展开以及高亮显示等方式的组合，直接聚焦用户感兴趣的组件从而避开整个前端系统组件之间复杂关系的干扰，实现组件全局与局部的统一，提升了开发和测试的效能。

本实施例的一些具体实现中，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则按照HTML格式的图谱模板生成对应的组件关系图谱时，还可以包括为组件关系图谱配置组件代码搜索功能，在组件关系图谱中为各组件设置代码详情链接，以通过代码详情链接获取组件对应的代码信息。具体地，在HTML格式下，由于插件在对系统进行的组件间分析是在系统文件路径下运行的，通过语义分析，可以建立各组件模块文件与其代码文件之间的关联关系，并基于该关联关系生成对应的代码详情链接。采用HTML格式的图谱模板生成的组件关系图谱提供了组件代码搜索功能，可以实现通过点击目标组件的代码详情链接，即可快速跳转到该目标组件对应的组件代码信息，这样，可以使得组件关系和其代码实现一览无余。而且此功能对于测试人员而言，实现了从黑盒测试到白盒测试的跃迁，风险识别更精确，避免无效人力的重复投入，增强发版信心，无需采用全量覆盖方式的测试策略，成本低、效率高、效果好。

请参阅图5，图5为本申请第五实施例提供的一种组件关系图谱的生成装置的结构框图。本实施例中该装置包括的各单元用于执行上述方法实施例一至四中的各步骤。具体请参阅上述方法实施例一至四中的相关描述。为了便于说明，仅示出了与本实施例相关的部分。如图5所示，组件关系图谱的生成装置50包括：获取模块51、处理模块52以及执行模块53。其中：所述获取模块51用于获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；所述处理模块52用于根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；所述执行模块53用于基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

应当理解的是，上述组件关系图谱的生成装置，与上述的组件关系图谱的生成方法一一对应，此处不再赘述。

图6为本申请第六实施例提供的一种计算机设备的结构框图。如图6所示，该实施例的计算机设备6包括：处理器61、存储器62以及存储在所述存储器62中并可在所述处理器61上运行的计算机程序63，例如组件关系图谱的生成方法的程序。处理器61执行所述计算机程序63时实现上述各个组件关系图谱的生成方法各实施例中的步骤。或者，所述处理器61执行所述计算机程序63时实现上述组件关系图谱的生成装置对应的实施例中各模块的功能。具体请参阅实施例中的相关描述，此处不赘述。

示例性的，所述计算机程序63可以被分割成一个或多个模块(单元)，所述一个或者多个模块被存储在所述存储器62中，并由所述处理器61执行，以完成本申请。所述一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序63在所述计算机设备6中的执行过程。例如，所述计算机程序63可以被分割成获取模块、处理模块和执行模块，各模块具体功能如上所述。

所述转台设备可包括，但不仅限于，处理器61、存储器62。本领域技术人员可以理解，图6仅仅是计算机设备6的示例，并不构成对计算机设备6的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述转台设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器61可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器62可以是所述计算机设备6的内部存储单元，例如计算机设备6的硬盘或内存。所述存储器62也可以是所述计算机设备6的外部存储设备，例如所述计算机设备6上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器62还可以既包括所述计算机设备6的内部存储单元也包括外部存储设备。所述存储器62用于存储所述计算机程序以及所述转台设备所需的其他程序和数据。所述存储器62还可以用于暂时地存储已经输出或者将要输出的数据。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种组件关系图谱的生成方法，其特征在于，包括：

获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；

根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；

基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

2.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述前端系统由Vue框架或React框架构建生成。

3.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，包括：

获取所述前端系统的源程序文件；

对所述源程序文件进行上下文分析，生成展现所述源程序文件中所有组件间的关联关系的树状结构；

基于所述基准组件信息，对所述树状结构进行基准定位以及按照预设的关键字匹配规则进行上下文分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

4.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述获取图谱生成指令中还包括图谱规则需求信息，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，还包括：

根据所述图谱规格信息确定所述前端系统的遍历范围；

按照所述遍历范围遍历在所述前端系统中的组件，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。

5.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤之前，还包括：

按照所述前端系统设定的选取规则从图谱模板库中选取用于生成组件关系图谱的目标图谱模板，其中，所述图谱模板库中配置有HTML格式图谱模板、json格式图谱模板以及图片格式图谱模板中的一种或多种。

6.根据权利要求5所述的组件关系图谱的生成方法，其特征在于，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤，包括：

为所述组件关系图谱配置组件搜索和突出显示功能，通过采用高亮形式将搜索的组件呈现在HTML格式的组件关系图谱中。

7.根据权利要求5或6所述的组件关系图谱的生成方法，其特征在于，若按照预设的选取规则从图谱模板库中选取的用于生成组件关系图谱的目标图谱模板为HTML格式的图谱模板，则所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤，包括：

为所述组件关系图谱配置组件代码搜索功能，通过在所述组件关系图谱中设置代码详情链接来获取组件对应的代码信息。

8.一种组件关系图谱的生成装置，其特征在于，包括：

获取模块，用于获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；

处理模块，用于根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；

执行模块，用于基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述方法的步骤。

Images