Form interface generation method, device, system and readable storage medium

Abstract

The present application provides a form interface generation method, device, system and readable storage medium, the method comprising obtaining page configuration request information; parsing the page configuration request information to obtain the requested API and UI schema information; merging the UI schema information with the API description document to generate an ApiForm description file; sending the ApiForm description file to a rendering engine; the rendering engine renders the front-end form interface according to the ApiForm description file, that is, achieving a unified description of the form components and interfaces of the front-end and back-end, and automatically completing the front-end interface generation through the middleware, thereby realizing rapid form interface development; the front-end developer does not need to independently develop the form interface, which solves the problem of front-end and back-end interface dependency and effectively improves the efficiency of front-end and back-end joint debugging.

Description

Technical Field

[0001] The present invention belongs to the technical field of form processing, and in particular relates to a form interface generation method, device, system and readable storage medium. Background Art

[0002] During the business development process of the form interface, front-end and back-end technical personnel are often required to conduct joint debugging. For example, after the interface design and development is completed, it must be connected with the back-end API. This development model often requires large resources, is inefficient, and has strong front-end and back-end dependencies. Changes to the back-end interface will directly affect the logic of the front-end interface rendering.

[0003] Currently, the industry has proposed a method for constructing forms based on JSON Schema. Although this method solves the problem of having to reconfigure the form every time, it only solves the problem of front-end rendering and lacks integrity. It still does not solve the problem of interface dependency during front-end and back-end joint debugging. Summary of the Invention

[0004] Based on this, the present invention aims to provide a form interface generation method, device, system and readable storage medium to overcome the defects of the prior art.

[0005] In a first aspect, the present invention provides a method for generating a form interface, which is executed at a middleware, comprising:

[0006] Get page configuration request information;

[0007] Parse the page configuration request information and obtain the requested API and UI schema information;

[0008] Merge the UI schema information with the API description document to generate an ApiForm description file;

[0009] Send the ApiForm description file to the rendering engine so that the rendering engine can render and generate the form interface.

[0010] Furthermore, merging the UI schema with the API description document includes:

[0011] Analyze the UI schema one by one, and merge each schema description in the UI schema information into the API description document with the same path and name according to the OpenAPI protocol.

[0012] Furthermore, the method further comprises:

[0013] Call the ISwaggerProvider interface of the Swagger framework to generate the API description document.

[0014] Furthermore, obtaining page configuration request information includes:

[0015] Intercept HTTP requests for web pages;

[0016] Parse the URL to identify page configuration request information.

[0017] In a second aspect, the present invention provides a method for generating a form interface, which is executed at a rendering engine and includes:

[0018] Get the ApiForm description file sent by the middleware;

[0019] Parse the ApiForm description file to generate JSON Schema and form configuration data;

[0020] Render the form interface according to JSON Schema;

[0021] Instantiate components according to form configuration data to complete interface requests, interactions, and event notifications.

[0022] Furthermore, parsing the ApiForm description file to generate JSON Schema and form configuration data includes:

[0023] According to the OpenAPI protocol, the ApiForm description file is split into path-method dimensions;

[0024] Parse the node information of each split segment;

[0025] Generate JSON Schema and form configuration data based on node information.

[0026] Furthermore, rendering the form interface according to JSON Schema includes:

[0027] The form is rendered recursively based on the schema component. When the component is of the first type, each child node is looped and recursively returned to the schema component. When the component is of the second type, the widget component corresponding to the component type is selected for rendering based on the mapping relationship between the type and the widget component.

[0028] In a third aspect, the present invention provides a form interface generation device, comprising at least:

[0029] A middleware unit, configured to execute the form interface generation method of the first aspect;

[0030] The rendering unit is used to execute the form interface generation method of the second aspect.

[0031] In a fourth aspect, the present invention provides a form interface generation system, comprising a memory storing computer executable instructions and a processor, wherein when the computer executable instructions are executed by the processor, the system executes the form interface generation method provided in the first and second aspects.

[0032] The present invention also provides a readable storage medium storing a computer executable program, which, when executed, can implement the form interface generation method provided in the first aspect and the second aspect.

[0033] It can be seen from the above technical solutions that the present invention has the following advantages:

[0034] The present invention provides a form interface generation method, device, system, and readable storage medium. The method generates an ApiForm description file by combining a UI schema with an API description document. The rendering engine then parses the ApiForm description file to generate a JSON Schema and form configuration data, thereby completing interface rendering. The back-end API description is integrated with the front-end form component Schema description. The generated ApiForm description file contains the definitions and interaction methods of the front-end and back-end. The front-end interface is automatically generated through middleware, enabling rapid form interface development. Front-end developers no longer need to independently develop form interfaces, solving the problem of front-end and back-end interface dependency and effectively improving the efficiency of front-end and back-end joint debugging. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0036] Figure 1 Schematic diagram of the form interface generation device architecture provided by an embodiment of the present invention

[0037] Figure 2 Schematic diagram of a flow chart of a form interface generation method provided by an embodiment of the present invention

[0038] Figure 3 Schematic diagram of a flow chart of a form interface generation method provided by another embodiment of the present invention

[0039] Figure 4 Schematic diagram of an execution method of a form interface generation method provided by another embodiment of the present invention

[0040] Figure 5 Schematic diagram of a form interface generated in another embodiment of the present invention

[0041] Figure 6 Schematic diagram of the structure of a form interface generation system provided by an embodiment of the present invention DETAILED DESCRIPTION

[0042] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0043] Example 1

[0044] See Figure 1 The present invention provides a form interface generation device. In this embodiment, exemplary descriptions of other components are also provided. The overall system includes the following parts:

[0045] The form designer layouts form components through visual drag and drop, maps and binds component schemas with OpenAPI request parameters or output parameters, and generates UI Schema information.

[0046] The API service framework implements the logical interface for the business and can output standard OpenAPI description documents through the Service API such as the Swagger framework.

[0047] The middleware unit merges the UI Schema information with the API description document to generate an ApiForm description file.

[0048] Rendering unit: parses the ApiForm protocol document, obtains the UI components required in the protocol from the UI component library, and assembles them into a form interface.

[0049] It is easy to understand that the above components and / or units can be implemented by software codes. In this case, the above components and / or units can be stored in a memory provided at a control terminal such as a control computer.

[0050] The form interface generation device provided in this embodiment merges the UI Schema information and the API description document into an ApiForm description file through a middleware unit. The file is a complete description document including front-end and back-end definitions and interaction methods. The rendering unit parses the ApiForm description file to obtain the JSON Schema, obtains the required UI components from the UI component library, and renders and generates a form interface. There is no need for front-end developers to repeatedly develop interfaces. Back-end developers only need to develop interfaces to complete joint debugging, which can effectively improve the efficiency of front-end and back-end joint debugging.

[0051] Example 2

[0052] See Figure 2 Based on the form interface generation device provided in the first embodiment, this embodiment provides a form interface generation method from the middleware side, including:

[0053] Get page configuration request information;

[0054] Parse the page configuration request information and obtain the requested API and UI schema information;

[0055] Merge the UI schema information with the API description document to generate an ApiForm description file;

[0056] Send the ApiForm description file to the rendering engine so that the rendering engine can render and generate the form interface.

[0057] In some embodiments, the middleware is configured and integrated into the website project in the form of a Filter plug-in, which intercepts HTTP requests in the website.

[0058] The middleware analyzes the URL format, identifies that the request address is to obtain the ApiForm description file, and then starts to execute the generation logic.

[0059] The middleware first obtains the page configuration information requested by the client from the configuration center or database, and obtains the API name and UI Schema information from the configuration information.

[0060] In some embodiments, when generating an API description document, the middleware may call the ISwaggerProvider interface of the Swagger framework to generate the API document for the website and filter out the corresponding API requested by the client.

[0061] Analyze the UI Schema content line by line and merge each UI Schema description into the corresponding API description document node using the same path and name according to the OpenAPI protocol. In some embodiments, key nodes that developers focus on include parameters, requestBody, and responses.

[0062] The middleware returns the ApiForm description file in JSON format to the rendering engine for rendering.

[0063] Example 3

[0064] See Figure 3 Based on the form interface generation device provided in the first embodiment, this embodiment provides a form interface generation method from the rendering engine side, including:

[0065] Get the ApiForm description file sent by the middleware;

[0066] Parse the ApiForm description file to generate JSON Schema and form configuration data;

[0067] Render the form interface according to JSON Schema;

[0068] Instantiate components according to form configuration data to complete interface requests, interactions, and event notifications.

[0069] In some embodiments, the rendering engine also needs to load the form configuration and download the remote component from the global component library before parsing the description file.

[0070] In some embodiments, the rendering engine ApiForm description file includes:

[0071] According to the OpenAPI protocol, the split is based on the dimension of "path-method" (path.method);

[0072] Parse the node information under each split segment "path-method", which includes parameters, requestBody, responses, etc.

[0073] The rendering engine generates JSON Schema based on these node information, instantiates components according to the form configuration data, and completes interface requests, interactions, and event notifications.

[0074] In some embodiments, rendering the form interface includes:

[0075] Render data level by level through JSON Schema in a recursive manner based on schema components.

[0076] Determine the component type. For complex types (such as object and array), loop through each child node and recursively process them in the Schema component. For simple types (such as string, number, boolean, and other), select the corresponding widget for rendering based on the mapping between the type and the widget component. If the ui:widget field is configured, render according to the custom widget.

[0077] Example 4

[0078] See Figure 4 , the present invention further describes the form interface generation completed by the interaction between the middleware and the rendering engine.

[0079] When a user opens a web link in a browser, a request is made to the rendering engine via HTTP communication to generate a form.

[0080] The rendering engine requests the page schema.

[0081] The middleware is integrated into the website project in the form of a Filter plug-in, which intercepts HTTP requests in the website.

[0082] The middleware analyzes the URL format, recognizes that the request address is to obtain the ApiForm description file, and then starts to execute the generation logic.

[0083] The middleware requests the configuration center to obtain page configuration request information.

[0084] Parse the page configuration request information and obtain the requested API name and UI Schema information.

[0085] The middleware calls the Swagger framework as the API service, calls its ISwaggerProvider interface to generate the API documentation for the website, and filters out the corresponding API requested by the client.

[0086] The middleware analyzes the contents of the UI Schema one by one, and merges each schema description of the UI Schema into the description document node corresponding to the API with the same path and name according to the OpenAPI protocol.

[0087] Send the ApiForm description file to the rendering engine in JSON format.

[0088] The rendering engine generates JSON Schema and form configuration data based on the ApiForm description file.

[0089] Renders a form interface based on JSON Schema.

[0090] Perform component lifecycle management and specific API calls based on form configuration data, including interface requests, interactions, and event notifications.

[0091] After rendering is completed, the generated form interface is returned to the browser. Figure 5 An illustrative example of a rendered form interface is shown, but the present invention is not limited thereto.

[0092] The form interface generation method provided in the embodiment of the present application can be executed by a form interface generation system, which can be a server, a computer, a cloud, etc. Figure 6 The hardware structure block diagram of the system is shown, which includes: at least one processor 1, at least one communication interface 2, at least one memory 3 and at least one communication bus 4;

[0093] In the embodiment of the present application, the number of the processor 1, the communication interface 2, the memory 3, and the communication bus 4 is at least one, and the processor 1, the communication interface 2, and the memory 3 communicate with each other through the communication bus 4;

[0094] The processor 1 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention;

[0095] The memory 3 may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory;

[0096] The memory stores computer-executable instructions, and the processor can call a program stored in the memory, wherein the program is used to implement the form interface generation process provided in the aforementioned embodiments.

[0097] An embodiment of the present application further provides a storage medium storing a computer executable program, which, when executed, can implement the form interface generation method provided in the aforementioned embodiments.

[0098] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments can still be modified, or some of the technical features thereof can be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A form interface generation method, characterized in that: The method is executed at the middleware and includes: Get page configuration request information; Parse the page configuration request information and obtain the requested API and UI schema information; Merge the UI schema information with the API description document to generate an ApiForm description file, specifically including: The UI schema information is generated by the form designer by visually dragging and dropping form components, mapping and binding the component schema with the OpenAPI request parameters or output parameters; Call the Swagger framework as the API service and call its ISwaggerProvider interface to generate the website's API description document. Filter out the API corresponding to the API requested by the page configuration request information, analyze the UI schema information one by one, and merge each schema description in the UI schema information into the API description document according to the same path and name according to the OpenAPI protocol. The ApiForm description file is sent to the rendering engine so that the rendering engine can render and generate a form interface.

2. The method according to claim 1, characterized in that The acquisition of page configuration request information includes: Intercept HTTP requests for web pages; Parse the URL to identify page configuration request information.

3. A form interface generation method, characterized in that: The method is executed at a rendering engine and includes: Obtaining an ApiForm description file sent by the middleware, wherein the ApiForm description file is generated using the form interface generation method according to any one of claims 1 to 2; Parse the ApiForm description file to generate JSON Schema and form configuration data, including: According to the OpenAPI protocol, the ApiForm description file is split into path-method dimensions; Parse the node information of each split segment; Generate JSON Schema and form configuration data based on the node information; Rendering the form interface according to the JSON Schema includes: Render data level by level through JSON Schema based on schema component recursion; If the component is of the first type, loop through each child node and recursively return to the schema component. If the component is of the second type, select the widget component corresponding to the component type for rendering based on the mapping relationship between the type and the widget component. Components are instantiated according to the form configuration data to complete interface requests, interactions, and event notifications.

4. A form interface generation device, characterized in that: The device at least comprises: A middleware unit, configured to execute the form interface generation method according to any one of claims 1 to 2; A rendering unit, configured to execute the form interface generation method as described in claim 3.

5. A form interface generation system, comprising a memory storing computer executable instructions and a processor, characterized in that: When the computer executable instructions are executed by the processor, the system executes the form interface generation method according to any one of claims 1 to 3.

6. A readable storage medium storing a computer executable program, characterized in that: When the program is executed, the form interface generation method according to any one of claims 1 to 3 can be implemented.

Images