Dynamic rendering page method, device, storage medium, and program product

Abstract

The disclosed embodiment discloses a method, device, storage medium, and program product for dynamically rendering pages. The method includes: obtaining code entities and component description files of several specified components; rendering several specified components to generate several rendering results; obtaining attribute configuration data, re-rendering the corresponding specified components according to the attribute configuration data, and updating the corresponding rendering results; creating a function library containing multiple general functions; obtaining several specified rendering results; selecting several specified functions for the specified components corresponding to the several specified rendering results from multiple general functions; rendering the current page based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data. The method can improve the efficiency of page rendering and the scalability of the system, reduce code duplication and system coupling, and make the configuration and function integration of components more flexible and easy to maintain.

Description

Technical Field

[0001] The present disclosure relates to the field of front-end development technology, and in particular to a method, device, storage medium, and program product for dynamically rendering pages. Background Art

[0002] With the rapid development of information technology, low-code development platforms are playing an increasingly important role in improving software development efficiency and lowering development barriers. Low-code systems usually use pre-built-in large property configuration forms or equip each component with a separate property configuration form to support component property configuration and rendering, helping developers to quickly implement setting pages. However, existing low-code platforms have some technical defects in implementing component property configuration, such as poor maintainability and low rendering efficiency. Summary of the invention

[0003] In view of this, the embodiments of the present disclosure provide a method, device, storage medium, and program product for dynamically rendering pages, which can improve page rendering efficiency and system scalability by dynamically generating attribute forms and modular function libraries, reduce code duplication and system coupling, and make component configuration and function integration more flexible and easy to maintain.

[0004] In a first aspect, an embodiment of the present disclosure provides a method for dynamically rendering a page, which adopts the following technical solution:

[0005] In response to a selection request for a plurality of specified components by a user within the system, obtaining code entities and component description files of the plurality of specified components;

[0006] Rendering the specified components according to the code entities and component description files of the specified components, and generating and displaying a number of rendering results;

[0007] Generate a property sheet according to the component description file;

[0008] In response to a configuration request for the attribute form from an internal user of the system, obtaining attribute configuration data, re-rendering the corresponding designated component according to the attribute configuration data, and updating the corresponding rendering result;

[0009] Create a function library containing multiple common functions, each of which includes function code and function description file;

[0010] In response to a specified request for rendering results from a user within the system, a number of specified rendering results are obtained;

[0011] In response to a request for a general function from a user within the system, select a number of specified functions from the plurality of general functions for the specified components corresponding to the number of specified rendering results;

[0012] In response to an access request to the current page from an external user of the system, the current page is rendered based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data.

[0013] Optionally, the component description file includes at least one of a component identifier, a first object set, and a first rendering rule list;

[0014] Wherein, the component identifier is a type identifier of the component;

[0015] The first object set is an object set of component attributes;

[0016] The first rendering rule list is a dynamic form rendering rule array list associated with component attributes. The first rendering rule list includes a plurality of rules, and each rule in the first rendering rule list corresponds to a component attribute in the first object set.

[0017] Optionally, the function description file includes at least one of a function identifier, a second object set, and a second rendering rule list;

[0018] Wherein, the function identifier is a type identifier of a general function;

[0019] The second object set is an object set of functional attributes;

[0020] The second rendering rule list is a dynamic form rendering rule array list associated with functional attributes. The second rendering rule list includes a plurality of rules, and each rule in the second rendering rule list corresponds to a functional attribute in the second object set.

[0021] Optionally, rendering the plurality of specified components according to the code entities and component description files of the plurality of specified components, and generating and displaying a plurality of rendering results, includes:

[0022] In response to a request from a user within the system to drag a visual designated component to a workspace, obtaining an end position of the drag operation;

[0023] Execute the code entity and the component description file, render the corresponding specified component, and obtain the rendering result;

[0024] Based on the end position, the rendering result is previewed at a corresponding position in the workspace.

[0025] Optionally, the property form includes at least one of public configuration data and a dedicated form;

[0026] When there are multiple designated components, in response to a selection request from a user within the system among the multiple designated components, determining the number of selected designated components;

[0027] If the number is greater than 1, reading component description files of the selected multiple specified components to obtain the common data;

[0028] Based on the common data, generating a common form of the selected multiple specified components;

[0029] In response to a configuration request for the property form from an internal user of the system, obtaining common configuration data of the selected multiple specified components;

[0030] If the number is equal to 1, generating a dedicated form for the specified component based on the component description file of the specified component;

[0031] In response to a configuration request for the dedicated form from a user within the system, obtaining dedicated configuration data for the designated component;

[0032] When the designated component has only the public configuration data, using the public configuration data as the attribute configuration data of the designated component;

[0033] When the designated component only has the dedicated configuration data, using the dedicated configuration data as the attribute configuration data of the designated component;

[0034] When the designated component has the public configuration data and the private configuration data, the public configuration data and the private configuration data are used together as the attribute configuration data of the designated component;

[0035] Re-render the corresponding specified component according to the attribute configuration data, and update the corresponding rendering result.

[0036] Optionally, in response to an access request for the current page by an external user of the system, rendering the current page based on a function code of a specified function, a function description file of the specified function, a code entity of a specified component, a component description file of the specified component, and the attribute configuration data includes:

[0037] In response to an access request to the current page from a user outside the system, traverse the specified components and determine the current component;

[0038] When the current component has no attribute configuration data and designated functions, executing the code entity of the current component according to the component description file of the current component;

[0039] When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file;

[0040] When the current component has a specified function and has no attribute configuration data, executing the code entity of the current component and the function code of the current component according to the component description file of the current component and the function description file of the specified function;

[0041] When the current component has the specified function and attribute configuration data, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component and the function code of the current component are executed according to the replaced component description file and the function description file of the specified function;

[0042] After traversing all specified components, the current page rendering is completed.

[0043] Optionally, in response to a property configuration request for a number of specified functions, obtaining function configuration data of the number of specified functions;

[0044] In response to an access request to the current page from a user outside the system, traverse the specified components and determine the current component;

[0045] When the current component has no attribute configuration data and designated functions, executing the code entity of the current component according to the component description file of the current component;

[0046] When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file;

[0047] When the current component has a specified function, the specified function has no function configuration data, and the current component has no attribute configuration data, executing the code entity of the current component and the function code of the current component according to the component description file of the current component and the function description file of the specified function;

[0048] When the current component has a specified function, the specified function has function configuration data, and the current component has no attribute configuration data, the function configuration data is used to replace the corresponding function attribute in the function description file of the specified function, and the code entity of the current component and the function code of the current component are executed according to the component description file of the current component and the replaced function description file;

[0049] When the current component has attribute configuration data and a specified function, and the specified function has function configuration data, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the function configuration data is used to replace the corresponding function attribute in the function description file of the specified function, and the code entity of the current component and the function code of the current component are executed according to the replaced component description file and the replaced function description file;

[0050] After traversing all specified components, the current page rendering is completed.

[0051] In a second aspect, the embodiment of the present disclosure further provides a dynamic rendering page system, which adopts the following technical solution:

[0052] A designated component selection module, used to obtain code entities and component description files of the designated components in response to a selection request of a user within the system for the designated components;

[0053] A rendering result generating module, used to render the specified components according to the code entities and component description files of the specified components, and to generate and display a number of rendering results;

[0054] An attribute form generating module, used for generating an attribute form according to the component description file;

[0055] A rendering result updating module, used to respond to a configuration request of a system internal user for the attribute form, obtain attribute configuration data, re-render the corresponding designated component according to the attribute configuration data, and update the corresponding rendering result;

[0056] A function library creation module is used to create a function library containing multiple common functions, each of which includes a function code and a function description file;

[0057] A rendering result specifying module, used to obtain a number of specified rendering results in response to a specified request for rendering results from a user within the system;

[0058] A general function specifying module, configured to respond to a request for specifying a general function from a user within the system, and select a number of specified functions from the plurality of general functions for the specified components corresponding to the number of specified rendering results;

[0059] The current page rendering module is used to respond to the access request for the current page from the external user of the system, and render the current page based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data.

[0060] In a third aspect, the embodiments of the present disclosure further provide a computer device, which adopts the following technical solution:

[0061] The computer device comprises:

[0062] at least one processor; and,

[0063] a memory communicatively connected to the at least one processor; wherein,

[0064] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any of the above-mentioned dynamic page rendering methods.

[0065] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable a computer to execute any of the above-mentioned dynamic page rendering methods.

[0066] In a fifth aspect, an embodiment of the present disclosure further provides a computer program product, including a computer program / instruction, which implements the steps of any of the above methods when executed by a processor.

[0067] The dynamic rendering page method provided by the embodiment of the present disclosure obtains the code entity and description file of the specified component first, and performs component rendering based on this information. The system reduces the processing and traversal of unnecessary data, and improves the overall efficiency and response speed of page rendering. The generated attribute form is dynamically generated based on the component description file, which can accurately reflect the attribute requirements of the specified component, thereby allowing users inside the system to flexibly configure the attributes of the specified component, and through the application of attribute configuration data, the rapid re-rendering and result update of the specified component are realized. A function library containing a variety of general functions is created, and the general functions adapted for different rendering results are selected, which improves the modularity of the system. This function library can be reused, reducing the workload of repeated development and maintenance. Compared with traditional fixed configuration forms or repeated code solutions, this method reduces the coupling degree of system logic by dynamically generating attribute forms and function selection, improves the scalability and maintainability of the system, and new components and functions can be more easily integrated into the system without large-scale modification of existing configurations. Moreover, due to the introduction of the function library and the selection of general functions, the amount of code written separately for each component can be reduced through function codes and function description files, thereby reducing the occurrence of repeated work and simplifying the development and maintenance process. The system can dynamically update page content based on internal user selections and configuration requests, and can also handle page access requests from external users, ensuring the consistency and responsiveness of the system under different user roles and improving the user experience.

[0068] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the following preferred embodiments are specifically cited and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0070] Figure 1 A schematic diagram of a flow chart of a method for dynamically rendering a page provided in an embodiment of the present disclosure;

[0071] Figure 2 A schematic diagram of a process for rendering a specified component provided in an embodiment of the present disclosure;

[0072] Figure 3 A schematic diagram of a rendering process of a specified component provided in an embodiment of the present disclosure;

[0073] Figure 4 A schematic diagram of a low-code system page provided for an embodiment of the present disclosure;

[0074] Figure 5 A flowchart of a method for configuring multiple designated components provided by an embodiment of the present disclosure;

[0075] Figure 6 Another schematic diagram of a low-code system page provided for an embodiment of the present disclosure;

[0076] Figure 7 A functional block diagram of a dynamic page rendering system provided by an embodiment of the present disclosure;

[0077] Figure 8 A schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0078] The embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.

[0079] It should be clear that the following embodiments of the present disclosure are described by specific specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other in the absence of conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.

[0080] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0081] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0082] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0083] Reference Figure 1 The present disclosure provides a method for dynamically rendering a page, comprising the following steps:

[0084] S1: In response to a selection request for a plurality of specified components by a user within the system, code entities and component description files of the plurality of specified components are obtained;

[0085] S2: Render several specified components according to the code entities and component description files of several specified components, and generate and display several rendering results;

[0086] S3: Generate a property form based on the component description file;

[0087] S4: in response to a configuration request for a property form from a user within the system, obtaining property configuration data, re-rendering a corresponding designated component according to the property configuration data, and updating a corresponding rendering result;

[0088] S5: Create a function library containing multiple common functions, each of which includes a function code and a function description file;

[0089] S6: Responding to a specified request for rendering results from a user within the system, obtaining a number of specified rendering results;

[0090] S7: In response to a specified request for a general function by a user within the system, select a number of specified functions for the specified components corresponding to the number of specified rendering results from the plurality of general functions;

[0091] S8: In response to an access request to the current page from an external user of the system, the current page is rendered based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data.

[0092] In the prior art, the open source low-code system vue-form-making is usually used. Its specific solution is to pre-build a huge property configuration form. When a user selects a component in the system, it obtains all the properties of the component, loops through all the built-in form items, and finds the appropriate ones to display, so as to support the configurability of different properties of different components. Based on this, it is necessary to first traverse all component properties, and then traverse all the built-in form items each time. This method requires two loops to determine the entire configuration form, and the rendering efficiency is low. Moreover, the property configuration form is associated with all supported form items, and is coupled with the distribution logic of a large amount of data. When a new configuration item type needs to be connected, the configuration form needs to be updated, which lacks logical coupling and scalability.

[0093] The dynamic rendering page method disclosed in the present invention first obtains the code entity and description file of the specified component, and renders the component based on this information. The system reduces the processing and traversal of unnecessary data, and improves the overall efficiency and response speed of page rendering. The generated attribute form is dynamically generated based on the component description file, which can accurately reflect the attribute requirements of the specified component, thereby allowing users inside the system to flexibly configure the attributes of the specified component, and through the application of attribute configuration data, the rapid re-rendering and result update of the specified component are realized. A function library containing a variety of general functions is created, and the general functions adapted for different rendering results are selected, which improves the modularity of the system. This function library can be reused, reducing the workload of repeated development and maintenance. Compared with traditional fixed configuration forms or repeated code solutions, this method reduces the coupling degree of system logic by dynamically generating attribute forms and function selection, improves the scalability and maintainability of the system, and new components and functions can be more easily integrated into the system without large-scale modification of existing configurations. Moreover, due to the introduction of the function library and the selection of general functions, the amount of code written separately for each component can be reduced through function codes and function description files, thereby reducing the occurrence of repeated work and simplifying the development and maintenance process. The system can dynamically update page content based on internal user selections and configuration requests, and can also handle page access requests from external users, ensuring the consistency and responsiveness of the system under different user roles and improving the user experience.

[0094] In summary, this method improves page rendering efficiency and system scalability by dynamically generating property forms and modular function libraries. It reduces code duplication and system coupling, making component configuration and function integration more flexible and easy to maintain.

[0095] In S1, a component library is preset, which contains several components, and each component includes a code entity (such as a function, a class, a module) and a component description file. The component description file is a format file that contains metadata and configuration information of the component. The component description file can be in JSON, XML, or YAML format. This disclosure adopts JSON format.

[0096] The component description file includes at least one of a component identifier (type), a first object set (initialProps), and a first rendering rule list (propRuleList). The component identifier is a globally unique type identifier of the component, and the component identifier is associated with the identifier of the code entity, which is the unique identifier of the code entity in the code library. When registering a component in a low-code system, the code entity is stored in the code library, and the low-code system immediately reads the content of the component description file of the component, and stores it in the system globally with the component identifier as the index to generate global registration information.

[0097] The first object set is an object set of component configurable properties (recorded as component properties). The values ​​of the fields in the first object set are the default values ​​of the corresponding component properties. The first rendering rule list is an array list of dynamic form rendering rules associated with component properties. The first rendering rule list contains several rules (propRule). Each rule in the first rendering rule list corresponds to a component property in the first object set, which is used to control what form control the component property should be rendered into by the dynamic form.

[0098] Each rule in the first rendering rule list includes at least one of the following: a dynamic form item field name (field), a dynamic form control item type name (type), and a dynamic form item title (title). The first rendering rule list may also include fields unique to dynamic form controls, which vary depending on the type. The dynamic form item field name is consistent with a component attribute in the first object set to maintain relevance; the dynamic form item control type name is used to control the form control required to be used by the component attribute (the component attribute in the first object set that is the same as the dynamic form item field name); and the dynamic form item title is used to identify the dynamic form item.

[0099] In a low-code or configuration-driven development environment, the component description file establishes the configurability of the component through a precisely defined metadata structure. The first object collection in the file describes in detail each configurable property of the component, where each field is initialized to a preset default value, ensuring the consistency of the component's behavior in the default state. Furthermore, the first rendering rule list in the component description file, as the core of the dynamic form generation mechanism, specifies the corresponding form control type and rendering logic for each component property. These rules ensure that the values ​​of component properties can be intuitively configured through a friendly interface while keeping the interface synchronized with the underlying data model. In this way, the component description file not only provides flexible configuration capabilities for components, but also provides an efficient and intuitive interactive experience.

[0100] After the component library is integrated into the low-code system, the component library is managed through a graphical interface, and the components in the component library are visualized, allowing users within the system to browse and select. This disclosure refers to the graphical interface as a component library display area, which is used to display visualized components in the component library. Users within the system click on a specified component in the component library display area with a mouse to trigger a query function. Through the query function, the low-code system automatically uses the component identifier for indexing, and quickly queries the corresponding component description file and code entity from the global registration information.

[0101] In S2, refer to Figure 2The flowchart of rendering the specified components is shown, and the method of rendering each specified component separately and generating and displaying the corresponding rendering results includes the following steps:

[0102] S21: In response to a request from a user inside the system to drag a visual designated component to a workspace, obtaining an end position of the drag operation;

[0103] S22: Execute the code entity and the component description file, render the corresponding specified component, and obtain the rendering result;

[0104] S23: Based on the end position, the rendering result is previewed at a corresponding position in the workspace.

[0105] External users of the system move the specified component from the component library display area to the workspace by dragging the mouse. Note that external users of the system will first click on the specified component when dragging with the mouse. The low-code system automatically queries the component description file and code entity of the specified component. The low-code system calls the rendering engine and passes in the code entity and the default values ​​of the component attributes in the component description file. The rendering engine executes the code entity based on this information and generates preliminary rendering results. According to the first rendering rule list in the component description file, a corresponding dynamic form control is generated for each component attribute, allowing internal users of the system to configure. After the drag operation is completed, the end position of the drag operation is obtained, and the rendering result is previewed at the corresponding position in the workspace according to the end position.

[0106] For S3 and S4, in one possible implementation, the user inside the system clicks on the rendering result in the workspace with the mouse, triggering a configuration request for the property form from the user inside the system. In response to the request, the low-code system parses the first object set and the first rendering rule list in the component description file corresponding to the clicked rendering result, and generates a property form for the corresponding specified component (refer to Figure 3 ), the property form of the specified component is displayed in the corresponding area, and the area is called the property form display area. Specifically, the first rendering rule list and the first object set corresponding to the clicked rendering result are obtained, and the first rendering rule list and the first object set are passed to the dynamic form renderer. The dynamic form renderer parses the first rendering rule list and renders it into a property form, and then fills the default value in the first object set into the property form as the initial data.

[0107] Reference Figure 4A schematic diagram of the low-code system page is shown. In the figure, the left side is the component library display area, the middle is the workspace, and the right side is the property form display area. The internal user of the system selected the three specified components of "Page Header", "Date" and "Submit Button" in the component library display area, and dragged the three specified components to the workspace. According to the end position of the dragging operation, the rendering result of the "Page Header" component is displayed above the workspace, the rendering result of the "Date" component is displayed in the middle of the workspace, and the rendering result of the "Submit Button" component is displayed below the workspace. The internal user of the system clicks on the rendering result of the "Date" component with the mouse to display the property form of the "Date" component in the property form display area.

[0108] The internal user of the system uses the terminal device to configure the values ​​of several attributes in the attribute form, triggering a configuration request for the attribute form, and in response to the configuration request, obtains the configured attribute values, records the configured attribute values ​​as attribute configuration data (called props in the code), stores the attribute configuration data in a preset database, and associates the attribute configuration data with the corresponding specified component. When the internal user of the system configures the attributes in the attribute form multiple times, only the attribute value of the last configuration is saved. Note that the operation of configuring the values ​​of several attributes in the attribute form does not affect the component description file, and the value of the component attribute in the component description file will not change.

[0109] The above content introduces a method for configuring the properties of a specified component separately. However, if multiple specified components have the same properties, the efficiency of configuring each specified component separately will be relatively low. Therefore, the present disclosure also provides another possible implementation method, referring to Figure 5 The flowchart of the multi-specified component configuration method shown, in another possible implementation method, includes the following steps:

[0110] S41: when there are multiple designated components, in response to a selection request from a user within the system among the multiple designated components, determining the number of selected designated components;

[0111] S42: Determine whether the quantity is equal to 1; if not, execute S43; if yes, execute S46;

[0112] S43: reading component description files of the selected multiple specified components to obtain common data;

[0113] S44: generating a common form of the selected multiple specified components based on the common data;

[0114] S45: in response to a configuration request for the property form from an internal user of the system, obtaining common configuration data of the selected multiple specified components;

[0115] S46: generating a dedicated form of the specified component based on the component description file of the specified component;

[0116] S47: Responding to a configuration request for a dedicated form from a user within the system, obtaining dedicated configuration data for a specified component;

[0117] S48: Determine whether the specified component has public configuration data and private configuration data; if there is only public configuration data, execute S49; if there is only private configuration data, execute S410; if there is both public configuration data and private configuration data, execute S411;

[0118] S49: Using the common configuration data as the attribute configuration data of the specified component;

[0119] S410: Using the dedicated configuration data as attribute configuration data of the specified component;

[0120] S411: using the public configuration data and the dedicated configuration data together as the attribute configuration data of the specified component;

[0121] S412: Re-render the corresponding designated component according to the attribute configuration data, and update the corresponding rendering result.

[0122] In S41, when there are multiple designated components, there are also multiple rendering results displayed in the workspace. The internal user of the system selects multiple rendering results in the workspace by holding down the Shift key and clicking the mouse, or only selects one rendering result in the workspace with the mouse, thereby triggering a selection request from the internal user of the system among multiple designated components. In response to the selection request, the number of designated components corresponding to the selected rendering results is determined.

[0123] In S42, when the number is not equal to 1, it is considered that the number is greater than 1.

[0124] In S43, the low-code system will simultaneously read the component description files of the selected multiple specified components, focusing on reading the first rendering rule list in these component description files, and filtering the non-common rules, retaining only the common rules, extracting the corresponding component attributes from the first object set according to the common rules, and filtering out the common attribute common data including common rules and common attributes from the extracted component attributes. Among them, the common rules are the rules shared by the selected multiple specified components; the common attributes are the component attributes shared by the selected multiple specified components. Note that when filtering the common attributes, the values ​​of the component attributes are not required to be the same, and the identification and / or name of the component attributes can be consistent.

[0125] In S44, the low-code system generates a unified form based on common data, called a common form. The common form allows users within the system to quickly configure multiple selected specified components.

[0126] In S45, the internal user of the system uses the terminal device to configure the values ​​of several attributes in the public form, triggering a configuration request for the public form, and in response to the configuration request, obtains the configured attribute values, records the configured attribute values ​​as public configuration data, and stores the public configuration data in a preset database. The public configuration data is shared by the selected multiple specified components, so the public configuration data is associated with the selected multiple specified components. When the internal user of the system configures the attributes in the public form multiple times, only the attribute value of the last configuration is saved. Note that the operation of configuring the values ​​of several attributes in the public form does not affect the original component description file, and the value of the component attribute in the component description file will not be changed.

[0127] In S46, when the user within the system triggers the selection of only one designated component, the low-code system reads the component description file of the designated component and generates a dedicated form for the designated component;

[0128] In S47, a user within the system uses a terminal device to configure the values ​​of several attributes in a dedicated form, triggering a configuration request for the dedicated form, and in response to the configuration request, obtains the configured attribute values, records the configured attribute values ​​as dedicated configuration data, stores the dedicated configuration data in a preset database, and associates the dedicated configuration data with the corresponding designated component.

[0129] In S48-S412, the re-rendering operation is completed by specifying the public configuration data and / or the private configuration data of the component, and the corresponding rendering result is updated, so that the internal users of the system can see the latest rendering effect, which is convenient for the internal users of the system to improve the properties of the specified component.

[0130] Of course, if the internal users of the system do not perform any property configuration on the specified component, the specified component has no property configuration data.

[0131] In S5, based on the support of the dynamic form renderer, the low-code system of the present disclosure supports adding additional general capabilities to the specified components. These capabilities exist in the form of general functions and have their own logic code and description files, which are recorded as function codes and function description files respectively. Among them, the function library includes but is not limited to general functions such as component-level authentication, association control between components, and component exception interception. The present disclosure allows the design and expansion of the function library according to actual needs.

[0132] Among them, the function code is the logic code encapsulation of the general function; the function description file is a format file, which contains the metadata and configuration information of the general function. The function description file can be in JSON, XML or YAML format, etc. The present disclosure adopts JSON format. The function description file includes at least one of the function identifier (type), the second object set (initialControls) and the second rendering rule list (controlRuleList). Among them, the function identifier is the globally unique type identifier of the general function, and the function identifier is associated with the identifier of the function code, and the identifier of the function code is the unique identifier of the function code in the code library. The second object set is an object set of configurable attributes of the general function (recorded as function attributes), and the value of the field in the second object set is the default value of the corresponding function attribute; the second rendering rule list is an array list of dynamic form rendering rules associated with the function attribute, and the second rendering rule list contains several rules. Each rule in the second rendering rule list corresponds to a function attribute in the second object set, which is used to control what form control the function attribute should be rendered by the dynamic form. The second rendering rule list has the same structural principle as the first rendering rule list, and both act on the dynamic form renderer, which will not be repeated here.

[0133] In S6, the internal user of the system selects one of several rendering results using the mouse, or selects two or more of multiple rendering results using the mouse and the Shift key of the keyboard, triggering a specified request for the rendering result by the internal user of the system. In response to the request, the several rendering results selected by the internal user of the system are referred to as specified rendering results.

[0134] In S7, a function form is generated by executing the function codes and function description files of multiple common functions, and the function form is displayed in a corresponding area, which is called a function form display area. The attribute form display area and the function form display area together constitute the attribute display area.

[0135] Reference Figure 6Another schematic diagram of the low-code system page is shown. The left side of the figure is the component library display area, the middle is the work area, and the right side is the property display area. The property form display area is above the property display area, and the function form display area is below the property display area. The function form display area has folding and expanding functions. When the function form display area is folded, the function form display area is reduced or hidden, and the "+ Dynamic Expansion" mark is displayed in the function form display area, indicating that the area can be expanded to view the function form. When the "+ Dynamic Expansion" mark is clicked, the folded function form display area is expanded to display the function form. The internal user of the system selected the two specified components "Big Turntable" and "Text Display" in the component library display area, and dragged these two specified components to the work area. According to the end position of the dragging operation, the rendering result of the "Big Turntable" component is displayed above the work area, and the rendering result of the "Text Display" component is displayed below the work area. The internal user of the system clicks the rendering result of the "Big Turntable" component with the mouse to display the property form of the "Big Turntable" component in the property form display area.

[0136] When the function form display area is expanded, the system internal user clicks on several common functions in the function form with a mouse, triggering the system internal user's selection request for a designated function. In response to the system internal user's selection request for the designated function, the selected common function is called the designated function. The designated function is associated with the designated components corresponding to the currently selected several rendering results.

[0137] If there is only one specified function associated with the specified component, the function description file of the specified function associated with the specified component will be stored in a preset list and associated with the component description file of the specified component; if there are multiple specified functions associated with the specified component, the function description files of the multiple specified functions associated with the specified component will be stored in a preset list in a specified order and associated with the component description file of the specified component, wherein the preset list is a commonControls list.

[0138] With respect to S8, in a specific implementation, “in response to an access request to the current page by a user outside the system, based on a function code of a specified function, a function description file of a specified function, a code entity of a specified component, a component description file of a specified component, and attribute configuration data, rendering the current page” includes:

[0139] In response to an access request to the current page from an external user of the system, the specified components are traversed to determine the current component; determine whether the current component has attribute configuration data; and determine whether the current component has a specified function.

[0140] When the current component has no attribute configuration data and specified functions, the code entity of the current component is executed according to the component description file of the current component.

[0141] When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attributes in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file.

[0142] When the current component has a specified function but has no attribute configuration data, the code entity of the current component and the function code of the current component are executed according to the component description file of the current component and the function description file of the specified function.

[0143] When the current component has specified functions and attribute configuration data, the attribute configuration data is used to replace the corresponding component attributes in the component description file of the current component, and the code entity of the current component and the function code of the current component are executed according to the replaced component description file and the function description file of the specified function.

[0144] After traversing all specified components, the current page rendering is completed, and the final user page is generated and displayed.

[0145] Specifically, when an external user of the system uses a mouse or other terminal device to access the current page, the external user of the system triggers an access request to the current page. In response to the page access request, the function description files in the preset list and the component description files associated with these function description files and the corresponding attribute configuration data are read in sequence, and then their associated logic is executed to render the current page and display the rendered current page. For example, when an external user of the system selects the general function of component-level authentication, an item is immediately added to the preset list, indicating that the current component needs to control whether to display data based on the authentication result: { type: 'auth', props: { needAuth: true}}.

[0146] When an external user from the external system accesses the page, the component reads the function configuration in the commonControls list in turn, parses the additional common capabilities, and then executes the associated logic.

[0147] In another specific embodiment, the dynamic rendering page method disclosed in the present invention further includes: in response to a property configuration request for several specified functions, obtaining function configuration data of several specified functions, which specifically includes: a user within the system uses a terminal device to configure the values ​​of several attributes of the specified function in the function form, triggering a configuration request for the specified function, and in response to the configuration request, obtaining the configured attribute values, recording the configured attribute values ​​as function configuration data (referred to as props in the code), storing the function configuration data in a database, and associating the function configuration data with the function description file of the corresponding specified function. When a user within the system configures the attributes in the function form multiple times, only the attribute value of the last configuration is saved. Note that the operation of configuring the values ​​of several attributes in the function form does not affect the function description file, and the values ​​of the function attributes in the function description file will not change as a result.

[0148] “In response to an access request to the current page by a user outside the system, based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data, rendering the current page” includes:

[0149] In response to an access request to the current page from an external user of the system, traverse the specified components to determine the current component; determine whether the current component has attribute configuration data; determine whether the current component has a specified function; determine whether the specified function has function configuration data.

[0150] When the current component has no attribute configuration data and specified functions, the code entity of the current component is executed according to the component description file of the current component.

[0151] When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attributes in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file.

[0152] When the current component has a specified function, but the specified function has no function configuration data and the current component has no attribute configuration data, the code entity of the current component and the function code of the current component are executed according to the component description file of the current component and the function description file of the specified function.

[0153] When the current component has a specified function and the specified function has function configuration data, but the current component has no attribute configuration data, the function configuration data is used to replace the corresponding function attributes in the function description file of the specified function, and the code entity of the current component and the function code of the current component are executed according to the component description file of the current component and the replaced function description file.

[0154] When the current component has attribute configuration data and a specified function, and the specified function has function configuration data, the attribute configuration data is used to replace the corresponding component attributes in the component description file of the current component, and the function configuration data is used to replace the corresponding function attributes in the function description file of the specified function. According to the replaced component description file and the replaced function description file, the code entity of the current component and the function code of the current component are executed.

[0155] After traversing all specified components, the current page rendering is completed, and the final user page is generated and displayed.

[0156] Please note that the "using property configuration data to replace the corresponding component properties in the component description file of the current component" and "using function configuration data to replace the corresponding function properties in the function description file of the specified function" mentioned in this disclosure are for rendering according to the properties set by users within the system. The property values ​​in the original component description file and function description file will not be modified.

[0157] Based on the above, the present disclosure also allows users within the system to partially or fully specify function configuration attributes according to actual needs, further improving the flexible configuration of components and pages and improving the overall component integration effect. Moreover, the present disclosure uses dynamic forms to split the low-code system component configuration logic independently, avoiding the need for low-code system component developers, that is, users within the system, to pay attention to and process the internal detailed logic of data transmission in the component configuration form, thereby reducing the difficulty of system development.

[0158] Reference Figure 7 The present disclosure provides a dynamic page rendering system, including:

[0159] The designated component selection module 101 is used to obtain code entities and component description files of several designated components in response to a selection request of several designated components by a user within the system;

[0160] A rendering result generating module 102 is used to render a number of specified components according to the code entities and component description files of the specified components, and to generate and display a number of rendering results;

[0161] The property form generating module 103 is used to generate a property form according to the component description file;

[0162] The rendering result updating module 104 is used to respond to the configuration request of the internal user of the system for the attribute form, obtain the attribute configuration data, re-render the corresponding specified component according to the attribute configuration data, and update the corresponding rendering result;

[0163] A function library creation module 105 is used to create a function library containing multiple common functions, each of which includes a function code and a function description file;

[0164] The rendering result specifying module 106 is used to obtain a number of specified rendering results in response to a specified request for rendering results from a user within the system;

[0165] The general function specifying module 107 is used to select a number of specified functions for the specified components corresponding to the number of specified rendering results from the plurality of general functions in response to the specified request for the general function by the user inside the system;

[0166] The current page rendering module 108 is used to respond to the access request for the current page from the external user of the system, and render the current page based on the function code of the specified function, the function description file of the specified function, the code entity of the specified component, the component description file of the specified component, and the attribute configuration data.

[0167] The various variations and specific examples of the dynamic rendering page method provided above are also applicable to the dynamic rendering page system provided in the present disclosure. Through the above detailed description of the dynamic rendering page method, those skilled in the art can clearly understand the implementation method of the dynamic rendering page system. For the sake of brevity of the specification, it will not be described in detail here.

[0168] The computer device according to the embodiment of the present disclosure includes a memory and a processor. The memory is used to store non-temporary computer-readable instructions. Specifically, the memory may include one or more computer program products, and the computer program product may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, a random access memory (RAM) and / or a cache memory (cache), etc. The non-volatile memory may include, for example, a read-only memory (ROM), a hard disk, a flash memory, etc.

[0169] The processor may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the computer device to perform desired functions. In one embodiment of the present disclosure, the processor is used to run the computer-readable instructions stored in the memory, so that the computer device performs all or part of the steps of the dynamic page rendering method of each embodiment of the present disclosure.

[0170] Those skilled in the art should be able to understand that in order to solve the technical problem of how to obtain a good system external user experience effect, this embodiment may also include well-known structures such as a communication bus and an interface, and these well-known structures should also be included in the protection scope of this disclosure.

[0171] like Figure 8A schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure is shown, which is a schematic diagram of the structure of a computer device suitable for implementing the embodiment of the present disclosure. Figure 8 The computer device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0172] like Figure 8 As shown, the computer device may include a processor (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) or a program loaded from a storage device into a random access memory (RAM). In the RAM, various programs and data required for the operation of the computer device are also stored. The processor, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0173] Typically, the following devices can be connected to the I / O interface: input devices such as sensors or visual information acquisition devices; output devices such as display screens; storage devices such as tapes, hard disks, etc.; and communication devices. The communication device can allow the computer device to communicate with other devices (such as edge computing devices) wirelessly or by wire to exchange data. Figure 8 A computer device having various devices is shown, but it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed instead.

[0174] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device, or installed from a ROM. When the computer program is executed by a processor, all or part of the steps of the dynamic rendering page method of the embodiment of the present disclosure are executed.

[0175] For detailed description of this embodiment, reference may be made to the corresponding descriptions in the aforementioned embodiments, which will not be repeated here.

[0176] According to the computer-readable storage medium of the embodiment of the present disclosure, non-transitory computer-readable instructions are stored thereon. When the non-transitory computer-readable instructions are executed by a processor, all or part of the steps of the dynamic page rendering method of each embodiment of the present disclosure are executed.

[0177] The above-mentioned computer-readable storage media include, but are not limited to: optical storage media (e.g., CD-ROM and DVD), magneto-optical storage media (e.g., MO), magnetic storage media (e.g., magnetic tape or mobile hard disk), media with built-in rewritable non-volatile memory (e.g., memory card) and media with built-in ROM (e.g., ROM box).

[0178] For detailed description of this embodiment, reference may be made to the corresponding descriptions in the aforementioned embodiments, which will not be repeated here.

[0179] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.

[0180] In the present disclosure, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. The block diagrams of the devices, devices, equipment, and systems involved in the present disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagram. As will be appreciated by those skilled in the art, these devices, devices, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including", "comprising", "having", etc. are open words, referring to "including but not limited to", and can be used interchangeably with them. The words "or" and "and" used here refer to the words "and / or" and can be used interchangeably with them, unless the context clearly indicates otherwise. The words "such as" used here refer to the phrase "such as but not limited to", and can be used interchangeably with them.

[0181] Additionally, as used herein, "or" used in a list of items beginning with "at least one" indicates a separate list, so that, for example, a list of "at least one of A, B, or C" means A or B or C, or AB or AC or BC, or ABC (i.e., A and B and C). Furthermore, the word "exemplary" does not mean that the example described is preferred or better than other examples.

[0182] It should also be noted that in the system and method of the present disclosure, each component or each step can be decomposed and / or recombined. Such decomposition and / or recombination should be regarded as equivalent solutions of the present disclosure.

[0183] Various changes, substitutions, and modifications of the techniques described herein may be made without departing from the teachings defined by the appended claims. Furthermore, the scope of the claims of the present disclosure is not limited to the specific aspects of the processes, machines, manufactures, compositions of events, means, methods, and actions described above. Currently existing or later to be developed processes, machines, manufactures, compositions of events, means, methods, or actions that perform substantially the same functions or achieve substantially the same results as the corresponding aspects described herein may be utilized. Thus, the appended claims include such processes, machines, manufactures, compositions of events, means, methods, or actions within their scope.

[0184] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

[0185] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.

Claims

1. A method for dynamically rendering a page, characterized in that: include: In response to a selection request for a plurality of specified components by a user within the system, obtaining code entities and component description files of the plurality of specified components; Rendering the specified components according to the code entities and component description files of the specified components, and generating and displaying a number of rendering results; Generate a property sheet according to the component description file; In response to a configuration request for the attribute form from an internal user of the system, obtaining attribute configuration data, re-rendering the corresponding designated component according to the attribute configuration data, and updating the corresponding rendering result; Create a function library containing multiple common functions, each of which includes function code and function description file; In response to a specified request for rendering results from a user within the system, a number of specified rendering results are obtained; In response to a request for a general function from a user within the system, select a number of specified functions from the plurality of general functions for the specified components corresponding to the number of specified rendering results; In response to an access request to the current page by a user outside the system, the current page is rendered based on a function code of a specified function, a function description file of a specified function, a code entity of a specified component, a component description file of a specified component, and the attribute configuration data; The step of responding to an access request to the current page by a user outside the system, based on a function code of a specified function, a function description file of a specified function, a code entity of a specified component, a component description file of a specified component, and the attribute configuration data, rendering the current page includes: In response to an access request to the current page from a user outside the system, traverse the specified components and determine the current component; When the current component has no attribute configuration data and designated functions, executing the code entity of the current component according to the component description file of the current component; When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file; When the current component has a specified function and has no attribute configuration data, executing the code entity of the current component and the function code of the current component according to the component description file of the current component and the function description file of the specified function; When the current component has the specified function and attribute configuration data, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component and the function code of the current component are executed according to the replaced component description file and the function description file of the specified function; After traversing all specified components, the current page rendering is completed; or, In response to a property configuration request for a plurality of specified functions, obtaining function configuration data of the plurality of specified functions; In response to an access request to the current page from a user outside the system, traverse the specified components and determine the current component; When the current component has no attribute configuration data and designated functions, executing the code entity of the current component according to the component description file of the current component; When the current component has attribute configuration data but no specified function, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the code entity of the current component is executed according to the replaced component description file; When the current component has a specified function, the specified function has no function configuration data, and the current component has no attribute configuration data, executing the code entity of the current component and the function code of the current component according to the component description file of the current component and the function description file of the specified function; When the current component has a specified function, the specified function has function configuration data, and the current component has no attribute configuration data, the function configuration data is used to replace the corresponding function attribute in the function description file of the specified function, and the code entity of the current component and the function code of the current component are executed according to the component description file of the current component and the replaced function description file; When the current component has attribute configuration data and a specified function, and the specified function has function configuration data, the attribute configuration data is used to replace the corresponding component attribute in the component description file of the current component, and the function configuration data is used to replace the corresponding function attribute in the function description file of the specified function, and the code entity of the current component and the function code of the current component are executed according to the replaced component description file and the replaced function description file; After traversing all specified components, the current page rendering is completed.

2. The method for dynamically rendering a page according to claim 1, characterized in that: The component description file includes at least one of a component identifier, a first object set, and a first rendering rule list; Wherein, the component identifier is a type identifier of the component; The first object set is an object set of component attributes; The first rendering rule list is a dynamic form rendering rule array list associated with component attributes. The first rendering rule list includes a plurality of rules, and each rule in the first rendering rule list corresponds to a component attribute in the first object set.

3. The method for dynamically rendering a page according to claim 1, characterized in that: The function description file includes at least one of a function identifier, a second object set, and a second rendering rule list; Wherein, the function identifier is a type identifier of a general function; The second object set is an object set of functional attributes; The second rendering rule list is a dynamic form rendering rule array list associated with functional attributes. The second rendering rule list includes a plurality of rules, and each rule in the second rendering rule list corresponds to a functional attribute in the second object set.

4. The method for dynamically rendering a page according to claim 1, characterized in that: The rendering of the plurality of specified components according to the code entities and component description files of the plurality of specified components, and generating and displaying a plurality of rendering results, includes: In response to a request from a user within the system to drag a visual designated component to a workspace, obtaining an end position of the drag operation; Execute the code entity and the component description file, render the corresponding specified component, and obtain the rendering result; Based on the end position, the rendering result is previewed at a corresponding position in the workspace.

5. The method for dynamically rendering a page according to claim 1, characterized in that: The property form includes at least one of public configuration data and a dedicated form; When there are multiple designated components, in response to a selection request from a user within the system among the multiple designated components, determining the number of selected designated components; If the number is greater than 1, reading component description files of the selected multiple specified components to obtain the common data; Based on the common data, generating a common form of the selected multiple specified components; In response to a configuration request for the property form from an internal user of the system, obtaining common configuration data of the selected multiple specified components; If the number is equal to 1, generating a dedicated form for the specified component based on the component description file of the specified component; In response to a configuration request for the dedicated form from a user within the system, obtaining dedicated configuration data for the designated component; When the designated component has only the public configuration data, using the public configuration data as the attribute configuration data of the designated component; When the designated component only has the dedicated configuration data, using the dedicated configuration data as the attribute configuration data of the designated component; When the designated component has the public configuration data and the private configuration data, the public configuration data and the private configuration data are used together as the attribute configuration data of the designated component; Re-render the corresponding specified component according to the attribute configuration data, and update the corresponding rendering result.

6. A computer device, characterized in that: The computer device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the dynamic rendering page method described in any one of claims 1-5.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the dynamic page rendering method described in any one of claims 1-5.

8. A computer program product comprising computer instructions, characterized in that When the computer instruction is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images