Component relationship graph generation method and device, computer equipment and storage medium

Abstract

The method is suitable for the technical field of data display, and provides a component relation graph generation method and device, and the method comprises the steps: obtaining a graph generation instruction, carrying out the semantic analysis of a front-end system according to the reference component information, which is contained in the graph generation instruction and is used for generatinga component relation graph, so as to obtain all components, which have an association relation with a reference component, from the front-end system; then arranging the reference component and all the components having the association relationship with the reference component on the basis of a target map template, so as to generate a corresponding component relationship map according to the target map template, wherein the target map template is determined through a selection rule preset by the front-end system. According to the method, developers can determine the overall architecture and functional boundary of the component more clearly, and testers can evaluate the change difference and risk boundary of the component more accurately.

Description

technical field [0001] The present application relates to the technical field of data presentation, and in particular to a method, device, computer equipment, and storage medium for generating a component relationship graph. Background technique [0002] Both Vue and React are JavaScript user interface design (UI) frameworks. Both frameworks are data-driven views, and the framework has only a skeleton. Other functions such as routing and state management use components separated from the framework. And they all have their own construction tools, which support virtual DOM for fast rendering and componentized development, and are often used to build front-end systems in componentized form. In the process of building the front-end system using the Vue or React framework, it is necessary to select different components for assembly to complete the functional support of the corresponding business of the system. However, during the assembly process, the components are nested layer...

AI Technical Summary

Problems solved by technology

This makes it easy for developers to lack or damage system business functions due to difficulty in identifying the functional boundaries of components when building front-end systems using Vue or React frameworks, resulting in low development efficiency.

And it is difficult for testers to correctly grasp the risk boundaries brought about by component changes, resulting in a single test strategy, lack of flexibility, and low test efficiency and poor results

Images