Dynamic page generation system and dynamic page configuration method

Abstract

This application provides a dynamic page generation system and a dynamic page configuration method, which can be applied to the field of financial technology. The system includes: a design module configured to: provide a visual interface to receive user settings for page element layout, style, and logic; construct a unified syntax tree (UST) based on the operations, where nodes of the UST correspond to the page elements, and node attributes contain logical information representing the mapping relationship; convert the UST into a page description file; and a rendering module configured to: obtain the page description file; parse the page description file to reconstruct the UST; dynamically generate corresponding page element instances based on the reconstructed syntax tree to form a page structure; and dynamically associate the mapping relationship with the corresponding page element instances in the page structure according to the logical information in the reconstructed syntax tree nodes.

Description

Technical Field

[0001] This application relates to the field of computer application technology, specifically to the field of front-end development technology, and more specifically to a dynamic page generation system and a dynamic page configuration method. Background Technology

[0002] Visualized front-end page generation solutions typically tightly couple design tools with runtime page implementation. The operations of the design tool are directly translated into source code for a specific front-end framework or intermediate code deeply bound to it, resulting in an inherent connection between the generated page logic and the specific implementation technology stack. This approach makes it impossible to directly migrate or reuse page descriptions across different technology environments. The resulting outputs often have poor readability and scattered logical relationships, making effective version management and team collaboration difficult. Furthermore, deviations between the final rendered result and design expectations are prone to occur, leading to high debugging and maintenance costs. Summary of the Invention

[0003] In view of the above problems, embodiments of this application provide a dynamic page generation system and a dynamic page configuration method.

[0004] According to a first aspect of this application, a dynamic page generation system is provided, comprising: a design module configured to: provide a visual interface to receive user operations on layout settings, style settings, and logic settings for page elements, wherein the logic settings operations are used to establish a mapping relationship between triggering conditions and response actions of page elements; construct a unified syntax tree based on the operations, wherein the nodes of the unified syntax tree correspond to the page elements, and the node attributes contain logical information representing the mapping relationship; convert the unified syntax tree into a page description file; and a rendering module configured to: obtain the page description file; parse the page description file to reconstruct the unified syntax tree; dynamically generate corresponding page element instances based on the reconstructed syntax tree to form a page structure; and dynamically associate the mapping relationship with the corresponding page element instances in the page structure according to the logical information in the nodes of the reconstructed syntax tree.

[0005] According to an embodiment of this application, the visual interface is configured to: provide logical setting functions through a logical configuration area, wherein the logical configuration area is used to respond to the selection of a target page element and its triggering conditions; and respond to at least one execution action of the triggering conditions in a graphical arrangement manner; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

[0006] According to an embodiment of this application, the visualization interface is further configured to: respond to input binding expressions to establish an association between page element attributes and data models; the design module is further configured to record the association as logical information in the corresponding node attributes of the unified syntax tree.

[0007] According to a second aspect of this application, a dynamic page configuration method is provided, comprising: in response to user operations on a visual page, setting layout and style for page elements; in response to logic setting operations, setting interaction logic for page elements, the interaction logic including a mapping relationship between triggering conditions and response actions of page elements; constructing a unified syntax tree based on the layout settings, the style settings, and the interaction logic, wherein nodes of the unified syntax tree represent page elements, and node attributes contain logical information describing the interaction logic; converting the unified syntax tree into a page description file; wherein the page description file is used for parsing by a rendering engine to dynamically generate a target page associated with the interaction logic based on the unified syntax tree.

[0008] According to an embodiment of this application, setting interaction logic for page elements includes: responding to the selection of a target page element and its triggering conditions; receiving and executing configuration instructions for at least one execution action of the triggering conditions in a graphical arrangement; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

[0009] According to an embodiment of this application, it further includes: responding to a binding expression input through an expression editor to establish an association between page element attributes and a data model; the construction of the unified syntax tree includes: recording the association as logical information in the corresponding node attributes of the unified syntax tree.

[0010] According to a third aspect of this application, a dynamic page rendering method is provided, comprising: obtaining a page description file; wherein the page description file is obtained by converting a unified syntax tree (UST) constructed based on layout settings, style settings, and interaction logic settings of page elements, the interaction logic settings including a mapping relationship between triggering conditions and response actions of page elements, the nodes of the UST representing page elements and the node attributes containing logical information describing the interaction logic settings; parsing the page description file to reconstruct the UST; dynamically generating corresponding page element instances to construct a page structure based on the reconstructed UST; dynamically associating the mapping relationship with the corresponding page element instances in the page structure based on the logical information in the nodes of the reconstructed UST; the logical information including a sequence of triggering conditions and response actions defined based on a graphical arrangement method and supporting conditional branching; the logical information also including a relationship between page element attributes and a data model established based on binding expressions.

[0011] According to a fourth aspect of this application, an electronic device is provided, comprising: one or more processors; and a memory for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the method described above.

[0012] According to a fifth aspect of this application, a computer-readable storage medium is also provided, on which a computer program or instructions are stored, wherein the computer program or instructions, when executed by a processor, implement the steps of the above-described method.

[0013] According to a sixth aspect of this application, a computer program product is also provided, comprising a computer program or instructions that, when executed by a processor, implement the steps of the above-described method. Attached Figure Description

[0014] The above-mentioned contents, other objects, features and advantages of this application will become clearer from the following description of embodiments with reference to the accompanying drawings, in which:

[0015] Figure 1 The illustration shows an application scenario diagram of the dynamic page generation system according to an embodiment of this application.

[0016] Figure 2 The diagram illustrates the system architecture of a dynamic page generation system according to an embodiment of this application.

[0017] Figure 3 A flowchart illustrating a dynamic page configuration method according to an embodiment of this application is shown.

[0018] Figure 4A flowchart illustrating a dynamic page rendering method according to an embodiment of this application is shown schematically.

[0019] Figure 5 A schematic block diagram of a dynamic page configuration apparatus according to an embodiment of this application is shown.

[0020] Figure 6 A schematic block diagram of a dynamic page rendering apparatus according to an embodiment of this application is shown.

[0021] Figure 7 A block diagram schematically illustrates an electronic device suitable for implementing a dynamic page configuration method according to an embodiment of this application. Detailed Implementation

[0022] The embodiments of this application will now be described with reference to the accompanying drawings. However, it should be understood that these descriptions are exemplary only and are not intended to limit the scope of this application. In the following detailed description, numerous specific details are set forth to provide a thorough understanding of the embodiments of this application for ease of explanation. However, it will be apparent that one or more embodiments may be implemented without these specific details. Furthermore, descriptions of well-known structures and technologies are omitted in the following description to avoid unnecessarily obscuring the concepts of this application.

[0023] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the scope of this application. The terms “comprising,” “including,” etc., as used herein indicate the presence of the stated features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0024] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein are to be interpreted in a manner consistent with the context of this specification, and not in an idealized or overly rigid way.

[0025] When using expressions such as "at least one of A, B and C", they should generally be interpreted in accordance with the meaning that is commonly understood by those skilled in the art (e.g., "a system having at least one of A, B and C" should include, but is not limited to, a system having A alone, a system having B alone, a system having C alone, a system having A and B, a system having A and C, a system having B and C, and / or a system having A, B and C, etc.).

[0026] Figure 1 The illustration depicts an application scenario of a dynamic page generation system according to an embodiment of this application. For example... Figure 1As shown, application scenario 100 according to an embodiment of this application may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables. For example, a user can use the first terminal device 101, the second terminal device 102, and the third terminal device 103 to interact with the server 105 through the network 104 to receive or send information, etc.

[0027] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be electronic devices such as smartphones, wearable devices, personal computers, intelligent voice interaction devices, smart home appliances, intelligent vehicles, in-vehicle terminals, aircraft, unmanned vending terminals, and extended reality devices. Extended reality devices can include virtual reality devices, augmented reality devices, and mixed reality devices. A client application for the target application can be installed and run on the terminal devices. This target application can include, but is not limited to, financial transaction applications, payment applications, shopping applications, web browser applications, search applications, instant messaging tools, email clients, and social media platform software (these are just examples). Furthermore, this application embodiment does not limit the form of the target application, and it can include, but is not limited to, applications, mini-programs, etc., installed on the terminal devices, and can also be in the form of web pages.

[0028] Server 105 can be a server providing various services, such as a backend management server supporting websites browsed by users using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (this is just an example). The backend management server can analyze and process received user requests and other data, and feed back the processing results (such as web pages, information, or data obtained or generated according to user requests) to the terminal devices. The server can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing cloud computing services such as cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks, and basic cloud computing services such as big data. The server can be the backend server of the aforementioned target application, used to provide backend services to the clients of the target application.

[0029] It should be noted that the dynamic page generation system provided in this application embodiment can generally be set in server 105 and / or terminal devices 101-103. Accordingly, the dynamic page configuration method provided in this application embodiment can generally be executed by server 105 and / or terminal devices 101-103.

[0030] It should be noted that the dynamic page generation system provided in this application embodiment can be used in front-end page development scenarios in the fintech field, and can also be used in any field other than fintech. The application field of the dynamic page generation system provided in this application embodiment is not limited.

[0031] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0032] Figure 2 A schematic diagram illustrating the system architecture of a dynamic page generation system according to an embodiment of this application is provided. Figure 2 As shown, the dynamic page generation system 200 includes a design module 210 and a rendering module 220. The two are physically and logically decoupled.

[0033] According to an embodiment of this application, the design module is configured to: provide a visual interface to receive user operations on layout settings, style settings, and logic settings for page elements, wherein the logic settings operations are used to establish a mapping relationship between triggering conditions and response actions of page elements; construct a unified syntax tree based on the operations, wherein the nodes of the unified syntax tree correspond to the page elements, and the node attributes contain logical information representing the mapping relationship; and convert the unified syntax tree into a page description file.

[0034] In one example, the design module, typically for web applications running on a server or locally on the user's computer, provides a visual design interface. Users drag and drop pre-defined page elements (such as buttons, input boxes, form containers, and text labels) from the material library panel to the central canvas area, adjusting their position and size by dragging the borders to complete the page layout. When a user selects an element on the canvas (e.g., a submit button), the properties panel on the right displays its configurable items, allowing users to set styles (such as background color and font size) and basic properties (such as setting the button text to "Submit").

[0035] In one example, when logic settings are required, the user clicks the "Logic" tab on the interface to enter the logic configuration area. In this area, the user first selects the target page element (such as the "Submit button" mentioned earlier) from the canvas or component tree, and then selects a trigger condition (such as "click") from the list of supported events. Subsequently, the user defines the response action for this event through a graphical orchestration method: dragging the "Form Validation" action from the action library to the editing area and connecting it to the "Click" event; next, adding a "Conditional Branch" node and configuring its condition as "Form Validation Passed"; after the "Yes" branch, connecting the "Call API" action and configuring its request address as " / api / submit"; after the "No" branch, connecting the "Show Prompt" action and configuring the prompt content as "Validation Failed". At this point, an "Event-Action" rule chain containing conditional branches is configured. In addition, users can enter {{ userInfo.name}} in the expression editor in the Data Binding section of the Properties panel for a "Text Label" element on the canvas to establish a responsive association between the text content of the label and the name property of the userInfo object in the data model.

[0036] In one example, the design module internally maintains an Abstract Syntax Tree (AST). This AST is updated in real-time as the user performs each of the layout, style, or logic settings described above. For instance, a AST node is created or updated for the "Submit Button," with its `type` attribute set to "Button" and its `events` attribute set to an array containing structured data describing the complete "click-validate-conditional API call / display hint" rule chain. For "Text Labels," the `bindings` attribute of its node records the expression `{{userInfo.name}}`. Finally, when the user saves the design, the design module serializes (converts) this AST into a page description file conforming to a predefined format, which serves as the output of the design phase.

[0037] According to an embodiment of this application, the rendering module is configured to: obtain the page description file; parse the page description file to reconstruct the unified syntax tree; dynamically generate corresponding page element instances based on the reconstructed syntax tree to form a page structure; and dynamically associate the mapping relationship with the corresponding page element instances in the page structure according to the logical information in the reconstructed syntax tree nodes.

[0038] In one example, the rendering module (usually embedded in the host web page as a JavaScript library) runs independently in the client browser environment. When the target page needs to be loaded, the rendering module initiates a network request to obtain the generated page description file. The rendering module parses this file and reconstructs a unified syntax tree data structure in memory that is consistent with the design time. The rendering module recursively traverses this syntax tree: for each node, based on its type attribute (such as "Button"), it calls the corresponding factory function to dynamically create a DOM element instance and applies the style attributes defined in the node, thereby constructing a complete page DOM structure (i.e., page structure) in the browser. For the logic part, the rendering module parses the event data in the nodes and dynamically adds event listeners to the corresponding DOM elements (such as buttons). When an event is triggered, a predefined rule chain is executed (such as performing form validation and deciding whether to call an API or display a prompt based on the result). At the same time, the rendering module parses the bindings information and uses its internal reactive system to establish a bidirectional or unidirectional update mechanism between the data model userInfo.name and the content of the text tag DOM element. Through the above process, a dynamic page with complete interactive logic, driven entirely by the configuration file, is generated.

[0039] The architecture separating the design and rendering modules and the processing flow based on a unified syntax tree provided in this application's embodiments achieves structured centralized management and clear logical expression of page information: the design module integrates all user visual operations into a unified syntax tree in real time, enabling page structure information and dynamic interaction logic to be uniformly and structurally carried and described. This solves the maintenance chaos and comprehension difficulties caused by fragmented logic configuration in related technologies, laying the foundation for generating high-quality, highly readable page description files; it achieves complete decoupling between page definition and runtime implementation. The declarative page description file output by the design module is independent of any specific front-end technology stack, and the rendering module, as an independent interpreter, only depends on this file to work. This allows the same design result to be parsed and executed by rendering modules with different technology implementations, achieving "one design, multiple renderings," significantly improving the flexibility and portability of the solution; furthermore, since the rendering module dynamically instantiates page elements and associates logic by parsing the description file, when the page needs to be modified, it only needs to update the description file and reload to achieve real-time updates, without going through the traditional code modification, compilation, packaging, and deployment process, thereby greatly simplifying iterative maintenance work and improving development and response efficiency.

[0040] According to an embodiment of this application, the visual interface is configured to: provide logical setting functions through a logical configuration area, wherein the logical configuration area is used to respond to the selection of a target page element and its triggering conditions; and respond to at least one execution action of the triggering conditions in a graphical arrangement manner; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

[0041] In one example, the logic configuration area provides a visual flowchart editor. The user selects a "Search Box" element and chooses "Value Change (onChange)" as the trigger condition from the event list. The user then drags the "Send Network Request" icon from the Actions panel to the editing area, connecting it to the "Value Change" event node. When configuring this action, the user sets the request parameter to come from the current value of the search box (bound via the expression {{this.value}}). To further optimize the experience, the user can add a "Conditional Decision" node before this request action, configuring the rule to "execute the subsequent request only when the input value length is greater than 2," otherwise connecting it to a "No Action" or "Show Waiting" action. This graphical orchestration, which supports sequential and conditional branch connections, allows complex business logic (such as debouncing search and conditional triggers) to be configured intuitively without writing code.

[0042] By providing a graphically orchestrated logic configuration area and expression binding interface within the visual interface, the intuitiveness and ease of use of logic definitions are enhanced. The graphical orchestration method allows users to intuitively configure complex action sequences containing order and conditional branches for trigger conditions by dragging and dropping connections. This transforms abstract business logic that originally required writing code into a visual flowchart, greatly reducing the barrier for non-professional users to configure complex interactions, and ensuring clear visibility and ease of adjustment of logical relationships.

[0043] According to an embodiment of this application, the visualization interface is further configured to: respond to input binding expressions to establish an association between page element attributes and data models; the design module is further configured to record the association as logical information in the corresponding node attributes of the unified syntax tree.

[0044] In one example, a "User Avatar" component in the properties panel has an "Image URL (src)" attribute. The user clicks the binding icon next to this attribute, which brings up an expression editor. The editor provides auto-completion suggestions for data model variables. The user enters `{{ avatarUrl||'default.png'}}`, indicating that the `avatarUrl` variable is preferred; if empty, the default image is used. Upon receiving this configuration, the design module sets a `bindings` attribute on the corresponding "User Avatar" component node in the unified syntax tree, with a value such as `{"src":"{{ avatarUrl ||'default.png'}}"}`. When the rendering module parses and executes this binding, it creates a computed property that dynamically monitors changes to the `avatarUrl` variable and updates the `src` attribute of the image element in real time, achieving automatic synchronization between the view and the data.

[0045] The expression binding interface allows users to directly establish reactive associations between page element attributes and the underlying data model using declarative syntax. The design module accurately records this association in the corresponding node of the unified syntax tree, enabling the accurate capture and expression of the intent of data flow. At runtime, it can automatically achieve bidirectional synchronization between the view and the data. This not only simplifies the configuration process of data binding and avoids the tediousness and errors of manually updating the view, but also ensures the consistency between the interface state and business data from a mechanism perspective, further enhancing the declarative characteristics and maintainability of the system.

[0046] Figure 3 A flowchart illustrating a dynamic page configuration method according to an embodiment of this application is shown. Figure 3 As shown, the dynamic page configuration method 300 according to an embodiment of this application may include steps S310 to S340.

[0047] In step S310, in response to the user's operation on the visualization page, the layout and style settings of the page elements are performed.

[0048] In one example, in the design interface, the user drags predefined page elements such as a "form container," "text input box," "password input box," and "button" from the material library to the central canvas area. The user adjusts the position and size of each element by dragging, for example, arranging two input boxes vertically within the form container and placing the button at the bottom. Then, the user selects the "submit button," and in the properties panel on the right, sets its background color to blue, text color to white, font size to 14px, and changes the button's displayed text to "Submit Registration." These operations complete the basic visual layout and appearance definition of the page.

[0049] In step S320, in response to the logic setting operation, interaction logic is set for page elements, the interaction logic including the mapping relationship between the triggering conditions of page elements and response actions.

[0050] In one example, a user needs to configure the behavior of a "Submit" button after it is clicked. For instance, the user selects the button and switches to the "Logic" configuration panel. They choose "Click" from the event list as the trigger condition. Next, in the action orchestration area, the user graphically defines the sequence of response actions: dragging a "Form Validation" action icon and connecting it to the "Click" event node; this action is configured to validate all input items within the "Form Container". Subsequently, the user adds a "Conditional Branch" node with the condition "Form validation passed". On the "Yes" branch, a "Call API" action is connected, configuring its request address as " / api / register", request method as POST, and request data bound to form input values ​​(such as {{formData}}). On the "No" branch, a "Show Global Prompt" action is connected, configuring the prompt type as "Error" and the content as "Please check the input items". At this point, a "trigger condition - response action" mapping relationship containing conditional judgments is visually established.

[0051] In step S330, a unified syntax tree is constructed based on the layout settings, the style settings, and the interaction logic. The nodes of the unified syntax tree represent page elements, and the node attributes contain logical information describing the interaction logic.

[0052] In one example, the design tool's backend system responds to all of the user's actions in real time and integrates them into a centralized unified syntax tree. This syntax tree is maintained in memory as a JSON object. For example, for the "Submit Button," the system creates or updates a node of type "Button." The node's `style` attribute records style settings such as color and font; its `events` attribute, as key logical information, stores the complete interaction logic defined in step S320, and its data structuredly describes the event type, conditional branches, and the action chain under each branch. All elements of the entire page and their relationships are described in this structured and centralized way within this tree.

[0053] In step S340, the unified syntax tree is converted into a page description file.

[0054] According to an embodiment of this application, the page description file is used for parsing by the rendering engine to dynamically generate a target page associated with the interaction logic based on the unified syntax tree.

[0055] In one example, when a user completes their design and clicks "Publish" or "Save," the system serializes the Uniform Syntax Tree (UST) in memory, converting it into a page description file (e.g., page_config.json) conforming to a predefined format. This file, stored in JSON format, fully contains all the content defined by the UST, namely a declarative description of the page's structure, styles, and interaction logic. This file is the final output of this process. The page description file is used by the rendering engine to parse and dynamically generate the target page associated with the interaction logic based on the UST. Specifically, a separate runtime rendering engine (e.g., a JavaScript SDK embedded in the host page) loads and parses this page_config.json file. After parsing, the engine reconstructs the UST in memory, consistent with the design, and then recursively traverses the tree: dynamically generating corresponding real DOM elements (e.g., HTML buttons) based on node types, applying style attributes, and dynamically binding event listeners and business logic to elements based on logical information such as events. Finally, a target page with complete layout, styles, and preset interactive functions is generated in the browser and presented to the end user.

[0056] According to an embodiment of this application, setting interaction logic for page elements includes: responding to the selection of a target page element and its triggering conditions; receiving and executing configuration instructions for at least one execution action of the triggering conditions in a graphical arrangement; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

[0057] In one example, when a user needs to configure interactive behavior for a specific page element, they first select the target page element in the visual design interface. For example, the user selects a button component labeled "Query" from the component tree on the canvas as the target element. Then, in the trigger condition drop-down menu of the logic panel on the right, the user selects "Click" as the trigger condition for this logic configuration from the list of events supported by the button (such as "Click," "Mouseenter," etc.). After selecting the trigger condition, the system enters the graphical orchestration mode. The user can drag and drop predefined action icons from the action library on the left to the orchestration area. For example, the user first drags a "Form Validation" action icon and connects it to the "Click" event node with a connecting line, indicating that form validation will be performed first after clicking. The user then drags a "Conditional Judgment" node after the "Form Validation" action and configures the judgment condition as "Validation Passed." The user then drags the "Call API" action icon from the action library and connects it to the "Yes" branch of the conditional judgment node; simultaneously, they drag the "Show Prompt" action icon and connect it to the "No" branch, configuring the prompt content to "Please complete the form information." During this orchestration process, the user can also adjust the connection order between nodes by dragging and dropping, thereby sequentially connecting multiple actions and conditional branches to construct a complete "Click-Verify-Conditional Branch-Call API / Show Prompt" business logic flow. The entire orchestration process is presented intuitively in flowchart form, and users can adjust the logic chain at any time by dragging, deleting, or modifying nodes.

[0058] According to an embodiment of this application, it further includes: responding to a binding expression input through an expression editor to establish an association between page element attributes and a data model; the construction of the unified syntax tree includes: recording the association as logical information in the corresponding node attributes of the unified syntax tree.

[0059] In one example, when a user needs to establish a dynamic association between page element attributes and underlying data, they can do so through the expression editor. For instance, a user selects a "text label" element in the design interface to display a user's name and finds the "text content" configuration item in its properties panel. The user clicks the "binding" icon next to this configuration item, and the system pops up the expression editor. This editor typically provides intelligent suggestions for available variables in the data model. The user enters the binding expression {{user.fullName}} in the editor, which means associating the content of this text label with the fullName property of the user object in the data model. After the user confirms the input, the system responds to this operation, establishing a reactive association between the attribute (text content) of the page element (text label) and the data model (user.fullName). During the construction of the unified syntax tree, the system processes this association as important logical information. Specifically, the system locates the corresponding node in the unified syntax tree representing the "text label." This binding information is recorded in the attribute set of that node (e.g., an attribute named bindings or dynamicProps). The record format can be key-value pairs, such as `{text":"{{ user.fullName}}"}`. That is, the complete Uniform Syntax Tree (UST) not only describes the page's visual structure and event logic but also precisely describes the dependencies between the view and the data. When the rendering engine runs, it initializes the responsive system based on this record information, ensuring that when the value of `user.fullName` changes, the content of the text label automatically updates. Conversely, if the binding is two-way, user interface input also automatically updates the data model, thus achieving automatic synchronization between data and the view.

[0060] Figure 4 A flowchart illustrating a dynamic page rendering method according to an embodiment of this application is shown schematically. Figure 4 As shown, the dynamic page configuration method 400 according to an embodiment of this application may include steps S410 to S440.

[0061] In step S410, the page description file is obtained.

[0062] In one example, a standalone front-end rendering engine is embedded within a host web page, such as the frame page of a backend management system. When the host page loads into the browser and initializes, the rendering engine, based on a preset page identifier, such as a page ID or URL parameters, initiates an asynchronous request to a specified configuration server to obtain the corresponding page description file (e.g., the aforementioned register_page.json). The content of this file is generated by a visual design tool during the design phase and published to the configuration server.

[0063] In step S420, the page description file is parsed to reconstruct the unified syntax tree.

[0064] In one example, after receiving the page description file, the rendering engine invokes its internal parser. The parser reads the JSON text and, according to predefined formatting specifications, deserializes it into a hierarchical JavaScript object in memory. This process involves parsing the file and reconstructing a unified syntax tree that is completely isomorphic to the design phase. Each node in this syntax tree corresponds to a page element in the design, and the node attributes fully contain information such as the element's type, style, position, and logical configuration.

[0065] In step S430, based on the reconstructed unified syntax tree, corresponding page element instances are dynamically generated to construct the page structure.

[0066] In one example, the core component factory of the rendering engine begins the process, performing a depth-first traversal based on the reconstructed unified syntax tree. For each node encountered: first, the node's `type` property is read (e.g., "FormContainer", "Input", "Button"). The component constructor corresponding to that type is called, dynamically generating a renderable page element instance. For example, for the "Button" type, an HTML... <button>Element; for "Input", construct a <input> The style properties recorded in the node (such as style: {backgroundColor:'#1677ff'}) are applied to the newly created DOM element instance. Based on the node's hierarchy in the tree, the created element instance is mounted to its parent container. By recursively executing this process, the complete page DOM structure is eventually built in the browser's memory, at which point the page has a static appearance.

[0067] In step S440, the mapping relationship is dynamically associated with the corresponding page element instance in the page structure based on the logical information in the reconstructed unified syntax tree node.

[0068] In one example, after completing the static structure construction, the rendering engine begins processing the interaction logic. It traverses the unified syntax tree again, specifically extracting the logical information from each node. For example, for the node corresponding to the "Submit Button," its logical information is contained in the `events` property, describing the mapping from a "click event" to a series of "response actions" (form validation, conditional branching, API calls). The rendering engine's logic connector dynamically associates (i.e., binds) a click event listener to the corresponding button DOM element in the page structure. The listener's callback function is designed to dynamically execute actions such as "form validation," "conditional judgment," and "API calls" according to the order and conditional branches defined in `events`. The specific implementations of these actions are provided by the rendering engine's pre-built runtime function library. For nodes containing data binding logic information (such as an input box node with the `bindings` property set to `{"value":"{{formData.username}}"), the rendering engine initializes a reactive data model (e.g., a `reactive` object `formData`). Use a reactive system (such as Proxy or Object.defineProperty) to establish a relationship between the expression {{formData.username}} and the value property of the input field DOM element. When the user enters information in the input field, formData.username is automatically updated; when formData.username is modified by the program, the displayed value of the input field is automatically updated.

[0069] According to an embodiment of this application, the page description file is obtained by transforming a unified syntax tree constructed based on the layout settings, style settings, and interaction logic settings of page elements. The interaction logic settings include the mapping relationship between the triggering conditions and response actions of page elements. The nodes of the unified syntax tree represent page elements, and the node attributes contain logical information describing the interaction logic settings. The logical information includes a sequence of triggering conditions and response actions that supports conditional branching and is defined based on a graphical arrangement method. The logical information also includes the association relationship between page element attributes and data models established based on binding expressions.

[0070] In one example, the page description file obtained in this embodiment is generated by a design tool that first constructs a unified syntax tree based on the user's drag-and-drop layout settings for each element of the registration page, style settings for color and size, and interaction logic settings such as button clicks, and then serializes and converts it. The interaction logic settings encoded in this file explicitly include a mapping relationship such as "button click (trigger condition) → execute validation and submit condition (response action)". Each JSON object in the file is a node, representing a specific page element (such as a form or button). The events and other properties within each node are the logical information, which details two core settings: one is a sequence of conditional branches (if-else) defined through the designer's graphical orchestration method, as shown in the events array, from the trigger condition (click) to a series of response actions (validate, callAPI); the other is the association between page element attributes (value) and data models (formData) established by entering {{formData.username}} in the designer's expression editor, as shown in the bindings object. The rendering engine parses and executes this file, which contains the complete design intent, to ultimately generate a dynamic and interactive registration page.

[0071] Based on the above-described dynamic page configuration method, embodiments of this application also provide a dynamic page configuration device. The following will be combined with... Figure 5 The device is described in detail.

[0072] Figure 5 A schematic block diagram of a dynamic page configuration apparatus according to an embodiment of this application is shown.

[0073] like Figure 5 As shown, the dynamic page configuration device 500 of this embodiment includes a page setting module 510, an interaction setting module 520, a syntax tree construction module 530, and a conversion module 540.

[0074] The page setup module 510 is used to set the layout and style of page elements in response to user operations on the visual page. In one embodiment, the page setup module 510 can be used to perform step S310 described above, which will not be repeated here.

[0075] The interaction setting module 520 is used to set interaction logic for page elements in response to logic setting operations. The interaction logic includes the mapping relationship between the triggering conditions of page elements and response actions. In one embodiment, the interaction setting module 520 can be used to execute step S220 described above, which will not be repeated here.

[0076] The syntax tree construction module 530 is used to construct a unified syntax tree based on the layout settings, style settings, and interaction logic. The nodes of the unified syntax tree represent page elements, and the node attributes contain logical information describing the interaction logic. In one embodiment, the syntax tree construction module 530 can be used to execute step S230 described above, which will not be repeated here.

[0077] The conversion module 540 is used to convert the unified syntax tree into a page description file; wherein the page description file is used for parsing by the rendering engine to dynamically generate a target page associated with the interaction logic based on the unified syntax tree. In one embodiment, the conversion module 540 can be used to perform step S240 described above, which will not be repeated here.

[0078] According to an embodiment of this application, the interaction settings module is further configured to respond to the selection of a target page element and its triggering conditions; and to receive and execute configuration instructions for at least one execution action of the triggering conditions in a graphical arrangement; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

[0079] According to an embodiment of this application, the device further includes a first association module, used to establish an association relationship between page element attributes and a data model in response to a binding expression input through an expression editor.

[0080] According to embodiments of this application, any multiple modules among the page setup module 510, interaction setup module 520, syntax tree construction module 530, and conversion module 540 can be merged into one module, or any one of these modules can be split into multiple modules. Alternatively, at least some of the functions of one or more of these modules can be combined with at least some of the functions of other modules and implemented in one module. According to embodiments of this application, at least one of the page setup module 510, interaction setup module 520, syntax tree construction module 530, and conversion module 540 can be at least partially implemented as hardware circuitry, such as field-programmable gate arrays, programmable logic arrays, systems-on-a-chip, systems-on-a-substrate, systems-on-package, application-specific integrated circuits, or implemented in hardware or firmware by any other reasonable means of integrating or packaging circuitry, or implemented in software, hardware, or firmware, or in any appropriate combination of any of these three implementation methods. Alternatively, at least one of the page setup module 510, interaction setup module 520, syntax tree construction module 530, and conversion module 540 may be implemented at least partially as a computer program module, which can perform corresponding functions when the computer program module is run.

[0081] Based on the above-described dynamic page rendering method, embodiments of this application also provide a dynamic page rendering apparatus. The following will be combined with... Figure 6 The device is described in detail.

[0082] Figure 6 A schematic block diagram of a dynamic page rendering apparatus according to an embodiment of this application is shown.

[0083] like Figure 6 As shown, the dynamic page rendering device 600 of this embodiment includes an acquisition module 610, a parsing module 620, a generation module 630, and a second association module 640.

[0084] The acquisition module 610 is used to acquire the page description file. In one embodiment, the acquisition module 610 can be used to perform step S410 described above, which will not be repeated here.

[0085] The parsing module 620 is used to parse the page description file to reconstruct the unified syntax tree. In one embodiment, the parsing module 620 can be used to perform step S420 described above, which will not be repeated here.

[0086] The generation module 630 is used to dynamically generate corresponding page element instances to construct the page structure based on the reconstructed unified syntax tree. In one embodiment, the generation module 630 can be used to perform step S430 described above, which will not be repeated here.

[0087] The second association module 640 is used to dynamically associate the mapping relationship with the corresponding page element instance in the page structure based on the logical information in the reconstructed unified syntax tree nodes. In one embodiment, the second association module 640 can be used to execute step S440 described above, which will not be repeated here.

[0088] According to embodiments of this application, any multiple modules among the acquisition module 610, parsing module 620, generation module 630, and second association module 640 can be merged into one module, or any one of these modules can be split into multiple modules. Alternatively, at least part of the functionality of one or more of these modules can be combined with at least part of the functionality of other modules and implemented in one module. According to embodiments of this application, at least one of the acquisition module 610, parsing module 620, generation module 630, and second association module 640 can be at least partially implemented as hardware circuits, such as field-programmable gate arrays, programmable logic arrays, systems-on-a-chip, systems-on-a-substrate, systems-on-package, application-specific integrated circuits, or other reasonable means of integrating or packaging circuits, or implemented in software, hardware, or firmware, or in any appropriate combination of any of these three implementation methods. Alternatively, at least one of the acquisition module 610, parsing module 620, generation module 630, and second association module 640 can be at least partially implemented as a computer program module, which can perform corresponding functions when the computer program module is run.

[0089] Figure 7 A block diagram schematically illustrates an electronic device suitable for implementing a dynamic page configuration method according to an embodiment of this application.

[0090] like Figure 7 As shown, an electronic device 700 according to an embodiment of this application includes a processor 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory 702 or a program loaded from a storage portion 708 into a random access memory 703. The processor 701 may include, for example, a general-purpose microprocessor, an instruction set processor and / or an associated chipset and / or a dedicated microprocessor. The processor 701 may also include onboard memory for caching purposes. The processor 701 may include a single processing unit or multiple processing units for executing different steps of the method flow according to an embodiment of this application.

[0091] Random access memory 703 stores various programs and data required for the operation of electronic device 700. Processor 701, read-only memory 702, and random access memory 703 are interconnected via bus 704. Processor 701 executes various steps of the method flow according to embodiments of this application by executing programs in read-only memory 702 and / or random access memory 703. It should be noted that the programs may also be stored in one or more memories other than read-only memory 702 and random access memory 703. Processor 701 may also execute various steps of the method flow according to embodiments of this application by executing programs stored in said one or more memories.

[0092] According to embodiments of this application, the electronic device 700 may further include an input / output interface 705, which is also connected to a bus 704. The electronic device 700 may also include one or more of the following components connected to the input / output interface 705: an input section 706 including a keyboard, mouse, etc.; an output section 707 including a cathode ray tube, liquid crystal display, etc., and a speaker, etc.; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card, such as a local area network card, modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the input / output interface 705 as needed. A removable medium 711, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 710 as needed so that computer programs read from it can be installed into the storage section 708 as needed.

[0093] Embodiments of this application also provide a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments; or it may exist independently and not assembled into the device / apparatus / system. The computer-readable storage medium carries one or more programs, which, when executed, implement the method according to the embodiments of this application.

[0094] According to embodiments of this application, the computer-readable storage medium can be a non-volatile computer-readable storage medium, such as including but not limited to: portable computer disks, hard disks, random access memory, read-only memory, erasable programmable read-only memory, portable compact disk read-only memory, optical storage devices, magnetic storage devices, or any suitable combination thereof. In embodiments of this application, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. For example, according to embodiments of this application, the computer-readable storage medium may include the read-only memory 702, and / or random access memory 703, and / or one or more memories other than read-only memory 702 and random access memory 703 described above.

[0095] Embodiments of this application also include a computer program product comprising a computer program containing program code for performing the methods shown in the flowchart. When the computer program product is run on a computer system, the program code is used to cause the computer system to implement the methods provided in the embodiments of this application.

[0096] In one embodiment, the computer program may rely on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may also be transmitted and distributed in the form of signals over a network medium, and may be downloaded and installed via the communication section 709, and / or installed from a removable medium 711. The program code contained in the computer program can be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination thereof.

[0097] In embodiments of this application, the computer program can be downloaded and installed from a network via communication section 709, and / or installed from removable medium 711. When the computer program is executed by processor 701, it performs the functions defined in the system of embodiments of this application. According to embodiments of this application, the systems, devices, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0098] According to embodiments of this application, program code for executing the computer programs provided in the embodiments of this application can be written in any combination of one or more programming languages. Specifically, these computational programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. The program code can be executed entirely on the user's computing device, partially on the user's device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0099] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0100] Those skilled in the art will understand that the features described in the various embodiments of this application can be combined and / or combined in various ways, even if such combinations or combinations are not explicitly described in this application. In particular, the features described in the various embodiments of this application can be combined and / or combined in various ways without departing from the spirit and teachings of this application. All such combinations and / or combinations fall within the scope of this application.< / button>

Claims

1. A dynamic page generation system, characterized by, The method comprises: a design module configured to: provide a visual interface to receive user operations of layout setting, style setting and logic setting of a page element, wherein the logic setting is used to establish a mapping relationship between a trigger condition and a response action of the page element; construct a unified syntax tree based on the operations, wherein a node of the unified syntax tree corresponds to the page element, and a node attribute contains logic information representing the mapping relationship; convert the unified syntax tree into a page description file; a rendering module configured to: obtain the page description file; parse the page description file to reconstruct the unified syntax tree; dynamically generate corresponding page element instances based on the reconstructed syntax tree to form a page structure; dynamically associate the mapping relationship to corresponding page element instances in the page structure according to the logic information in the nodes of the reconstructed syntax tree.

2. The system of claim 1, wherein, The visual interface is configured to: provide a logic setting function through a logic configuration area, wherein the logic configuration area is used to respond to the selection of a target page element and its trigger condition; in a graphical arrangement manner, respond to at least one execution action arranged for the trigger condition; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

3. The system of claim 1 or 2, wherein, The visual interface is further configured to: respond to an input binding expression to establish an association relationship between a page element attribute and a data model; the design module is further configured to record the association relationship as logic information in the corresponding node attribute of the unified syntax tree.

4. A dynamic page configuration method, characterized by, The method comprises: in response to user operations on a visual page, perform layout setting and style setting on a page element; in response to a logic setting operation, set an interactive logic for the page element, wherein the interactive logic comprises a mapping relationship between a trigger condition and a response action of the page element; based on the layout setting, the style setting and the interactive logic, construct a unified syntax tree, wherein a node of the unified syntax tree represents a page element, and a node attribute contains logic information describing the interactive logic; convert the unified syntax tree into a page description file; wherein the page description file is used for a rendering engine to parse, so as to dynamically generate a target page associated with the interactive logic based on the unified syntax tree.

5. The method of claim 4, wherein, The method further comprises: in response to the selection of a target page element and its trigger condition; in a graphical arrangement manner, receive and execute configuration instructions of at least one execution action for the trigger condition; wherein the graphical arrangement supports sequential connection and / or conditional branch connection of multiple execution actions.

6. The method according to claim 4 or 5, characterized in that, The method further comprises: in response to an input binding expression through an expression editor, establish an association relationship between a page element attribute and a data model; and 7. A dynamic page rendering method, characterized by, the method further comprises: obtain a page description file; parse the page description file to reconstruct the unified syntax tree; based on the reconstructed unified syntax tree, dynamically generate corresponding page element instances to construct a page structure; According to the logical information in the reconstructed unified syntax tree node, the mapping relationship is dynamically associated to the corresponding page element instance in the page structure; The page description file is converted from a unified syntax tree constructed based on layout settings, style settings and interactive logic settings of page elements, the interactive logic settings include mapping relationships between trigger conditions and response actions of page elements, nodes of the unified syntax tree represent page elements and node attributes contain logical information describing the interactive logic settings, the logical information includes trigger conditions and response action sequences defined based on graphical arrangement methods and supporting condition branching, and the logical information further includes association relationships between page element attributes and data models established based on binding expressions. 8.An electronic device, comprising: one or more processors; a memory for storing one or more computer programs, characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 4-7.

9. A computer readable storage medium having stored thereon a computer program or instructions, characterized in that, The computer program or instruction is executed by the processor to implement the steps of the method according to any one of claims 4-7.

10. A computer program product comprising computer programs or instructions, characterized in that, The computer program or instruction is executed by the processor to implement the steps of the method according to any one of claims 4-7. The computer program or instruction is executed by the processor to implement the steps of the method according to any one of claims 4-7.

Images