Application code visualization method and device, computer equipment and storage medium

Abstract

The invention relates to the technical field of computers and the field of financial science and technology businesses, and discloses an application code visualization method and device, computer equipment and a storage medium, and the method comprises the steps: obtaining source codes corresponding to all source files, and generating a code visualization plug-in according to each source code; and generating a visual flow chart by analyzing the logic flow and the target transfer function of the code visualization plug-in, and displaying the visual flow chart. By means of the mode, the source code is read through the code visualization plug-in and converted into the representation form of the visualization flow chart, the visualization flow chart assists a developer to understand the code logic and structure more quickly, and when codes are modified or reconstructed, the visualization flow chart provides a clear reference. The code visualization efficiency of the front-end application in the financial science and technology business field is improved, the visualization flow chart enables a user to quickly understand an existing code structure, and development of new functions and improvement of existing functions are accelerated.

Description

Technical Field

[0001] The present application relates to the field of computer technology and the field of financial technology business, and in particular to an application code visualization method, apparatus, computer equipment and storage medium. Background Art

[0002] With the rapid development of the digital financial industry, the functions of financial applications are becoming more and more rich and complex, such as web front-end applications. Better management and maintenance of client applications are particularly important for application suppliers and engineers. In the process of front-end application development, the project is developed in combination with the front-end interactive flowchart. The flowchart has many advantages, such as good readability, more intuitive, and clearer overall structure of the system application. It can not only understand the work to be completed in each stage and step, but also have a better understanding of the connection between the stages.

[0003] For existing web front-end applications or applications with incomplete flowcharts, when iterative maintenance is performed on the later projects or development engineers are replaced, engineers need to re-sort or understand the logical relationship between the modification points during application development. At this time, the flowchart will become more important.

[0004] Whether it is a new project or an existing project, if you want to ensure that the flowchart is always consistent with the code, there will be a problem of low efficiency in maintaining the flowchart. Therefore, how to improve the code of the front-end application will have the following problems: maintaining the flowchart is inefficient and requires a lot of manpower, especially for large existing projects with complex business logic; combing the flowchart may cause people to be not skilled enough or have inconsistent understanding, resulting in certain ambiguity between the flowchart and the actual project. Therefore, how to improve the efficiency of code visualization of front-end applications in the financial technology business field has become a technical problem that needs to be solved urgently. Summary of the invention

[0005] The present application provides an application code visualization method, apparatus, computer equipment and storage medium to improve the efficiency of code visualization of front-end applications in the financial technology business field.

[0006] In a first aspect, the present application provides an application code visualization method, the method comprising:

[0007] Obtain source codes corresponding to all source files in the front-end application, and generate a code visualization plug-in according to each of the source codes;

[0008] By parsing the logical flow and target conversion function of each of the code visualization plug-ins, a visualization flowchart corresponding to each of the source codes is generated, and the visualization flowchart is displayed to target users who have passed the verification.

[0009] In a second aspect, the present application further provides an application code visualization device, the device comprising:

[0010] A code visualization plug-in generation module is used to obtain source codes corresponding to all source files in the front-end application and generate a code visualization plug-in according to each of the source codes;

[0011] The visual flowchart display module is used to generate a visual flowchart corresponding to each source code by analyzing the logical flow and target conversion function of each code visualization plug-in, and display the visual flowchart to the target user who has passed the verification.

[0012] In a third aspect, the present application also provides a computer device, comprising a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program and implement the application code visualization method as described above when executing the computer program.

[0013] In a fourth aspect, the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the application code visualization method as described above.

[0014] The present application discloses an application code visualization method, device, computer equipment and storage medium. The application code visualization method includes obtaining source code corresponding to all source files in the front-end application, and generating a code visualization plug-in according to each source code; by parsing the logical flow and target conversion function of each code visualization plug-in, a visualization flowchart corresponding to each source code is generated, and the visualization flowchart is displayed to the target user who has passed the verification. In the above manner, the present application reads the source code through the code visualization plug-in and converts it into a representation of a visualization flowchart. The visualization flowchart assists developers to understand the code logic and structure more quickly. When the code is modified or reconstructed, the visualization flowchart provides a clear reference. The efficiency of code visualization of front-end applications in the financial technology business field is improved. The visualization flowchart enables users to quickly understand the existing code structure, accelerates the development of new functions and the improvement of existing functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0016] Figure 1is a schematic flow chart of an application code visualization method provided by the first embodiment of the present application;

[0017] Figure 2 is a schematic flow chart of an application code visualization method provided by the second embodiment of the present application;

[0018] Figure 3 A schematic block diagram of an application code visualization device provided in an embodiment of the present application;

[0019] Figure 4 A schematic block diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0020] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0021] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0022] It should be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0023] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0024] The embodiments of the present application provide an application code visualization method, apparatus, computer equipment, and storage medium. The application code visualization method can be applied to a server, and the source code is read by a code visualization plug-in and converted into a representation of a visual flowchart. The visual flowchart helps developers understand the code logic and structure more quickly. When the code is modified or refactored, the visual flowchart provides a clear reference. The efficiency of code visualization of front-end applications in the financial technology business field is improved. The visual flowchart enables users to quickly understand the existing code structure, accelerates the development of new functions and the improvement of existing functions. The server can be an independent server or a server cluster.

[0025] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0026] See also Figure 1 , Figure 1 This is a schematic flowchart of an application code visualization method provided by the first embodiment of the present application. The application code visualization method can be applied to a server to read source code through a code visualization plug-in and convert it into a visual flowchart representation. The visual flowchart helps developers understand the code logic and structure more quickly. When modifying or refactoring the code, the visual flowchart provides a clear reference. The code visualization efficiency of front-end applications in the financial technology business field is improved. The visual flowchart enables users to quickly understand the existing code structure, accelerating the development of new functions and the improvement of existing functions.

[0027] like Figure 1 As shown, the application code visualization method specifically includes steps S10 to S20.

[0028] Step S10: Obtain source codes corresponding to all source files in the front-end application, and generate a code visualization plug-in according to each source code;

[0029] Step S20: generate a visualization flowchart corresponding to each source code by parsing the logic flow and target conversion function of each code visualization plug-in, and display the visualization flowchart to the target user who has passed the verification.

[0030] In one embodiment, this embodiment will implement a tool and output a front-end flowchart by reading and analyzing the code. In many current projects, webpack is used for packaging. During the packaging process, webpack will perform dependency analysis, file compilation, and file packaging through the entry file.

[0031] During the packaging process, each file will be compiled and packaged. We will use the webpack packaging process to implement the webpack plug-in that converts the code into a flowchart. The specific process is as follows:

[0032] 1. A plug-in that converts code into a flowchart. This plug-in will obtain the source code of each file in the packaging process;

[0033] 2. Implement a method that can analyze and convert file code into a flowchart. This method will analyze the input parameters, called functions, logical flow, etc. of the file source code;

[0034] 3. Call the analysis and conversion method in step 2 for each file in the packaging process;

[0035] 4. The flow chart will be displayed in the form of a page.

[0036] Through the above steps, the conversion of the front-end code flowchart can be realized. During the development process, you can choose to enable the conversion plug-in to view the flowchart of the corresponding page, which will be of great help to development engineers during the development and maintenance of the project.

[0037] The present embodiment discloses an application code visualization method, apparatus, computer equipment and storage medium, the application code visualization method includes obtaining source code corresponding to all source files in the front-end application, and generating a code visualization plug-in according to each source code; by parsing the logical flow and target conversion function of each code visualization plug-in, a visualization flowchart corresponding to each source code is generated, and the visualization flowchart is displayed to the target user who has passed the verification. In the above manner, the present application reads the source code through the code visualization plug-in and converts it into a representation of a visualization flowchart. The visualization flowchart assists developers to understand the code logic and structure more quickly, and the visualization flowchart provides a clear reference when the code is modified or reconstructed. The efficiency of code visualization of front-end applications in the financial technology business field is improved, and the visualization flowchart enables users to quickly understand the existing code structure, accelerating the development of new functions and the improvement of existing functions.

[0038] See also Figure 2 , Figure 2This is a schematic flowchart of an application code visualization method provided by the second embodiment of the present application. The application code visualization method can be applied to a server, and is used to read source code through a code visualization plug-in and convert it into a visual flowchart representation. By clearly displaying function calls and parameter passing, developers can more easily identify reusable code snippets. Visual flowcharts help developers understand code logic and structure more quickly. When modifying or refactoring the code, visual flowcharts provide a clear reference. The efficiency of code visualization of front-end applications in the financial technology business field is improved. Visual flowcharts enable users to quickly understand existing code structures, accelerating the development of new functions and the improvement of existing functions.

[0039] based on Figure 1 The embodiment shown, this embodiment Figure 2 As shown, before step S20, steps S11 to S12 are included.

[0040] Step S11, analyzing the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop;

[0041] Step S12: Identify the function call relationship and parameter transfer relationship of the code visualization plug-in, and determine the target conversion function.

[0042] In one embodiment, this embodiment designs a code analysis engine to parse the source code and identify key elements, such as variables, function calls, loops, conditional statements, etc. An abstract syntax tree (AST) is used to represent the structure of the source code, which helps to analyze the code logic more accurately.

[0043] Control structure analysis is specifically divided into conditional judgment and data loop. Specifically, conditional judgment includes identifying conditional statements such as if, switch, and ternary, and analyzing the true and false branches of conditional statements to determine the decision points and branch flow in the flowchart. Data loops include identifying loop structures such as for, while, and do-while, and analyzing the entry and exit conditions of the loop, as well as the logic within the loop body.

[0044] The logic flow determination starts from the entry point of the code (such as the main function), traces the code execution path step by step, uses the control flow graph to represent the execution flow of the code, and determines the entry and exit points of each basic block (basic instruction sequence).

[0045] This embodiment discloses an application code visualization method, device, computer equipment and storage medium, the application code visualization method includes obtaining source code corresponding to all source files in the front-end application, and generating a code visualization plug-in according to each source code; analyzing the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop; identifying the function call relationship and parameter transfer relationship of the code visualization plug-in, and determining the target conversion function; by parsing the logic flow and target conversion function of each code visualization plug-in, generating a visualization flowchart corresponding to each source code, and displaying the visualization flowchart to the target user who has passed the verification. In the above manner, the present application reads the source code through the code visualization plug-in and converts it into a representation form of a visualization flowchart. By clearly displaying function calls and parameter transfer, developers can more easily identify reusable code snippets. The visualization flowchart assists developers to understand the code logic and structure faster. When the code is modified or refactored, the visualization flowchart provides a clear reference. The efficiency of code visualization of front-end applications in the financial technology business field is improved, and the visualization flowchart enables users to quickly understand the existing code structure, accelerate the development of new functions and the improvement of existing functions.

[0046] In a more preferred embodiment, based on Figure 2 In the embodiment shown, in this embodiment, step S20 includes:

[0047] According to the target conversion function, mapping the logic flow into nodes and connecting lines, and generating the visual flow chart according to the nodes and the connecting lines;

[0048] The visual flow chart is displayed through the graphical display interface of the target user.

[0049] In one embodiment, a code parser is used to parse the source code to generate an AST (Abstract Syntax Tree), which is a tree data structure used to represent the source code structure. In compiler design, AST is an important product of the source code parsing stage, which converts the code into an intermediate form so that the subsequent stages of the compiler (such as optimization, code generation, etc.) can be processed more easily.

[0050] The analyzed code structure is converted into nodes and edges of a flowchart, and it is determined how to represent different code elements, such as using different shapes to represent functions, loops, etc.

[0051] This embodiment discloses an application code visualization method, device, computer equipment and storage medium, the application code visualization method includes obtaining source code corresponding to all source files in the front-end application, and generating a code visualization plug-in according to each of the source code; analyzing the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop; identifying the function call relationship and parameter transfer relationship of the code visualization plug-in, and determining the target conversion function; according to the target conversion function, mapping the logic flow into nodes and connecting lines, and generating the visualization flowchart according to the nodes and the connecting lines; displaying the visualization flowchart through the graphical display interface of the target user. In the above manner, the visualization plug-in of the present application helps developers to quickly grasp the code logic through graphical representation, especially for complex control structures and function calls, by displaying the code logic in the form of a flowchart, helping developers to quickly track the program execution path and locate the problem. By identifying and displaying function calls and parameter transfer, developers can more easily discover and use existing code modules, improve the efficiency of code visualization of front-end applications in the financial technology business field, and the visualization flowchart enables users to quickly understand the existing code structure, accelerate the development of new functions and the improvement of existing functions.

[0052] In a more preferred embodiment, based on Figure 2 In the embodiment shown, in this embodiment, step S12 includes:

[0053] Traversing the abstract syntax tree AST nodes of the code visualization plug-in to identify all code structures in the source code;

[0054] Determine a function call node in the AST node, and determine the function call relationship according to each of the function call nodes;

[0055] Extracting function transfer parameters in each of the function call nodes, and determining the parameter transfer relationship based on each of the function transfer parameters;

[0056] An initial conversion function is determined according to the function calling relationship, and the target conversion function is determined based on the initial conversion function and the parameter transfer relationship.

[0057] In one embodiment, starting from the root node of the AST, recursively traverse each node and create corresponding flowchart nodes according to the node type (such as function declaration, conditional statement, loop, etc.). The connection order between nodes is determined according to the parent-child relationship and sibling relationship in the AST. For conditional statements, true and false branches are identified and represented as corresponding connecting lines in the flowchart.

[0058] Identify loop structures and indicate the start and end of the loop in the flowchart. For iterations, ensure that the entry and exit of the loop are clearly indicated in the flowchart. Function calls can be made by creating function nodes in the flowchart, while parameter passing can be achieved through the input / output ports of the node.

[0059] The target conversion function in this embodiment may include an analysis function, a conversion function, and a display function. Specifically, the analysis function: implements a function, inputs source code, and outputs a structured representation of the code (such as AST);

[0060] Transformation function: implement a function to generate nodes and edges of a flowchart based on the structured representation;

[0061] Display function: Implement a function to display the generated flowchart in the form of a graphical interface.

[0062] The present embodiment discloses an application code visualization method, apparatus, computer equipment and storage medium, the application code visualization method comprising obtaining source code corresponding to all source files in a front-end application, and generating a code visualization plug-in according to each of the source code; analyzing the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure comprises conditional judgment and / or data loop; traversing the abstract syntax tree AST nodes of the code visualization plug-in to identify all code structures in the source code; determining function call nodes in the AST nodes, and determining the function call relationship according to each of the function call nodes; extracting function transfer parameters in each of the function call nodes, and determining the parameter transfer relationship based on each of the function transfer parameters; determining an initial conversion function according to the function call relationship, and determining the target conversion function based on the initial conversion function and the parameter transfer relationship; generating a visualization flowchart corresponding to each of the source code by parsing the logic flow and the target conversion function of each of the code visualization plug-ins, and displaying the visualization flowchart to target users who have passed the verification. In the above manner, this application reads the source code through the code visualization plug-in and converts it into a visual flowchart representation. The visual flowchart assists developers to understand the code logic and structure more quickly. When modifying or refactoring the code, the visual flowchart provides a clear reference. Through visual representation, the code structure is more intuitive and easy to understand, helping developers quickly locate problems and potential improvements in the code. The automatically generated flowchart provides a form of documentation for the project, reducing the workload of manual document writing. Through visual analysis, security vulnerabilities and improper code practices can be more easily discovered, improving the efficiency of code visualization for front-end applications in the fintech business field.

[0063] In a specific embodiment, based on Figure 1In the embodiment shown, in this embodiment, step S10 includes:

[0064] Performing visualization processing on the source code based on a preset integrated visualization library to generate visualization data;

[0065] The visualization data is subjected to a data structure construction operation through a preset structure configuration tool to generate the code visualization plug-in.

[0066] In a more preferred embodiment, a data structure construction operation is performed on the visualization data by using a preset structure configuration tool to generate the code visualization plug-in, including:

[0067] Acquire a data structure of the visualization data;

[0068] Based on the visualization data, determining an input file and an output file of the code visualization plug-in;

[0069] The data structure, the input file and the output file are integrated through the Webpack tool to construct and generate the code visualization plug-in.

[0070] In a specific embodiment, obtaining the data structure of the visualization data is divided into three steps: defining the AST node type, involving the AST node structure, and implementing the AST builder. Determine the node types to be included in the AST, such as functions, classes, variables, conditional statements, loops, etc., and design a class or structure for each node type, including the properties of the node, such as type, name, parameters, and child node list. The AST builder is used to parse the source code and build the AST. This may involve using existing parser libraries such as Babel, Espr ima, etc.

[0071] Input file, that is, determine the input file of the plug-in, which is usually an image file (such as .png, .svg) of a flowchart or an HTML file used to display the flowchart in a web page.

[0072] This embodiment discloses an application code visualization method, device, computer equipment and storage medium, the application code visualization method includes visualizing the source code based on a preset integrated visualization library to generate visualization data; obtaining the data structure of the visualization data; determining the input file and output file of the code visualization plug-in based on the visualization data; integrating the data structure, the input file and the output file through the Webpack tool to construct and generate the code visualization plug-in; by parsing the logical flow and target conversion function of each code visualization plug-in, generating a visualization flowchart corresponding to each source code, and displaying the visualization flowchart to the target user who has passed the verification. In the above manner, the present application reads the source code through the code visualization plug-in and converts it into a representation of a visualization flowchart. The visualization flowchart assists developers to understand the code logic and structure faster. When the code is modified or refactored, the visualization flowchart provides a clear reference. The efficiency of code visualization of front-end applications in the financial technology business field is improved. The visualization flowchart enables users to quickly understand the existing code structure, accelerates the development of new functions and the improvement of existing functions.

[0073] Based on any of the above embodiments, in this embodiment, before step S20, the following steps are further included:

[0074] Determine whether there is a user with the same user ID as the target user;

[0075] In the case that there is no user with the same user ID as the target user, it is determined that the target user is a legitimate user who has passed the verification.

[0076] See also Figure 3 , Figure 3 The embodiment of the present application provides a schematic block diagram of an application code visualization device, which is used to execute the aforementioned application code visualization method. The application code visualization device can be configured on a server.

[0077] like Figure 3 As shown, the application code visualization device 400 includes:

[0078] A code visualization plug-in generation module 410 is used to obtain source codes corresponding to all source files in the front-end application and generate a code visualization plug-in according to each source code;

[0079] The visual flowchart display module 420 is used to generate a visual flowchart corresponding to each source code by analyzing the logical flow and target conversion function of each code visualization plug-in, and display the visual flowchart to the target user who has passed the verification.

[0080] Furthermore, the application code visualization device 400 further includes:

[0081] A logic flow determination module, used for analyzing the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop;

[0082] The target conversion function determination module is used to identify the function call relationship and parameter transfer relationship of the code visualization plug-in and determine the target conversion function.

[0083] Furthermore, the visual flowchart display module 420 includes:

[0084] A visual flow chart generating unit, used for mapping the logic flow into nodes and connecting lines according to the target conversion function, and generating the visual flow chart according to the nodes and the connecting lines;

[0085] A visual flowchart display unit is used to display the visual flowchart through a graphic display interface of the target user.

[0086] Furthermore, the target conversion function determination module includes:

[0087] A code structure identification unit, used to traverse the abstract syntax tree AST nodes of the code visualization plug-in to identify all code structures in the source code;

[0088] A function call relationship determination unit, used to determine a function call node in the AST node, and determine the function call relationship according to each of the function call nodes;

[0089] A parameter transfer relationship determination unit, used for extracting the function transfer parameters in each of the function call nodes, and determining the parameter transfer relationship based on each of the function transfer parameters;

[0090] The target conversion function determination unit is used to determine the initial conversion function according to the function call relationship, and determine the target conversion function based on the initial conversion function and the parameter transfer relationship.

[0091] Furthermore, the code visualization plug-in generation module 410 includes:

[0092] A visualization data generating unit, configured to perform visualization processing on the source code based on a preset integrated visualization library to generate visualization data;

[0093] The code visualization plug-in generating unit is used to perform a data structure construction operation on the visualization data through a preset structure configuration tool to generate the code visualization plug-in.

[0094] Furthermore, the code visualization plug-in generation unit includes:

[0095] A data structure acquisition subunit, used to acquire the data structure of the visualization data;

[0096] An input and output determination subunit, used to determine an input file and an output file of the code visualization plug-in based on the visualization data;

[0097] The code visualization plug-in construction subunit is used to integrate the data structure, the input file and the output file through the Webpack tool to construct and generate the code visualization plug-in.

[0098] Furthermore, the application code visualization device 400 further includes:

[0099] A user verification module is used to determine whether there is a user with the same user ID as the target user;

[0100] The legal user determination module is used to determine that the target user is a legal user who has passed the verification when there is no user with the same user ID as the target user.

[0101] It should be noted that those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described device and each module can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0102] The above-mentioned device can be implemented in the form of a computer program. Figure 4 Runs on the computer device shown.

[0103] See also Figure 4 , Figure 4 1 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device may be a server.

[0104] See also Figure 4 The computer device includes a processor, a memory and a network interface connected through a system bus, wherein the memory may include a non-volatile storage medium and an internal memory.

[0105] The non-volatile storage medium can store an operating system and a computer program. The computer program includes program instructions, and when the program instructions are executed, the processor can execute any one of the application code visualization methods.

[0106] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0107] The internal memory provides an environment for the operation of the computer program in the non-volatile storage medium. When the computer program is executed by the processor, the processor can execute any application code visualization method.

[0108] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art will understand that Figure 4 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0109] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0110] In one embodiment, the processor is used to run a computer program stored in the memory to implement the following steps:

[0111] Obtain source codes corresponding to all source files in the front-end application, and generate a code visualization plug-in according to each of the source codes;

[0112] By parsing the logical flow and target conversion function of each of the code visualization plug-ins, a visualization flowchart corresponding to each of the source codes is generated, and the visualization flowchart is displayed to target users who have passed the verification.

[0113] In one embodiment, by parsing the logic flow and target conversion function of each code visualization plug-in, before generating a visualization flowchart corresponding to each source code, it is used to achieve:

[0114] Analyze the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop;

[0115] The function calling relationship and parameter passing relationship of the code visualization plug-in are identified, and the target conversion function is determined.

[0116] In one embodiment, by parsing the logic flow and target conversion function of each code visualization plug-in, a visualization flowchart corresponding to each source code is generated, and the visualization flowchart is displayed to the target user who has passed the verification, so as to achieve:

[0117] According to the target conversion function, mapping the logic flow into nodes and connecting lines, and generating the visual flow chart according to the nodes and the connecting lines;

[0118] The visual flow chart is displayed through the graphical display interface of the target user.

[0119] In one embodiment, the function call relationship and parameter transfer relationship of the code visualization plug-in are identified, and the target conversion function is determined to achieve:

[0120] Traversing the abstract syntax tree AST nodes of the code visualization plug-in to identify all code structures in the source code;

[0121] Determine a function call node in the AST node, and determine the function call relationship according to each of the function call nodes;

[0122] Extracting function transfer parameters in each of the function call nodes, and determining the parameter transfer relationship based on each of the function transfer parameters;

[0123] An initial conversion function is determined according to the function calling relationship, and the target conversion function is determined based on the initial conversion function and the parameter transfer relationship.

[0124] In one embodiment, a code visualization plug-in is generated according to each of the source codes to implement:

[0125] Performing visualization processing on the source code based on a preset integrated visualization library to generate visualization data;

[0126] The visualization data is subjected to a data structure construction operation through a preset structure configuration tool to generate the code visualization plug-in.

[0127] In one embodiment, a data structure construction operation is performed on the visualization data through a preset structure configuration tool to generate the code visualization plug-in for realizing:

[0128] Acquire a data structure of the visualization data;

[0129] Based on the visualization data, determining an input file and an output file of the code visualization plug-in;

[0130] The data structure, the input file and the output file are integrated through the Webpack tool to construct and generate the code visualization plug-in.

[0131] In one embodiment, by parsing the logic flow and target conversion function of each code visualization plug-in, generating a visualization flowchart corresponding to each source code, and displaying the visualization flowchart to the target user who has passed the verification, it is used to achieve:

[0132] Determine whether there is a user with the same user ID as the target user;

[0133] In the case that there is no user with the same user ID as the target user, it is determined that the target user is a legitimate user who has passed the verification.

[0134] A computer-readable storage medium is also provided in an embodiment of the present application. The computer-readable storage medium stores a computer program. The computer program includes program instructions. The processor executes the program instructions to implement any application code visualization method provided in the embodiment of the present application.

[0135] The computer-readable storage medium may be an internal storage unit of the computer device described in the foregoing embodiment, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart memory card (Smart Medi a Card, SMC), a secure digital (Secure Digital, SD) card, a flash memory card (Flash Card), etc., equipped on the computer device.

[0136] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A method for visualizing application code, characterized in that: include: Obtain source codes corresponding to all source files in the front-end application, and generate a code visualization plug-in according to each of the source codes; By parsing the logical flow and target conversion function of each of the code visualization plug-ins, a visualization flowchart corresponding to each of the source codes is generated, and the visualization flowchart is displayed to target users who have passed the verification.

2. The application code visualization method according to claim 1, characterized in that: Before generating a visualization flowchart corresponding to each source code by parsing the logic flow and target conversion function of each code visualization plug-in, the method includes: Analyze the control structure of the code visualization plug-in to determine the logic flow, wherein the control structure includes conditional judgment and / or data loop; The function calling relationship and parameter passing relationship of the code visualization plug-in are identified, and the target conversion function is determined.

3. The application code visualization method according to claim 2, characterized in that: The step of analyzing the logic flow and target conversion function of each code visualization plug-in to generate a visualization flowchart corresponding to each source code, and displaying the visualization flowchart to a target user who has passed the verification includes: According to the target conversion function, mapping the logic flow into nodes and connecting lines, and generating the visual flow chart according to the nodes and the connecting lines; The visual flow chart is displayed through the graphical display interface of the target user.

4. The application code visualization method according to claim 2, characterized in that: The identifying the function calling relationship and parameter passing relationship of the code visualization plug-in and determining the target conversion function includes: Traversing the abstract syntax tree AST nodes of the code visualization plug-in to identify all code structures in the source code; Determine a function call node in the AST node, and determine the function call relationship according to each of the function call nodes; Extracting function transfer parameters in each of the function call nodes, and determining the parameter transfer relationship based on each of the function transfer parameters; An initial conversion function is determined according to the function calling relationship, and the target conversion function is determined based on the initial conversion function and the parameter transfer relationship.

5. The application code visualization method according to claim 1, characterized in that: The step of generating a code visualization plug-in according to each of the source codes includes: Performing visualization processing on the source code based on a preset integrated visualization library to generate visualization data; The visualization data is subjected to a data structure construction operation through a preset structure configuration tool to generate the code visualization plug-in.

6. The application code visualization method according to claim 5, characterized in that: The preset structure configuration tool includes a Webpack tool, and the data structure construction operation is performed on the visualization data by the preset structure configuration tool to generate the code visualization plug-in, including: Acquire a data structure of the visualization data; Based on the visualization data, determining an input file and an output file of the code visualization plug-in; The data structure, the input file and the output file are integrated through the Webpack tool to construct and generate the code visualization plug-in.

7. The application code visualization method according to any one of claims 1 to 6, characterized in that: The method of analyzing the logic flow and target conversion function of each code visualization plug-in to generate a visualization flowchart corresponding to each source code, and displaying the visualization flowchart to a target user who has passed the verification, includes: Determine whether there is a user with the same user ID as the target user; In the case that there is no user with the same user ID as the target user, it is determined that the target user is a legitimate user who has passed the verification.

8. An application code visualization device, characterized in that: include: A code visualization plug-in generation module is used to obtain source codes corresponding to all source files in the front-end application and generate a code visualization plug-in according to each of the source codes; The visual flowchart display module is used to generate a visual flowchart corresponding to each source code by analyzing the logical flow and target conversion function of each code visualization plug-in, and display the visual flowchart to the target user who has passed the verification.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is configured to execute the computer program and implement the application code visualization method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the application code visualization method according to any one of claims 1 to 7.

Images