Flow document automatic generation method and device, computer device, and storage medium

Abstract

The embodiment of the application belongs to the field of development assistance, is applied to the field of automatic generation of process documents, and relates to a process document automatic generation method and device, computer equipment and a storage medium, which comprises the following steps: obtaining page basic data based on a vue analysis tool; determining data to be converted into an abstract syntax tree structure in js script content by using a babel parser; generating an abstract syntax tree; outputting a markdown format file based on the abstract syntax tree and a markdown file generator, obtaining comment information in the js script content, and outputting the comment information into the markdown format file; converting the markdown format file into an HTML format file based on CSS style content, and completing automatic generation of the process document. The logic of the corresponding front-end page can be quickly and accurately viewed through the finally generated process document, process identification can be facilitated, and the learning cost of new employees for page processes can be greatly reduced through the comment information.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of development assistance and automatic generation of process documents, and in particular relates to a process document automatic generation method and device, computer equipment and a storage medium. BACKGROUND

[0002] Documents and comments have always been the focus of discussion in the industry. Combining the two in the front end, establishing good comment specifications, and synchronously generating process documents that match the code logic are all problems worth exploring.

[0003] Currently, there are many defects and deficiencies in the generation of process documents for specific projects, mainly including: the information extracted by the process document is not comprehensive, only part of the relevant data and comment information, which cannot represent the entire process logic, causing process recognition difficulties; the generated process document cannot be combined with the project page style in terms of display format, and is not readable for new people who are not familiar with the target project, which requires a lot of time to familiarize themselves with the project process. SUMMARY

[0004] The purpose of the embodiments of the present application is to provide a process document automatic generation method and device, computer equipment and a storage medium, so that the final generated process document can quickly and accurately view the logic of the corresponding front-end page, which can facilitate process recognition and greatly reduce the learning cost of new employees on the page process through comment information.

[0005] To solve the above technical problems, the embodiments of the present application provide a process document automatic generation method, which adopts the following technical solutions:

[0006] A process document automatic generation method, comprising the steps of:

[0007] Based on a vue page analysis tool, all vue page paths are obtained using a router method, each page and the constituent components of each page are recursively traversed, and the pages and the constituent components are obtained by level-by-level nesting;

[0008] The parseComponent function in the vue page analysis tool is used to obtain the page basic data corresponding to the pages and the constituent components, respectively, wherein the page basic data includes js script content and CSS style content;

[0009] The js script content is parsed using a babel parser to determine the data in the js script content to be converted into an abstract syntax tree structure;

[0010] The data to be converted into an abstract syntax tree structure is traversed according to each hierarchical node to obtain the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data required for generating a flow document;

[0011] Based on the traversal result, the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data are set to have an association, and the method name is used as each node of the abstract syntax tree to generate an abstract syntax tree;

[0012] Based on the abstract syntax tree and a markdown file generator, the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data are output as a markdown format file;

[0013] Based on the CSS style content, the markdown format file is converted into an HTML format file to complete automatic generation of a flow document.

[0014] Further, the step of parsing the js script content using the babel parser to determine the data in the js script content to be converted into an abstract syntax tree structure specifically includes:

[0015] The js script content is subjected to syntax analysis and lexical analysis using a first component in the babel parser;

[0016] The related data content for generating an abstract syntax tree in the js script content after analysis by the first component is obtained using a second component in the babel parser, wherein the related data content includes a method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data.

[0017] Further, the step of traversing the data to be converted into an abstract syntax tree structure according to each hierarchical node to obtain the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data required for generating a flow document specifically includes:

[0018] The related data content for generating an abstract syntax tree in the js script content is extracted using a third component in the babel parser to obtain extracted data;

[0019] Based on a preset type recognition tool, the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data in the extracted data are recognized;

[0020] From the identified data, the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data required for generating the process document are screened out.

[0021] Further, after the step of identifying the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data in the extracted data based on the preset type identification tool, the method further comprises:

[0022] When the method name in the extracted data is identified, whether the method name is added with annotation information is judged based on a preset judgment rule.

[0023] If the annotation information is added, the annotation information is obtained.

[0024] Further, the step of judging whether the method name is added with annotation information based on the preset judgment rule, wherein the preset judgment rule is specifically:

[0025] The annotation tag is pre-set as a reference field.

[0026] When the method name in the extracted data is identified, whether the method name before a plurality of lines of code in the js script content or the method block corresponding to the method name contains the reference field is judged.

[0027] If it contains, it is determined that the method name is added with annotation information.

[0028] If it does not contain, it is determined that the method name is not added with annotation information.

[0029] Further, after the step of obtaining the annotation information if the annotation information is added, the method further comprises:

[0030] The data content in the annotation tag is obtained and taken as annotation information.

[0031] The annotation information and the method name corresponding to the annotation information are set to have a one-to-one correspondence.

[0032] Further, after the step of outputting the method name, method parameter, object model, subcomponent registration information, life cycle, routing cycle, and event data as a markdown format file based on the abstract syntax tree and the markdown file generator, the method further comprises:

[0033] Based on the one-to-one correspondence between the annotation information and the method name corresponding thereto, the annotation information corresponding to the method name is obtained respectively.

[0034] Output the annotation information to a markdown format file in which the corresponding method name is located.

[0035] To solve the above technical problems, the embodiment of the application further provides a process document automatic generation device, which adopts the technical scheme as follows:

[0036] A process document automatic generation device comprises:

[0037] A Vue first parsing module is configured to use a router mode to obtain all vue page paths based on a vue page parsing tool, recursively traverse each page and constituent components of the each page, and obtain the page and the constituent components by level-by-level nesting.

[0038] A Vue second parsing module is configured to use a parseComponent function in the vue page parsing tool to obtain page basic data corresponding to the page and the constituent components, respectively, wherein the page basic data comprises js script content and CSS style content.

[0039] A babel parsing module is configured to use a babel parser to parse the js script content, and determine data in the js script content to be converted into an abstract syntax tree structure.

[0040] A traversal obtaining module is configured to traverse the data to be converted into the abstract syntax tree structure according to each level node, and obtain a method name, a method parameter, an object model, sub-component registration information, a life cycle, a routing cycle, and event data required for generating a process document.

[0041] A syntax tree generating module is configured to set an association relationship for the method name, the method parameter, the object model, the sub-component registration information, the life cycle, the routing cycle, and the event data based on a traversal result, and generate an abstract syntax tree by taking the method name as each node of the abstract syntax tree.

[0042] A markdown file output module is configured to output the method name, the method parameter, the object model, the sub-component registration information, the life cycle, the routing cycle, and the event data to a markdown format file based on the abstract syntax tree and a markdown file generator.

[0043] An HTML file generating module is configured to convert the markdown format file into an HTML format file based on the CSS style content, and complete process document automatic generation.

[0044] To solve the above technical problems, the embodiment of the application further provides a computer device, which adopts the technical scheme as follows:

[0045] A computer device comprises a memory and a processor, the memory stores computer readable instructions, and the processor executes the computer readable instructions to implement the steps of the flow document automatic generation method.

[0046] To solve the above technical problems, the embodiment of the application further provides a computer readable storage medium, which adopts the technical scheme as follows:

[0047] A computer readable storage medium stores computer readable instructions, and the processor executes the computer readable instructions to implement the steps of the flow document automatic generation method.

[0048] Compared with the prior art, the embodiment of the application has the following beneficial effects:

[0049] The flow document automatic generation method provided by the embodiment of the application obtains page basic data based on a vue analysis tool, determines data to be converted into an abstract syntax tree structure in js script content by using a babel parser, obtains method names, method parameters, object models, sub-component registration information, life cycles, routing cycles and event data required for generating a flow document, generates an abstract syntax tree by taking the method names as nodes of each layer of the abstract syntax tree, generates a markdown format file based on the abstract syntax tree and a markdown file generator, converts the markdown format file into an HTML format file based on CSS style content, and finally completes flow document automatic generation. The generated flow document can be used to quickly and accurately view the logic of a corresponding front-end page, which facilitates flow identification and greatly reduces the learning cost of new employees for page flow. BRIEF DESCRIPTION OF DRAWINGS

[0050] In order to more clearly illustrate the schemes in the application, the drawings needed in the description of the embodiments of the application will be briefly introduced. Obviously, the drawings in the following description are some embodiments of the application, and other drawings can be obtained by those skilled in the art without creative labor.

[0051] Figure 1 is an exemplary system architecture diagram to which the application can be applied;

[0052] Figure 2 A flowchart of one embodiment of the flow document automatic generation method according to the application;

[0053] Figure 3 is Figure 2 A flowchart of one specific implementation of the step 203 shown in the figure;

[0054] Figure 4 yes Figure 2 A flowchart of a specific implementation of step 204 shown;

[0055] Figure 5 This is a schematic diagram of the structure of an embodiment of the process document automatic generation device according to this application;

[0056] Figure 6 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation

[0057] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.

[0058] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0059] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.

[0060] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 serves as the medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0061] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0062] Terminal devices 101, 102, and 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc.

[0063] Server 105 can be a server that provides various services, such as a backend server that supports the pages displayed on terminal devices 101, 102, and 103.

[0064] It should be noted that the automatic process document generation method provided in this application embodiment is generally executed by a server / terminal device, and correspondingly, the automatic process document generation device is generally set in the server / terminal device.

[0065] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0066] Continue to refer to Figure 2 A flowchart of an embodiment of the process document automatic generation method according to this application is shown. The process document automatic generation method includes the following steps:

[0067] Step 201: Based on the Vue page parsing tool, obtain all Vue page paths using the router method, recursively traverse each page and the constituent components of each page, and obtain the page and the constituent components by nesting them level by level. The constituent components refer to the page standardization code that is not explicitly written in the page standardization code, but is implanted into the page through plugins or comments.

[0068] By using the router method of the Vue parsing tool, each page and its constituent components are recursively traversed, which facilitates the generation of the hierarchical AST (Abstract Syntax Tree).

[0069] Step 202: Use the parseComponent function in the Vue page parsing tool to obtain the basic page data corresponding to the page and the constituent components respectively, wherein the basic page data includes JS script content and CSS style content.

[0070] The parseComponent function of the Vue parsing tool is used to parse the Vue page content obtained in step 201 into basic page data, which facilitates the later construction of the AST abstract syntax tree and the generation of Markdown format files.

[0071] Step 203: Use the Babel parser to parse the JavaScript content and determine the data in the JavaScript content that needs to be converted into an abstract syntax tree structure.

[0072] In this embodiment, the step of using the Babel parser to parse the JavaScript content and determine the data in the JavaScript content to be converted into an abstract syntax tree structure specifically includes: using a first component in the Babel parser to perform syntax analysis and lexical analysis on the JavaScript content, wherein the first component is the @babel / parser component; using a second component in the Babel parser to obtain the relevant data content in the JavaScript content after analysis by the first component for generating the abstract syntax tree, wherein the relevant data content includes method name, method parameters, object model, child component registration information, lifecycle, routing cycle, and event data, and the second component is the @babel / tranverse component.

[0073] Continue to refer to Figure 3 , Figure 3 yes Figure 2 A flowchart of a specific implementation of step 203 shown includes the following steps:

[0074] Step 301: Use the first component in the Babel parser to perform syntax analysis and lexical analysis on the JavaScript content, wherein the first component is the @babel / parser component;

[0075] Step 302: Use the second component in the Babel parser to obtain the relevant data content used to generate the abstract syntax tree from the JavaScript content after analysis by the first component. The relevant data content includes method name, method parameters, object model, child component registration information, lifecycle, routing cycle, and event data. The second component is the @babel / tranverse component.

[0076] The first component of the Babel parser, @babel / parser, performs syntax and lexical analysis on the JavaScript content, identifying method blocks and their associated method names, parameters, object models, child component registration information, lifecycles, routing cycles, and event data. The second component, @babel / tranverse, then filters out the node content used to generate the abstract syntax tree. By combining Babel and Vue parsing tools, the hierarchical relationships of the Vue page can be quickly and easily obtained, and the relevant data for generating the abstract syntax tree can be initially filtered.

[0077] Step 204: Traverse the data to be converted into an abstract syntax tree structure according to each level node to obtain the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data required for generating the process document.

[0078] In this embodiment, the step of traversing the data to be converted into an abstract syntax tree structure according to each level node to obtain the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required for generating the process document specifically includes: using a third component in the Babel parser to extract the relevant data content used to generate the abstract syntax tree from the JavaScript script content, and obtaining the extracted data, wherein the third component is the @babel / generator component; based on a preset type recognition tool, identifying the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data in the extracted data; and filtering out the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required for generating the process document from the identified data.

[0079] Continue to refer to Figure 4 , Figure 4 yes Figure 2 A flowchart of a specific implementation of step 204 shown includes the following steps:

[0080] Step 401: Use the third component in the Babel parser to extract the relevant data content used to generate the abstract syntax tree in the JS script content, and obtain the extracted data. The third component is the @babel / generator component.

[0081] Step 402: Based on a preset type recognition tool, identify the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data in the extracted data;

[0082] Step 403: From the identified data, filter out the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required to generate the process documentation.

[0083] The data from the initial screening is further filtered to remove method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data that are useless for generating process documentation. Only the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required for generating process documentation are retained. This data cleaning process makes the data more suitable for document generation requirements.

[0084] In this embodiment, after the step of identifying the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data in the extracted data based on a preset type identification tool, the method further includes: when the method name in the extracted data is identified, determining whether the method name has added annotation information based on a preset judgment rule; if annotation information has been added, then obtaining the annotation information.

[0085] In this embodiment, the step of determining whether the method name has added comment information based on a preset judgment rule specifically involves: using comment tags as reference fields in advance, wherein the comment tags include " / / ..." and " / *...* / ", where "..." within the comment tags represents any field; when a method name is identified in the extracted data, it is determined whether the reference field is contained within the several lines of code preceding the method name in the JavaScript script content or within the method block corresponding to the method name; if it is contained, it is determined that the method name has added comment information; if it is not contained, it is determined that the method name has not added comment information.

[0086] In this embodiment, after the step of obtaining the annotation information if annotation information is added, the method further includes: obtaining the data content in the annotation tag and using it as annotation information; and setting a one-to-one correspondence between the annotation information and the method name corresponding to the annotation information.

[0087] By traversing the comment tags, it is identified whether the method block uses comment information. If it does, the comment information corresponding to the comment tag is obtained, and a one-to-one correspondence is set between the comment information and the method name, so that the comment information can be written into the process document corresponding to the method block later.

[0088] Step 205: Based on the traversal results, set the association relationships for the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data, and generate an abstract syntax tree with the method name as the node of each layer of the abstract syntax tree.

[0089] By setting relationships between the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data, an abstract syntax tree is generated with the method name as a node at each level of the abstract syntax tree. This makes it easy to find the method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data corresponding to different methods through the abstract syntax tree.

[0090] Step 206: Based on the abstract syntax tree and markdown file generator, output the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data as a markdown format file.

[0091] In this embodiment, after the step of outputting the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data into a markdown format file based on the abstract syntax tree and markdown file generator, the method further includes: obtaining the comment information corresponding to each method name based on the one-to-one correspondence between the comment information and its corresponding method name; and outputting the comment information into the markdown format file containing its corresponding method name.

[0092] Using the abstract syntax tree and markdown file generator, the method name, method parameters, object model, subcomponent registration information, lifecycle, routing cycle, and event data are output as markdown format files. At this time, the output markdown format files are plain text files without any formatting, which makes it convenient for developers to customize the formatting style of the markdown format files.

[0093] Step 207: Based on the CSS style content, convert the markdown format file into an HTML format file to complete the automatic generation of the process document.

[0094] The CSS style content is used to generate the layout of the unformatted Markdown file obtained in step 206. The original CSS style content is used directly, which reduces the development time of developers on CSS cascading styles. It can also be combined with comments and CSS cascading styles to help newcomers quickly identify the project code corresponding to the process document and reduce the learning cost.

[0095] This application uses a Vue.js parser to obtain basic page data; a Babel parser to identify the data in the JavaScript code that needs to be converted into an abstract syntax tree (API). It then obtains the method names, method parameters, object models, child component registration information, lifecycles, routing cycles, and event data required for generating the workflow documentation, and uses the method names as nodes in the API to generate the API. Based on the API and a Markdown file generator, it outputs a Markdown file. Finally, based on CSS styles, it converts the Markdown file to HTML, completing the automatic generation of the workflow documentation. The final generated workflow documentation allows for quick and accurate viewing of the logic of the corresponding front-end page, facilitating workflow identification and significantly reducing the learning curve for new employees.

[0096] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0097] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0098] For example, in this embodiment of the application, big data processing technology in artificial intelligence can be used to process the relevant data content required to generate the abstract syntax tree. A recognition and acquisition model can also be built to identify and acquire the annotation information required to generate the process document. This makes it easier for new employees to quickly and accurately identify the process through the process document, and can also greatly reduce the learning cost of the page process.

[0099] Further reference Figure 5 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of a process document automatic generation device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0100] like Figure 5As shown, the automatic process document generation device 500 described in this embodiment includes: a Vue first parsing module 501, a Vue second parsing module 502, a Babel parsing module 503, a traversal acquisition module 504, a syntax tree generation module 505, a Markdown file output module 506, and an HTML file generation module 507. Wherein:

[0101] Vue's first parsing module 501 is used to obtain all Vue page paths using a router based on the Vue page parsing tool, recursively traverse each page and the components of each page, and obtain the page and the components by nesting them level by level.

[0102] Vue's second parsing module 502 is used to obtain the basic page data corresponding to the page and the constituent components respectively using the parseComponent function in the Vue page parsing tool. The basic page data includes JS script content and CSS style content.

[0103] Babel parsing module 503 is used to parse the JavaScript content using the Babel parser and determine the data in the JavaScript content that needs to be converted into an abstract syntax tree structure.

[0104] The traversal acquisition module 504 is used to traverse the data to be converted into an abstract syntax tree structure according to each level node to obtain the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data required for generating the process document;

[0105] The syntax tree generation module 505 is used to set association relationships for the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data based on the traversal results, and to generate an abstract syntax tree with the method name as the node of each layer of the abstract syntax tree.

[0106] The markdown file output module 506 is used to output the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data into a markdown format file based on the abstract syntax tree and the markdown file generator.

[0107] The HTML file generation module 507 is used to convert the markdown format file into an HTML format file based on the CSS style content, thereby completing the automatic generation of the process document.

[0108] This application uses a Vue.js parser to obtain basic page data; a Babel parser to identify the data in the JavaScript code that needs to be converted into an abstract syntax tree (API). It then obtains the method names, method parameters, object models, child component registration information, lifecycles, routing cycles, and event data required for generating the workflow documentation, and uses the method names as nodes in the API to generate the API. Based on the API and a Markdown file generator, it outputs a Markdown file. Finally, based on CSS styles, it converts the Markdown file to HTML, completing the automatic generation of the workflow documentation. The final generated workflow documentation allows for quick and accurate viewing of the logic of the corresponding front-end page, facilitating workflow identification and significantly reducing the learning curve for new employees.

[0109] In some specific embodiments of this application, the automatic process document generation device further includes a data filtering module. The data filtering module is used to perform secondary filtering on the relevant data content used to generate an abstract syntax tree in the JS script content obtained by the second component in the Babel parser, namely the @babel / tranverse component, after being analyzed by the first component, namely the @babel / parser component. The filtering module selects the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required for generating the process document.

[0110] In some specific embodiments of this application, the automatic process document generation device further includes an annotation usage judgment module. The annotation usage judgment module is used to determine whether annotation information has been added to the method name when the method name in the extracted data is identified, based on a preset judgment rule; if annotation information has been added, the annotation information is obtained.

[0111] By using the data filtering module and the annotation judgment module, the data content for generating the process document is further obtained. According to the page dimensions and annotation information corresponding to the abstract syntax tree, a Markdown document is generated. The logic of the corresponding front-end page can be quickly and accurately viewed through the final generated process document, which not only facilitates process identification, but also greatly reduces the learning cost of page processes for new employees.

[0112] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the methods described above. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0113] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0114] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 6 , Figure 6 This is a basic structural block diagram of the computer device in this embodiment.

[0115] The computer device 6 includes a memory 61, a processor 62, and a network interface 63 that are interconnected via a system bus. It should be noted that only the computer device 6 with components 61-63 is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0116] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.

[0117] The memory 61 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 61 may be an internal storage unit of the computer device 6, such as the hard disk or memory of the computer device 6. In other embodiments, the memory 61 may also be an external storage device of the computer device 6, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 6. Of course, the memory 61 may also include both the internal storage unit and its external storage device of the computer device 6. In this embodiment, the memory 61 is typically used to store the operating system and various application software installed on the computer device 6, such as computer-readable instructions for automatic generation of process documents. In addition, the memory 61 can also be used to temporarily store various types of data that have been output or will be output.

[0118] In some embodiments, the processor 62 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 62 is typically used to control the overall operation of the computer device 6. In this embodiment, the processor 62 is used to execute computer-readable instructions stored in the memory 61 or to process data, for example, to execute computer-readable instructions for the automatic process document generation method.

[0119] The network interface 63 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 6 and other electronic devices.

[0120] The computer device proposed in this embodiment belongs to the field of development assistance technology. This application obtains basic page data using a Vue parser; uses a Babel parser to determine the data in the JavaScript script content to be converted into an abstract syntax tree structure; obtains the method names, method parameters, object models, child component registration information, lifecycles, routing cycles, and event data required to generate the process document, and generates an abstract syntax tree by using the method names as nodes at each level of the abstract syntax tree; outputs a Markdown format file based on the abstract syntax tree and a Markdown file generator; and converts the Markdown format file into an HTML format file based on CSS style content, thus automatically generating the process document. The final generated process document allows for quick and accurate viewing of the logic of the corresponding front-end page, facilitating process identification and significantly reducing the learning cost for new employees regarding page processes.

[0121] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by a processor to cause the processor to perform the steps of the process document automatic generation method described above.

[0122] The computer-readable storage medium proposed in this embodiment belongs to the field of development assistance technology. This application obtains basic page data using a Vue parser; uses a Babel parser to determine the data in the JavaScript script content to be converted into an abstract syntax tree structure; obtains the method names, method parameters, object models, child component registration information, lifecycles, routing cycles, and event data required to generate the process document, and generates an abstract syntax tree by using the method names as nodes at each level of the abstract syntax tree; outputs a Markdown format file based on the abstract syntax tree and a Markdown file generator; and converts the Markdown format file into an HTML format file based on CSS style content, thus automatically generating the process document. The final generated process document allows for quick and accurate viewing of the logic of the corresponding front-end page, facilitating process identification and significantly reducing the learning cost for new employees regarding page processes.

[0123] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0124] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.

Claims

1. A method for automatically generating process documents, characterized in that, Includes the following steps: Based on the Vue page parsing tool, all Vue page paths are obtained using the router method. Each page and its constituent components are recursively traversed, and the pages and constituent components are obtained by nesting them level by level. Use the parseComponent function in the Vue page parsing tool to obtain the basic page data corresponding to the page and the constituent components respectively, wherein the basic page data includes JS script content and CSS style content; The Babel parser is used to parse the JavaScript content to determine the data in the JavaScript content that needs to be converted into an abstract syntax tree structure; The data to be converted into an abstract syntax tree structure is traversed according to each level node to obtain the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data required for generating the process document; Based on the traversal results, the association relationships are set for the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data, and an abstract syntax tree is generated with the method name as the node of each layer of the abstract syntax tree; Based on the abstract syntax tree and markdown file generator, the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data are output as markdown format files; Based on the CSS style content, the markdown format file is converted into an HTML format file, and the process document is automatically generated.

2. The method for automatically generating process documents according to claim 1, characterized in that, The step of using the Babel parser to parse the JavaScript script content and determine the data in the JavaScript script content that needs to be converted into an abstract syntax tree structure specifically includes: The first component of the Babel parser is used to perform syntax and lexical analysis on the JavaScript content. The second component in the Babel parser is used to obtain the relevant data content used to generate the abstract syntax tree from the JavaScript content after it has been analyzed by the first component. The relevant data content includes method name, method parameters, object model, child component registration information, lifecycle, routing cycle, and event data.

3. The method for automatically generating process documents according to claim 1, characterized in that, The step of traversing the data to be converted into an abstract syntax tree structure according to each level node to obtain the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required for generating the process document specifically includes: The third component in the Babel parser is used to extract the relevant data content used to generate the abstract syntax tree from the JavaScript content, and the extracted data is obtained. Based on a preset type recognition tool, the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data in the extracted data are identified. From the identified data, filter out the method names, method parameters, object models, sub-component registration information, lifecycles, routing cycles, and event data required to generate process documentation.

4. The method for automatically generating process documents according to claim 3, characterized in that, After the step of identifying the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data in the extracted data based on a preset type recognition tool, the method further includes: When a method name is identified in the extracted data, a judgment is made based on a preset judgment rule to determine whether the method name has added annotation information; If annotation information is added, then obtain that annotation information.

5. The method for automatically generating process documents according to claim 4, characterized in that, The step of determining whether the method name has added comment information based on a preset judgment rule, wherein the preset judgment rule is specifically: Pre-select annotation tags as reference fields; When the method name in the extracted data is identified, it is determined whether the reference field is contained in the several lines of code before the method name in the JavaScript script or in the method block corresponding to the method name; If it is included, then it is determined that the method name has added annotation information; If not included, it is determined that the method name has not been annotated.

6. The method for automatically generating process documents according to claim 4, characterized in that, After the step of obtaining the annotation information if annotation information has been added, the method further includes: Extract the data content from the annotation tags and use it as annotation information; Establish a one-to-one correspondence between the annotation information and the corresponding method name.

7. The method for automatically generating process documents according to any one of claims 4 to 6, characterized in that, After the step of outputting the method name, method parameters, object model, subcomponent registration information, lifecycle, routing cycle, and event data as a markdown format file based on the abstract syntax tree and markdown file generator, the method further includes: Based on the one-to-one correspondence between the annotation information and its corresponding method name, obtain the annotation information corresponding to each method name; The annotation information is output to the markdown file containing the corresponding method name.

8. A device for automatically generating process documents, characterized in that, include: The first Vue parsing module is used to obtain all Vue page paths using a router based on the Vue page parsing tool, recursively traverse each page and the components of each page, and obtain the page and the components by nesting them level by level. The second Vue parsing module is used to obtain the basic page data corresponding to the page and the constituent components by using the parseComponent function in the Vue page parsing tool. The basic page data includes JS script content and CSS style content. The babel parsing module is used to parse the JavaScript script content using the babel parser and determine the data in the JavaScript script content that needs to be converted into an abstract syntax tree structure; The traversal acquisition module is used to traverse the data to be converted into an abstract syntax tree structure according to each level node to obtain the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data required for generating the process document; The syntax tree generation module is used to set associations for the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data based on the traversal results, and to generate an abstract syntax tree with the method name as the node of each layer of the abstract syntax tree. The markdown file output module is used to output the method name, method parameters, object model, sub-component registration information, lifecycle, routing cycle, and event data into a markdown format file based on the abstract syntax tree and the markdown file generator. The HTML file generation module is used to convert the markdown format file into an HTML format file based on the CSS style content, thereby automatically generating the process document.

9. A computer device comprising a memory and a processor, the memory storing computer-readable instructions, wherein the processor, when executing the computer-readable instructions, implements the steps of the process document automatic generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the automatic process document generation method as described in any one of claims 1 to 7.

Images