Front-end web interface configuration method, device and system and storage medium

Abstract

The invention discloses a front-end web interface configuration method, device and system and a storage medium, and is applied to the field of front-end development. The method comprises the following steps: acquiring JSON (JavaScript Object Notation) data in a Swager format; initializing a queue; extracting elements in the JSON data and inputting the elements into the initialization queue to obtain a target queue; traversing the target queue by using a breadth-first traversal algorithm to generate a flattened target object structure; converting the target object structure into a tree data structure; and sending the tree structure data to a front end, so that after the front end receives the tree structure data, rendering the tree structure data through a front end tree component to obtain a visual configuration item.

Description

Technical Field

[0001] The present application relates to the field of front-end development, and in particular to a front-end web interface configuration method, device, system and storage medium. Background Art

[0002] With the rapid advancement of science and technology, the interaction between software systems has become increasingly frequent and complex. In this context, interfaces, as a bridge connecting different systems, achieving data exchange and functional integration, have become increasingly important and complex. In order to meet various business needs, the types and number of interfaces are constantly increasing, and their complexity and diversity are also increasing.

[0003] In order to effectively manage and maintain these interfaces, the existing technology adopts API document management tools, among which ApiDoc is a relatively common tool. It can automatically generate API interface documents by parsing the annotations in the code, thereby greatly reducing the difficulty of interface configuration and improving front-end development efficiency.

[0004] However, as the complexity and hierarchy of interface data increase, ApiDoc gradually exposes its shortcomings in data processing and display. Especially for data with complex hierarchical structures, ApiDoc often has difficulty in intuitively displaying its levels and relationships, making it difficult for developers to quickly understand the structure and meaning of the data. Summary of the invention

[0005] In order to solve the above technical problems, the present application provides a front-end web interface configuration method, device, system and storage medium.

[0006] The technical solution provided in this application is described below: The first aspect of the present application provides a front-end web interface configuration method, the method comprising: Get JSON data in Swagger format; Initialize the queue; Extracting elements from the JSON data and inputting them into the initialization queue to obtain a target queue; Using a breadth-first traversal algorithm to traverse the target queue to generate a flattened target object structure; Traversing the target object structure to obtain key values; If the key value is a common value, converting the key value into a hierarchical common tree node; If the key value is a nested object, the nested object is processed using a recursive function processObject to obtain a nested object tree node; If the key value is an array, the array is processed using a recursive function processArray to obtain an array tree node; Processing the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes in a hierarchical structure to construct tree structure data; The tree structure data is sent to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered through the front end tree component to obtain a visual configuration item.

[0007] Optionally, traversing the target queue using a breadth-first traversal algorithm to generate a flattened target object structure includes: Initialize the object structure; Using a breadth-first traversal algorithm to traverse the key-value pair of each element in the target queue to obtain the corresponding value of the key-value pair; If the corresponding value is a common value, extracting the common value and the current path corresponding to the common value; If the corresponding value is an array, set an empty string for the corresponding path; If the corresponding value is an object, adding the object as a new element to the target queue; If the corresponding value is $ref, determine whether the reference inside $ref is a circular reference; If not, use the resolveRef function to resolve the $ref and update the original path to obtain the new element; Adding the new element to the target queue; Determine whether the target queue is empty; If so, the common value, the current path corresponding to the common value, and the corresponding path empty string are stored in the initialization object structure to obtain a flattened target object structure.

[0008] Optionally, if the corresponding value is $ref, after determining whether the reference inside $ref is a circular reference, the method further includes: If so, set an empty string to the corresponding path.

[0009] Optionally, after determining whether the target queue is empty, the method further includes: If not, continue to traverse the key-value pairs of the elements in the target queue.

[0010] Optionally, if the key value is a common value, converting the key value into a hierarchical common tree node includes: Determine whether the key value is a common value, where the common value includes a string, a number, a Boolean value, or a null value; If yes, then a common tree node is created based on the key value, the common tree node comprising: Key, indicating the name of the node; Value, indicating the content of the node; Empty child node list, indicating that the common tree node has no child nodes; All the common tree nodes are added to the corresponding parent node in the tree structure to generate hierarchical common tree nodes.

[0011] Optionally, if the key value is a nested object, using a recursive function processObject to process the nested object to obtain a nested object tree node includes: Determine whether the key value is a nested object, and the nested object is a dictionary type; If so, create a parent node for the nested object and initialize an empty child node list; Traverse each key-value pair in the nested object to obtain the value corresponding to the key-value pair; If the value is a nested object, recursively call the function processObject to process the nested object and generate a child node; If the value is an array, call the processArray function to process the array and generate child nodes; If the value is a common value, a common tree node is directly generated, and the common tree node is used as a child node; Add all the generated child nodes to the child node list of the parent node to form a complete nested object tree node.

[0012] Optionally, if the key value is an array, the array is processed using a recursive function processArray to obtain an array tree node, including: Determine whether the key value is an array, and the array is a list type; If yes, create a tree node for the array, the value of the tree node is Array; Use the recursive function processArray to traverse each element of the array to obtain the element type; Processing the element type to obtain a child node corresponding to the element type; The child node corresponding to each of the element types is added to the child node list of the tree node of the array to construct a complete array tree node.

[0013] A second aspect of the present application provides a front-end web interface configuration system, the system comprising: The acquisition unit is used to obtain JSON data in Swagger format; A first processing unit, used for initializing a queue; A second processing unit is used to extract elements from the JSON data and input them into the initialization queue to obtain a target queue; A first construction unit is used to traverse the target queue using a breadth-first traversal algorithm to generate a flattened target object structure; A third processing unit, configured to traverse the target object structure to obtain a key value; A fourth processing unit, configured to convert the key value into a hierarchical ordinary tree node if the key value is an ordinary value; a fifth processing unit, configured to, if the key value is a nested object, use a recursive function processObject to process the nested object to obtain a nested object tree node; a sixth processing unit, configured to, if the key value is an array, use a recursive function processArray to process the array to obtain an array tree node; A second construction unit, for processing the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes in a hierarchical structure to construct tree structure data; The sending unit is used to send the tree structure data to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered through the front end tree component to obtain a visual configuration item.

[0014] A third aspect of the present application provides a front-end web interface configuration device, the device comprising: Processor, memory, input-output unit, and bus; The processor is connected to the memory, the input and output unit, and the bus; The memory stores a program, and the processor calls the program to execute the first aspect and any optional method in the first aspect.

[0015] A fourth aspect of the present application provides a computer-readable storage medium, on which a program is stored. When the program is executed on a computer, the program executes the first aspect and any optional method in the first aspect.

[0016] It can be seen from the above technical solutions that this application has the following advantages: 1. This application can effectively generate a flattened target object structure by obtaining JSON data in Swagger format and traversing the elements in the initialization queue using a breadth-first traversal algorithm. This traversal method avoids data omission or repeated processing and improves the accuracy of data processing.

[0017] 2. By traversing the flattened target object structure and using different recursive functions to process the different types of key values ​​obtained through the traversal, tree-structured data is constructed. This tree-structured data can intuitively display the hierarchy and relationship of the data, which helps developers to quickly understand the structure and meaning of the data, and provides a basis for subsequent batch interface configuration.

[0018] 3. The tree structure data can be visualized and rendered through the front-end tree component, which can intuitively display the configuration items of the application program interface, improve the efficiency of API batch configuration operations, and reduce the difficulty and complexity of data processing. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solution in 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 only 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.

[0020] Figure 1 A flow chart of an embodiment of the front-end web interface configuration method provided by this application; Figure 2 A flowchart of another embodiment of the front-end web interface configuration method provided by the present application; Figure 3 A flowchart of another embodiment of the front-end web interface configuration method provided by the present application; Figure 4 A flowchart of another embodiment of the front-end web interface configuration method provided by the present application; Figure 5 A flowchart of another embodiment of the front-end web interface configuration method provided by the present application; Figure 6 A flow chart of an embodiment of the front-end web interface configuration system provided by the present application; Figure 7 A flow chart of an embodiment of a front-end web interface configuration device provided in this application. DETAILED DESCRIPTION

[0021] The present application provides a front-end web interface configuration method, device, system and storage medium for use in the front-end development field.

[0022] It should be noted that the front-end web interface configuration method provided in this application can be applied to a terminal or a server. For example, the terminal can be a smart phone or a computer, a tablet computer, a smart TV, a smart watch, a portable computer terminal, or a fixed terminal such as a desktop computer. For the convenience of explanation, this application uses the terminal as the execution subject for example.

[0023] See also Figure 1 , Figure 1 An embodiment of a front-end web interface configuration method provided by the present application includes: S101. Obtain JSON data in Swagger format; Swagger-formatted JSON data is a specification document used to describe an API. It uses JSON format to define various aspects of the API, including paths, parameters, and responses. This format of data makes API design, documentation, and testing simpler and more efficient.

[0024] In the present embodiment, to obtain the JSON data in the Swagger format, first the URL address of the Swagger document must be clearly defined, wherein the URL is a string for identifying the resource location on the Internet. Then, initialization operations are performed according to the selected HTTP client library, such as in JavaScript, built-in fetchAPI or third-party libraries, such as axios, can be used. Next, using the selected HTTP client, corresponding initialization configuration is performed, and parameters such as connection timeout and read timeout are set to ensure the stability of the network request. Subsequently, the HTTP client initialized is used to send an HTTP GET request to the determined URL. Further, the HTTP GET request can arrive at the server end through network transmission. Further, after the server end identifies the request, it searches and obtains the corresponding Swagger document JSON data, encapsulates it in the HTTP response and returns it to the client. Finally, after the client receives the response, the JSON data is extracted by the method provided by the third-party library, and parsed and verified to ensure the integrity and accuracy of the data, and finally obtains available Swagger format JSON data.

[0025] S102, initializing a queue; A queue is a common data structure used to ensure that the queue can store and manage data correctly, following the first-in-first-out principle, that is, the element that enters the queue first will be removed first.

[0026] In this embodiment, the data structure of the queue needs to be determined to initialize the queue. The data structure can be an array or a linked list, which is not specifically limited here. Then, sufficient storage space is allocated for the initialization queue, which is the basis for storing queue elements. Next, the initial state of the queue is set, including the pointers or indexes of the initialization head and tail. For an empty queue, these two pointers or indexes usually point to the same position, thereby indicating that the queue is empty. Further, initialization verification is performed to verify whether the positions of the head and tail are consistent and whether the storage space of the queue is allocated, and the queue can be initialized.

[0027] S103, extracting elements from the JSON data and inputting them into the initialization queue to obtain a target queue; In this embodiment, when extracting elements from JSON data and inputting them into the initialization queue, the obtained Swagger format JSON data needs to be parsed. Then, according to the grammatical structure characteristics of JSON, the JSON data structure can be traversed recursively or iteratively to extract the elements one by one. Further, after extracting the elements, these elements are inserted into the initialized queue in sequence. The insertion operation follows the "first in, first out" principle of the queue, and elements are inserted from the end of the queue, and finally the target queue filled with JSON data elements is obtained.

[0028] S104, traversing the target queue using a breadth-first traversal algorithm to generate a flattened target object structure; The breadth-first traversal algorithm is a tree or graph traversal strategy that starts from a starting node, first visits all direct neighbor nodes of the starting node, and then visits the neighbor nodes of these neighbor nodes in turn, and so on, expanding outward layer by layer.

[0029] In this embodiment, when traversing the target queue, an initialization object structure is first constructed. Then, after taking an element from the queue, all the key-value pairs contained therein are traversed. Furthermore, for the key-value pair as an ordinary value, since there is no complex nested structure, the ordinary value can be directly stored in the initialization object structure; for the key-value pair as an array, a specific value, such as an empty string, can be set on the corresponding path in the initialization object structure according to the business logic, so that the array can be specially processed or its position can be marked later; if the key-value pair is an object, the object is placed at the end of the target queue element as a new element, waiting for subsequent loop parsing. For the special $ref reference, it is necessary to first check whether there is a circular reference. If there is a circular reference, the reference can be parsed by calling the resolveRef function, and the parsed object can be re-added to the end of the target queue, and the path information can be updated at the same time to ensure the accuracy and completeness of the traversal. Until the key-value pair of each element of the target queue is traversed in this process, a flattened target object structure can be generated.

[0030] S105, traversing the target object structure to obtain key values; In this embodiment, before obtaining the key value in the target object structure, it is necessary to locate the root node of the target object structure, and then use a depth-first traversal or breadth-first traversal algorithm to traverse the object structure layer by layer. During the traversal process, each key value of the object will be accessed line by line and recorded. If the key value itself is also an object, it will recursively enter this child object and continue to traverse the key value inside it. This process will continue until all key values ​​in the object structure have been accessed. In practical applications, traversing the key values ​​of the object structure can fully obtain all the key value information in the object structure, which provides important help for understanding the object structure and performing subsequent tree conversion operations.

[0031] S106. If the key value is a common value, convert the key value into a hierarchical common tree node; In this embodiment, when traversing the key value of the target object structure, first determine a tree node data structure template, and determine the attributes it contains for storing node names, values, parent node pointers, child node lists, and other metadata. Next, use the key as the node name, assign the key value to the data value attribute of the node, and clarify the hierarchical information and set the corresponding attributes based on the position of the key value in the data structure. The parent node pointer is first set as a placeholder or null value as needed for subsequent improvement. Further, according to the tree structure construction rules, the node is mounted in the child node list of the corresponding parent node. Finally, the key value is converted into a hierarchical ordinary tree node.

[0032] S107, if the key value is a nested object, use the recursive function processObject to process the nested object to obtain a nested object tree node; The recursive function processObject is mainly used to go deep into each layer of nested objects and parse the keys and values ​​of the objects one by one. When the key value of an object is another object, it will recursively call itself to continue to parse the nested object and convert each object and its attributes into tree nodes, and attach the children attribute to each node to store its child nodes.

[0033] In this embodiment, when traversing the key value of the target object structure, if the key value is a nested object, the system will call the recursive function processObject to process the nested object. Then, the nested object is parsed to extract the key-value pair elements inside it. Then, for these elements, according to their own types, the corresponding processing functions are recursively called respectively, such as calling the logic of building ordinary tree nodes for ordinary values, calling the processObject function itself again for nested objects, and calling the processArray function for arrays. Further, through a layer-by-layer recursive method, the entire nested object is gradually converted into a nested object tree node in a tree structure.

[0034] S108, if the key value is an array, use the recursive function processArray to process the array to obtain array tree nodes; The recursive function processArray is mainly used to process the array when it encounters an array in the traversal of the target object structure to build a tree structure representation of the array. For each element in the array, processArray will check.

[0035] In this embodiment, when traversing the key value of the target object structure, if the key value is an array, the system will traverse each element in the array, and the elements in the array will also be processed differently according to their types. If the element is a normal value, it will be processed in the same way as the normal value is converted to a tree node; if it is a nested object, the processObject function is called; if it is an array, the processArray function itself is called. Through such recursive processing, all elements in the array are converted into appropriate tree node forms, and these nodes are combined to construct a complete array tree node.

[0036] S109, processing the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes according to the hierarchical structure to construct tree structure data; In this embodiment, when constructing tree structure data, the acquired common tree nodes, nested object tree nodes and array tree nodes are processed in order of hierarchy. For common tree nodes, the common tree nodes are directly hung as leaf nodes under the corresponding parent nodes; for nested object tree nodes and array tree nodes, it is necessary to construct the hierarchical structure of parent-child nodes step by step according to the nested relationship of the nested object tree nodes and the array tree nodes. Finally, through such a layer-by-layer construction method, a complete hierarchical tree structure data is formed.

[0037] S110, sending the tree structure data to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered by the front end tree component to obtain a visualization configuration item.

[0038] In this embodiment, after completing the tree structure construction, the constructed tree structure data needs to be sent to the front end. Then, after the front end receives the tree structure data, it will pass the tree structure to the front-end tree component, where the front-end tree component is a UI element specifically used to render tree structure data. It can dynamically generate and display a tree view based on the hierarchical relationship of the data. Furthermore, the front-end tree component renders the received tree structure data to generate visual configuration items.

[0039] In the present embodiment, the present application can effectively generate a flattened target object structure by obtaining JSON data in Swagger format and traversing the elements in the initialization queue using a breadth-first traversal algorithm, and this traversal method avoids the omission or repeated processing of data and improves the accuracy of data processing. By traversing the flattened target object structure and using different recursive functions for processing according to the different types of key values ​​obtained by the traversal, tree structure data is constructed. This tree structure data can intuitively display the hierarchy and relationship of the data, which helps developers to quickly understand the structure and meaning of the data, and provides a basis for subsequent batch interface configuration. The tree structure data is visualized and rendered through the front-end tree component, which can intuitively display the configuration items of the application program interface, improve the efficiency of the API batch configuration operation, and reduce the difficulty and complexity of data processing.

[0040] See also Figure 2 , Figure 2 Another embodiment of a front-end web interface configuration method provided by the present application includes: S201, initialize the object structure; The object structure is a container for storing the final flattened data, usually a dictionary or similar data structure, which organizes data in the form of key-value pairs. It is initially empty and will be gradually filled with information from the original data in subsequent steps to form a flat data representation that does not contain complex nested relationships.

[0041] In this embodiment, when initializing the object structure, first, the purpose and structure of the object structure are clarified, and then a blank object is created. This object will be used to construct the final flat data structure. Further, the empty object structure is verified to ensure that the empty object structure meets the subsequent data receiving requirements.

[0042] S202, using a breadth-first traversal algorithm to traverse the key-value pair of each element in the target queue to obtain the corresponding value of the key-value pair; A key-value pair is a tuple consisting of a key and its corresponding value. It is a common way to represent object attributes and attribute values ​​in many programming languages. When traversing the target queue elements, the specific data in the element is obtained by accessing the key-value pair, and the corresponding processing operation is performed according to the value type.

[0043] In this embodiment, when parsing and traversing the key-value pairs of each element in the target queue, it is necessary to take out the first element at the head of the queue in the target queue, and then traverse all the key-value pairs of the element. For each key-value pair, take out the corresponding value, and identify and divide the value to obtain the corresponding value.

[0044] S203, if the corresponding value is a common value, extracting the common value and the current path corresponding to the common value; Ordinary values ​​are values ​​of basic data types, such as integers, floating-point numbers, strings, or Boolean values, which do not contain complex internal structures.

[0045] In this embodiment, when the extracted corresponding value is identified as a simple data type, such as a common value such as a number, a string, a Boolean value, etc., the common value and the current path data recorded by the current common value are extracted for subsequent placement in the initialization structure object.

[0046] S204, if the corresponding value is an array, set a corresponding path empty string; An array is a data structure that is used to store multiple elements, which can be of the same or different data types, usually stored contiguously in memory.

[0047] In this embodiment, when it is identified that the extracted corresponding value is an array, a corresponding path empty string is set according to the current array to indicate that an array originally exists here, but its internal elements are not processed in depth for the time being.

[0048] S205. If the corresponding value is an object, add the object as a new element to the target queue; An object is a data structure that contains multiple properties and methods. Properties exist in the form of key-value pairs, similar to physical objects in the real world, with various characteristics and behaviors.

[0049] In this embodiment, when the value in the key-value pair is an object, since it may contain a deeper nested structure, it will be parsed and added to the end of the target queue as a new element, so that the key-value pairs inside it can be subsequently traversed in a breadth-first manner to gradually flatten it, thereby ensuring the processing integrity of the entire data structure and avoiding missing any elements in complex nested objects.

[0050] S206. If the corresponding value is $ref, determine whether the reference inside $ref is a circular reference; $ref is a mechanism used to reference other parts of data in a data structure, similar to a pointer. It points to other objects or values ​​in the data structure through specific identifiers, such as the ref keyword, to achieve data reuse and structured organization.

[0051] In this embodiment, when processing a key-value pair, if the corresponding value is $ref, it is necessary to determine whether there is a circular reference, and then parse the reference path contained therein, where this path usually points to another location in the JSON data, indicating that the current value is a reference to that location. Next, check whether there is a circular reference in this reference path. If there is a circular reference in the reference path, execute step S207; if there is no circular reference in the reference path, execute step S208.

[0052] S207, set a corresponding path empty string; In this embodiment, if the reference inside $ref is a circular reference, the setByPath function is called to set an empty string for the corresponding path. The setByPath function is used to locate the exact position according to a specific path when processing tree structures or nested data, and then assign values, update, etc. to the corresponding nodes, elements, etc.

[0053] S208, using the resolveRef function to resolve the $ref and update the original path to obtain a new element; The resolveRef function is mainly used to resolve references or process reference relationships in responsive data. It receives a reference value as a parameter and returns the actual data value after resolution, which can help developers deal with reference issues in data binding and responsive systems.

[0054] In this embodiment, if the reference inside $ref is not a circular reference, the resolveRef function is called to resolve the referenced path and return the original data element pointed to by the reference. Then, the returned new element is used to update the value of the corresponding path in the original element structure.

[0055] S209, adding the new element to the target queue; In this embodiment, after obtaining the value of the new element and the corresponding path in the new element structure, the system adds the new element and the value of the corresponding path of the new element as an element to the end of the target queue element, and then updates the relevant status or mark to indicate that the new element has been successfully added to the target queue.

[0056] S210, determining whether the target queue is empty; In this embodiment, after completing a round of key-value pair traversal, it will start to determine whether some new elements appear in the target queue. In order to prevent the elements in the target queue from not being traversed, an operation is added to determine whether the target queue is empty. If the elements in the target queue are empty, step S212 is executed. If there are still elements in the target queue, step S211 is continued.

[0057] S211, continue traversing the key-value pairs of the elements in the target queue; In this embodiment, when a traversal is completed in the target queue and it is found that there are still elements in the target queue, the system continues to extract the elements in the target queue and uses a breadth-first traversal algorithm to traverse the key-value pairs of the extracted elements until no new elements appear in the target queue.

[0058] S212: Store the common value, the current path corresponding to the common value, and the corresponding path empty string into the initialization object structure to obtain a flattened target object structure.

[0059] In this embodiment, when the element in the target queue is empty, it means that all elements in the current target queue have been traversed, and then the system will store the common value and the current path corresponding to the common value and the corresponding path empty string into the initialization object structure, and output a flattened object structure, wherein the flattened object structure reduces unnecessary hierarchical nesting, making data access more intuitive and efficient. In addition, the flattened target object structure will not contain any unresolved $ref references, providing a solid foundation for subsequent data analysis and application.

[0060] In this embodiment, by initializing the object structure, a clear framework is provided for subsequent data processing, so that data can be stored in an orderly and easy-to-manage manner. Then, by adopting the breadth-first traversal algorithm to traverse the key-value pairs in the target queue, the comprehensiveness and accuracy of data processing are ensured, and the key-value pairs of each element can be checked layer by layer, avoiding omission or repeated processing. Further, for different types of corresponding values, the process adopts different processing methods, such as directly storing its value and path for ordinary values, simplifying the data structure; for arrays and objects, the corresponding path empty string is set and the object is added to the queue as a new element for subsequent processing; for values ​​of $ref type, the processing method is determined by judging whether it is a circular reference, effectively avoiding memory leaks or infinite recursion problems caused by circular references. Finally, by judging whether the target queue is empty, the flattened object structure can be effectively output, and the elements in the target queue can be prevented from being processed incompletely, which facilitates subsequent data analysis and processing.

[0061] See also Figure 3 , Figure 3 Another embodiment of a front-end web interface configuration method provided by the present application includes: S301, determining whether the key value is a common value, wherein the common value includes a string, a number, a Boolean value or a null value; In this embodiment, the key value type can be determined by a type determination function built into the programming language. For example, in Python, the isinstance() function is used to determine whether an object belongs to a specific type, such as isinstance(key_value, (str, int, bool, type(None))), and each key value to be processed is compared one by one. If the type of the key value matches one of a string, a number, a Boolean value, or a null value, the key value is determined to be a normal value and step S302 is executed.

[0062] S302: If the key value is the common value, create a common tree node based on the key value; In this embodiment, after determining that the key value is a common value, first extract the key corresponding to the key value and set it as the key of the common tree node. This key is used as the name of the node to uniquely identify the node in the tree structure. Next, assign the current common value itself to the node as the value of the node, which represents the actual data carried by the node, such as a specific numerical value or text information in the original data. Then, use the empty array or empty list data structure in the programming language to generate an empty child node list, indicating that this node is at the end of the tree structure and has no branch nodes. Finally, integrate the above-mentioned keys, values ​​and empty child node lists to construct a complete common tree node.

[0063] If the key value is not an ordinary value, the key value is marked as data of a type to be further confirmed, and ordinary value-related processing is not performed for the time being. After all key values ​​are traversed, other types of judgment processes are performed on these non-ordinary key values.

[0064] S303: Add all the common tree nodes to the corresponding parent nodes in the tree structure to generate hierarchical common tree nodes.

[0065] In this embodiment, when generating hierarchical tree structure data, first, determine the parent node of the ordinary tree node. Then, after finding the parent node, add the ordinary tree node to the child node list of the parent node. If a child node list in the form of a linked list is used, the ordinary tree node can be inserted into the appropriate position by modifying the linked list pointer; if the child nodes are stored in the form of an array, the ordinary tree nodes are stored in the array in order, and the relevant count and index information are updated. Further, after the addition is completed, starting from the root node, a depth-first or breadth-first traversal algorithm is used to check the parent-child relationship of each node to ensure that the newly added ordinary tree node conforms to the tree structure, thereby generating tree structure data.

[0066] In this embodiment, if the key value is a common value, and the common value is converted into a common tree node, from the perspective of data organization, the common tree node has a clear structure, and the key, value and empty sub-node list are clear, so that the organization of the interface configuration parameters is more standardized, avoiding confusion and ambiguity, and laying the foundation for the front-end batch configuration interface. In terms of configuration efficiency, this structured tree structure data can be quickly located and operated. And through the key, the node of the required interface configuration parameter can be quickly found, batch modification and update can be realized, which greatly reduces the configuration time and reduces the probability of manual error.

[0067] See also Figure 4 , Figure 4 Another embodiment of a front-end web interface configuration method provided by the present application includes: S401, determining whether the key value is a nested object, and the nested object is a dictionary type; In this embodiment, the key value type can be determined using a type determination tool built into the programming language. Taking Python as an example, the isinstance() function is used to compare the key value with the dict type as input. If the result of isinstance(key_value, dict) is True, it can be determined that the key value is a nested object and step S402 is executed.

[0068] S402: If the key value is the nested object, create a parent node for the nested object and initialize an empty child node list; In this embodiment, when it is determined that the key value is a nested object, a parent node is created for the nested object, and the parent node serves as a representative of the nested object in the tree structure. Then, the key in the tree node is determined according to the position of the nested object in the data or its unique identifier, and an empty child node list is initialized. The child node list is used to store the child nodes generated by the subsequent processing of the nested object.

[0069] If the key value is not a nested object, the key value is marked as data of a type to be further confirmed, and no nested object related processing is performed for the time being. After all key values ​​are traversed, other types of judgment processes are performed on the key values ​​of these non-nested objects.

[0070] S403, traversing each key-value pair in the nested object to obtain a value corresponding to the key-value pair; In this embodiment, when traversing each key-value pair in a nested object, the traversal mechanism of the corresponding programming language is first used, such as Python's for key, value in nested_object.items(). Starting from the first key-value pair of the nested object, each key-value pair is accessed in turn. Then, the key of the key-value pair is stored in a variable, and the value is obtained. Finally, the values ​​corresponding to all key-value pairs can be obtained.

[0071] S404, if the value is a nested object, recursively call function processObject to process the nested object and generate a child node; In this embodiment, after traversing each key-value pair in the nested object, if the value is a nested object, the processObject function will be called to process it. The processObject function will repeat the previous steps to create a parent node for the nested object, initialize the child node list, and further recursively traverse and process the key-value pairs of the new nested object, ensuring that no matter how many layers of nested objects there are, they can be processed layer by layer and finally converted into child nodes of a tree structure.

[0072] S405, if the value is an array, calling the processArray function to process the array and generate child nodes; In this embodiment, when traversing each key-value pair in a nested object, if it is found that the corresponding value in the key-value pair is an array type, the processArray function will be called to process the array. The processArray function is used to process array elements. It will analyze each element in the array and take different operations to generate corresponding child nodes according to the type of the element. For example, for ordinary elements, it may be converted into ordinary tree nodes; for possible nested object elements, the processObject function will be called to ensure that they are correctly converted into part of the tree structure; for array elements, the processArray function will continue to be called to process possible nested arrays and generate child nodes.

[0073] S406: If the value is a common value, directly generate a common tree node and use the common tree node as a child node; In this embodiment, when traversing each key-value pair in the nested object, if it is found that the corresponding value in the key-value pair is a common value, such as a string, a number, a Boolean value, or a null value, the common value is directly generated into a common tree node. Then, the key of the common tree node is the key of the common value in the key-value pair, and the value is the common value itself. At the same time, an empty child node list is created to indicate that the node is in the leaf node position in the tree structure. Further, the common tree node is used as a child node of the parent node, which provides a basis for adding the subsequent common tree node to the child node list of the parent node.

[0074] S407: Add all the generated child nodes to the child node list of the parent node to form a complete nested object tree node.

[0075] In this embodiment, to construct a complete nested object, a completeness check is required to ensure that the generated child nodes are accurate and contain all necessary information. Then all the generated child nodes are added to the child node list of the parent node in an orderly manner to generate a complete nested object tree structure.

[0076] In the present embodiment, by judging whether the key value is a nested object, the complex data structure can be effectively identified, laying the foundation for the subsequent traversal of each key-value pair in the nested object. Then, the parent node is created and the child node list is initialized, providing a framework for building a complete nested object tree node. Then, by recursively calling processObject to process the nested object, it is ensured that multi-level nested data can be accurately processed, the processing capability of complex data is enhanced, and the problem of data hierarchy confusion is avoided. Further, the processArray function is used to process the elements whose values ​​are arrays, so that the array elements can be reasonably integrated into the tree nodes, enriching the data presentation form. Further, the elements whose values ​​are ordinary values ​​generate tree nodes and are added to the corresponding positions, ensuring data integrity and structural consistency. Finally, all generated child nodes are added to the child node list of the parent node to form a complete nested object tree structure, which improves data processing efficiency and accuracy, and provides structural support for the subsequent front-end batch configuration interface.

[0077] See also Figure 5 , Figure 5 Another embodiment of a front-end web interface configuration method provided by the present application includes: S501, determining whether the key value is an array, and the array is a list type; In this embodiment, the key value type can be determined by using a type determination tool built into the programming language. Taking Python as an example, the isinstance(key_value, list) function is used. If True is returned, the key value type is determined to be an array, and step S502 is executed.

[0078] S502: If the key value is an array, create a tree node for the array, and the value of the tree node is Array; In this embodiment, when it is determined that the key value is an array, memory space is allocated to create a new tree node object, and the value of the tree node is set to Array, so as to clearly indicate that this node represents an array. Array is an identifier used to identify that the node stores array type data in the tree structure, which provides clear type information for subsequent processing of array elements and construction of tree structure, and facilitates the system to operate and manage array data.

[0079] If the key value is not an array, the key value is marked as data of a type to be further confirmed, and array-related processing is not performed for the time being. After all key values ​​are traversed, other types of judgment processes are performed on these non-array key values.

[0080] S503, using the recursive function processArray to traverse each element of the array to obtain the element type; In this embodiment, when obtaining the element type, the processArray function is used to receive an array as input. Then the processArray function starts from the first element of the array and uses the iterative characteristics of the programming language, such as a for or while loop to access the elements in the array one by one. Further, a language-specific judgment tool, such as Python's type() or isinstance(), is used to determine the types of all elements in the array. If a nested array is encountered, the processArray function is recursively called with the nested array as a new input until the innermost element is traversed, and the element types corresponding to all elements in the array can be obtained.

[0081] S504: Process the element type to obtain a child node corresponding to the element type; In this embodiment, after determining the element types corresponding to all elements in the array, corresponding processing can be performed according to different types. For element types of ordinary values, corresponding ordinary value child nodes will be created; for corresponding element types of arrays, the processArray function will continue to be recursively called to convert array type elements into sub-array child nodes; for object type elements, the processObject function will be called to convert the attributes of the object into object child nodes. Finally, the child nodes of ordinary values, sub-array child nodes, and object child nodes are collected to obtain the child nodes corresponding to all element types.

[0082] S505: Add the child node corresponding to each of the element types to the child node list of the tree node of the array to construct a complete array tree node.

[0083] In this embodiment, when constructing a complete array tree structure, the sub-nodes of common values, sub-array sub-nodes, and object sub-nodes collected in the array are sequentially added to the sub-node list of the array tree node. The elements are arranged according to the order in the original array to ensure that the hierarchical order of the tree structure is consistent with the order of the original array elements, so that an array and its internal elements are converted into a hierarchical array tree node can be obtained.

[0084] In the present embodiment, by judging whether the key value is an array, the pertinence and accuracy of the processing are guaranteed, and the error processing of non-array type data is avoided. Then, a tree node is created for the array, and Array is used as the value of the tree node, which identifies the position of the array in the tree structure and enhances the readability of the structure. Further, by traversing the elements whose element type is an array, the meticulous processing of the elements in the array is realized. Whether it is a nested array or other types of elements, they can be converted into child nodes and added to the node list of the parent array, which ensures the integrity and hierarchy of the array tree node.

[0085] See also Figure 6 , Figure 6 An embodiment of a front-end web interface configuration system provided by the present application includes: An acquisition unit 601 is used to acquire JSON data in Swagger format; A first processing unit 602, used for initializing a queue; The second processing unit 603 is used to extract elements from the JSON data and input them into the initialization queue to obtain a target queue; A first construction unit 604 is used to traverse the target queue using a breadth-first traversal algorithm to generate a flattened target object structure; The third processing unit 605 is used to traverse the target object structure to obtain key values; The fourth processing unit 606 is configured to convert the key value into a hierarchical ordinary tree node if the key value is an ordinary value; A fifth processing unit 607 is configured to, if the key value is a nested object, use a recursive function processObject to process the nested object to obtain a nested object tree node; A sixth processing unit 608 is configured to, if the key value is an array, use a recursive function processArray to process the array to obtain an array tree node; A second construction unit 609 is used to process the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes according to the hierarchical structure to construct tree structure data; The sending unit 610 is used to send the tree structure data to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered through the front end tree component to obtain a visual configuration item.

[0086] Optionally, the first construction unit 604 is used to: Initialize the object structure; Using a breadth-first traversal algorithm to traverse the key-value pair of each element in the target queue to obtain the corresponding value of the key-value pair; If the corresponding value is a common value, extracting the common value and the current path corresponding to the common value; If the corresponding value is an array, set an empty string for the corresponding path; If the corresponding value is an object, adding the object as a new element to the target queue; If the corresponding value is $ref, determine whether the reference inside $ref is a circular reference; If not, use the resolveRef function to resolve the $ref and update the original path to obtain the new element; Adding the new element to the target queue; Determine whether the target queue is empty; If so, the common value, the current path corresponding to the common value, and the corresponding path empty string are stored in the initialization object structure to obtain a flattened target object structure.

[0087] Optionally, the first construction unit 604 is further configured to: If so, set an empty string to the corresponding path.

[0088] Optionally, the first construction unit 604 is further configured to: If not, continue to traverse the key-value pairs of the elements in the target queue.

[0089] Optionally, the fourth processing unit 606 is configured to: Determine whether the key value is a common value, where the common value includes a string, a number, a Boolean value, or a null value; If yes, then a common tree node is created based on the key value, the common tree node comprising: Key, indicating the name of the node; Value, indicating the content of the node; Empty child node list, indicating that the common tree node has no child nodes; All the common tree nodes are added to the corresponding parent node in the tree structure to generate hierarchical common tree nodes.

[0090] Optionally, the fifth processing unit 607 is configured to: Determine whether the key value is a nested object, and the nested object is a dictionary type; If so, create a parent node for the nested object and initialize an empty child node list; Traverse each key-value pair in the nested object to obtain the value corresponding to the key-value pair; If the value is a nested object, recursively call the function processObject to process the nested object and generate a child node; If the value is an array, call the processArray function to process the array and generate child nodes; If the value is a common value, a common tree node is directly generated, and the common tree node is used as a child node; Add all the generated child nodes to the child node list of the parent node to form a complete nested object tree node.

[0091] Optionally, the sixth processing unit 608 is configured to: Determine whether the key value is an array, and the array is a list type; If yes, create a tree node for the array, the value of the tree node is Array; Use the recursive function processArray to traverse each element of the array to obtain the element type; Processing the element type to obtain a child node corresponding to the element type; The child node corresponding to each of the element types is added to the child node list of the tree node of the array to construct a complete array tree node.

[0092] This application also provides a front-end web interface configuration device, see Figure 7 , Figure 7 An embodiment of a front-end web interface configuration device provided by the present application includes: Processor 701, memory 702, input and output unit 703, bus 704; The processor 701 is connected to the memory 702, the input and output unit 703 and the bus 704; The memory 702 stores a program, and the processor 701 calls the program to execute any of the above methods.

[0093] The present application also relates to a computer-readable storage medium, on which a program is stored. When the program is run on a computer, the computer executes any of the above methods.

[0094] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0095] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0096] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0097] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0098] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, read-only memory), random access memory (RAM, random access memory), disk or optical disk, etc. Various media that can store program codes.

Claims

1. A front-end web interface configuration method, characterized in that: The method comprises: Get JSON data in Swagger format; Initialize the queue; Extracting elements from the JSON data and inputting them into the initialization queue to obtain a target queue; Using a breadth-first traversal algorithm to traverse the target queue to generate a flattened target object structure; Traversing the target object structure to obtain key values; If the key value is a common value, converting the key value into a hierarchical common tree node; If the key value is a nested object, the nested object is processed using a recursive function processObject to obtain a nested object tree node; If the key value is an array, the array is processed using a recursive function processArray to obtain an array tree node; Processing the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes in a hierarchical structure to construct tree structure data; The tree structure data is sent to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered through the front end tree component to obtain a visual configuration item.

2. According to the front-end web interface configuration method described in claim 1, it is characterized in that: The using a breadth-first traversal algorithm to traverse the target queue to generate a flattened target object structure includes: Initialize the object structure; Using a breadth-first traversal algorithm to traverse the key-value pair of each element in the target queue to obtain the corresponding value of the key-value pair; If the corresponding value is a common value, extracting the common value and the current path corresponding to the common value; If the corresponding value is an array, set an empty string for the corresponding path; If the corresponding value is an object, adding the object as a new element to the target queue; If the corresponding value is $ref, determine whether the reference inside $ref is a circular reference; If not, use the resolveRef function to resolve the $ref and update the original path to obtain the new element; Adding the new element to the target queue; Determine whether the target queue is empty; If so, the common value, the current path corresponding to the common value, and the corresponding path empty string are stored in the initialization object structure to obtain a flattened target object structure.

3. The front-end web interface configuration method according to claim 2, characterized in that: If the corresponding value is $ref, after determining whether the reference inside $ref is a circular reference, the method further includes: If so, set an empty string to the corresponding path.

4. The front-end web interface configuration method according to claim 2, characterized in that: After determining whether the target queue is empty, the method further includes: If not, continue to traverse the key-value pairs of the elements in the target queue.

5. The front-end web interface configuration method according to claim 1, characterized in that: If the key value is a common value, converting the key value into a hierarchical common tree node includes: Determine whether the key value is a common value, where the common value includes a string, a number, a Boolean value, or a null value; If yes, then a common tree node is created based on the key value, the common tree node comprising: Key, indicating the name of the node; Value, indicating the content of the node; Empty child node list, indicating that the common tree node has no child nodes; All the common tree nodes are added to the corresponding parent node in the tree structure to generate hierarchical common tree nodes.

6. The front-end web interface configuration method according to claim 1, characterized in that: If the key value is a nested object, the nested object is processed using a recursive function processObject to obtain a nested object tree node, including: Determine whether the key value is a nested object, and the nested object is a dictionary type; If so, create a parent node for the nested object and initialize an empty child node list; Traverse each key-value pair in the nested object to obtain the value corresponding to the key-value pair; If the value is a nested object, recursively call the function processObject to process the nested object and generate a child node; If the value is an array, call the processArray function to process the array and generate child nodes; If the value is a common value, a common tree node is directly generated, and the common tree node is used as a child node; Add all the generated child nodes to the child node list of the parent node to form a complete nested object tree node.

7. The front-end web interface configuration method according to claim 1, characterized in that: If the key value is an array, the array is processed using a recursive function processArray to obtain an array tree node, including: Determine whether the key value is an array, and the array is a list type; If yes, create a tree node for the array, the value of the tree node is Array; Use the recursive function processArray to traverse each element of the array to obtain the element type; Processing the element type to obtain a child node corresponding to the element type; The child node corresponding to each of the element types is added to the child node list of the tree node of the array to construct a complete array tree node.

8. A front-end web interface configuration system, characterized in that: The system comprises: The acquisition unit is used to obtain JSON data in Swagger format; A first processing unit, used for initializing a queue; A second processing unit is used to extract elements from the JSON data and input them into the initialization queue to obtain a target queue; A first construction unit is used to traverse the target queue using a breadth-first traversal algorithm to generate a flattened target object structure; A third processing unit, configured to traverse the target object structure to obtain a key value; A fourth processing unit, configured to convert the key value into a hierarchical ordinary tree node if the key value is an ordinary value; a fifth processing unit, configured to, if the key value is a nested object, use a recursive function processObject to process the nested object to obtain a nested object tree node; a sixth processing unit, configured to, if the key value is an array, use a recursive function processArray to process the array to obtain an array tree node; A second construction unit, for processing the hierarchical common tree nodes, the nested object tree nodes and the array tree nodes in a hierarchical structure to construct tree structure data; The sending unit is used to send the tree structure data to the front end, so that after the front end receives the tree structure data, the tree structure data is rendered through the front end tree component to obtain a visual configuration item.

9. A front-end web interface configuration device, characterized in that: The device comprises: Processor, memory, input-output unit, and bus; The processor is connected to the memory, the input and output unit, and the bus; The memory stores a program, and the processor calls the program to execute the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a program, and when the program is executed on a computer, the method according to any one of claims 1 to 7 is performed.

Images