Page building method, device, equipment, medium and program product

Abstract

The embodiments of the present specification disclose a page construction method, device, equipment, medium and program product, which can improve the efficiency and maintainability of page construction in a more flexible manner. The method is applied to a terminal and includes: in response to an access operation for a target page, performing business logic processing through a main container to obtain business data; loading a corresponding target display component from a plurality of display components conforming to a preset interface specification through a version container according to an access scenario identifier carried by the access operation; the preset interface specification is used to define a data model, an event handler and a protocol configuration; injecting the business data into the target display component according to the preset interface specification; and rendering the target display component with the injected business data to construct the target page.

Description

Technical Field

[0001] This specification relates to the field of front-end development technology, and in particular to a page construction method, apparatus, device, medium, and program product. Background Technology

[0002] With the diversification of business needs (such as the same function requiring different visual styles for different brands and holidays), front-end development often faces the need to build pages with consistent underlying business logic but frequent changes in the interface display.

[0003] In related technologies, business logic and user interface presentation are often tightly coupled within the same component or page code. This tight coupling between logic and view forces developers to modify code containing complex business logic when adjusting the page's appearance, increasing the difficulty of page code maintenance and reducing page development efficiency. A more flexible page construction method is needed to improve page construction efficiency and maintainability. Summary of the Invention

[0004] This specification provides a page building method, apparatus, device, medium, and program product that can improve the efficiency and maintainability of page building in a more flexible manner.

[0005] Firstly, embodiments of this specification provide a page construction method applied to a terminal, including:

[0006] In response to access operations to the target page, business logic processing is executed through the main container to obtain business data;

[0007] Based on the access scenario identifier carried by the access operation, the corresponding target display component is loaded from multiple display components that conform to the preset interface specifications through the page-sharing container; the preset interface specifications are used to define the data model, event handles and protocol configuration; the display components are used for visual presentation.

[0008] Inject business data into the target display component according to the preset interface specifications;

[0009] Render the target display component that has been injected with business data to build the target page;

[0010] In response to interactive operations on the target display component, the main container is triggered to execute business logic processing through event handles to obtain updated business data;

[0011] Inject the updated business data into the target display component according to the preset interface specifications;

[0012] Render the target display component that has been injected with the updated business data to update the target page;

[0013] The data model is used to define the data fields that the display component needs to receive; the event handle is used to define the callback function interface triggered by the display component and executed by the main container; the protocol configuration is used to define the injection method of injecting business data into the target display component, and the event callback method of triggering the main container to execute business logic processing by the target display component.

[0014] In one possible implementation, in response to an access operation to the target page, before retrieving business data by executing business logic processing through the main container, the method further includes:

[0015] Obtain the interface display requirements for the target page;

[0016] Based on the interface display requirements, an artificial intelligence model is invoked to generate multiple display components that conform to the preset interface specifications.

[0017] In one possible implementation, in response to an access operation to the target page, business logic processing is performed through the main container to obtain business data, including:

[0018] In response to access operations targeting the target page, page access verification is performed through the main container;

[0019] If the page access verification passes, the main container sends the business data request to the server and receives the business data sent by the server based on the business data request.

[0020] In one possible implementation, in response to an interactive operation on the target display component, the main container is triggered to execute business logic processing via an event handle to obtain updated business data, including:

[0021] In response to interactive actions on the target display component, the main container is triggered to verify the interactive data carried by the interactive action through the event handler;

[0022] If the interaction data verification passes, the main container sends the interaction data to the server and receives updated business data from the server based on the interaction data.

[0023] In one possible implementation, business data is injected into the target display component according to a preset interface specification, including:

[0024] Map business data to a format that matches the data model in the preset interface specification;

[0025] Inject the mapped business data into the target display component.

[0026] Secondly, embodiments of this specification provide a page building apparatus, applied to a terminal, comprising:

[0027] The first response module is used to respond to access operations to the target page, execute business logic processing through the main container, and obtain business data.

[0028] The component loading module is used to load the corresponding target display component from multiple display components that conform to the preset interface specifications through a page-sharing container, based on the access scenario identifier carried by the access operation. The preset interface specifications are used to define the data model, event handles and protocol configuration; the display component is used for visual presentation.

[0029] The first injection module is used to inject business data into the target display component according to the preset interface specifications;

[0030] The first rendering module is used to render the target display component with injected business data in order to build the target page;

[0031] The second response module is used to respond to interactive operations on the target display component, triggering the main container to execute business logic processing through event handles and obtain updated business data;

[0032] The second injection module is used to inject the updated business data into the target display component according to the preset interface specifications.

[0033] The second rendering module is used to render the target display component that has been injected with the updated business data, so as to update the target page;

[0034] The data model is used to define the data fields that the display component needs to receive; the event handle is used to define the callback function interface triggered by the display component and executed by the main container; the protocol configuration is used to define the injection method of injecting business data into the target display component, and the event callback method of triggering the main container to execute business logic processing by the target display component.

[0035] Thirdly, embodiments of this specification provide an electronic device, including: a processor and a memory; the memory stores a computer program, and the processor executes the computer program to implement the method steps provided in the first aspect of embodiments of this specification.

[0036] Fourthly, embodiments of this specification provide a computer storage medium storing multiple instructions adapted for loading by a processor and executing the method steps provided in the first aspect of embodiments of this specification.

[0037] Fifthly, embodiments of this specification provide a computer program product, including a computer program; when the computer program is executed by a processor, it implements the method steps provided in the first aspect of embodiments of this specification.

[0038] The aforementioned page construction methods, devices, electronic devices, computer storage media, and computer program products, in the logic processing stage, respond to page access operations by independently executing business logic processing and acquiring business data through the main container. This completely decouples the implementation of business logic from the interface display, effectively avoiding the embedding of complex logic in the page code and improving the efficiency of page construction. In the dynamic loading stage, based on the access scenario identifier carried by the access operation, the page-sharing container accurately loads the corresponding target display component from multiple display components conforming to preset interface specifications. This enables flexible interface adaptation of the same business function in multiple scenarios such as different brands, events, or tenant groups, without modifying the underlying logic code. This allows the main container used to handle general business logic to be written only once. This allows for adaptation to various visual presentation scenarios, significantly reducing the difficulty of maintaining page code. During the protocol injection phase, business data is injected into the target display component according to a predefined interface specification. This specification clearly defines the data model, event handles, and protocol configuration, ensuring that the main container and the display component interact through standardized interfaces. This reduces the coupling between components and improves the security and stability of core business logic (such as payment and page access control). In the interface rendering phase, the target display component is rendered autonomously based on the injected business data. This ensures that the interface display is entirely driven by compliant components, avoiding tight coupling between logic and view, enabling flexible page construction, and making the target page easy to maintain and extend.

[0039] The entire page building process achieves complete decoupling of business logic and interface display by separating the four stages of business logic processing, dynamic component loading, standardized protocol injection, and autonomous interface rendering at the architectural level. This improves the efficiency and maintainability of page building in a more flexible way. Attached Figure Description

[0040] To more clearly illustrate the technical solutions in the embodiments of this specification, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0041] Figure 1 A schematic diagram of the architecture of a page building system provided for an exemplary embodiment of this specification;

[0042] Figure 2 A flowchart illustrating a page construction method provided for an exemplary embodiment of this specification;

[0043] Figure 3 A flowchart illustrating another page construction method provided as an exemplary embodiment of this specification;

[0044] Figure 4 A schematic diagram of the architecture of a page construction method provided for an exemplary embodiment of this specification;

[0045] Figure 5 A schematic diagram of a page building apparatus provided for an exemplary embodiment of this specification;

[0046] Figure 6 This is a schematic diagram of the structure of an electronic device provided as an exemplary embodiment of this specification. Detailed Implementation

[0047] To make the objectives, technical solutions, and advantages of this specification clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this specification.

[0048] In the description of this specification, it should be understood that the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Those skilled in the art can understand the specific meaning of these terms in this specification based on the specific circumstances. Furthermore, in the description of this specification, unless otherwise stated, "multiple" means two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship.

[0049] The page construction method provided in the embodiments of this specification can be applied to, for example, Figure 1 The page building system shown. Please refer to [link / reference]. Figure 1The page building system includes a main container 11, a display component set 12, and a versioning container 13. The main container 11 is a parent component used to handle general business logic such as business authentication, business routing, business data requests, and business status management; it does not contain the UI (User Interface) design and implementation for specific business logic. The display component set 12 consists of a series of display components (first display component 121, second display component 122, and third display component 123 shown in the diagram) generated based on AI (Artificial Intelligence) models. These display components are only responsible for visual presentation and do not handle complex business logic. Specifically, each display component follows a preset interface specification, receives data according to a data model, and triggers callbacks through event handles. The versioning container 13 is the intermediate management layer connecting the main container 11 and the display component set 12. It can accurately load and instantiate target display components matching the current business scenario from the pre-generated display component set 12 based on the access scenario identifier carried by the current access request (such as different brand identifiers, different activity identifiers, different tenant identifiers, etc.), thereby achieving multi-version management and on-demand loading of UI displays. It should be understood that the main container 11 can encapsulate its own general business processing capabilities into interfaces that can be called externally. For example, business callback functions can be used as event handles for presentation components. When a user interacts with a presentation component, the presentation component returns control to the main container by calling these business callback functions, and the main container executes the actual business logic.

[0050] The following combination Figure 1 This specification describes one application scenario for which the embodiments are applicable:

[0051] During the page initialization and rendering phase, the page building system integrated into the terminal responds to access operations targeting the target page by performing general business logic processing through the underlying core capabilities of the main container 11. This includes performing page access verification (such as verifying whether a user is logged in) and routing based on the verification results. For example, if the verification passes, the terminal requests business data (such as activity titles and images) from the server through the main container 11. If the verification fails, the terminal performs access denial processing through the main container 11, i.e., intercepting data injection and redirecting to the access page. After the terminal obtains the business data, the page building system performs versioning logic processing based on the access scenario identifier (such as brand identifier, activity identifier, tenant identifier, etc.) carried by the access operation. Specifically, the versioning container 13 dynamically loads and instantiates target display components (such as activity participation components in the style of brand A) from the display component set 12 that conforms to the preset interface specifications, based on the access scenario identifier. The preset interface specifications are used to define data models, event handles, and protocol configurations. Subsequently, the main container 11 injects the acquired business data (such as activity titles, activity images, etc.) into the target display component loaded by the page-sharing container 13 according to the preset interface specifications. Finally, the terminal renders the target display component with the injected business data, thereby completing the construction of the target page.

[0052] During the user interaction processing phase, after the target display component captures the user's interaction (such as clicking the "Register for the Event" button), it does not process any business logic. Instead, it bubbles the interaction event to the upper-layer container (i.e., the main container 11) for interaction processing through the event handlers defined in the preset interface specification (such as the onJoinClick business callback function). The main container 11 processes the interaction according to the page framework as follows: First, the main container 11 verifies the interaction data carried by the interaction operation, such as whether the user has the permission to participate in the event. If the verification result is successful, the main container 11 sends a request to the server to obtain the updated business data (such as the updated registration status, remaining event slots, etc.). If the verification result is unsuccessful, the main container 11 does not initiate a data request and directly displays a permission-unavailable message to the user. After obtaining the updated business data from the server, the main container 11 injects the updated business data into the target display component according to the preset interface specification. The terminal then renders the target display component with the injected updated business data, thereby completing the update of the target page.

[0053] It is worth noting that if network request failures or data format errors occur during the page initialization and rendering phase or the user interaction processing phase, the terminal will handle the error through the main container 11 and perform a fallback display on the target page, such as displaying a placeholder image with the message "The network is malfunctioning".

[0054] In one embodiment, such as Figure 2 As shown, a page building method is provided. Taking the application of this method to a terminal-integrated page building system as an example, the method includes the following steps:

[0055] S202: In response to an access operation to the target page, business logic processing is performed through the main container to obtain business data.

[0056] Access to the target page can be initiated by the user in various scenarios, such as directly entering the target page's URL (Uniform Resource Locator) in the browser's address bar, clicking a link pointing to the target page, or completing login authentication on the target page. The main container is the parent component in the page building system used to handle general business logic such as business authentication, business routing, business data requests, and business state management; it does not contain the UI design implementation for specific business logic.

[0057] Optionally, in response to an access operation targeting the target page, the terminal activates the main container to execute general business logic processing. Specifically, the process by which the terminal executes general business logic processing through the main container is as follows: The terminal parses the access request carried by the access operation through the main container, extracts user information from the access request, and then performs page access verification based on the user information. If the page access verification passes, the terminal requests business data such as the activity title and activity image from the server through the main container to prepare for subsequent data injection and page rendering. If the page access verification fails, the terminal performs access denial processing through the main container, that is, intercepts the subsequent data injection process and redirects the page to the access page so that the user can access it again.

[0058] For example, the aforementioned user information may include user status information and user identity information. When the terminal performs page access verification through the main container, it can first verify whether the user has registered based on the user status information. If it is determined that the user has registered, it can verify whether the user has permission to access the target page based on the user identity information. If it is determined that the user has permission to access the target page, the page access verification passes; if it is determined that the user does not have permission to access the target page, the page access verification fails.

[0059] In this embodiment, during the logic processing stage, the terminal responds to page access operations by independently executing business logic processing and obtaining business data through the main container, thereby completely decoupling the implementation of business logic from the interface display. This effectively avoids embedding complex logic in the page code and improves the efficiency of page construction.

[0060] S204: Based on the access scenario identifier carried by the access operation, load the corresponding target display component from multiple display components that conform to the preset interface specifications through the page-sharing container.

[0061] The access scenario identifier is used to distinguish different business contexts. Access scenario identifiers include, but are not limited to, brand identifiers, activity identifiers, and tenant identifiers. The versioning container serves as the intermediate management layer connecting the main container and the display component set 12. Based on the access scenario identifier carried by the current access request, it can accurately load and instantiate the target display component matching the current business scenario from the pre-generated display component set 12, thereby achieving multi-version management and on-demand loading of the UI display. The preset interface specification is used to define the data model, event handles, and protocol configuration. The data model defines the data fields and their types that the display component needs to receive, such as {title: string, imageUrl: string, status: number}. The event handles define the callback function interfaces triggered by the display component and executed by the main container, such as onJoinClick and onSubmit business callback function interfaces. The protocol configuration defines the injection method for injecting business data into the target display component, and the event callback method for the target display component to trigger the main container to execute business logic processing.

[0062] Optionally, after the terminal obtains the business data, it extracts the access scenario identifier from the access request through the main container and executes the versioning logic based on the access scenario identifier through the versioning container. Specifically, the versioning container uses the access scenario identifier as the key to search for the target display component that matches the current access scenario in the display component set. Then, it loads the code definition of the target display component through a dynamic import mechanism, and instantiates the target display component after loading, thereby creating a target display component instance that conforms to the preset interface specification, and subsequently receives business data through this target display component instance.

[0063] In this embodiment, during the dynamic loading phase, the terminal loads the corresponding target display component from multiple display components that conform to the preset interface specifications by using the page-based container according to the access scenario identifier carried by the access operation. This enables flexible interface adaptation of the same business function in multiple scenarios such as different brands, activities, or tenant groups, without modifying the underlying logic code. This allows the main container used to handle general business logic to be adapted to multiple visual presentation scenarios after being written once, greatly reducing the difficulty of page code maintenance.

[0064] S206: Inject business data into the target display component according to the preset interface specifications.

[0065] Optionally, the main container performs preprocessing such as data cleaning and standardization on the acquired raw business data, and maps the preprocessed business data to a format that matches the target display component according to the data model defined in the preset interface specification. Then, according to the protocol configuration defined in the preset interface specification, the mapped business data is injected into the instance of the target display component.

[0066] In this embodiment, during the protocol injection phase, the terminal injects business data into the target display component according to a preset interface specification. The preset interface specification clearly defines the data model, event handle, and protocol configuration, ensuring that the main container and the display component interact with each other through standardized interface specifications. This reduces the coupling between components and improves the security and stability of core business logic (such as payment and page access).

[0067] S208: Render the target display component that has been injected with business data to build the target page.

[0068] Optionally, the front-end framework on the terminal (such as React, Vue, or native JavaScript) executes the rendering function based on the target display component with the injected data, generates the corresponding Document Object Model (DOM) node, and mounts it onto the page to display the target page that contains specific business data and is interactive.

[0069] In this embodiment, during the interface rendering stage, the terminal autonomously completes the rendering of the target display component based on the injected business data, so that the interface display is completely driven by the component that conforms to the specification, avoiding the tight coupling mode between logic and view, realizing flexible page construction, and making the target page easy to maintain and expand.

[0070] The above page construction method achieves complete decoupling of business logic and interface display by separating the four stages of business logic processing, dynamic component loading, standardized protocol injection and autonomous interface rendering at the architectural level. This improves the efficiency and maintainability of page construction in a more flexible way.

[0071] In one embodiment, such as Figure 3 As shown, another page building method is provided. Taking the application of this method to a terminal-integrated page building system as an example, the method includes the following steps:

[0072] S302: Obtain the interface display requirements for the target page.

[0073] Understandably, during the development phase, front-end architects or business personnel can propose interface display requirements for the target page, including business scenario configuration information, based on business product needs, and upload these requirements to the interactive interface of the page building system. These interface display requirements can be either natural language descriptions (e.g., "Based on brand A's style, generate a component containing a large image header, an event title, and a bottom floating registration button. This component receives input parameters conforming to a preset interface specification and calls the onJoinClick event handler when the user clicks the 'Event Registration' button") or UI design drafts.

[0074] S304: Based on the interface display requirements, call the artificial intelligence model to generate multiple display components that conform to the preset interface specifications.

[0075] The Artificial Intelligence (AI) model can be, but is not limited to, a multimodal large model. The predefined interface specification defines the data model, event handlers, and protocol configuration. The data model defines the data fields and their types that the display component needs to receive, such as {title: string, imageUrl: string, status: number}. The event handlers define the callback function interfaces triggered by the display component and executed by the main container, such as onJoinClick and onSubmit. The protocol configuration defines the injection method for injecting business data into the target display component, and the event callback method for the target display component to trigger the main container to execute business logic processing.

[0076] Optionally, the page building system generates prompts based on the interface display requirements and inputs them into a pre-trained AI model. The AI ​​model parses the interface display requirements and generates the corresponding front-end display component code.

[0077] For example, the page building system constructs a prompt based on interface display requirements, such as: "Based on brand A style, generate a component containing a large image header, an event title, and a floating registration button at the bottom. This component receives input parameters conforming to a preset interface specification and calls the onJoinClick event handler when the user clicks the 'Event Registration' button." The page building system then calls an AI model to generate multiple event display component codes in brand A style based on the above prompt. Understandably, the page building system can also construct display components in other brand styles or other event styles by simply modifying the interface display requirements. For example, the prompt can be modified to: "Based on brand B style, generate a component containing a large image header, an event title, and a floating registration button at the bottom. This component receives input parameters conforming to a preset interface specification and calls the onJoinClick event handler when the user clicks the 'Event Registration' button," thereby obtaining multiple event display component codes in brand B style based on the modified prompt.

[0078] In this embodiment, the terminal obtains the interface display requirements and calls the artificial intelligence model to generate multiple display component codes with different styles for the target page, such as event registration component code in the style of brand A, event registration component code in the style of brand B, and event registration component code with a Spring Festival theme. All display component codes conform to the same set of preset interface specifications, so they can be seamlessly integrated into the subsequent business logic container (i.e., the main container). In addition, when it is necessary to update the page visual style (e.g., upgrade from an old version style to a new version style, or switch brand themes), it is only necessary to regenerate the display component code with the new visual style through the artificial intelligence model, without redeploying the business logic code in the main container, which effectively improves the efficiency of page construction and system stability.

[0079] S306: In response to an access operation targeting a page, perform page access validation through the main container.

[0080] Optionally, when a user initiates an access operation to the target page on the terminal (such as entering the URL of the target page, clicking a link pointing to the target page, etc.), the page building system activates the main container. The main container first performs page access verification to determine whether the user has permission to access the target page. Specifically, the main container parses the access request carried by the access operation and extracts the user's status information and user identity information from the access request. Then, it verifies whether the user has registered based on the user's status information. If it determines that the user has registered, it verifies whether the user has permission to access the target page based on the user's identity information. If it is determined that the user has permission to access the target page, the page access verification passes; if it is determined that the user does not have permission to access the target page, the page access verification fails.

[0081] S308: If the page access verification passes, the main container sends the business data request to the server and receives the business data sent by the server based on the business data request.

[0082] Optionally, if the page access verification passes, the terminal requests business data such as the activity title and activity image from the server through the main container to prepare for subsequent data injection and page rendering. If the page access verification fails, the terminal performs access denial processing through the main container, that is, it intercepts the subsequent data injection process and redirects the page to the access page so that the user can revisit it.

[0083] In this embodiment, during the logic processing stage, the terminal responds to page access operations by independently executing general business logic processing through the main container and obtaining business data through interaction with the server. This completely decouples the implementation of business logic from the interface display, effectively avoiding the embedding of complex logic in the page code and improving the efficiency of page construction.

[0084] S310: Based on the access scenario identifier carried by the access operation, load the corresponding target display component from multiple display components that conform to the preset interface specifications through the page-sharing container.

[0085] The access scenario identifier is used to distinguish different business contexts. The access scenario identifier includes, but is not limited to, brand identifier, activity identifier, tenant identifier, etc. The version container is the middle management layer connecting the main container and the display component set 12. It can accurately load and instantiate the target display component that matches the current business scenario from the pre-generated display component set 12 according to the access scenario identifier carried by the current access request, thereby realizing multi-version management and on-demand loading of UI display.

[0086] Optionally, if the access scenario identifier carried by the access operation is a first identifier (such as the old version business scenario identifier), the terminal loads a target display component with a first visual style (such as the old version business scenario style) from multiple display components conforming to the preset interface specifications through a versioning container; if the access scenario identifier carried by the access operation is a second identifier (such as the new version business scenario identifier), the terminal loads a target display component with a second visual style (such as the new version business scenario style) from multiple display components conforming to the preset interface specifications through a versioning container.

[0087] In this embodiment, a segmented container dynamically loads target display components with different visual styles based on the access scenario identifier. This allows the same set of general business logic code (such as authentication, data requests, and error handling) executed by the main container to adapt to the interface display of various brands, activity versions, or tenants. There is no need to repeatedly write or modify the underlying business logic code for different visual styles, greatly improving the reusability of code assets and reducing page development costs.

[0088] S312: Maps business data to a format that matches the data model in the preset interface specification.

[0089] Optionally, the main container performs preprocessing such as data cleaning and standardization on the acquired raw business data, and converts the field names and field types of the preprocessed business data into a flat format that conforms to the data model definition in the preset interface specification, thereby ensuring that the data format of the business data matches the data model in the preset interface specification.

[0090] S314: Inject the mapped business data into the target display component.

[0091] Understandably, the mapped business data fully conforms to the data model defined in the preset interface specification. At this point, the main container can inject the mapped business data into the instance of the target display component according to the protocol configuration defined in the preset interface specification.

[0092] In this embodiment, during the protocol injection phase, the terminal first completes the format adaptation of the business data through the main container, and then injects the business data that meets the data model requirements in the preset interface specification into the instance of the target display component according to the protocol configuration. This ensures that the main container and the display component interact with each other through standardized interface specifications, reduces the coupling between components, and improves the security and stability of core business logic (such as payment and page access).

[0093] S316: Render the target display component that has been injected with business data to build the target page.

[0094] Optionally, the front-end framework on the terminal (such as React, Vue, or native JavaScript) executes the rendering function based on the target display component with the injected data, generates the corresponding Document Object Model (DOM) node, and mounts it onto the page, so that the user finally sees a complete target page that contains specific business data, matches the style with the current business scenario, and is interactive.

[0095] It is worth noting that if an exception occurs during the initialization and rendering phase (such as a network request failure or a data format error), the terminal will also perform error handling through the main container and display a fallback on the page, such as displaying a placeholder image with the message "The network is malfunctioning".

[0096] S318: In response to interactive operations on the target display component, the main container is triggered to execute business logic processing through the event handle to obtain the updated business data.

[0097] The interactive operations of the target display component can be, but are not limited to, user-defined interactive actions such as clicking, swiping, and long-pressing on the target display component.

[0098] Optionally, after the target page is displayed, users typically interact with the target display component on the target page (such as the "Event Registration" button), for example, by clicking the target display component. After the target display component captures this interaction, it does not execute any business logic. Instead, it uses an event handler (such as a business callback function like onJoinClick) to bubble up the interaction event and related interaction data as callback parameters to the upper-level main container for business logic processing, in order to obtain the updated business data.

[0099] In one embodiment, in response to an interactive operation on a target display component, the main container is triggered by an event handle to execute business logic processing and obtain updated business data. This includes: in response to an interactive operation on a target display component, the main container is triggered by an event handle to verify the interactive data carried by the interactive operation; if the interactive data verification passes, the main container sends the interactive data to the server and receives the updated business data sent by the server based on the interactive data.

[0100] Optionally, during the execution of business logic processing, the main container first performs business format and business rule validation on the interactive data carried by the interactive operation. If the interactive data validation passes, the terminal encapsulates the interactive data into an API (Application Programming Interface) request through the main container and sends it to the backend server to obtain updated business data through interaction with the backend server. If the interactive data validation fails, the terminal does not send an API request through the main container and directly displays an "insufficient permissions" message to the user on the target page.

[0101] For example, the interactive data carried by the interactive operation can be, but is not limited to, form input data entered by the user on the target page. During the execution of business logic processing, the main container first performs business format validation and business rule validation on the form input data entered by the user on the target page. For example, it verifies whether the mobile phone number format in the form input data is correct and whether the required fields are empty. If the form input data validation passes, the terminal encapsulates the form input data into an API request through the main container and sends it to the server. After the server processes the API request (completing the registration operation on the backend), it returns updated business data, such as the updated registration status and remaining activity slots. If the form input data validation fails, the terminal does not send an API request through the main container but directly displays a permission-unauthorized message to the user on the target page, such as "Please check if the form is filled out correctly."

[0102] In this embodiment, after the target display component captures the interactive operation, it does not perform any business logic processing itself. Instead, it bubbles the interactive event and the business data it carries to the upper main container through the event handle for business logic processing. This not only ensures the closed loop of business logic, but also achieves physical isolation between visual presentation and business logic, effectively improving the efficiency and maintainability of page construction.

[0103] S320: Inject the updated business data into the target display component according to the preset interface specifications.

[0104] Optionally, the main container maps the updated business data to a format that matches the data model in the preset interface specification, and injects the mapped new business data into the instance of the target display component according to the protocol configuration defined in the preset interface specification.

[0105] S322: Render the target display component that has been injected with the updated business data to update the target page.

[0106] Optionally, the front-end framework detects a change in the input parameters received by the target display component and triggers the target display component to re-render. The target display component generates new DOM nodes based on the updated business data, and the target page is updated accordingly, thereby showing the user the latest status (such as the button changing to "Registered" or displaying a "Registration Successful" message).

[0107] In this embodiment, the terminal responds to interactive operations on the target display component without performing any business logic implementation itself. Instead, it triggers the main container to execute business logic processing through an event handle to obtain updated business data, thus achieving physical-level isolation between visual presentation and business logic. After obtaining the updated business data, the terminal injects the updated business data into the target display component through the main container according to the preset interface specification. Then, it renders the target display component through the front-end framework to update the target page, ensuring a closed loop of business logic.

[0108] The above page construction method achieves complete decoupling of business logic and interface display by separating the four stages of business logic processing, dynamic component loading, standardized protocol injection and autonomous interface rendering at the architectural level. This improves the efficiency and maintainability of page construction in a more flexible way.

[0109] To illustrate the technical solutions of the page construction methods in the embodiments of this specification in detail, specific application examples will be used below in conjunction with... Figure 4 The entire process is described, and it specifically includes the following steps:

[0110] Phase 1: Page Construction Preparation Phase

[0111] 1. The front-end architect writes the main container code and the sub-container code, and agrees on the preset interface specifications. These preset interface specifications define the data model, event handlers, and protocol configuration. Specifically, the data model defines the data fields and their types that the display components need to receive, such as {title: string, imageUrl: string, status: number}; event handlers define the callback function interfaces triggered by the display components and executed by the main container, such as onJoinClick and onSubmit business callback function interfaces; and the protocol configuration defines the injection method for injecting business data into the target display component, and the event callback method for the target display component to trigger the main container to execute business logic processing.

[0112] 2. The front-end architect uploads the UI display requirements for the target page to the page building system integrated into the terminal. These UI display requirements can be described in natural language (e.g., "Generate an event registration page with a large image header, event title, and a floating registration button at the bottom") or in UI design drafts.

[0113] 3. Based on the interface display requirements, the page building system calls the AI ​​model to generate multiple display components that conform to preset interface specifications. Specifically, it performs the following processing:

[0114] 3.1 The page building system constructs prompts based on interface display requirements, such as: "Based on brand A style, generate a component containing a large image header, event title and a floating registration button at the bottom. This component receives input parameters that conform to the preset interface specifications and calls the onJoinClick event handler when the user clicks the 'Event Registration' button."

[0115] 3.2 The page building system calls an AI model (such as a multimodal large model) to generate multiple brand A-style event display component codes based on the above prompts.

[0116] Phase Two: Page Initialization and Rendering

[0117] 1. The page building system responds to user access to the target page by performing page access checks through the main container. The specific processing procedure of the main container is as follows:

[0118] 1.1 The main container parses the access request carried by the access operation and extracts user status information and user identity information from the access request.

[0119] 1.2 The main container verifies whether the user has registered based on the user's status information. If the user has registered, it verifies whether the user has permission to access the target page based on the user's identity information.

[0120] 1.3 If the main container determines that the user has permission to access the target page, the page access verification passes; if the main container determines that the user does not have permission to access the target page, the page access verification fails.

[0121] 2. Once the page access verification is successful, the main container sends the business data request to the server and receives the original business data (such as the activity title, activity image, etc.) sent by the server based on the business data request.

[0122] 3. The main container performs preprocessing such as data cleaning and standardization on the original business data, and maps the preprocessed business data into a format that matches the data model in the preset interface specification.

[0123] 4. The main container passes the mapped business data to the partitioned container and requests rendering.

[0124] 5. The partitioned container identifies the current scenario based on the access scenario identifier (such as brand identifier, activity identifier, tenant identifier, etc.) carried by the access operation. Based on the current scenario, it dynamically loads the corresponding target display component from multiple display components that conform to the preset interface specifications, and the target display component receives the mapped business data.

[0125] 6. The front-end framework (such as React, Vue, or native JavaScript) renders the target display component with injected data to build a complete target page that contains specific business data, has a style that matches the current business scenario, and is interactive. Specifically, this involves the following processing:

[0126] 6.1 The front-end framework executes the rendering function and generates the corresponding Document Object Model (DOM) node based on the target display component of the injected data.

[0127] 6.2 The front-end framework mounts the Document Object Model (DOM) nodes onto the page, so that the user ultimately sees a complete target page that contains specific business data, has a style that matches the current business scenario, and is interactive.

[0128] Phase 3: User Interaction Processing Phase

[0129] 1. The page building system responds to user interactions with the target display component (such as the "Event Registration" button) by triggering callbacks through event handlers (such as the onSubmit business callback function).

[0130] 2. The main container validates the interactive data carried by the interactive operation (such as form input data from the user on the target page). If the validation passes, it sends the interactive data to the server and receives updated business data from the server based on the interactive data. Specifically, it performs the following processing:

[0131] 2.1 The main container performs business format validation and business rule validation on the form input data of the user on the target page, such as validating whether the mobile phone number format in the form input data is correct and whether the required fields in the form are empty.

[0132] 2.2. If the form input data passes validation, the main container encapsulates the form input data into an API request and sends it to the server. After the server processes the API request (i.e., completes the registration operation on the backend), it returns the updated business data, such as the updated registration status and the remaining number of spots for the event.

[0133] 2.3. If the form input data fails validation, the main container will no longer send API requests to the server, but will directly display an permission-invalid message to the user on the target page, such as "Please check if the form is filled in correctly".

[0134] 3. The main container performs preprocessing such as data cleaning and standardization on the updated business data, and maps the preprocessed new business data into a format that matches the data model in the preset interface specification.

[0135] 4. The main container passes the mapped new business data to the version container and requests rendering.

[0136] 5. The target display component loaded from the page-based container receives the mapped new business data.

[0137] 7. The front-end framework detects a change in the input parameters received by the target display component, triggering the target display component to re-render, thereby updating the target page.

[0138] It is worth noting that if network request failures, data format errors, or other abnormal situations occur during the page initialization and rendering phases or user interaction processing phases, the page building system will handle the errors through the main container and perform fallback display on the target page, such as displaying a placeholder image with the message "The network is malfunctioning".

[0139] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0140] Based on the above-mentioned page construction method, such as Figure 5 As shown in the embodiments of this specification, a page building apparatus 500 for implementing the page building method described above is also provided. The page building apparatus 500 includes:

[0141] The first response module 501 is used to respond to access operations for the target page, execute business logic processing through the main container, and obtain business data.

[0142] The component loading module 502 is used to load the corresponding target display component from multiple display components that conform to the preset interface specifications through the page-sharing container, based on the access scenario identifier carried by the access operation; the preset interface specifications are used to define the data model, event handles and protocol configuration; the display component is used for visual presentation.

[0143] The first injection module 503 is used to inject business data into the target display component according to the preset interface specification;

[0144] The first rendering module 504 is used to render the target display component with injected business data in order to build the target page;

[0145] The second response module 505 is used to respond to interactive operations on the target display component, trigger the main container to execute business logic processing through event handles, and obtain updated business data;

[0146] The second injection module 506 is used to inject the updated business data into the target display component according to the preset interface specification;

[0147] The second rendering module 507 is used to render the target display component with the injected updated business data in order to update the target page;

[0148] The data model is used to define the data fields that the display component needs to receive; the event handle is used to define the callback function interface triggered by the display component and executed by the main container; the protocol configuration is used to define the injection method of injecting business data into the target display component, and the event callback method of triggering the main container to execute business logic processing by the target display component.

[0149] In one possible implementation, the page building device 500 further includes a generation module for: obtaining the interface display requirements for the target page; and, based on the interface display requirements, calling an artificial intelligence model to generate multiple display components that conform to preset interface specifications.

[0150] In one possible implementation, the first response module 501 is specifically used to: respond to an access operation for the target page, perform page access verification through the main container; if the page access verification passes, send a business data request to the server through the main container, and receive business data sent by the server based on the business data request.

[0151] In one possible implementation, the second response module 505 is specifically used to: respond to an interactive operation on the target display component, trigger the main container to verify the interactive data carried by the interactive operation through an event handle; if the interactive data verification passes, send the interactive data to the server through the main container, and receive the updated business data sent by the server based on the interactive data.

[0152] In one possible implementation, the first injection module 503 is specifically used to: map business data into a format that matches the data model in the preset interface specification; and inject the mapped business data into the target display component.

[0153] Each module in the aforementioned page building apparatus 500 can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0154] This specification also provides an electronic device, which may be a terminal, and its internal structure diagram may be as follows. Figure 6As shown, this electronic device includes a processor, memory, input / output interface, communication interface, display unit, and input device. The processor, memory, and input / output interface are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interface. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The input / output interface is used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a page-building method. The display unit is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the electronic device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the electronic device, or external keyboards, touchpads, or mice, etc.

[0155] Those skilled in the art will understand that Figure 6 The structures shown are merely block diagrams of a portion of the structure related to the scheme described in this specification, and do not constitute a limitation on the electronic devices to which the scheme described in this specification is applied. Specific electronic devices may include more or fewer components than those shown in the figures, or may combine certain components, or may have different component arrangements.

[0156] In one possible implementation, an electronic device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:

[0157] In response to access operations to the target page, business logic processing is executed through the main container to obtain business data;

[0158] Based on the access scenario identifier carried by the access operation, the corresponding target display component is loaded from multiple display components that conform to the preset interface specifications through the page-sharing container; the preset interface specifications are used to define the data model, event handles and protocol configuration; the target display component is used for visual presentation.

[0159] Inject business data into the target display component according to the preset interface specifications;

[0160] Render the target display component that has been injected with business data to build the target page;

[0161] In response to interactive operations on the target display component, the main container is triggered to execute business logic processing through event handles to obtain updated business data;

[0162] Inject the updated business data into the target display component according to the preset interface specifications;

[0163] Render the target display component that has been injected with the updated business data to update the target page;

[0164] The data model is used to define the data fields that the display component needs to receive; the event handle is used to define the callback function interface triggered by the display component and executed by the main container; the protocol configuration is used to define the injection method of injecting business data into the target display component, and the event callback method of triggering the main container to execute business logic processing by the target display component.

[0165] In one possible implementation, the processor, when executing the computer program, also performs the following steps: obtaining the interface display requirements for the target page; and, based on the interface display requirements, calling an artificial intelligence model to generate multiple display components that conform to preset interface specifications.

[0166] In one possible implementation, the processor, when executing the computer program, also performs the following steps: in response to an access operation to the target page, performs page admission verification through the main container; if the page admission verification passes, sends a business data request to the server through the main container, and receives business data sent by the server based on the business data request.

[0167] In one possible implementation, the processor, when executing the computer program, also performs the following steps: in response to an interactive operation on the target display component, triggers the main container to verify the interactive data carried by the interactive operation through an event handle; if the interactive data verification passes, the main container sends the interactive data to the server and receives updated business data sent by the server based on the interactive data.

[0168] In one possible implementation, the processor, when executing the computer program, also performs the following steps: mapping business data to a format that matches the data model in the preset interface specification; and injecting the mapped business data into the target display component.

[0169] This specification also provides a computer storage medium storing instructions that, when executed on a computer or processor, cause the computer or processor to perform one or more steps in the above embodiments. If the constituent modules of the above-described electronic device are implemented as software functional units and sold or used as independent products, they can be stored in the aforementioned computer storage medium.

[0170] In one possible implementation, a computer storage medium is provided that stores a computer program, which, when executed by a processor, implements the steps in the above method embodiments.

[0171] This specification also provides a computer program product, including a computer program that, when executed by a processor, implements the steps in the above-described method embodiments.

[0172] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this specification are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in or transmitted through a computer-readable storage medium. The computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., Digital Versatile Discs (DVDs)), or semiconductor media (e.g., Solid State Disks (SSDs)).

[0173] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the methods described above. The aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks. Unless otherwise specified, the technical features of this embodiment and its implementation can be combined arbitrarily.

[0174] The embodiments described above are merely preferred embodiments of this specification and are not intended to limit the scope of this specification. Any modifications and improvements made by those skilled in the art to the technical solutions of this specification without departing from the spirit of this specification should fall within the protection scope defined by the claims.

[0175] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired results. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

Claims

1. A page construction method, characterized in that, Applied to a terminal, the method includes: In response to access operations to the target page, business logic processing is executed through the main container to obtain business data; Based on the access scenario identifier carried by the access operation, the corresponding target display component is loaded from the display component set through the page layout container; the display component set consists of multiple display components that conform to the preset interface specification; the preset interface specification is used to define the data model, event handles and protocol configuration; the display component is used for visual presentation; The business data is injected into the target display component through the main container according to the preset interface specification; Render the target display component that has been injected with the business data to construct the target page; In response to interactive operations on the target display component, the main container is triggered to execute business logic processing through the event handle to obtain updated business data; The updated business data is injected into the target display component through the main container according to the preset interface specification; Render the target display component that has been injected with the updated business data to update the target page; The main container is a parent component used to handle general business logic; the page layout container is an intermediate layer connecting the main container and the set of display components; the data model is used to define the data fields that the display components need to receive; the event handle is used to define the callback function interface triggered by the display components and executed by the main container; the protocol configuration is used to define the injection method of injecting the business data into the target display component, and the event callback method of the target display component triggering the main container to execute business logic processing.

2. The method as described in claim 1, characterized in that, Before retrieving business data by executing business logic processing through the main container in response to an access operation to the target page, the method further includes: Obtain the interface display requirements for the target page; Based on the interface display requirements, an artificial intelligence model is invoked to generate multiple display components that conform to preset interface specifications.

3. The method as described in claim 1, characterized in that, The response to an access operation to the target page involves executing business logic processing through the main container to obtain business data, including: In response to access operations targeting the target page, page access verification is performed through the main container; If the page access verification passes, the main container sends a business data request to the server and receives the business data sent by the server based on the business data request.

4. The method as described in claim 1, characterized in that, The step of loading the corresponding target display component from the display component set through the page-sharing container based on the access scenario identifier carried by the access operation includes: When the access scenario identifier carried by the access operation is a first identifier, a target display component with a first visual style is loaded from the display component set through the page container. When the access scenario identifier carried by the access operation is the second identifier, the target display component with the second visual style is loaded from the display component set through the page container.

5. The method as described in claim 1, characterized in that, The response to the interactive operation on the target display component, triggering the main container to execute business logic processing through the event handle, and obtaining updated business data, includes: In response to an interactive operation on the target display component, the main container is triggered by the event handle to verify the interactive data carried by the interactive operation; If the interaction data verification passes, the main container sends the interaction data to the server and receives updated business data from the server based on the interaction data.

6. The method as described in claim 1, characterized in that, The step of injecting the business data into the target display component according to the preset interface specification includes: The business data is mapped to a format that matches the data model in the preset interface specification; The mapped business data is injected into the target display component.

7. A page building apparatus, characterized in that, Applied to a terminal, the device includes: The first response module is used to respond to access operations to the target page, execute business logic processing through the main container, and obtain business data. The component loading module is used to load the corresponding target display component from the display component set through a page-sharing container based on the access scenario identifier carried by the access operation; the display component set consists of multiple display components that conform to a preset interface specification; the preset interface specification is used to define data models, event handles and protocol configurations; the display component is used for visual presentation. The first injection module is used to inject the business data into the target display component through the main container according to the preset interface specification; The first rendering module is used to render the target display component that has been injected with the business data, so as to construct the target page; The second response module is used to respond to interactive operations on the target display component, trigger the main container to execute business logic processing through the event handle, and obtain updated business data; The second injection module is used to inject the updated business data into the target display component through the main container according to the preset interface specification; The second rendering module is used to render the target display component that has been injected with the updated business data, so as to update the target page; The main container is a parent component used to handle general business logic; the page layout container is an intermediate layer connecting the main container and the set of display components; the data model is used to define the data fields that the display components need to receive; the event handle is used to define the callback function interface triggered by the display components and executed by the main container; the protocol configuration is used to define the injection method of injecting the business data into the target display component, and the event callback method of the target display component triggering the main container to execute business logic processing.

8. An electronic device, characterized in that, include: Processor and memory; The memory stores a computer program, and when the processor executes the computer program, it implements the method steps of any one of claims 1-6.

9. A computer storage medium, characterized in that, The computer storage medium stores a plurality of instructions adapted for loading by a processor and executing the method steps as claimed in any one of claims 1-6.

10. A computer program product, characterized in that, It includes a computer program that, when executed by a processor, implements the steps of the method according to any one of claims 1-6.

Images