【技术实现步骤摘要】
组件关系图谱的生成方法、装置、计算机设备及存储介质
本申请涉及数据展示
，尤其涉及一种组件关系图谱的生成方法、装置、计算机设备及存储介质。
技术介绍
Vue和React都是JavaScript的用户界面设计(UI)框架，这两种框架均是由数据驱动视图，框架只有骨架，其它诸如路由、状态管理等功能都是采用与框架分离的组件。且它们都具有自己的构建工具，支持虚拟DOM实现快速渲染和组件化开发，常用于以组件化形式搭建前端系统。采用Vue或React框架搭建前端系统过程中需要通过选择不同的组件进行拼装来完成系统对应业务的功能支持。然而，在拼装过程中组件层层嵌套，组件与组件之间的依赖关系复杂，导致开发人员和测试人员对前端系统全局观的了解受到限制。目前，对于采用Vue或React框架搭建的前端系统，缺乏一种组件关系图谱生成工具用以执行在Vue或React框架搭建的前端系统中生成组件关系图谱的方法。这使得采用Vue或React框架搭建前端系统过程中，开发人员容易因难以识别组件的功能边界而致使系统业务功能的缺失或损坏，开发效率低。而...
【技术保护点】
1.一种组件关系图谱的生成方法，其特征在于，包括：/n获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；/n根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；/n基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。/n
【技术特征摘要】
1.一种组件关系图谱的生成方法，其特征在于，包括：
获取图谱生成指令，所述图谱生成指令中含有用于生成组件关系图谱的基准组件信息；
根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与基准组件具有关联关系的所有组件；
基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱，其中，所述目标图谱模板通过所述前端系统预先设定的选取规则确定。
2.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述前端系统由Vue框架或React框架构建生成。
3.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，包括：
获取所述前端系统的源程序文件；
对所述源程序文件进行上下文分析，生成展现所述源程序文件中所有组件间的关联关系的树状结构；
基于所述基准组件信息，对所述树状结构进行基准定位以及按照预设的关键字匹配规则进行上下文分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。
4.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述获取图谱生成指令中还包括图谱规则需求信息，所述根据所述基准组件信息对前端系统进行语义分析，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件的步骤，还包括：
根据所述图谱规格信息确定所述前端系统的遍历范围；
按照所述遍历范围遍历在所述前端系统中的组件，以从所述前端系统中获取与所述基准组件具有关联关系的所有组件。
5.根据权利要求1所述的组件关系图谱的生成方法，其特征在于，所述基于目标图谱模板对所述基准组件以及与所述基准组件具有关联关系的所有组件进行布局，以按照所述目标图谱模板生成对应的组件关系图谱的步骤之前，还包括：
按照所述前端系统设定的选取规则从图谱模板库中选取用于生成组件关系图谱的目标图谱模板，其中，所述图谱模板库中配置有HTM...
【专利技术属性】
技术研发人员：樊丰春，沈瑶，刘志伟，李亚军，
申请(专利权)人：平安付科技服务有限公司，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。