Method and system for generating a fixed-structure UI page based on data configuration

Abstract

The present invention provides a method and system for generating a fixed-structure UI page based on data configuration, including: abstracting a page structure and customizing UI template components; defining and configuring corresponding structure data according to the page structure; and completing UI page rendering according to the custom UI template components and structure data. The present invention realizes the secondary encapsulation of the UI framework in a configuration-based manner, which can not only inherit some features of the original UI framework but also include customized functions that meet business requirements. Developers can use it as needed without having to be fully familiar with a new mode. Moreover, the plug-in method provides functions, and the scalability is very high. The more pages of the same mode, the more duplicate codes that developers can avoid, reaching more than 30%. Thus, the purposes of reducing the development difficulty, improving the development efficiency, and unifying the page style are achieved.

Description

Technical Field

[0001] The present invention relates to the field of UI page development, and specifically, to a method and system for generating a fixed-structure UI page based on data configuration, especially a fast development solution for a fixed-structure UI page based on data configuration. Background Art

[0002] Patent document CN114510232A discloses a method for quickly arranging and generating a page based on a fixed template. By selecting a page type, developing a page with a template style, directly carrying the fixed part through code, and then realizing the dynamic rendering of the part that needs to be dynamically changed by reading configuration data, so as to facilitate editing of the configuration data on a visual editing page, and then generating a page file after updating and rendering, reducing repetitive operations, thereby improving the page generation efficiency and reducing the development skill requirements for users.

[0003] However, the development based on a fixed template in patent document CN114510232A has a low difficulty for users to get started, but a relatively high difficulty for developers. First, developers need to be familiar with this set of provided rules. If they are not familiar with them, due to its extremely high encapsulation, it is very difficult to troubleshoot problems after problems occur. Summary of the Invention

[0004] Aiming at the deficiencies in the prior art, the purpose of the present invention is to provide a method and system for generating a fixed-structure UI page based on data configuration.

[0005] According to a method for generating a fixed-structure UI page based on data configuration provided by the present invention, it includes:

[0006] Step S1: Abstract the page structure and customize UI template components;

[0007] Step S2: Define and configure corresponding structure data according to the page structure;

[0008] Step S3: Complete the UI page rendering according to the customized UI template components and structure data.

[0009] Preferably, the step S1 includes:

[0010] Step S1.1: Select the UI template components to be defined from the UI framework;

[0011] Step S1.2: Abstract the page structure, where the page structure includes layout, data display, data entry, and feedback;

[0012] Step S1.3: Package the general page interaction logic to obtain customized UI template components.

[0013] Preferably, the step S2 includes:

[0014] Step S2.1: Determine the corresponding structure data to be configured according to the page structure, where the structure data includes: layout structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, deletion structure data;

[0015] Step S2.2: Configure the layout structure data, which is configured in the form of an array object, including various theme configuration schemes provided by the custom UI template component, internationalization configuration, page layout, and layout selection for users to customize;

[0016] Step S2.3: Configure the routing configuration structure data, configure the page menu routing, configure the multi-dimensional menu through a one-dimensional array, and the multi-dimensional menu can be automatically generated through the data returned by the background; at the same time, the routing also provides various navigation page selections;

[0017] Step S2.4: Configure the network request structure data, use the key-value of the network configuration as the network interface alias, pass the network interface alias to the custom UI template component, and at the same time, the input parameters are passed into the custom UI template component in the form of an object. The custom UI template component will automatically complete the interface call, handle the page loading effect, obtain data, and display the prompt information of whether the data is obtained successfully. At the same time, callback functions are exposed before and after the network interface call for developers to perform extended operations;

[0018] Step S2.5: Configure the operation button structure data, control the basic operation functions in the form of an array object, and at the same time, the custom UI template component provides users with various configurable arrangement design options;

[0019] Step S2.6: Configure the self-rendering form structure data. First, fill the data in the form of an array object, and write the attributes of adding, editing, or querying in the column configuration attributes of the list. At the same time, configure the optional attributes in the custom UI template component, dynamically configure whether to display the add, edit, or query buttons, and automatically generate the add, edit, or query form content;

[0020] Step S2.7: Configure the form type structure data. The form types of a one-layer array object are: ordinary forms; the form types of multi-layer array objects are step forms, grouped forms, and paged forms, and the form display types are controlled through the form type structure data;

[0021] Step S2.8: Configure the multi-mode form structure data. For the same data, different form interface effects are displayed according to different user permissions and preferences. The custom UI template component provides an external parameter entry, allowing users to select multiple display modes according to the multi-mode form structure data;

[0022] Step S2.9: Configure the deletion structure data. Configure optional attributes in the custom UI template component to dynamically configure whether to display the deletion operation, and include a secondary confirmation modal box to show whether to delete one or more groups of data.

[0023] Preferably, based on two carriers, the UI framework and the structure data; the secondary encapsulation of the UI framework is implemented in a configuration-based manner, inheriting the characteristics of the original UI framework and including customized functions that meet business requirements; the secondary encapsulated UI framework provides an external configurable entry, and the entry exposes fixed-configured structure data to the outside, allowing users to configure the structure data to achieve page assembly with the template as the entry; by using the schema syntax to adapt to the UI page display rules, and at the same time introducing internal functions in a plug-in and templated manner.

[0024] Preferably, for the development of management applications, define the structure data corresponding to the fixed-structure page configuration, use the custom UI template component as the entry, and pass the page configuration structure data as a configuration item, and render the fixed-structure page in different components through a unified development method.

[0025] A fixed-structure UI page generation system based on data configuration provided by the present invention includes:

[0026] Module M1: Abstract the page structure and customize the UI template component;

[0027] Module M2: Define and configure the corresponding structure data according to the page structure;

[0028] Module M3: Complete the UI page rendering according to the custom UI template component and the structure data.

[0029] Preferably, the module M1 includes:

[0030] Module M1.1: Select the UI template component to be defined from the UI framework;

[0031] Module M1.2: Abstract the page structure, where the page structure includes layout, data display, data entry, and feedback;

[0032] Module M1.3: Encapsulate the general page interaction logic to obtain a custom UI template component.

[0033] Preferably, the module M2 includes:

[0034] Module M2.1: Determine the corresponding structure data to be configured according to the page structure, where the structure data includes: layout structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, deletion structure data;

[0035] Module M2.2: Configure the layout structure data, which is configured in the form of an array object, including multiple theme configuration schemes provided by the custom UI template component, internationalization configuration, page layout, and layout selection for users to customize;

[0036] Module M2.3: Configure the routing configuration structure data, configure the page menu routing, configure the multi-dimensional menu through a one-dimensional array, and the multi-dimensional menu can be automatically generated through the data returned by the background; at the same time, the routing also provides multiple navigation page selections;

[0037] Module M2.4: Configure the network request structure data, use the key-value of the network configuration as the network interface alias, pass the network interface alias to the custom UI template component, and at the same time pass the input parameters in the form of an object to the custom UI template component. The custom UI template component automatically completes the interface call, processes the page loading effect, obtains the data, and prompts whether the data acquisition is successful. At the same time, callback functions are exposed before and after the network interface call for developers to perform extended operations;

[0038] Module M2.5: Configure the operation button structure data, control the basic operation functions in the form of an array object, and at the same time the custom UI template component provides users with multiple configurable arrangement design options;

[0039] Module M2.6: Configure the self-rendering form structure data. First, fill the data in the form of an array object, and write the add, edit, or query attributes in the column configuration attributes of the list. At the same time, configure the optional attributes in the custom UI template component, dynamically configure whether to display the add, edit, or query buttons, and automatically generate the add, edit, or query form content;

[0040] Module M2.7: Configure the form type structure data. The form types of a one-layer array object are: ordinary forms; the form types of multi-layer array objects are step forms, grouped forms, and paged forms, and the form display types are controlled through the form type structure data;

[0041] Module M2.8: Configure the multi-mode form structure data. For the same data, different form interface effects are displayed according to different user permissions and preferences. The custom UI template component provides an external parameter entry, allowing users to select multiple display modes according to the multi-mode form structure data;

[0042] Module M2.9: Configure the deletion of structural data, configure optional attributes in the custom UI template component, dynamically configure whether to display the deletion operation, and include a secondary confirmation modal box to show whether to display one or more groups of data to be deleted.

[0043] Preferably, based on two carriers, the UI framework and the structural data; the secondary encapsulation of the UI framework is implemented in a configuration-based manner, inheriting the characteristics of the original UI framework and including customized functions that meet business requirements; the secondary-encapsulated UI framework provides an externally configurable entry, and the entry exposes the structurally fixed configuration data externally, allowing users to configure the structural data and use the template as the entry to achieve page assembly; by using the schema syntax to adapt to the UI page display rules, and at the same time introducing internal functions in a plug-in and templated manner.

[0044] Preferably, for the development of management applications, define the structural data corresponding to the fixed-structure page configuration, use the custom UI template component as the entry, pass the page configuration structural data as a configuration item, and render the fixed-structure page in different components through a unified development method.

[0045] Compared with the prior art, the present invention has the following beneficial effects:

[0046] 1. The present invention realizes the secondary encapsulation of the UI framework in a configuration-based manner, which can not only inherit some characteristics of the original UI framework, but also include customized functions that meet business requirements, without resulting in extremely high encapsulation, reducing the restrictions on application development.

[0047] 2. The present invention not only retains the stable and familiar writing method of the original UI framework, but also provides the development method of the structural data. Developers can use it as needed without having to be fully familiar with a new mode. Moreover, the plug-in plug-and-play method provides functions, and the scalability is very high, reducing the cost greatly compared with the solution that requires custom code and integration.

[0048] 3. The present invention mainly defines the configuration data of the fixed-structure page and supplements it with UI development. The more pages of the same mode, the more duplicate codes that developers can avoid, reaching more than 30%. Thus, the purpose of reducing the development difficulty, lowering the entry threshold for developers, improving the development efficiency, and unifying the page style is achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] By reading the following detailed description of the non-limiting embodiments with reference to the accompanying drawings, other features, objects, and advantages of the present invention will become more apparent:

[0050] Figure 1 It is a schematic flowchart of the process steps of the generation method provided by the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0051] The present invention will be described in detail below in conjunction with specific embodiments. The following embodiments will help those skilled in the art to further understand the present invention, but do not limit the present invention in any form. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present invention, several changes and improvements can still be made. These all belong to the protection scope of the present invention.

[0052] The present invention is based on two carriers, a UI framework and structure data, and is in a componentized and plug-in manner. The UI framework: It can be an existing open-source UI framework, such as elementUI, antd, etc., or a UI framework encapsulated within the group. Based on the UI framework, the present invention realizes the secondary encapsulation of the UI framework in a configurational manner, which can not only inherit some characteristics of the original UI framework but also include customized functions that meet business requirements; The structure data: The secondary-encapsulated UI framework will provide an externally configurable entry, and the entry will expose some fixed-configured structure data to the outside. Users can configure the structure data and use the template (not an external json file) as the entry to realize page assembly.

[0053] In the prior art, there are solutions for development based on fixed templates. Although it is easy for users to get started, it is difficult for developers to get started. Developers first need to be familiar with this set of provided rules. If they are not familiar with it, due to its extremely high encapsulation, it is very difficult to troubleshoot problems after problems occur, and it is difficult to choose a compromise solution for writing; The present invention not only retains the stable and familiar writing method of the original UI framework but also provides the development method of the structure data. Developers can use it as needed without having to be fully familiar with a new mode, and the plug-in plug-and-play method provides functions, with high scalability.

[0054] Regarding how to expose an externally configurable structure data entry on the basis of adapting to the original UI framework, the present invention uses schema syntax to adapt to the UI page display rules, and at the same time, it makes special internal functions (such as network requests, internationalization, context, etc.) plug-in and templatized (fixed template pages) introduced to complete the extended configuration of the existing functions, thereby providing a structure data entry and completing the development of page components.

[0055] When developing management applications, define fixed-structure page configuration data, use the page template component as the entry, and pass the page configuration data as a configuration item. Through a unified development method, render fixed-structure pages in different components. The present invention mainly defines fixed-structure page configuration data and supplements UI development. The more pages of the same mode there are, the more duplicate codes developers can avoid, reaching more than 30%. Thus, the purposes of reducing development difficulty, improving development efficiency, and unifying page styles are achieved.

[0056] Specifically, a method for generating a fixed-structure UI page based on data configuration provided by the present invention includes the following steps:

[0057] Step 1: Define template components and abstract the page structure; the said Step 1 includes the following steps:

[0058] Step 1.1: Select the UI template components to be defined;

[0059] Step 1.2: Abstract the page structure, including layout, data display, data entry, and feedback; among them, the layout includes theme dynamic configuration, navigation bar, and menu bar; data display includes tables, table pages, editable tables, drag-and-drop sorting tables, advanced lists, and definition lists; data entry includes ordinary forms, grouped forms, inline forms, floating forms, distributed forms, JSON forms, login forms, shuttle box components, select buttons (supporting automatic pop-up of pop-up windows when clicked); feedback includes drawers, global prompts, loading, notification alerts, dialog boxes, etc.; data entry includes ordinary forms, grouped forms, inline forms, floating forms, distributed forms, JSON forms, login forms, shuttle box components, select buttons (supporting automatic pop-up of pop-up windows when clicked); feedback includes drawers, global prompts, loading, notification alerts, dialog boxes, etc.;

[0060] Step 1.3: Encapsulate general page interaction logic: network calls, search filtering and sorting, column display and hiding, secondary confirmation for deletion, component linkage (network request success and failure prompts, page refresh);

[0061] Step 1.4: According to the encapsulation in Step 1.3, obtain our custom UI template components, denoted as template devices;

[0062] Step 2: Define page structure configuration data, including: layout component structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, deletion structure data, etc.; the said Step 2 includes the following steps:

[0063] Step 2.1: Configure corresponding structure data according to the page structure abstracted in Step 1;

[0064] Step 2.2: The layout component structure data is configured in the form of an array object, including various theme configuration schemes provided by the template device, internationalization configuration, page layout, and layout options available for user customization, etc.;

[0065] Step 2.3: Routing configuration structure data. Only the page menu routes need to be configured, and the tree structure menu routes do not need to be configured. Multidimensional menus are configured through a one-dimensional array, and the multidimensional menus can be automatically generated based on the data returned by the background. At the same time, the routing also provides various navigation page options, including whether to display the page navigation bar, whether to display the menu routes, whether to display full screen, whether to cache the menu page, whether authentication is required, whether the page can be copied, and other forms;

[0066] Step 2.4: Network request structure data. Use the key-value of the network configuration as the network interface alias. Developers need to pass the network interface alias to the template device. At the same time, the input parameters are passed into the template device in the form of an object. The template device will automatically complete the interface call, handle the page loading effect, obtain data, and display a prompt message indicating whether the data acquisition is successful. At the same time, callback functions are exposed externally before and after the network interface call for developers to perform extended operations;

[0067] Step 2.5: Operation button structure data. Control the basic operation functions in the form of an array object, including: key, name, icon, whether to prohibit clicking, whether to display, what type of operation it is (toolbar, list operation bar, selection item), permission judgment, click event, custom rendering function, etc.; Among them, the arrangement forms of selection items include various forms such as in-table display, floating display, and bottom-of-page display; When the number of operation items in the list operation bar is greater than 2 (or any value configured by the user), the arrangement style will be automatically converted. When the number of operation items is greater than 2 (or any value configured by the user), the operation items will be automatically generated into a drop-down floating box. At the same time, the template device provides the user with a variety of configurable arrangement design options;

[0068] Step 2.6: Self-rendering form structure data. First, fill the data in the form of an array object. The new (edit or query) attributes are written in the column configuration attributes of the list. At the same time, in the template device, optional attributes are configured to dynamically configure whether to display the new (edit or query) button and automatically generate the new (edit or query) form content;

[0069] Step 2.7: Form type structure data. The form types of a one-layer array object are: ordinary form; The form types of multi-layer array objects are step forms, grouped forms, paged forms, etc. Control the form display type through the form type structure data;

[0070] Step 2.8: Multi-mode form structure data. For the same data, different form interface effects need to be displayed according to different user permissions and preferences. The template device provides an external parameter entry. Users can select various display modes according to the multi-mode form structure data, such as: modal box form, page form, whether to automatically generate routes, whether to cache, whether to display full screen, whether to prohibit copying, etc.;

[0071] Step 2.9: Delete the structural data, configure optional attributes in the template device, where it is possible to dynamically configure whether to display the delete operation, and a secondary confirmation modal box is included to show whether to display one or more groups of data to be deleted, eliminating the need for developers to perform development processing again.

[0072] Step 3: Complete the rendering of a UI page with a unified style by combining data through template components and page structures.

[0073] The present invention also provides a system for generating a fixed-structure UI page based on data configuration. Those skilled in the art can implement the system for generating a fixed-structure UI page based on data configuration by executing the process steps of the method for generating a fixed-structure UI page based on data configuration. That is, the method for generating a fixed-structure UI page based on data configuration can be understood as a preferred implementation of the system for generating a fixed-structure UI page based on data configuration. Specifically, according to a system for generating a fixed-structure UI page based on data configuration provided by the present invention, it includes:

[0074] Module M1: Abstract the page structure and customize UI template components;

[0075] Module M2: Define and configure corresponding structural data according to the page structure;

[0076] Module M3: Complete the rendering of the UI page according to the customized UI template components and structural data.

[0077] The module M1 includes:

[0078] Module M1.1: Select the UI template components to be defined from the UI framework;

[0079] Module M1.2: Abstract the page structure, where the page structure includes layout, data display, data entry, and feedback;

[0080] Module M1.3: Encapsulate general page interaction logic to obtain customized UI template components.

[0081] The module M2 includes:

[0082] Module M2.1: Determine the corresponding structural data to be configured according to the page structure, where the structural data includes: layout structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, and deletion structure data;

[0083] Module M2.2: Configure layout structure data, which is configured in the form of an array object, including multiple theme configuration options provided by custom UI template components, internationalization configuration, page layout, and layout selection for users to customize;

[0084] Module M2.3: Configure routing configuration structure data, configure page menu routes, configure multi-dimensional menus through a one-dimensional array, and the multi-dimensional menus can be automatically generated based on data returned by the background; at the same time, the routing also provides multiple navigation page selections;

[0085] Module M2.4: Configure network request structure data, use the key-value of the network configuration as the network interface alias, pass the network interface alias to the custom UI template component, and at the same time, the input parameters are passed into the custom UI template component in the form of an object. The custom UI template component automatically completes the interface call, processing of the page loading effect, data acquisition, and prompt information on whether the data acquisition is successful. At the same time, callback functions are exposed before and after the network interface call for developers to perform extended operations;

[0086] Module M2.5: Configure operation button structure data, control basic operation functions in the form of an array object, and at the same time, the custom UI template component provides users with multiple configurable layout design options;

[0087] Module M2.6: Configure self-rendering form structure data. First, fill the data in the form of an array object, and write the add, edit, or query attributes in the column configuration attributes of the list. At the same time, configure optional attributes in the custom UI template component, dynamically configure whether to display the add, edit, or query buttons, and automatically generate the add, edit, or query form content;

[0088] Module M2.7: Configure form type structure data. The form types of a one-layer array object are: ordinary form; the form types of a multi-layer array object are step-by-step form, grouped form, and paged form. Control the form display type through the form type structure data;

[0089] Module M2.8: Configure multi-mode form structure data. For the same data, different form interface effects are displayed according to different user permissions and preferences. The custom UI template component provides an external parameter entry, allowing users to select multiple display modes according to the multi-mode form structure data;

[0090] Module M2.9: Configure deletion structure data. Configure optional attributes in the custom UI template component, dynamically configure whether to display the delete operation, and include a secondary confirmation modal box, whether to display a group or multiple groups of data to be deleted;

[0091] Preferably, based on two carriers, namely the UI framework and the structure data, the secondary encapsulation of the UI framework is realized in a configurable manner, inheriting the characteristics of the original UI framework and including customized functions that meet business requirements; the secondary-encapsulated UI framework provides an externally configurable entry, and the entry exposes the structure data with fixed configurations externally, allowing users to configure the structure data and, taking the template as the entry, realize page assembly; by using the schema syntax to adapt to the UI page display rules, while introducing internal functions in a plug-in and templated manner.

[0092] For the development of management applications, define the structure data corresponding to the fixed-structure page configuration, take the custom UI template component as the entry, and pass the page configuration structure data as a configuration item. Through a unified development method, render the page with a fixed structure in different components.

[0093] Those skilled in the art know that in addition to implementing the system, device and their respective modules provided by the present invention in the form of pure computer-readable program code, the method steps can be logically programmed to enable the system, device and their respective modules provided by the present invention to be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, embedded microcontrollers, etc. to achieve the same program. Therefore, the system, device and their respective modules provided by the present invention can be regarded as a kind of hardware component, and the modules included therein for implementing various programs can also be regarded as the structure within the hardware component; the modules for implementing various functions can also be regarded as either software programs for implementing the method or the structure within the hardware component.

[0094] The specific embodiments of the present invention have been described above. It should be understood that the present invention is not limited to the above specific embodiments, and those skilled in the art can make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. Without conflict, the embodiments of the present application and the features in the embodiments can be combined arbitrarily with each other.

Claims

1. A method for generating a fixed-structure UI page based on data configuration, characterized in that including: Step S1: Abstract the page structure and customize the UI template components; Step S2: Define and configure the corresponding structure data according to the page structure; Step S3: Complete the UI page rendering according to the customized UI template components and structure data; The said Step S2 includes: Step S2.1: Determine the corresponding structure data to be configured according to the page structure, wherein the structure data includes: layout structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, deletion structure data; Step S2.2: Configure the layout structure data, which is configured in the form of an array object, including various theme configuration schemes, internationalization configuration, page layout, and layout selection for users to customize provided by the customized UI template components; Step S2.3: Configure the routing configuration structure data, configure the page menu routing, configure the multi-dimensional menu through a one-dimensional array, and the multi-dimensional menu can be automatically generated through the data returned by the background; at the same time, the routing also provides multiple navigation page selections; Step S2.4: Configure the network request structure data, use the key-value of the network configuration as the network interface alias, pass the network interface alias to the customized UI template components, and at the same time pass the input parameters in the form of an object to the customized UI template components. The customized UI template components automatically complete the interface call, handle the page loading effect, obtain the data, and display the prompt information whether the data acquisition is successful. At the same time, callback functions are exposed before and after the network interface call for developers to perform extended operations; Step S2.5: Configure the operation button structure data, control the basic operation functions in the form of an array object, and at the same time the customized UI template components provide users with multiple configurable arrangement design selections; Step S2.6: Configure the self-rendering form structure data. First, fill the data in the form of an array object, and write the add, edit, or query attributes in the column configuration attributes of the list. At the same time, configure the optional attributes in the customized UI template components, dynamically configure whether to display the add, edit, or query buttons, and automatically generate the add, edit, or query form content; Step S2.7: Configure the form type structure data. The form types of a one-layer array object are: ordinary forms; the form types of multi-layer array objects are step forms, grouped forms, and paged forms, and the form display types are controlled through the form type structure data; Step S2.8: Configure the multi-mode form structure data. For the same data, different form interface effects are displayed according to different user permissions and preferences. The customized UI template components provide an external parameter entry, allowing users to select multiple display modes according to the multi-mode form structure data; Step S2.9: Configure the deletion structure data. Configure the optional attributes in the customized UI template components, dynamically configure whether to display the deletion operation, and include a secondary confirmation modal box, and whether to display one or more groups of data to be deleted.

2. The method for generating a fixed-structure UI page based on data configuration according to claim 1, wherein The said Step S1 includes: Step S1.1: Select the UI template components to be defined from the UI framework; Step S1.2: Abstract the page structure, where the page structure includes layout, data display, data entry, and feedback; Step S1.3: Package the general page interaction logic to obtain a customized UI template component.

3. The method for generating a fixed-structure UI page based on data configuration according to claim 1, wherein Based on two carriers, the UI framework and structure data; the secondary packaging of the UI framework is implemented in a configuration-based manner, inheriting the characteristics of the original UI framework and including customized functions that meet business requirements; the secondary-packaged UI framework provides an externally configurable entry, and the entry exposes fixed-configured structure data externally, allowing users to configure the structure data and use the template as the entry to achieve page assembly; by using the schema syntax to adapt to the UI page display rules, and at the same time, the internal functions are introduced in a plug-in and templated manner.

4. The method for generating a fixed-structure UI page based on data configuration according to claim 3, wherein For the development of management applications, define the structure data corresponding to the fixed-structure page configuration, and use the customized UI template component as the entry to pass the page configuration structure data as a configuration item. Through a unified development method, render the fixed-structure page in different components.

5. A fixed-structure UI page generation system based on data configuration, characterized in that Including: Module M1: Abstract the page structure and customize the UI template component; Module M2: Define and configure the corresponding structure data according to the page structure; Module M3: Complete the UI page rendering according to the customized UI template component and structure data; The said Module M2 includes: Module M2.1: Determine the corresponding structure data to be configured according to the page structure, where the structure data includes: layout structure data, routing configuration structure data, network request structure data, operation button structure data, self-rendering form structure data, form type structure data, multi-mode form structure data, deletion structure data; Module M2.2: Configure the layout structure data, which is configured in the form of an array object, including various theme configuration schemes, internationalization configuration, page layout, and layout selection for users to customize provided by the customized UI template component; Module M2.3: Configure the routing configuration structure data, configure the page menu routing, configure the multi-dimensional menu through a one-dimensional array, and the multi-dimensional menu can be automatically generated through the data returned by the background; at the same time, the routing also provides multiple navigation page selections; Module M2.4: Configure the network request structure data, use the key-value of the network configuration as the network interface alias, pass the network interface alias to the customized UI template component, and at the same time, the input parameters are passed into the customized UI template component in the form of an object. The customized UI template component automatically completes the interface call, the processing of the page loading effect, the acquisition of data, and the prompt information of whether the data acquisition is successful. At the same time, callback functions are exposed externally before and after the network interface call for developers to perform extended operations; Module M2.5: Configure the operation button structure data, control the basic operation functions in the form of an array object, and at the same time, the customized UI template component provides users with multiple configurable arrangement design options; Module M2.6: Configure the self-rendering form structure data. First, fill the data in the form of an array object. The add, edit, or query attributes are written in the column configuration attributes of the list. At the same time, configure the optional attributes in the custom UI template component, dynamically configure whether to display the add, edit, or query buttons, and automatically generate the add, edit, or query form content. Module M2.7: Configure the form type structure data. The form types of a single-layer array object are: ordinary forms; the form types of multi-layer array objects are step forms, grouped forms, and paged forms. Control the form display type through the form type structure data. Module M2.8: Configure the multi-mode form structure data. For the same data, different form interface effects are displayed according to different user permissions and preferences. The custom UI template component provides an external parameter entry, allowing users to select multiple display modes according to the multi-mode form structure data. Module M2.9: Configure the delete structure data. Configure the optional attributes in the custom UI template component, dynamically configure whether to display the delete operation, and include a secondary confirmation modal box to show whether to delete one or more groups of data.

6. The fixed-structure UI page generation system based on data configuration according to claim 5, wherein The module M1 includes: Module M1.1: Select the UI template component to be defined from the UI framework. Module M1.2: Abstract the page structure. Among them, the page structure includes layout, data display, data entry, and feedback. Module M1.3: Package the general page interaction logic to obtain a custom UI template component.

7. The fixed-structure UI page generation system based on data configuration according to claim 5, characterized in that Based on two carriers, the UI framework and the structure data; achieve the secondary encapsulation of the UI framework in a configuration-based manner, inherit the characteristics of the original UI framework, and include customized functions that meet business requirements; the secondary encapsulated UI framework provides an external configurable entry, and the entry exposes the structure data with fixed configurations to the outside, allowing users to configure the structure data to assemble the page with the template as the entry; use the schema syntax to adapt to the UI page display rules, and at the same time introduce the internal functions in a plug-in and templated manner.

8. The fixed-structure UI page generation system based on data configuration according to claim 7, characterized in that For the development of management applications, define the structure data corresponding to the fixed structure page configuration, use the custom UI template component as the entry, and pass the page configuration structure data as a configuration item. Through a unified development method, render the page with a fixed structure in different components.

Images