Page generation method, device, storage medium and computer program product

Abstract

Embodiments of the present application disclose a page generation method and device, a storage medium and a computer program product. The method comprises: obtaining attribute information of a page component; the attribute information comprises a data source of the page component and parameters of the page component; based on a trigger event, configuring or updating the data source of the page component; based on a configuration or updating result of the data source of the page component, configuring or updating the parameters of the page component associated with the data source of the page component; and based on the configuration or updating result of the data source of the page component and the configuration or updating result of the parameters of the page component, generating a target page.

Description

Technical Field

[0001] This application relates to the field of page configuration development technology, and in particular to a page generation method, device, storage medium and computer program product. Background Technology

[0002] As more and more low-code technologies become open source, page configuration solutions for low-code systems are also emerging. Currently, related technologies mainly implement page configuration for low-code systems in the following two ways: the first is a pure drag-and-drop method with simple component parameter configuration; the second is a draggable component configuration method, which can realize the association between components, control the display of components, and the interaction between components.

[0003] However, both configuration methods have their own limitations. The first method is labor-intensive and inflexible, while the second method is not publicly available and lacks comprehensibility. Summary of the Invention

[0004] To address the technical problems existing in related technologies, embodiments of this application provide a page generation method, device, storage medium, and computer program product.

[0005] To achieve the above objectives, the technical solution of this application embodiment is implemented as follows: In a first aspect, embodiments of this application provide a page generation method, the method comprising: Obtain the attribute information of the page component; the attribute information includes the data source of the page component and the parameters of the page component; Based on the triggered event, the data source of the page component is configured or updated; Based on the configuration or update results of the data source of the page component, the parameters of the page component associated with the data source of the page component are configured or updated. The target page is generated based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component.

[0006] Secondly, embodiments of this application also provide a page generation device, including: a processor and a memory for storing a computer program capable of running on the processor; When the processor runs the computer program, it executes the steps of the page generation method described in the embodiments of this application.

[0007] Thirdly, embodiments of this application also provide a storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the page generation method described in embodiments of this application.

[0008] Fourthly, embodiments of this application also provide a computer program product, including a computer program that, when executed by a processor, implements the steps of the page generation method described in embodiments of this application.

[0009] The page generation method, device, storage medium, and computer program product provided in this application embodiment obtain attribute information of page components; the attribute information includes the data source of the page component and the parameters of the page component; based on a trigger event, the data source of the page component is configured or updated; based on the configuration or update result of the data source of the page component, the parameters of the page component associated with the data source of the page component are configured or updated; based on the configuration or update result of the data source of the page component and the configuration or update result of the parameters of the page component, a target page is generated. The technical solution of this application embodiment configures or updates the data source of page components through event-driven configuration. Since the parameters of page components are associated with the data source of page components, configuring or updating the data source of page components will trigger the configuration or update of the parameters of page components. This enables flexible and dynamic configuration of pages in low-code systems. Furthermore, this configuration scheme uses events as trigger switches for data flow, and configures the dynamic page configuration process sequentially as needed, in the order of event configuration, data source configuration, and component parameter configuration. The configuration process is semantic, conforms to the normal thinking logic of users, and the configuration method is simple and easy to understand, enabling users to better understand the configuration or update content. Attached Figure Description

[0010] Figure 1 A flowchart illustrating the page generation method of this application embodiment. Figure 1 ; Figure 2 This is a schematic diagram illustrating the acquisition of dynamic parameters of a page component according to an embodiment of this application; Figure 3 A flowchart illustrating the page generation method of this application embodiment. Figure 2 ; Figure 4 This is a schematic diagram of the architecture of the data model for implementing dynamic pages according to an embodiment of this application; Figure 5 This is a schematic diagram of the display interface of the configuration page in an embodiment of this application; Figure 6 This is a schematic diagram of component parameter configuration in an embodiment of this application; Figure 7 This is a schematic diagram of event configuration in an embodiment of this application; Figure 8 This is a schematic diagram illustrating the request initiation configuration of an embodiment of this application; Figure 9 This is a schematic diagram illustrating the context data source configuration of an embodiment of this application; Figure 10 This is a schematic diagram of the interface data source configuration in an embodiment of this application; Figure 11 This is a schematic diagram of the composition structure of the page generation apparatus according to an embodiment of this application; Figure 12 This is a schematic diagram of the hardware structure of the page generation device according to an embodiment of this application. Detailed Implementation

[0011] The present application will now be described in further detail with reference to the accompanying drawings and embodiments.

[0012] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application.

[0013] As more and more low-code technologies become open source, users are exposed to a wider range of page configuration and rendering solutions for low-code platforms (i.e., low-code systems). Different companies have different core businesses, so the focus of page configuration for low-code platforms also varies. For example, there are purely static pages primarily for display, data reporting pages with high real-time requirements for data display, pages with relatively fixed interaction flows primarily for form filling and submission, and backend management pages with lightweight styles but heavy data interaction. Each type of page can be designed according to its own characteristics, without a unified and reusable design standard. If different scenarios in a complex team correspond to different low-code platforms with different configuration methods and keywords lacking unified meaning, then the different operating specifications and designs of multiple low-code platforms will make it difficult for configuration personnel to get started and will lead to problems such as difficulty in code reuse among developers.

[0014] Low-code platform page configuration solutions in related technologies are mainly implemented in two ways: The first solution is a pure drag-and-drop method with simple component parameter configuration. This solution is only suitable for a small number of static page configurations, has a limited scope of business applicability, and is inflexible. The second solution uses draggable components to build the page structure, combined with the system's proprietary component library. The system automatically associates corresponding components, creates connections between components, exposes the responsive configuration of components, and controls the display and interaction between components. This solution encapsulates the internal relationships between components on the page, creating a black box for the user. It has limited operability, a small controllable scope, and is difficult to debug. From the component configuration perspective, the meaning of some component configuration items does not clearly correspond to the component's function, making it difficult to understand. Therefore, there is an urgent need for a page configuration solution that is highly understandable and flexible for low-code systems.

[0015] Based on this, this application proposes a page generation method. In various embodiments of this application, the data source of the page component is configured or updated through event-driven configuration. Since the parameters of the page component are associated with the data source of the page component, configuring or updating the data source of the page component will trigger the configuration or update of the parameters of the page component. This enables flexible and dynamic configuration of the page of the low-code system. Moreover, this configuration scheme uses events as the trigger switch for data flow, and configures the dynamic page configuration process as needed in the order of event configuration, data source configuration, and component parameter configuration. The configuration process is more semantic, conforms to the normal thinking logic of users, and the configuration method is simple and easy to understand, enabling users to better understand the configuration or update content.

[0016] This application provides a page generation method, which is applied to a page generation apparatus. Figure 1 A flowchart illustrating the page generation method of this application embodiment. Figure 1 ,like Figure 1 As shown, the method for generating this page includes: Step 101: Obtain the attribute information of the page component; the attribute information includes the data source of the page component and the parameters of the page component.

[0017] Here, the page generation method of this application embodiment can be used to encapsulate a low-code platform, wherein the low-code platform can also be called a low-code system. That is, this application embodiment is a page generation scheme with strong understandability and flexible dynamics implemented through low-code system configuration.

[0018] Here, the page generation method of this application embodiment can support a variety of business scenarios, such as business implementation of viewing real-time data business reports, implementation of user information collection form business with strong interaction, and implementation of complex back-end management platform pages.

[0019] Here, page components can also be referred to as page components, or simply components; the name of page components is not limited in this embodiment. In practical applications, the data source of page components can be classified in various ways. Specifically, the data source of page components can be divided according to different data sources, including one or more of the following categories: custom; context; interface; address bar parameters. Correspondingly, the data source of the page component includes one or more of the following categories of data sources: custom data source; context data source; interface data source; address bar parameter data source. Additionally, the data source of page components can also be divided according to different data application scopes, which can be divided into globally configurable data sources and component-configurable data sources. Globally configurable data sources can also be called global data sources, and component-configurable data sources can also be called component data sources. The data sources of page components classified using the above two methods are easier for users to understand.

[0020] Here, the globally configurable data source includes one or more of the following data sources: custom data source; API data source; address bar parameter data source. The component-configurable data source includes one or more of the following data sources: custom data source; context data source; API data source.

[0021] It should be noted that multiple different types of data sources can be configured simultaneously in both globally configurable data sources and component configurable data sources. In particular, multiple data items can be added to a single type of data source.

[0022] Here, the custom data source is fixed data entered by the user, usually a constant that remains unchanged throughout the entire lifecycle of the page and component. The context data source is a key configuration for component interaction, creating a link between components. The context in the data source refers to the page's constituent modules (i.e., components).

[0023] It should be noted that when the page generation device associates components, it can only associate the parameters of the component itself, and cannot associate the data source configured within the component. This is because the data source is configured by the user, which is unpredictable and uncontrollable, and there is a possibility that the user configures it but does not use it. If data is associated but not used in the component, and the component is merely used as a data springboard, the component will update along the data chain. This will not only cause a lot of invalid rendering, but also make the configuration of the page and components increasingly complex. Therefore, in this embodiment, it is necessary to restrict the association to only the parameters of the page components.

[0024] In practical applications, when a page needs to retrieve server data, it needs to configure the interface data, that is, configure the interface data source for the page component. After configuring the interface data source for the page component, the page component establishes a connection with the interface. When the interface returns updated data, the page component can obtain the updated data in real time.

[0025] Here, when it's necessary to configure the address bar parameter data source for a page component, the page generation device can first obtain the address bar parameter data, parse it to obtain the address bar parameter data source, and then configure the address bar parameter data source for the page component. For example, assuming the obtained address bar parameter data is: http: / / test.com?token=123&name=lii, parsing this address bar parameter data will yield the address bar parameter data source as: {token:123, name:'lii'}.

[0026] Here, the parameter configuration of page components describes the different components within those components. A simple or complex page component has multiple components. For example, taking a button component as an example, the button component includes parameters such as button text, whether it should be grayed out, and button type. The sources of page component parameters fall into three categories: custom, context, and functions.

[0027] In practical applications, depending on how the component parameter values ​​are calculated, page component parameters can be divided into static parameters and dynamic parameters.

[0028] Based on this, in one embodiment, the parameters of the page component include static parameters and dynamic parameters. When the attribute information of the page component includes the dynamic parameters of the page component, obtaining the attribute information of the page component includes: Input information is entered into a secure, isolated environment to obtain the dynamic parameters of the page components; The input information includes the following: the data source of the page component, the processing function, and the page component value.

[0029] Here, static parameters correspond to custom configuration types, and these static parameters remain unchanged throughout the entire lifecycle of the page and component. Based on the complexity of the processing logic, dynamic parameters can be divided into two configuration types: simple calculation configuration and complex calculation configuration. Simple calculation configuration uses dynamic parameters that directly retrieve parameters from the data source without requiring complex data processing. Complex calculation configuration uses dynamic parameters calculated through a function, with the function's input being the data source configured in the component. Complex calculation configuration's dynamic parameters can be used when component parameter values ​​require complex logic processing. For example, when interface data does not meet the component parameter's data structure and requires logical transformation, or when data filtering is needed, complex calculation configuration's dynamic parameters can be used.

[0030] Here, the secure isolation environment can be a sandbox, which can also be called a container sandbox or a virtual machine sandbox. In computer security, a sandbox is a security mechanism used to isolate running programs. It is typically used to execute untested or untrusted programs or code. It creates an independent execution environment for the program to be executed, and the execution of the internal program will not affect the operation of the external program.

[0031] Since the calculation of dynamic parameters is real-time, in order to prevent errors in the calculation logic of dynamic parameters from causing abnormal blank screens and poor user experience, and also from a security perspective, user-configured function code cannot be run in the page runtime environment to prevent interference with other functions or variables in the page environment, the function code (i.e., processing function) configured in the configuration backend will be executed in a sandbox, and the execution result will be assigned to the component parameter variable.

[0032] Figure 2 This is a schematic diagram illustrating the acquisition of dynamic parameters of a page component according to an embodiment of this application, such as... Figure 2 As shown, the input information is the data source of the page component (also known as component data source data), the processing function (also known as function code), and the page component value (also known as component value). The component data source data, function code, and component value are input into the sandbox for processing to obtain the final output data of the sandbox, which is the dynamic parameter of the page component (also known as the specific value of the component parameter).

[0033] Step 102: Configure or update the data source of the page component based on the triggered event.

[0034] Here, configuring or updating the data source of a page component based on a triggering event can be understood as configuring or updating the data source of a page component through an event-driven page generation device. The triggering event describes which actions can be triggered within the page component and what behavior will be generated accordingly. For example, a button component can be configured to trigger behavior when clicked: initiating a request or popping up a pop-up window on the page.

[0035] Here, an event listener monitors for triggering events. When a triggering event is detected, the page generation device configures or updates the data source of the page component. The triggering event is a configured event that matches the page component. Triggering events can be, for example, value changes, clicks, component initialization, page initialization, successful requests, failed requests, etc. An event listener can also be called an event handler or an event handling function; this embodiment does not limit the name of the event listener.

[0036] In this embodiment of the application, the triggering event includes inherent supported events of the page component itself and additional supported events, wherein the additional supported events are configured on the page or page component; The additional support events include one or more of the following events: Loading complete event; Unloading complete event; Request successful event; Request failed event.

[0037] In addition to the events defined within the page component (i.e., the events inherently supported by the page component itself), other events can also be built in, i.e., additional supported events. Configuring additional supported events on the page or page component can enrich the types of configurable pages, thereby enriching the business scenarios supported by configurable pages.

[0038] Here, the "load complete event" refers to either the page component loading complete event or the page loading complete event. When the load complete event is configured on a page component, the page component load complete event is listened to; when the load complete event is configured on the page, the page load complete event is listened to. Furthermore, the same page or page component will only trigger the page load complete event or page component loading complete event once.

[0039] Here, the "uninstall complete event" refers to either the page component uninstall complete event or the page uninstall complete event. When the uninstall complete event is configured on a page component, the page component uninstall complete event is listened to; when the uninstall complete event is configured on the page, the page uninstall complete event is listened to. Furthermore, the same page or page component will only trigger the page uninstall complete event or page component uninstall complete event once.

[0040] Here, the request success event is triggered when an event listener listens for a request and successfully returns data; the success of the listened-to request triggers the request success event. The request failure event is triggered when an event listener listens for a request and fails to return data; the failure of the listened-to request triggers the request failure event.

[0041] Here, configurable event handlers can be categorized as follows: browser-related event handlers, request-related event handlers, page element-related event handlers, and form submission-related event handlers. Further subdivisions are then made within this category: Browser-related: Includes page navigation, page forward, page back, and refresh operations; Request-related: Includes the operation of initiating a request; Page element related: including pop-up windows and page overlay operations; Form submission related: Includes form submission operations, similar to request initiation operations, but with the difference that it supports validation before initiating the request. If the validation fails, the request is intercepted. It also supports initiating multiple requests, with each request waiting in sequence for the previous request to succeed before it is initiated.

[0042] Step 103: Based on the configuration or update result of the data source of the page component, configure or update the parameters of the page component associated with the data source of the page component.

[0043] In this embodiment, the parameters of the page component are associated with the data source of the page component. Therefore, when the data source of the page component is configured or updated, the parameters of the page component will be configured or updated, thereby enabling flexible and dynamic configuration of the page of the low-code system.

[0044] In practical applications, components can also be dynamically linked. When the parameters of a certain component change, the parameters of other components associated with that component are updated.

[0045] Based on this, in one embodiment, the number of page components includes two or more. After configuring or updating the parameters of the page components associated with the data source of the page components based on the configuration or update result of the data source of the page components, the method further includes: Identify two or more page components that have a relationship with each other; When it is detected that the parameters of the page component being configured or updated belong to the target page component, the parameters of the other page components among the two or more related page components, excluding the target page component, are configured or updated. The target page component is any one of the two or more page components that have a relationship.

[0046] In practical applications, components are associated with each other through a data source, and this association refers to associating parameters of two or more page components.

[0047] Based on this, in one embodiment, determining the two or more page components with an association relationship from two or more page components includes: Obtain the data source for two or more page components; Based on the data source of the two or more page components, determine the two or more page components that have an association relationship from the two or more page components.

[0048] Here, the data source obtained from the two or more page components can be the context data source of the two or more page components.

[0049] Here, for determining the two or more page components with a relationship from the data sources of the two or more page components, the page generation device may, after obtaining the data sources of the two or more page components, compare the data sources of the two or more page components respectively. If there are two or more page components with the same data source, then the two or more page components are determined to be two or more page components with a relationship.

[0050] Step 104: Generate the target page based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component.

[0051] Here, the target page in this embodiment is a dynamic page. Compared with a static page, a dynamic page has the following functions: 1. Supports interaction with the server, for example, it can obtain real-time data and submit data collected by the page; 2. Components are interconnected, and their states such as display, hiding, and unselectability can be controlled. Parameter values ​​within components can be updated to control their behavior and presentation, such as text display and option content.

[0052] In one embodiment, generating the target page based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component includes: Based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component, the target function of the page component is determined. The target page is generated based on the target function of the page component.

[0053] In this embodiment of the application, the target function of the page component includes the target structure of the page component.

[0054] Here, in one embodiment, after generating the target page based on the target function of the page component, the method further includes: sending the target page to a client so that the client displays the target page.

[0055] This application also provides another page generation method, which is applied to a page generation apparatus. Figure 3 A flowchart illustrating the page generation method of this application embodiment. Figure 2 ,like Figure 3 As shown, the method for generating this page includes: Step 301: Obtain the attribute information of the page component; the attribute information includes the data source of the page component and the parameters of the page component.

[0056] In this embodiment of the application, the data source of the page component includes one or more of the following categories of data sources: custom data source; context data source; interface data source; address bar parameter data source.

[0057] In one embodiment, the parameters of the page component include static parameters and dynamic parameters. When the attribute information of the page component includes the dynamic parameters of the page component, obtaining the attribute information of the page component includes: Input information is entered into a secure, isolated environment to obtain the dynamic parameters of the page components; The input information includes the following: the data source of the page component, the processing function, and the page component value.

[0058] Step 302: Configure or update the data source of the page component based on the triggered event.

[0059] In this embodiment of the application, the triggering event includes inherent supported events of the page component itself and additional supported events, wherein the additional supported events are configured on the page or page component; The additional support events include one or more of the following events: Loading complete event; Unloading complete event; Request successful event; Request failed event.

[0060] Step 303: Based on the configuration or update result of the data source of the page component, configure or update the parameters of the page component associated with the data source of the page component.

[0061] In one embodiment, the number of page components includes two or more, and the method further includes: Identify two or more page components that have a relationship with each other; When it is detected that the parameters of the page component being configured or updated belong to the target page component, the parameters of the other page components among the two or more related page components, excluding the target page component, are configured or updated. The target page component is any one of the two or more page components that have a relationship.

[0062] In one embodiment, determining two or more page components that have an association relationship from two or more page components includes: Obtain the data source for two or more page components; Based on the data source of the two or more page components, determine the two or more page components that have an association relationship from the two or more page components.

[0063] Step 304: Based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component, determine the target function of the page component.

[0064] Step 305: Generate the target page based on the target function of the page component.

[0065] Step 306: Send the target page to the client so that the client can display the target page.

[0066] It should be noted that the specific processing steps of the page generation device to generate the page have been described in detail above, and will not be repeated here.

[0067] The technical solution of this application embodiment configures or updates the data source of page components through event-driven configuration. Since the parameters of page components are associated with the data source of page components, configuring or updating the data source of page components will trigger the configuration or update of the parameters of page components. This enables flexible and dynamic configuration of pages in low-code systems. Furthermore, this configuration scheme uses events as trigger switches for data flow, and configures the dynamic page configuration process sequentially as needed, in the order of event configuration, data source configuration, and component parameter configuration. The configuration process is semantic, conforms to the normal thinking logic of users, and the configuration method is simple and easy to understand, enabling users to better understand the configuration or update content.

[0068] The present application will be described below with reference to application examples.

[0069] To address the issues of inflexible and poorly understandable page configuration methods in related technologies, this application proposes a low-code system capable of dynamic page configuration and establishes a standard data model for implementing dynamic pages. The configuration process of dynamic pages is broken down into data source configuration, dynamic component parameter configuration, and event configuration. Each step has a semantic name, enabling users to associate configurations with page components, visualize the data flow direction within the page, reduce the difficulty of understanding, and facilitate page configuration and debugging.

[0070] Compared to static pages, dynamic pages have the following functions: 1. Supports interaction with the server, such as obtaining real-time data and submitting data collected on the page; 2. Components are interconnected, and their states such as display, hiding, and unselectability can be controlled. Parameter values ​​within components can be updated to control their behavior and presentation, such as text display and option content.

[0071] Figure 4 This is a schematic diagram of the data model architecture for implementing dynamic pages according to an embodiment of this application, as shown below. Figure 4 As shown, the design principle of the dynamic page data model design scheme in this application is as follows: changes in the data source are driven by events (corresponding triggering events), and component parameters are associated with the data source. When the data source changes, the component parameters also change, thereby affecting the display of the page view. The events used to drive changes in the data source in this application can be value changes, clicks, component initialization, page initialization, successful requests, failed requests, etc. The data source can be divided into global data sources and component data sources. Global data sources include interface data sources, address bar parameter data sources, and custom data sources; component data sources include interface data sources, context data sources, and custom data sources. Component parameters include default values, options, show / hide, grayed-out, validation, and other attributes.

[0072] Technical Implementation 1: Component Pattern (schema) Design and Page Configuration Process Design (1) Component schema design The component schema in low-code is divided into four main parts: the component's unique identifier (id, identification), the component's data source (data), the component's parameters (params), and the component's associated events (event), with the following specific meanings: 1) The component ID is a unique key value for finding a component, and a configuration component can be uniquely identified by its component ID; 2) data is the component's data source, representing the data needed by the component outside the current component. It can be used as the input parameter for the dynamic parameters and dynamic event handling functions implemented inside the current component. When the data source changes, the component parameters also change accordingly. The data sources can be divided into four categories: custom, interface, context, and address bar parameters. For specific design, please refer to the technical implementation section below. 3) `params` refers to component parameters, used to describe the different components within the component. A simple or complex component has multiple components; for example, a button component has parameters such as button text, whether it should be grayed out, and button type. Parameter sources can be categorized into three types: custom, context, and functions. See Technical Implementation III below for specific design details. 4) The event is configured for component events, which describes which actions can be triggered inside the component and what behavior will be produced. For example, the button component can be configured to trigger behavior when clicked: to initiate a request or to pop up a pop-up on the page, etc. For specific design, see Technical Implementation 5 below.

[0073] Components are associated with each other through a data source. When an event triggers a change in the component's data source, the component's parameters also change accordingly.

[0074] On the rendering side, a publish-subscribe design pattern can be used. For example, in a React project, react-redux (a library for connecting to a Redux data repository in a React application) can be used to collect and listen for different types of data. Component state, request data, etc., are stored uniformly in the store. When the data in the store changes, the associated components are notified to re-render. At the same time, higher-order functions are used to empower ordinary components, subscribe to the data source store, and calculate, organize, and expand the parameters passed to the components.

[0075] (2) Page configuration process design The page configuration user interface (UI) design is as follows: global data source configuration, component data source and parameter configuration, and component event configuration. Figure 5 This is a schematic diagram of the display interface of the configuration page in an embodiment of this application, such as... Figure 5 As shown, the display interface has a component selection area with multiple components to be selected, and also includes data source configuration.

[0076] Scenario 1: Page-level data shared by all components The page requests user information as global data, and all components within the page need to process this information logically based on the user's permissions. 1) Click on the canvas, and in the page-level configuration options, find and configure the data source; 2) Click on the component (e.g., the second component, i.e., component two) to configure component parameters and events, such as... Figure 6 The diagram shown illustrates component parameter configuration. For example, for component parameter 1, the corresponding parameter source and parameter value can be configured, as well as... Figure 7 The diagram shown illustrates the event configuration. Events can be added by selecting events on the event configuration page. The data source configured in the previous step will serve as input for component parameters and event configurations; when page data changes, the component parameters will also change.

[0077] Scenario 2: Inter-component interaction Assuming component 1 is a radio button, component 2 is an input box, and component 3 is a checkbox, when component 1 switches options, it initiates request 1. The options in component 3 are the data returned by request 1. When the current value of component 1 is option 3, component 2 is grayed out and cannot be operated. When other values ​​are selected, the components function normally. The configuration flow of this logic is as follows: 1) Click Component 1 to configure the option parameters, select "Custom" as the parameter source, and fill in the static option values; 2) Click Component 1 to configure the event. Select the event change value from the event list, choose "Initiate Request 1" as the event handler function, and fill in the relevant Uniform Resource Locator (URL), request method, parameters, data, etc. for Request 1. Figure 8 As shown; 3) Click on Component Two to configure the data source. Select the context as the data source, select the value field of Component One and rename it as needed; 4) Click Component Two to configure the disabled parameters. Select the current context as the parameter source, fill in the field name associated in Step Three, and configure a simple logic statement. 5) Click Component 3 to configure the data source. Select the data source as the interface and fill in the URL, request method, etc. of the associated interface; 6) Click Component 3 to configure the options parameters, select the current context as the parameter source, and fill in the data fields returned by the interface according to the interface.

[0078] After completing the above configuration steps, data and state can flow between components, and components can display and respond logically based on user actions. The configuration method for other page interaction logic is similar. Configure the data source, component parameters, and events as needed. Internal system data is initiated by a specific event, which can be a user action or a system-triggered event (refer to the system's internal event support). The system notifies associated components, and data is passed between components to achieve dynamic page display.

[0079] Technical Implementation 2: Data Source Design Data sources are categorized into four types based on their data origin: custom data sources, context data sources, API data sources, and address bar parameter data sources. They are also categorized by their applicable scope into globally configurable data sources and component-configurable data sources. Globally configurable data sources include custom data sources, API data sources, and address bar parameter data sources; component-configurable data sources include custom data sources, context data sources, and API data sources. Components can access global data and data sources configured within the current component. Multiple data sources of different types can be configured simultaneously, and multiple data items can be added to a single data source type. Detailed explanations of the different data source types are as follows: 1. Custom data configuration Custom data sources are fixed data entered by the user, which are constants that remain unchanged throughout the entire lifecycle of the page or component.

[0080] 2. Context data configuration Context data configuration is crucial for component interaction, creating the link between components. For example, if component 2's data source is associated with a parameter in component 1, then when component 1's parameter changes, component 2 will be notified to update its parameter. The context in the data source refers to the page's constituent modules (components).

[0081] It's important to note that when associating components, only parameters of the component itself can be associated, not data sources configured within the component. This is because data sources are configured by the user, are unpredictable and uncontrollable, and may not be used after configuration. If data is associated but not used within the component, and the component is merely used as a data springboard, the component will update along the data chain, resulting in a large amount of invalid rendering and increasing the complexity of page and component configurations. Therefore, association is limited to parameters within the component, and the data source within the component is only used for consuming component parameters. Parameter association also makes the associated fields of the component predictable, making configuration easier for users and facilitating the management of the component's internal state. Associated parameters can also be renamed for easier use within the component and avoids the problem of duplicate names overwriting values ​​for the same variable. An example of a context data source configuration item is shown below. Figure 9 As shown, select the data source as the context and configure the parameters for the current context.

[0082] 3. Interface data configuration When a page needs to retrieve data from the server, it needs to configure the interface data. After configuring an interface data source for a component, the component and the interface are connected. When the interface returns updated data, the component can obtain the updated data in real time.

[0083] When configuring the API data source for a component, it supports sending requests during component initialization and listening for changes to the API data; it also supports temporarily not initiating requests, only listening for changes in API data, and then retrieving and consuming the API data. The API data source configuration determines whether a request needs to be initiated during component initialization. An example of the API data source configuration items is shown below. Figure 10 As shown, you need to configure the sending method, interface address, etc. The mock data is configured as the mock data returned by the interface. You can preview the data interface and parameter names of the interface return value in advance, which is convenient for the internal logic processing of the component.

[0084] 4. Address bar parameter configuration When you need to configure the address bar parameter data source for a component, you can obtain the address bar parameter data by retrieving the address bar parameter data and parsing it. For example, assuming the retrieved address bar parameter data is: http: / / test.com?token=123&name=lii, the parsed address bar parameter data source will be: {token:123, name:'lii'}.

[0085] Technical Implementation 3: Dynamic Parameter Design Once a component obtains custom, page context, API, or address bar parameter data, it needs to consume the data internally. Unconsumed data is invalid and should not be associated with any configuration. Parameters can be categorized into static and dynamic parameters based on their calculation methods, corresponding to three configuration types: custom configuration, simple calculation configuration, and complex calculation configuration.

[0086] Static parameters are custom configurations that remain unchanged throughout the entire lifecycle of the page and component. Dynamic parameters in simple calculation configurations are parameters directly obtained from the data source, requiring no complex data processing. Dynamic parameters in complex calculation configurations are specific parameter values ​​obtained through function calculations, with the function input being the data source configured in the component. These are used when component parameter values ​​require complex logic processing, such as when interface data does not meet the component parameter data structure and requires logical transformation, or when data filtering is needed.

[0087] Here, the pseudocode for performing the calculation to obtain the actual parameter values ​​is as follows: / ** * @param config Parameter configuration * @param args Component-related data * @returns any / export const computed = (config: PropsValueType, args?: any) =>{ if (!config || typeof config !== 'object' || ['custom', 'self', 'fx'].indexOf(config?.type) === -1 return config const { type, value} = config / / Custom data processing if (type === 'custom') return value / / Self data: configured data, value if (type === 'self') { if (!value) return / / Add optional symbols const params = value.split('.').join('?.') const functionStr = `function(args){return args?.${params}}` / / Constructor and execute return executeFunctionWithArgs(functionStr, args) } / / Function handling for complex logic in FX, function parameters are: configuration data, value if (type === 'fx') { if (!value) return return executeFunctionWithArgs(value, args) } } As can be seen from the pseudocode, the simple calculation configuration type of data also first constructs a function expression form internally, and then passes it to the sandbox for calculation to obtain the final data.

[0088] Technical Implementation 4: Dynamic Parameter Sandbox Calculation Since the calculation of dynamic parameters is real-time, in order to prevent errors in the calculation logic of dynamic parameters from causing abnormal blank screens and poor user experience, and also for security reasons, user-configured function code cannot be run in the page runtime environment to prevent interference with other functions or variables in the page environment, the function code configured by the user in the configuration backend is designed to be executed in the code sandbox, and the execution result is assigned to the component parameter variable. The input parameters of the function are the component data source data, the component value, and the function code by default.

[0089] Technical Implementation 5: System Event Design An event is something that happens in a system that is being programmed. When an event occurs, the system generates (or triggers) a signal and provides a mechanism to automatically take some action (i.e., run some code) when the event occurs.

[0090] To respond to an event, an event handler needs to be attached to it. This is typically a block of code (such as a JavaScript function created by a programmer) that runs when the event occurs. When such a block of code is defined to run in response to an event, it is actually registering an event handler. Event handlers are sometimes called event listeners; the two names are synonymous, although strictly speaking, this block of code both listens for and handles events. Listeners monitor whether an event has occurred, and handlers respond to the event by executing the event handling function.

[0091] This application proposes, in addition to supporting events defined within components, to also include other built-in events that can be configured at both the component and page levels, thereby enriching the business scenarios supported by the configuration page: The Mounted event: This is the loading completion event, referring to the event that occurs when a component or page has finished loading. When the Mounted event is configured on a component, it listens for the component's loading completion event; when it is configured on the page, it listens for the page's loading completion event. It will only trigger once per component or page. The unMounted event: This event occurs when the component is fully unmounted, similar to the mounted event; it will only be triggered once per component and per page. The `requestSuccess` event: This event listens for a specific request and triggers when the request successfully returns data (e.g., `response.status === 200`). The event is triggered when the listened-for request succeeds. The `requestFailed` event is a request failure event that listens for a specific request and triggers when the request fails and no data is returned (e.g., `response.status !== 200`). The failure of the listened-for request triggers the request failure event.

[0092] The system also categorizes configurable event handlers into browser-related, request-related, page element-related, and form submission-related event handlers, with further subdivisions within each category: Browser-related: Includes page navigation, page forward, page back, and refresh operations; Request-related: Includes the operation of initiating a request; Page element related: including pop-up windows and page overlay operations; Form submission related: Includes form submission operations, similar to request initiation operations, but with the difference that it supports validation before initiating the request, and the request is blocked if the validation fails; it also supports initiating multiple requests, with each request waiting in sequence for the previous request to succeed before it is initiated.

[0093] Compared with the solutions of related technologies, the solution of this application has the following advantages: 1) This application is a low-code configuration system that can realize dynamic pages, consisting of a configuration backend, a rendering engine and components. Each part can be imported independently, without limiting the front-end technology stack, and is easy to use. 2) The relationships between components on the page are entirely established by user configuration. Components are associated with other components on the page as needed through data sources, which reduces repeated rendering of components and improves page performance. When the state of a component changes due to an event, the associated components also change accordingly. The data flow is consistent with the page configuration, which is clear and facilitates dynamic page configuration debugging, problem fixing and feature iteration. 3) Data sources are categorized according to their origin, and are divided into: custom data sources, context data sources, interface data sources, and address bar parameter data sources. This categorization method is simple, direct, easy to understand, and conforms to actual business logic. 4) Using events as the trigger switch for data flow, the dynamic page configuration process is configured as needed in the order of event configuration, data source configuration, and component parameter configuration. The configuration process is more semantic, conforms to the normal thinking logic of users, and the configuration method is simple and easy to understand.

[0094] This application innovatively proposes a low-code system where events drive changes in the data source, and component parameters are associated with the data source. Changes in the data source affect the component parameters, thus influencing the component's display. This addresses the shortcomings of existing technologies and is a low-cost, easily deployable data modeling solution for specific projects, possessing significant practical value.

[0095] To implement the page generation method of this application embodiment, this application embodiment also provides a page generation apparatus. Figure 11 This is a schematic diagram of the composition structure of the page generation apparatus according to an embodiment of this application, such as... Figure 11As shown, the page generation device includes: The acquisition unit 1101 is used to acquire the attribute information of the page component; the attribute information includes the data source of the page component and the parameters of the page component; The first processing unit 1102 is used to configure or update the data source of the page component based on the triggering event; The second processing unit 1103 is used to configure or update the parameters of the page component associated with the data source of the page component based on the configuration or update result of the data source of the page component. The generation unit 1104 is used to generate a target page based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component.

[0096] In one embodiment, the data source of the page component includes one or more of the following categories of data sources: Custom data source; context data source; API data source; address bar parameter data source.

[0097] In one embodiment, the parameters of the page component include static parameters and dynamic parameters. When the attribute information of the page component includes the dynamic parameters of the page component, the acquisition unit 1101 is specifically used for: Input information is entered into a secure, isolated environment to obtain the dynamic parameters of the page components; The input information includes the following: the data source of the page component, the processing function, and the page component value.

[0098] In one embodiment, the generation unit 1104 is specifically used for: Based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component, the target function of the page component is determined. The target page is generated based on the target function of the page component.

[0099] In one embodiment, the triggering event includes inherent supported events of the page component itself and additional supported events, wherein the additional supported events are configured on the page or the page component; The additional support events include one or more of the following events: Loading complete event; Unloading complete event; Request successful event; Request failed event.

[0100] In one embodiment, the number of page components includes two or more, and the apparatus further includes: a determining unit and a third processing unit; wherein, The determining unit is used to determine two or more page components that have an association relationship from two or more page components; The third processing unit is used to configure or update the parameters of other page components (excluding the target page component) among the two or more related page components when it is detected that the parameters of the page component being configured or updated belong to the target page component. The target page component is any one of the two or more page components that have a relationship.

[0101] In one embodiment, the determining unit is specifically used for: Obtain the data source for two or more page components; Based on the data source of the two or more page components, determine the two or more page components that have an association relationship from the two or more page components.

[0102] In practical applications, the acquisition unit 1101 can be implemented by the communication interface in the page generation device; the first processing unit 1102, the second processing unit 1103 and the generation unit 1104 can be implemented by the processor in the page generation device.

[0103] It should be noted that the page generation device provided in the above embodiments is only illustrated by the division of the above program modules. In actual applications, the above processing can be assigned to different program modules as needed, that is, the internal structure of the device can be divided into different program modules to complete all or part of the processing described above. In addition, the page generation device and the page generation method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the page generation method embodiments, which will not be repeated here.

[0104] Based on the hardware implementation of the above program modules, and in order to implement the page generation method of this application embodiment, this application embodiment also provides a page generation device. Figure 12 This is a schematic diagram of the hardware composition of the page generation device according to an embodiment of this application, such as... Figure 12 As shown, the page generating device 1200 includes: The communication interface 1201 enables information exchange with other devices; The processor 1202 is connected to the communication interface 1201 to enable information interaction with other devices. When running a computer program, it executes the page generation method provided above, and the computer program is stored in the memory 1203.

[0105] It should be noted that the specific processing procedures of communication interface 1201 and processor 1202 can be understood by referring to the page generation method described above.

[0106] Of course, in practical applications, the various components in the page generation device 1200 are coupled together through the bus system 1204. It can be understood that the bus system 1204 is used to implement communication between these components. In addition to the data bus, the bus system 1204 also includes a power bus, a control bus, and a status signal bus. However, for clarity, in... Figure 12 The general designated all buses as Bus System 1204.

[0107] The memory 1203 in this embodiment is used to store various types of data to support the operation of the page generation device 1200. Examples of such data include any computer program used to operate on the page generation device 1200.

[0108] The page generation method disclosed in the above embodiments of this application can be applied to the processor 1202, or implemented by the processor 1202. The processor 1202 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above page generation method can be completed by the integrated logic circuit of the hardware in the processor 1202 or by instructions in the form of software. The processor 1202 may be a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor 1202 can implement or execute the page generation methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the page generation method disclosed in the embodiments of this application can be directly reflected as being executed by a hardware decoding processor, or being executed by a combination of hardware and software modules in the decoding processor. The software modules may be located in a storage medium, which is located in the memory 1203. The processor 1202 reads the information in the memory 1203 and completes the steps of the aforementioned page generation method in combination with its hardware.

[0109] In an exemplary embodiment, the page generation device 1200 may be implemented by one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), general-purpose processors, controllers, microcontrollers (MCUs), microprocessors, or other electronic components to perform the aforementioned page generation method.

[0110] It is understood that the memory 1203 in this embodiment can be volatile memory or non-volatile memory, or both. Non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), magnetic random access memory (FRAM), flash memory, magnetic surface memory, optical disc, or compact disc read-only memory (CD-ROM); magnetic surface memory can be disk storage or magnetic tape storage. Volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as Static Random Access Memory (SRAM), Synchronous Static Random Access Memory (SSRAM), Dynamic Random Access Memory (DRAM), Synchronous Dynamic Random Access Memory (SDRAM), Double Data Rate Synchronous Dynamic Random Access Memory (DDRSDRAM), Enhanced Synchronous Dynamic Random Access Memory (ESDRAM), SyncLink Dynamic Random Access Memory (SLDRAM), and Direct Rambus Random Access Memory (DRRAM).The memory 1203 described in the embodiments of this application is intended to include, but is not limited to, these and any other suitable types of memory.

[0111] In an exemplary embodiment, this application also provides a storage medium, namely a computer storage medium, specifically a computer-readable storage medium, such as a memory 1203 storing a computer program. This computer program can be executed by a processor 1202 in the page generation device 1200 to complete the steps of the page generation method described in the aforementioned embodiment. The computer-readable storage medium can be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, Flash Memory, magnetic surface memory, optical disc, or CD-ROM.

[0112] In an exemplary embodiment, this application also provides a computer program product, including a computer program that can be executed by a processor 1202 in a page generation device 1200 to complete the steps of the page generation method described in the foregoing embodiments of this application.

[0113] It should be noted that terms such as "first" and "second" are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0114] Furthermore, the technical solutions described in the embodiments of this application can be combined arbitrarily without conflict.

[0115] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page generation method characterized by, The method includes: Obtain the attribute information of the page component; the attribute information includes the data source of the page component and the parameters of the page component; Based on the triggered event, the data source of the page component is configured or updated; Based on the configuration or update results of the data source of the page component, the parameters of the page component associated with the data source of the page component are configured or updated. The target page is generated based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component.

2. The method according to claim 1, characterized in that, The data source for the page component includes one or more of the following categories: Custom data source; Context data source; API data source; Address bar parameter data source.

3. The method according to claim 1, characterized in that, The parameters of the page component include static parameters and dynamic parameters. When the attribute information of the page component includes the dynamic parameters of the page component, obtaining the attribute information of the page component includes: Input information is entered into a secure, isolated environment to obtain the dynamic parameters of the page components; The input information includes the following: the data source of the page component, the processing function, and the page component value.

4. The method according to claim 1, characterized in that, The step of generating the target page based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component includes: Based on the configuration or update results of the data source of the page component and the configuration or update results of the parameters of the page component, the target function of the page component is determined. The target page is generated based on the target function of the page component.

5. The method according to claim 1, characterized in that, The triggering events include inherent supported events of the page component itself and additional supported events, wherein the additional supported events are configured on the page or page component; The additional support events include one or more of the following events: Loading complete event; Unloading complete event; Request successful event; Request failed event.

6. The method according to claim 1, characterized in that, The number of page components includes two or more, and the method further includes: Identify two or more page components that have a relationship with each other; When it is detected that the parameters of the page component being configured or updated belong to the target page component, the parameters of the other page components among the two or more related page components, excluding the target page component, are configured or updated. The target page component is any one of the two or more page components that have a relationship.

7. The method according to claim 6, characterized in that, The step of determining two or more page components that have a relationship from two or more page components includes: Obtain the data source for two or more page components; Based on the data source of the two or more page components, determine the two or more page components that have an association relationship from the two or more page components.

8. A page generation device, characterized in that, include: A processor and a memory for storing computer programs capable of running on the processor; When the processor is used to run the computer program, it performs the steps of the method according to any one of claims 1 to 7.

9. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

Images