Page generation method and device, electronic equipment, storage medium and program product

Abstract

The embodiment of the invention provides a page generation method and device, electronic equipment, a storage medium and a program product, and the method can comprise the steps: obtaining a page design file of a first to-be-generated page, analyzing each sub-page design file, and obtaining first module information of a corresponding to-be-generated page module; for each to-be-generated page module, on the basis of the first module information of the to-be-generated page module, identifying candidate page modules matched with the first module information of the to-be-generated page module from the page module library, and then for each to-be-generated page module, identifying the candidate page modules matched with the first module information of the to-be-generated page module; displaying a candidate page module corresponding to each to-be-generated page module to a target object, and in response to a determination operation of the target object on the candidate page module, replacing the first module information of the target page module with the first module information of the to-be-generated page module to obtain a target page module corresponding to the to-be-generated page module, and generating a first target page based on the obtained target page modules.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and more specifically, it relates to a method, apparatus, electronic device, storage medium, and program product for page generation. Background Technology

[0002] Front-end development is the process of creating and presenting World Wide Web (WWW) pages or applications (APPs) to users or operators. When displaying a front-end page to a user or operator, the terminal needs to obtain the corresponding program code from a remote service platform such as a server or cloud platform. Then, through processing the program code, such as encoding execution and rendering, the front-end page is obtained and displayed to the user or operator. The specific process of front-end development typically involves page designers first creating a design draft for the front-end page, followed by programmers converting the design draft into corresponding program code, and finally, rendering the front-end page corresponding to the design draft on the terminal based on this program code.

[0003] Therefore, in related technologies, programmers need to convert the design drafts into program code for the front-end pages, and then generate the front-end pages, which reduces the efficiency of front-end page development. Summary of the Invention

[0004] The purpose of this application is to provide a method, apparatus, electronic device, storage medium, and program product for generating pages that can improve the front-end page development effect. To achieve the above objective, the technical solutions provided by this application are as follows:

[0005] Firstly, a method for generating a page is provided, the method including:

[0006] Obtain the page design file of the first page to be generated; the page design file includes at least one subpage design file, and one subpage design file corresponds to at least one page module;

[0007] Each subpage design file is parsed to obtain the first module information of the corresponding page module to be generated; the first module information of the page module to be generated includes the page resource content and the position information of the page resource content in the first page to be generated.

[0008] For each page module to be generated, based on the first module information of the page module to be generated, candidate page modules that match the first module information of the page module to be generated are identified from the page module library.

[0009] For each page module to be generated, the candidate page module corresponding to each page module to be generated is displayed to the target object. In response to the target object's determination operation for the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated.

[0010] Based on the obtained target page modules, the first target page is generated.

[0011] In one possible implementation, the method further includes:

[0012] In response to a page generation request from the target object, a page generation interface is displayed; the page generation interface displays page generation methods; the page generation methods include: a first page generation method and a second page generation method;

[0013] The first step is to obtain the page design file for the page to be generated, including:

[0014] In response to the target object's selection of the first page generation method, obtain the page design file of the first page to be generated.

[0015] In another possible implementation, the method also includes:

[0016] In response to the page module creation operation triggered by the target object, the UI reconstruction draft upload entry is displayed, and the UI reconstruction draft is obtained through the UI reconstruction draft upload entry; wherein, the page module creation operation includes: the target object's selection operation for the second page generation method, or the module creation operation triggered by the target object's page generation interface under the first page generation method;

[0017] The UI reconstruction draft is analyzed to obtain the UI performance information corresponding to the second page to be generated;

[0018] In response to the target object's input operation on the second module information in the second target page, the second module information is obtained; the second module information includes: module name, module description information, and the cover information corresponding to the module.

[0019] Based on the second module information, the event configurations contained in candidate page modules that match the second module information are filtered from the page module database and displayed to the target object; wherein, the page module database stores page module information generated during the generation process of historically generated pages, and the historically generated page module information includes event information for the page module function configuration during the generation process; wherein, the event information for the page module function configuration includes logical component information for processing module function logic;

[0020] Based on the target object's selection operation for the candidate page module, each initial event and the first initial logic component corresponding to each initial event are determined from the event configuration contained in the candidate page module.

[0021] Obtain the event information and parameter information of the first initial logic component input by the target object for each initial event; wherein, the event information includes: basic information of the event name, event configuration type information and historically configured logic component parameter information, and the parameter information of the first initial logic component includes: input parameter configuration, events thrown by the logic component and data sharing linkage information;

[0022] Each target event is generated based on the parameter information of each initial event and the first initial logic component corresponding to that initial event; wherein, each target event contains at least one first target logic component;

[0023] Based on the binding operation of at least one first target logic component configured for each target event by the target object and the UI performance information, each target logic component and the UI performance information are bound together, and a second target page is generated based on the binding result.

[0024] In another possible implementation, the method also includes:

[0025] If the first preset condition is met, the page event configuration interface is displayed; wherein the first preset condition includes: there is no matching candidate page module in the page module database, or, the creation operation of the logical component triggered by the target object is detected;

[0026] The event configuration interface allows you to obtain the event configuration information entered by the target object. This information includes the event name, basic information, and event configuration type.

[0027] The first initial logical component is selected from the logical component database based on the event configuration information.

[0028] In another possible implementation, the method also includes:

[0029] If the second preset condition is met, then based on the target object's request operation for generating logical components, a selection interface for the logical component generation method will be displayed; wherein, the logical component generation method includes at least one of the following: component orchestration generation method, generation of logical components through HTTP interface registration method, and generation of logical components by uploading code;

[0030] In response to the target object's selection operation for the generation method of the logical component, a second target logical component is generated based on the selected target generation method;

[0031] The second preset condition includes: the first initial logical component is not matched in the logical component database based on the event configuration information, or the creation operation of the logical component triggered by the target object is detected.

[0032] In another possible implementation, if the target generation method is a component orchestration generation method, a second target logical component is generated based on the target generation method, including:

[0033] Obtain the target flow control diagram corresponding to the component to be generated; wherein, the target flow control diagram includes: a start node, an end node, and at least one intermediate node; wherein, an intermediate node represents a logical component;

[0034] Obtain the parameter information corresponding to the start node and the end node respectively. The parameter information includes: input parameter information and output parameter information.

[0035] The second target logic component is generated based on the parameter information corresponding to the target flow control relationship diagram, the starting node, and the ending node.

[0036] In another possible implementation, the target flow control diagram is obtained, including any of the following:

[0037] Obtain the initial flow control diagram and determine the target flow control diagram based on the initial flow control diagram; wherein, the initial flow control diagram is the flow control diagram used when generating logical components during the generation process of historically generated pages;

[0038] Based on the target object's selection operation for historical logic components, obtain each historical logic component, establish the relationship between each historical logic component, and generate the target flow control relationship diagram based on the relationship between each historical logic component.

[0039] In another possible implementation, if the target logical component is generated via an HTTP interface registration method, a second target logical component is generated based on the target generation method, including:

[0040] In response to the target object's selection of the generation method registered via the HTTP interface, the first parameter configuration interface of the second target logic component is displayed;

[0041] Obtain the first parameter configuration information entered by the target object on the first parameter configuration interface. The first parameter configuration information includes: the name information of the second target logic component, the type of the second target logic component, the method used by the second target logic component, the input fields corresponding to the second target logic component, and the output fields used by the second target logic component.

[0042] Based on the configuration information of the first parameter, a second target logical component is generated.

[0043] In another possible implementation, if the target logical component is generated by uploading code, a second target logical component is generated based on the target generation method, including:

[0044] Displays the second parameter configuration interface for the second target logic component;

[0045] The target object obtains the second parameter configuration information entered on the second parameter configuration interface, and generates the target address information corresponding to the second initial logic component; wherein, the target address information is the storage location information of the logic code corresponding to the second initial logic component;

[0046] Based on the target address information, obtain the logic code corresponding to the second initial logic component;

[0047] In response to the target object's adjustment operation on the logic code, the adjusted logic code is obtained, and a second target logic component is generated based on the adjusted logic code.

[0048] In another possible implementation, the UI presentation information includes: at least one UI node; one UI node corresponds to the UI presentation of one module;

[0049] Bind the target logic component to UI performance information, including:

[0050] Based on the triggering operation of the target object, determine the mapping relationship between each target logical component and each UI node; the target logical component includes at least one of the first target logical component or the second target logical component.

[0051] Bind the output parameters of each target logic component to the corresponding UI node.

[0052] Secondly, a page generation apparatus is provided, the apparatus comprising:

[0053] The first acquisition module is used to acquire the page design file of the first page to be generated; the page design file includes at least one subpage design file, and one subpage design file corresponds to at least one page module;

[0054] The first parsing module is used to parse each subpage design file to obtain the first module information of the corresponding page module to be generated; wherein, the first module information of the page module to be generated includes the page resource content and the position information of the page resource content in the first page to be generated;

[0055] The identification module is used to identify, for each page module to be generated, a candidate page module that matches the first module information of the page module to be generated from the page module library.

[0056] The target page module acquisition module is used to display the candidate page module corresponding to each page module to be generated to the target object. In response to the target object's determination operation of the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated.

[0057] The first generation module is used to generate the first target page based on the obtained target page modules.

[0058] In one possible implementation, the device further includes: a first display module, wherein,

[0059] The display module is used to respond to the page generation request operation of the target object and display the page generation interface; wherein, the page generation interface displays the page generation method; the page generation method includes: a first page generation method and a second page generation method;

[0060] Specifically, when the first acquisition module acquires the page design file of the first page to be generated, it is used for:

[0061] In response to the target object's selection of the first page generation method, obtain the page design file of the first page to be generated.

[0062] In another possible implementation, the device further includes: a second display module, a second acquisition module, a second parsing module, a third acquisition module, a first filtering module, a determining module, a fourth acquisition module, a second generation module, and a third generation module, wherein,

[0063] The second display module is used to display the UI reconstruction draft upload entry in response to the page module creation operation triggered by the target object;

[0064] The second acquisition module is used to acquire the UI reconstruction draft through the UI reconstruction draft upload entry; wherein, the page module creation operation includes: the target object's selection operation for the second page generation method, or the module creation operation triggered by the target object's page generation interface under the first page generation method;

[0065] The second parsing module is used to parse the UI reconstruction draft to obtain the UI performance information corresponding to the second page to be generated;

[0066] The third acquisition module is used to acquire the second module information in response to the target object's input operation on the second module information in the second target page; the second module information includes: module name, module description information and cover information corresponding to the module.

[0067] The first filtering module is used to filter out the event configurations contained in candidate page modules that match the information of the second module and display them to the target object; wherein, the page module database stores page module information generated during the generation process of historically generated pages, and the historically generated page module information includes event information for the page module function configuration during the generation process; wherein, the event information for the page module function configuration includes logical component information for processing module function logic;

[0068] The determining module is used to determine each initial event and the first initial logic component corresponding to each initial event from the event configuration contained in the candidate page module based on the selection operation of the target object for the candidate page module.

[0069] The fourth acquisition module is used to acquire the event information and parameter information of the first initial logic component input by the target object for each initial event; wherein, the event information includes: basic information of the event name, event configuration type information and historically configured logic component parameter information, and the parameter information of the first initial logic component includes: input parameter configuration, events thrown by the logic component and data sharing linkage information;

[0070] The second generation module is used to generate each target event based on each initial event and the parameter information of the first initial logic component corresponding to the initial event; wherein the target event contains at least one first target logic component;

[0071] The third generation module is used to bind each target logical component and the UI performance information based on the binding operation of at least one first target logical component configured for each target event by the target object and the UI performance information, and generate a second target page based on the binding result.

[0072] In another possible implementation, the device further includes: a third display module, a fifth acquisition module, and a second filtering module, wherein,

[0073] The third display module is used to display the page event configuration interface if the first preset condition is met; wherein the first preset condition includes: there is no matching candidate page module in the page module database, or the creation operation of the logical component triggered by the target object is detected;

[0074] The fifth acquisition module is used to acquire the event configuration information input by the target object through the event configuration interface; the event configuration information includes: basic information of the event name and event configuration type information;

[0075] The second filtering module is used to filter the first initial logical component from the logical component database based on event configuration information.

[0076] In another possible implementation, the device further includes: a fourth display module and a fourth generation module, wherein,

[0077] The fourth display module is used to display a selection interface for the logical component generation method based on the target object's request operation for generating logical components if the second preset condition is met; wherein, the logical component generation method includes at least one of the following: component orchestration generation method, generation of logical components through HTTP interface registration method, and generation of logical components by uploading code.

[0078] The fourth generation module is used to respond to the target object's selection operation for the generation method of the logical component, and generate a second target logical component based on the selected target generation method;

[0079] The second preset condition includes: the first initial logical component is not matched in the logical component database based on the event configuration information, or the creation operation of the logical component triggered by the target object is detected;

[0080] In another possible implementation, if the target generation method is a component orchestration generation method, the fourth generation module, when generating the second target logical component based on the target generation method, is specifically used for:

[0081] Obtain the target flow control diagram corresponding to the component to be generated; wherein, the target flow control diagram includes: a start node, an end node, and at least one intermediate node; wherein, an intermediate node represents a logical component;

[0082] Obtain the parameter information corresponding to the start node and the end node respectively. The parameter information includes: input parameter information and output parameter information.

[0083] The second target logic component is generated based on the parameter information corresponding to the target flow control relationship diagram, the starting node, and the ending node.

[0084] In another possible implementation, the fourth generation module, when acquiring the target flow control diagram, is specifically used for any of the following:

[0085] Obtain the initial flow control diagram and determine the target flow control diagram based on the initial flow control diagram; wherein, the initial flow control diagram is the flow control diagram used when generating logical components during the generation process of historically generated pages;

[0086] Based on the target object's selection operation for historical logic components, obtain each historical logic component, establish the relationship between each historical logic component, and generate the target flow control relationship diagram based on the relationship between each historical logic component.

[0087] In another possible implementation, if the target logical component is generated via a generation method registered through an HTTP interface, the fourth generation module, when generating the second target logical component based on the target generation method, specifically performs the following:

[0088] In response to the target object's selection of the generation method registered via the HTTP interface, the first parameter configuration interface of the second target logic component is displayed;

[0089] Obtain the first parameter configuration information entered by the target object on the first parameter configuration interface. The first parameter configuration information includes: the name information of the second target logic component, the type of the second target logic component, the method used by the second target logic component, the input fields corresponding to the second target logic component, and the output fields used by the second target logic component.

[0090] Based on the configuration information of the first parameter, a second target logical component is generated.

[0091] In another possible implementation, if the target logical component is generated by uploading code, the fourth generation module, when generating the second target logical component based on the target generation method, is specifically used for:

[0092] Displays the second parameter configuration interface for the second target logic component;

[0093] The target object obtains the second parameter configuration information entered on the second parameter configuration interface, and generates the target address information corresponding to the second initial logic component; wherein, the target address information is the storage location information of the logic code corresponding to the second initial logic component;

[0094] Based on the target address information, obtain the logic code corresponding to the second initial logic component;

[0095] In response to the target object's adjustment operation on the logic code, the adjusted logic code is obtained, and a second target logic component is generated based on the adjusted logic code.

[0096] In another possible implementation, the UI presentation information includes: at least one UI node; one UI node corresponds to the UI presentation of one module;

[0097] The third generation module, when binding the target logical components with UI presentation information, is specifically used for:

[0098] Based on the triggering operation of the target object, determine the mapping relationship between each target logical component and each UI node; the target logical component includes at least one of the first target logical component or the second target logical component.

[0099] Bind the output parameters of each target logic component to the corresponding UI node.

[0100] Thirdly, embodiments of this application also provide an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the page generation method provided by any possible implementation of the first aspect.

[0101] Fourthly, embodiments of this application also provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the page generation method provided by any possible implementation of the first aspect.

[0102] Fifthly, embodiments of this application also provide a computer program product, which includes a computer program that, when executed by a processor, implements the page generation method provided by any possible implementation of the first aspect.

[0103] The beneficial effects of the technical solution provided in this application are as follows:

[0104] This application provides a method, apparatus, electronic device, storage medium, and program product for page generation. Compared with related technologies, in this application embodiment, after obtaining the page design file of a first page to be generated, the page design file includes at least one sub-page design file, and each sub-page design file corresponds to at least one page module. By parsing each sub-page design file, the first module information of the corresponding page module to be generated is obtained. The first module information includes page resource content and the position information of the page resource content in the first page to be generated. For each page module to be generated, a candidate page module that matches the first module information of the page module to be generated is identified from the page module library. Then, in response to the target object's determination operation for the candidate page module, the first module information of the target page module is replaced with the first module information of the page module to be generated to obtain the target page module corresponding to the page module to be generated. Then, based on the obtained target page modules, the first target page is generated. In this embodiment of the application, by automatically parsing the page design file, the page module to be replaced and the corresponding candidate module can be obtained. By selecting a certain module from the candidate modules by the target object, the page information can be replaced, thereby generating the first target page. This eliminates the need for developers to convert it into program code and then generate the front-end page, thus improving the efficiency of front-end page development. Attached Figure Description

[0105] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0106] Figure 1a A diagram illustrating the creation of applications in related technologies;

[0107] Figure 1b A schematic diagram illustrating the creation of an application editor interface in related technologies;

[0108] Figure 1c A diagram illustrating the addition of existing components to related technologies;

[0109] Figure 1d A diagram illustrating the configuration of component properties and events in related technologies;

[0110] Figure 1e This is a schematic diagram illustrating the management of a personal component library in related technologies.

[0111] Figure 1f A diagram illustrating the addition of custom components to related technologies;

[0112] Figure 1g This is a diagram illustrating the application page published in related technologies.

[0113] Figure 2This is a schematic diagram of the page generation method in the embodiments of this application;

[0114] Figure 3a This is a schematic diagram of the first step of intelligent parsing and group uploading of design drafts in an embodiment of this application;

[0115] Figure 3b This is a schematic diagram of the second step of intelligent parsing and group uploading of design drafts in an embodiment of this application;

[0116] Figure 3c This is a schematic diagram of the third step of intelligent parsing and group uploading of design drafts in an embodiment of this application;

[0117] Figure 3d This is a schematic diagram of the fourth step of intelligent parsing and group uploading of design drafts in an embodiment of this application;

[0118] Figure 3e This is a schematic diagram of the fifth step of intelligent parsing and group uploading of design drafts in an embodiment of this application;

[0119] Figure 4a This is a schematic diagram illustrating the first step in creating a new page and clicking "Add" in this embodiment of the application.

[0120] Figure 4b This is a schematic diagram illustrating the second step of selecting automatic parsing and creation in the embodiments of this application;

[0121] Figure 4c This is a schematic diagram illustrating the selection of automatically parsed and created design drafts in the third step of the embodiments of this application;

[0122] Figure 5a This is a schematic diagram illustrating the first step of rendering and displaying the design draft page in the replacement design draft module of this application embodiment;

[0123] Figure 5b This is a schematic diagram of the second step of the replacement design draft module in the replacement design draft module of this application embodiment;

[0124] Figure 6a This is a schematic diagram illustrating the effect of the replaced module in an embodiment of this application;

[0125] Figure 6b This is another schematic diagram illustrating the effect of the replaced module in the embodiments of this application;

[0126] Figure 7 This is a schematic diagram of the core process of the PS plugin in the embodiments of this application;

[0127] Figure 8 This is a schematic diagram illustrating the process of converting the reconstructed user interface draft into a page in an embodiment of this application;

[0128] Figure 9aThis is a schematic diagram illustrating the first step of entering the event panel in the event panel configuration logic component of this application embodiment;

[0129] Figure 9b A schematic diagram of the second step event editing panel in the event panel configuration logic component of this application embodiment;

[0130] Figure 9c A schematic diagram illustrating the third step of searching the global logic component in the event panel configuration logic component of this application embodiment;

[0131] Figure 10 A schematic diagram illustrating the configuration logic components of the event panel in this application embodiment;

[0132] Figure 11 This is a schematic diagram of the event list panel in an embodiment of this application;

[0133] Figure 12 This is a schematic diagram of the event linkage and logic component protocol in the embodiments of this application;

[0134] Figure 13 This is a schematic diagram illustrating the method of selecting the generation logic component in the embodiments of this application;

[0135] Figure 14 This is a schematic diagram illustrating the process of entering the orchestration stage in an embodiment of this application;

[0136] Figure 15 This is a schematic diagram of the HTTP registration logic component in an embodiment of this application;

[0137] Figure 16a This is a schematic diagram illustrating the addition of logical components in the embodiments of this application;

[0138] Figure 16b This is a schematic diagram illustrating the addition of logical components in the embodiments of this application;

[0139] Figure 17 This is a schematic diagram of the orchestration logic components in an embodiment of this application;

[0140] Figure 18 This is a schematic diagram illustrating the filling of logic component information in the embodiments of this application;

[0141] Figure 19 This is a schematic diagram illustrating the multiplexing of programming logic in the embodiments of this application;

[0142] Figure 20a This is a schematic diagram of the first step of the data field binding process in the embodiments of this application;

[0143] Figure 20b This is a schematic diagram of the second step of the data field binding process in an embodiment of this application;

[0144] Figure 20cThis is a diagram of the Runtime layer architecture in the embodiments of this application;

[0145] Figure 21 The link diagram is used for protocol conversion in the embodiments of this application;

[0146] Figure 22 This is a schematic diagram illustrating the page protocol structure in an embodiment of this application;

[0147] Figure 23 This is a schematic diagram illustrating the binding of operational items in the embodiments of this application;

[0148] Figure 24 This is a schematic diagram of the form generation on the right after landing in this embodiment of the application;

[0149] Figure 25 This is a schematic diagram of the form generation editor in an embodiment of this application;

[0150] Figure 26 This is a schematic diagram of the publishing page in an embodiment of this application;

[0151] Figure 27 This is a schematic diagram of warehouse address configuration in an embodiment of this application;

[0152] Figure 28 This is a schematic diagram of the pipeline constructed in the background in the embodiments of this application;

[0153] Figure 29 This is a schematic diagram of the device structure for page generation in the embodiments of this application;

[0154] Figure 30 This is a schematic diagram of the device structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0155] The embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the embodiments described below with reference to the accompanying drawings are exemplary descriptions for explaining the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions of the embodiments of this application.

[0156] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the terms “comprising” and “including” as used in embodiments of this application mean that the corresponding feature can be implemented as the presented feature, information, data, step, operation, element, and / or component, but do not exclude implementation as other features, information, data, step, operation, element, component, and / or combinations thereof supported by the art. It should be understood that when we say that an element is “connected” or “coupled” to another element, the one element can be directly connected or coupled to the other element, or it can mean that the one element and the other element establish a connection relationship through an intermediate element. Furthermore, “connected” or “coupled” as used herein can include wireless connection or wireless coupling. The term “and / or” as used herein indicates at least one of the items defined by the term; for example, “A and / or B” can be implemented as “A,” or as “B,” or as “A and B.” When describing multiple (two or more) items, if the relationship between the multiple items is not explicitly defined, the multiple items can refer to one, several or all of the multiple items. For example, the description of "parameter A includes A1, A2, A3" can be implemented as parameter A includes A1 or A2 or A3, or it can be implemented as parameter A includes at least two of the three items A1, A2 and A3.

[0157] To better understand the embodiments provided in this application, some terms are explained below:

[0158] Events: Actions that occur within the runtime page or operations performed by the user (operator) (such as clicking to pay, initializing a query, etc.);

[0159] A logic component is an executable piece of business logic code with input and output parameters. It responds to events (such as page redirection, reporting, payment, and lottery), and is sometimes called an "action" on low-code platforms. It may or may not be related to the UI, but its key feature is that it can emit events for use by logical components within the module.

[0160] Linkage: Linkage and interaction between multiple logical components (e.g., after the payment component completes the payment, the lottery component is triggered to draw a prize).

[0161] Module: refers to a component in the front-end field, such as a React component, which is a major component of a page; it includes static UI structure and logical components.

[0162] Page: Composed of multiple modules, a landing page with content must consist of at least one module;

[0163] Template: A page containing configurable modules, that is, a page with configurable attributes. Through the configuration items of the modules, a set of templates can be used to generate pages with various UI appearances.

[0164] Operational Item Configuration Form: Located in the configuration panel on the right side of the low-code application, changes to the form affect the module, thereby triggering changes to the module. This supports more flexible operational configurations and visual linkages.

[0165] Page Protocol: A JSON data protocol constrained by the low-code editor, describing information about all modules within the page;

[0166] Design Module: The part of the page DSL generated after the PS plugin intelligently parses the PSD file that can be replaced as a module;

[0167] In related technologies, a certain low-code platform also uses a drag-and-drop interface for development and visual configuration to build web applications. Currently, it offers three ways to create applications: creating from a blank canvas (building from scratch); creating from Excel (automatically generating the application based on Excel data); and creating from a template (quickly completing application building by selecting existing sections). The first method will be mainly introduced below.

[0168] After entering the editor page from a blank creation ( Figures 1a-1b You can drag in existing components and configure their properties on the right (see...). Figures 1c-1d As can be seen from the component tabs on the right, the drag-and-drop components in the Weda system are divided into three types: "Official Components," "Blocks," and "Custom Components." Official components are commonly used basic components built into the system library, such as text components, image components, and layout components. Block components are custom components developed by the official team based on common application scenarios and combined with basic components, providing users with a specific function to drag and drop, reducing the need for users to manually configure and develop components for common functions, such as image banners and contact us icons. Custom components are developed and imported using the official scaffolding when no suitable component is available (see [link to custom components]). Figures 1e-1f After completing the configuration, you can publish the application. Figure 1g ).

[0169] Low-code platforms also need to be differentiated for different business scenarios. Most low-code platforms on the market primarily support B2B management consoles, enterprise office applications, and task workflows. These types of products focus more on the flexibility of the low-code platform itself and scenario solutions. The aforementioned low-code platform is no exception; it can only configure existing UI components and requires users to upload UI component assets themselves. If there are components that do not meet the requirements, users still need to manually develop them locally using scaffolding, convert them into UI components, bind events, and upload them to the platform. This does not truly eliminate the need for traditional manual coding.

[0170] Within our business scenario, as the number of integrated businesses and the user base continue to grow, we've found that different businesses have increasingly stronger demands for service customization, and they expect us to support a wider variety of marketing campaigns and e-commerce models—over a hundred different marketing campaigns and e-commerce services alone. If we continue with the traditional development model, developing and delivering services one by one for each business, it will bring several system-level problems:

[0171] 1. Businesses have a high demand for skin customization, and the UI often needs to be changed. For example, the H5 page of a common C-end lottery activity has at least 7 different UI presentation styles. In our traditional development model, UI components and logic components are coupled, which makes it difficult to reuse the original logic, resulting in low efficiency and long delivery cycles.

[0172] 2. The diverse and personalized requirements of each business unit result in complex and highly varied code logic, which can easily become a stack of unique logic and configurations for each business unit. This makes it difficult for new employees to take over, increases the likelihood of bugs in the production environment, and makes it impossible to guarantee production quality.

[0173] 3. Traditional development processes involve repetitive and mechanical work, which prevents human resources from being fully utilized to do more innovative or productivity-enhancing tasks.

[0174] We believe that low-code platforms at this stage need to focus on addressing the complexity and variability of UIs and the personalized differences in logic, helping developers solve efficiency issues and helping businesses achieve efficient operations. Therefore, in our business scenario, designing a reasonable low-code platform that developers can use, with more granular decomposition and control over UI and logic, and adding more self-service and online mechanisms for inefficient processes has become a major approach and goal.

[0175] To address the aforementioned technical challenges, this application proposes a standardized, intelligent, engineered, and highly efficient online configuration process for producing front-end page templates, based on the concept of design-driven development. This process includes two production flows: automatic parsing and creation, and creation from a blank canvas. After the creation process is complete, the system allows for page preview and publishing, with automatic code generation. This entire process integrates with real-world development scenarios, expressing the development process of a module or page template in this way to improve development delivery efficiency.

[0176] Furthermore, this application embodiment is based on the idea of ​​design-driven development, and proposes a business process for producing front-end page templates through standardized, intelligent, engineered, and highly efficient online configuration, which includes two production processes: automatic parsing and creation, and creation from a blank canvas.

[0177] The automatic parsing and creation process mainly involves the designer creating a page design draft according to design specifications. Within Photoshop, a plugin intelligently parses the PSD design draft file (referring to designs created using Photoshop) to generate and upload the page description information (DSL) and elements within the design draft. When generating a page through the system platform, after selecting to use the design draft, this description information is converted into the editor's page protocol, allowing for rendering and display in the visual editor canvas. When the user (operator) configures the page, the system automatically identifies the page protocol and uses recognition algorithms, such as semantic recognition, type recognition, and style recognition, to recommend modules more similar to the current PSD page. It also compares and replaces content based on similarity, allowing for quick replacement and reuse. During replacement, the system automatically extracts existing UI elements from the design draft and intelligently replaces them with the replacement module, eliminating the need for manual uploading and achieving a one-click skinning effect.

[0178] The initial creation process from a blank canvas allows users (operators) to quickly fill and build pages through a graphical drag-and-drop interface. It also enables rapid output of business modules via UI refactoring uploads, operational form generation, event linkage configuration, visual logic component orchestration, and data field binding. UI refactoring uploads are automatically generated using a scaffolding tool and uploaded to the system. Operational form generation uses a drag-and-drop interface within the editor, generating forms with zero code. Event linkage configuration binds lifecycles and the logic components to be executed within each lifecycle to UI modules and their elements. Visual logic component orchestration generates logic components for event linkage configuration. Data field binding selects and binds the results of the executed logic components to elements within the UI module, ultimately driving UI changes. UI changes essentially change the fields returned by the logic components. This process allows for the reuse of both UI and logic, and leverages logic orchestration capabilities to achieve rapid generation and combination of logic.

[0179] After completing the above creation process, you can preview and publish the page through the system, and automatically generate the page code.

[0180] This application's embodiments express the development process of a module or page template in a flowchart format through two production processes: automatic parsing and creation, and creation from a blank canvas, as well as an automatic code generation process for preview and release. Combined with our framework engine, it achieves end-to-end online configuration. The core is the intelligent recognition and recommendation of early-stage design drafts, visual building, and logical component orchestration. Recognition algorithms and intelligent material replacement solve the problems of manual splicing and uploading materials in page building; logical orchestration solves the problems of logic reuse and combination; and visual building achieves online configuration. In the middle, we use a Runtime layer as a bridge between UI components and logical components, combined with a series of built-in development tools, to achieve a one-stop development service.

[0181] Furthermore, this application's embodiments are based on the design-driven development (DWD) approach, proposing a standardized, intelligent, engineered, and highly efficient online configuration process for producing front-end page templates. This process includes two production flows: automatic parsing and creation, and creation from a blank canvas. After completing the creation process, the system allows for page preview and publishing, with automatic code generation for page construction. This entire business process integrates with real-world development scenarios, expressing the development process of a module or page template in this way to improve development delivery efficiency.

[0182] Compared to traditional low-code platforms on the market, the process described above, in this embodiment, is tailored to our business scenario, expressing the development process of a module or page template in a flow-based manner. Combined with a framework engine, it achieves end-to-end online configuration. The core of the architecture is the intelligent recognition and recommendation of the initial design draft, visual construction, and logical component orchestration. Recognition algorithms and intelligent material replacement solve the problems of manual splicing and uploading materials during page construction; logical component orchestration solves the problems of logic reuse and combination; and visual construction achieves online configuration. In the middle, we use a Runtime layer as a bridge between UI components and logical components, combined with a series of built-in development tools, to achieve a one-stop development service.

[0183] Specifically, this application provides a method for generating a page, which can be executed by an electronic device. In this application embodiment, the electronic device can be a terminal device or a server, such as... Figure 2 As shown, the method may include:

[0184] Step S201: Obtain the page design file of the first page to be generated.

[0185] The page design file includes at least one subpage design file, and each subpage design file corresponds to at least one page module.

[0186] In the embodiments of this application, the page design file of the first page to be generated can be generated by an electronic device or implemented by human operation, such as a page design draft (i.e., a page design file) completed by a designer according to design specifications.

[0187] Furthermore, within Photoshop, a plugin is used to group and package the page design drafts according to the delivery requirements before uploading (see...). Figures 3a-3e (This refers to a set of page design files, where each set of page design files constitutes a subpage design file and corresponds to at least one page module. See the figure for details.) Figures 3a-3e As shown, the target object can select a grouping tag, for example, select the points redemption tag, and then parse the page design file of the first page to be generated so that the page design file of the first page to be generated can be grouped based on the selected points redemption tag to obtain the design files of each subpage.

[0188] Step S202: Parse each subpage design file to obtain the first module information of the corresponding page module to be generated.

[0189] The first module information of the page to be generated includes page resource content and the position information of the page resource content in the first page to be generated. In this embodiment, the page resource content may include: image resource content and text resource content, and the position information of the page resource content in the first page to be generated is also the position information of the image and text; furthermore, the first module information may also include: group information.

[0190] Specifically, such as Figures 4a-4c As shown, after entering the system platform, click the menu "Page Link" to enter, click "Create Page Template," select "Automatic Parsing and Creation," fill in the basic information, select the group of uploaded design drafts, and click "Save and Next" to enter the visual editor page to obtain the first module information of the page module to be generated. In this embodiment, the basic information filled in may include: the terminal (mobile or PC) to which the page is applicable, the page name, page description information, etc.

[0191] Step S203: For each page module to be generated, based on the first module information of the page module to be generated, identify the candidate page module that matches the first module information of the page module to be generated from the page module library.

[0192] Specifically, after entering the visual editor page, the visual editor canvas renders and displays the design draft page, and can also display the page modules to be generated, such as... Figures 5a-5b As shown, the page modules to be generated may include: 1. Design draft module, 2. Design draft module, 3. Design draft module, and 4. Design draft module;

[0193] Furthermore, candidate page modules corresponding to each page module can also be displayed. In this embodiment, when displaying each page module, the candidate page modules corresponding to each page module can be displayed. Alternatively, when the operator selects a page module, the candidate page modules corresponding to that page module can be displayed. For example, if the operator selects a design draft module (1, design draft module), the candidate page modules corresponding to that design draft module can be displayed.

[0194] Step S204: For each page module to be generated, display the candidate page module corresponding to each page module to be generated to the target object. In response to the target object's determination operation for the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated.

[0195] In this embodiment of the application, the user (operator) can click on a design module to perform intelligent module identification and replacement (see...). Figures 5a-5b After replacing the module, the materials on the design draft will also be replaced within the module, completing a one-click skin change (see...). Figure 6a and Figure 6b ).

[0196] Step S205: Based on the obtained target page modules, generate the first target page.

[0197] For example, such as Figure 6a and Figure 6b As shown, four target page modules can be obtained in the above manner, and the first target page can be generated based on the four target page modules obtained.

[0198] Furthermore, the method may further include: step Sa (not shown in the figure). In this embodiment, step Sa may be performed before obtaining the page design file of the first page to be generated, or step Sa may be performed after obtaining the page design file of the first page to be generated. This is not limited in this embodiment.

[0199] Step Sa: In response to the page generation request operation of the target object, display the page generation interface.

[0200] The page generation interface displays page generation methods, including a first page generation method and a second page generation method. In this embodiment, the first page generation method can be an automatic parsing and creation method, and the second page generation module can be a creation method from blank space.

[0201] Specifically, continue as Figures 4a-4b As shown, after triggering the "Page" operation, the "Add Page" operation is triggered. That is, at this time, in response to the page generation request operation of the target object, the page generation interface is displayed, so that the target object can choose from the displayed page generation interface to generate the target page automatically or to generate the target page from a blank page.

[0202] Furthermore, based on step Sa, obtaining the page design file of the first page to be generated in step S201 may specifically include: in response to the target object's selection operation for the first page generation method, obtaining the page design file of the first page to be generated. In this embodiment, the page design file of the first page to be generated is uploaded in advance by the designer. When the target object's selection operation for the first page generation method is detected (that is, the selection operation for the automatic parsing and creation method), the page design file of the first page to be generated previously uploaded by the designer can be obtained and parsed.

[0203] Another possible implementation of this application embodiment is that the page design file of the first page to be generated is uploaded by the target object (which can refer to the R&D personnel) instead of the designer uploading it in advance. Specifically, in response to the target object's selection operation for the first page generation method (selection operation for the automatic parsing and creation method), the page design file upload entry is displayed, and then the page design file uploaded by the target object is obtained through the page design file upload entry.

[0204] Continue as Figure 4b As shown, the page generation interface allows users to choose between two page generation methods: the first method (automatic parsing and creation) and the second method (creation from a blank canvas). If the user chooses the automatic parsing and creation method, the page design file uploaded by the target object can be retrieved through the page design file upload entry.

[0205] Furthermore, in this embodiment, the page design file upload entry and the page generation method selection page can be displayed on the same interface, or they can be displayed on different interfaces, such as... Figure 4b As shown, the page design file upload entry (i.e., the "Select Design Draft" button) and the page generation method selection trigger area are displayed on the same interface.

[0206] Furthermore, in the above embodiments, the uploaded page design draft can be used to obtain the first target page through parsing and recognition, as shown in the example. Figure 4c As shown. Specifically, in this embodiment, the PSD file's grouping (the grouping information shown above can be group identifiers) and layer information (each group's page design draft) are mainly parsed using a Photoshop plugin. The parsed image and text element content is then identified and compared with some module information already generated in the DB (page module library), thereby increasing module reuse and improving the template configuration process for operators. In this embodiment, the page generation method shown in this embodiment can be executed by developers, thus improving the template configuration process for developers.

[0207] Furthermore, the following information can be obtained through Photoshop plugins:

[0208] 1. Image resource content (image);

[0209] 2. Text resource content (text);

[0210] 3. Position information of images and text;

[0211] 4. Grouping information;

[0212] Furthermore, the plugin integrates this information into a JSON schema for a PSD layer. During upload, the file is uploaded to a cloud resource storage bucket. After the target object completes step Sa to generate the page, the system converts this description information into a page protocol for editor rendering and stores it in the database (cloud storage). Within the system, based on the page protocol, it can be rendered and displayed in the editor. This plugin is implemented based on the Path plugin, such as... Figure 7 As shown.

[0213] Furthermore, continue as Figure 7 As shown, upon entering the editor page, the system's data recognition algorithm for the recommendation module mainly uses methods such as object detection, semantic recognition, style recognition, and type recognition to compare the JSON Schema parsed from the PSD with the module information already developed in the page database, thereby calculating similarity and matching.

[0214] Furthermore, after comparing with the completed module information in the page database, candidate page modules can be obtained for each page module. This allows the operator to select the target page module from the corresponding candidate page modules for each page module. The user (operator) can click on a design module to perform intelligent module identification and replacement (see...). Figures 5a-5b After the module is replaced, the materials on the design draft will also be replaced in the target page module, completing the one-click skin change (see Figure 6).

[0215] Furthermore, the method may also include: if the operator does not have a page design draft, or the existing modules do not meet business requirements, and the operator chooses to create a page from a blank canvas, or the module creation operation triggered by the page generation interface of the target object in the first page generation method. Figures 5a-5b or Figures 6a-6b The "Create New Module" button shown indicates that the second target page is obtained by uploading the UI reconstruction draft;

[0216] Specifically, in this embodiment, obtaining the second target page based on the UI reconstruction draft can include: developing a module starting with uploading the UI reconstruction draft, and uploading the reconstruction zip package within the editor page. The zip package is automatically generated by a system-wide tool, and after uploading, the contents of the zip package are automatically parsed: obtaining the module's reconstructed UI structure (the parsing process can include: parsing HTML files, uploading material resources, converting absolute paths of CSS file material resources, and parsing the DOM structure tree, etc.), uploading its resources to the cloud storage bucket; converting it into a module in a development state (called a Vhtml module, whose capabilities are described below), and updating the page protocol. The editor canvas automatically renders the reconstructed UI appearance, takes a screenshot of the reconstructed cover image and uploads it to the cloud storage bucket, and finally calls the backend service interface to update the page protocol data and module data. The specific parsing process is as follows: Figure 8 As shown.

[0217] Furthermore, the more detailed process of obtaining the second target page through the UI reconstruction draft is shown in steps S1-S8 below. Steps S1-S8 are not shown in the diagram, but are as follows:

[0218] Step S1: In response to the page module creation operation triggered by the target object, display the UI reconstruction draft upload entry and obtain the UI reconstruction draft through the UI reconstruction draft upload entry.

[0219] The page module creation operation includes: the target object's selection of a second page generation method, or the module creation operation triggered by the target object's page generation interface under the first page generation method. In this embodiment, the target object can select a second page generation method (i.e., creation from blank) on the page generation interface, and then display the UI reconstruction draft upload entry to upload the UI reconstruction draft. Alternatively, the target object may have already replaced some modules under the first page generation method, but some modules may not have had candidate modules selected, or there may not be a suitable target module among the selected candidate modules. In this case, it can... Figures 9a-9c (i.e. Figure 9a , Figure 9b as well as Figure 9c The "Create New Module" button shown in the image triggers the module creation operation on the page generation interface, displays the UI reconstruction draft upload entry, and retrieves the UI reconstruction draft through the UI reconstruction draft upload entry.

[0220] Step S2: Analyze the UI reconstruction draft to obtain the UI performance information corresponding to the second page to be generated.

[0221] In this embodiment of the application, parsing the UI reconstruction draft, that is, parsing the contents of the zip package shown above, may specifically include: parsing HTML files, uploading material files, converting absolute paths of CSS file material resources, and parsing the DOM structure tree, etc. Furthermore, the parsed content is stored in a cloud storage bucket.

[0222] Step S3: In response to the target object's input operation on the second module information in the second target page, obtain the second module information.

[0223] In this embodiment of the application, the user enters the module development stage, uploads the UI reconstruction draft, and fills in the second module information. After uploading the UI reconstruction draft, the module's UI will be rendered onto the intermediate editor canvas.

[0224] The second module information includes: module name, module description, and corresponding cover information. In this embodiment, the cover information can be uploaded by the target object or obtained by parsing the UI design.

[0225] Step S4: Based on the information of the second module, select the event configurations contained in the candidate page modules that match the information of the second module from the page module database and display them to the target object;

[0226] The page module database stores information about the page modules generated during the generation process of historically generated pages. This information includes event information configured for the page module functions during the generation process. The event information configured for the page module functions contains information about the logical components that handle the module's functional logic.

[0227] In this embodiment of the application, event configurations of candidate page modules that match the information of the second module are selected from the page module database. That is, the page modules and their respective event configurations are selected from the page module database. In this embodiment, the event information for the page module's functional configuration covers both the basic event information configuration and the parameter configuration of the logical components.

[0228] Step S5: Based on the selection operation of the target object for the candidate page module, determine each initial event and the first initial logic component corresponding to each initial event from the event configuration contained in the candidate page module.

[0229] In this embodiment, the system will recommend reusable event configurations in the existing modules (page module database) based on the second module information, and reuse them with one click after selection. In this embodiment, in addition to filtering the event configurations contained in candidate page modules that match the second module information from the page module database based on the second module information and displaying them to the target object, and having the target object select each initial event and the first initial logical component corresponding to each initial event from the candidate page modules, the system can also directly filter the logical component that best matches the second module information from the logical component database based on the second module information, and have the target object determine whether to use it as the first initial logical component.

[0230] Step S6: Obtain the event information and parameter information of the first initial logic component from the target object input for each initial event.

[0231] The event information includes: basic information about the event name, event configuration type information, and logical component parameter information of the historical configuration. The parameter information of the first initial logical component includes: input parameter configuration, events thrown by the logical component, and data sharing and linkage information.

[0232] In this embodiment of the application, after selecting a logic component, namely the first initial logic component shown above, the panel displays the configuration items of that logic component: input parameter configuration, events thrown by the logic component (the lifecycle of the logic component itself), and data sharing linkage, such as... Figure 10 As shown. Logic components can also be added and used under the lifecycle events of the logic itself; data sharing linkage can be configured for logic components within the events already configured in the module. This configuration indicates that the output parameter state of the current logic component needs to be shared with the logic components with shared configuration. The purpose of this configuration is that the operator can trigger the execution of logic components in different lifecycles of the module, and can update and share the state between logic components.

[0233] Step S7: Generate each target event based on each initial event and the parameter information of the first initial logic component corresponding to that initial event.

[0234] The target event includes at least one first target logic component.

[0235] Furthermore, after obtaining the parameter information of the first initial logic component, clicking "Save" displays all currently configured events on the panel (see...). Figure 11 At this point, at least one first target logical component can be generated.

[0236] Furthermore, at least one first target logical component can be generated based on the above method.

[0237] Step S8: Based on the binding operation of at least one first target logical component and UI performance information configured for each target event by the target object, bind each target logical component and UI performance information, and generate a second target page based on the binding result.

[0238] Specifically, based on the above embodiments, the UI performance information includes: at least one UI node; the UI performance of a module corresponding to a reconstructed UI structure uploaded by the target object; binding the target logical component with the UI performance information, which may specifically include: determining the mapping relationship between each target logical component and each UI node based on the trigger operation of the target object; the target logical component includes a first target logical component; binding the output parameters of each target logical component with the corresponding UI node. In this embodiment, "each target logical component" here refers to "each first target logical component," that is, determining the mapping relationship between each first target logical component and each UI node based on the trigger operation of the target object, and binding the output parameters of each first target logical component with the corresponding UI node.

[0239] Furthermore, if the first preset condition is met, the page event configuration interface is displayed; through the event configuration interface, the event configuration information input by the target object is obtained; wherein, the event configuration information includes: basic information of the event name and event configuration type information; based on the event configuration information, the first initial logical component is selected from the logical component database.

[0240] The first preset condition includes: no matching candidate page module exists in the page module database, or a creation operation of a logical component triggered by the target object is detected. In this embodiment, if no matching candidate logical component is found from the logical component database based on the second module information, or if a creation operation of an event configuration triggered by the target object is detected (i.e., clicking the "Add Directly" button, such as...), the condition is further specified. Figures 9a-9c As shown, this interface displays the event-related information input field. Users can enter the event name and basic information, and configure the event type. The system automatically recommends common logic components for use, and users can also reuse components by searching the global library. The configured event type determines when the user-developed logic component executes within a specific lifecycle of the module; common events include click, load, data change, and unload.

[0241] Furthermore, upon entering the event configuration, the event information configured by the user will be stored in the event linkage protocol. The protocol expresses the functional logic of a module, and its description mainly includes the following elements, as shown in Table 1.

[0242] Table 1

[0243]

[0244] Based on this, the protocol design assigns a unique node ID to each event and linked item. The node ID is both simple and important; it represents the uniqueness of this logical execution component. It is simple because its essence is a unique random value.

[0245] The reason needs to be considered in this scenario: a UI component has two events, each requiring the execution of payment logic. One payment logic needs to trigger the lottery event of another component. Without assigning a unique node ID, when there are duplicate logic components (in this case, two payment logics), it will be impossible to determine the specific event to be linked. Furthermore, the essence of a linked event is also to execute another logic component, which can then trigger other linked events. Therefore, a unique node ID is crucial in the protocol. That is, duplicate logic components, such as payment component 1 and payment component 2, but with different payment logics, require different node IDs for payment component 1 and payment component 2. Figure 12 As shown.

[0246] Furthermore, after selecting the first initial logical component from the logical component database, the above steps S6-S8 are executed to generate the second target page.

[0247] Furthermore, if the recommended logic components do not meet the requirements, users can independently enter the logic component development production line to complete the development of the business logic components. This method may also include: step SA (not shown in the figure) and step SB (not shown in the figure), wherein,

[0248] Step SA: If the second preset condition is met, then based on the target object's request to generate the logical component, display the selection interface for the logical component generation method.

[0249] The second preset condition includes: no first initial logical component is matched in the logical component database based on the event configuration information, or a creation operation of a logical component triggered by the target object is detected. In other words, in the above embodiment, if no first initial logical component is matched in the logical component database based on the event configuration information, or if a creation operation of a logical component triggered by the target object is detected (e.g., ... Figures 9a-9c As shown, click the "Add Directly" button.

[0250] Step SB: In response to the target object's selection operation for the logical component generation method, generate a second target logical component based on the selected target generation method.

[0251] The logical component generation methods include at least one of the following: component orchestration generation, generation of logical components via HTTP interface registration, and generation of logical components by uploading code. In this application embodiment, as... Figure 13 As shown, users can click "Create Component" to display... Figure 14 The interface shown is as follows: Figure 14 The interface shown can display the following entry points: "Component Orchestration Generation Method" (Component Orchestration), "Generation of Logic Components via HTTP Interface Registration" (Online Registration), and "Generation of Logic Components by Uploading Code" (Code Upload), allowing users to trigger any of these methods to generate the second target logic component.

[0252] In this embodiment of the application, registration via HTTP components can solve the problem of non-reusability and repetitive development at the interface level. In our scenario, there are numerous query and execution interfaces, such as querying order lists and details. Generally, calling some backend data interfaces is sufficient to achieve this. Therefore, converting the backend data interfaces into logic components that the frontend can call can help improve efficiency. Furthermore, the method of generating logic components through HTTP interface registration incorporates online debugging and field mapping conversion functions, such as... Figure 15 As shown.

[0253] Furthermore, JavaScript is a flexible language with diverse syntax, and the system includes an online upload portal for user-written code. By providing a scaffolding tool, users can generate template project code after execution. Users can then add a small amount of their own logic to the template code to quickly create a logical component. In this embodiment, the build process, test cases, entry file, and TypeScript constraint definitions have all been generated within the project template using the scaffolding tool. We have also automatically generated a corresponding Git address for each logical component (the three types mentioned above), facilitating user hosting and viewing.

[0254] Specifically, if the target logical component is generated through a generation method registered via an HTTP interface, that is, if the target object selects a generation method registered via an HTTP interface to generate the logical component, SB generates a second target logical component based on the target generation method. This can specifically include: responding to the target object's selection operation for the generation method registered via an HTTP interface, displaying the first parameter configuration interface of the second target logical component; obtaining the first parameter configuration information entered by the target object on the first parameter configuration interface; and generating the second target logical component based on the first parameter configuration information.

[0255] The first parameter configuration information includes: the name of the second target logic component, the type of the second target logic component, the method used by the second target logic component, the input fields corresponding to the second target logic component, and the output fields used by the second target logic component. In this embodiment, as... Figure 15 As shown, Figure 15 The displayed interface is the first parameter configuration interface for the second target logic component. The target object can configure the first parameter configuration information in the first parameter configuration interface. The first parameter configuration information includes: the name information of the second target logic component, the type of the second target logic component, the method used by the second target logic component, the input fields corresponding to the second target logic component, and the output fields used by the second target logic component. It may also include: the URL address of the service corresponding to the second logic component. Furthermore, the input fields corresponding to the second target logic component and the output fields used by the second target logic component can be obtained by "removing" and / or "adding fields".

[0256] Specifically, if the target logical component is generated by uploading code, step SB generates a second target logical component based on the target generation method. This can include: displaying the second parameter configuration interface of the second target logical component; obtaining the second parameter configuration information entered by the target object through the second parameter configuration interface, and generating the target address information (i.e., the git address mentioned above) corresponding to the second initial logical component; obtaining the logic code corresponding to the second initial logical component based on the target address information; responding to the target object's adjustment operation on the logic code, obtaining the adjusted logic code, and generating the second target logical component based on the adjusted logic code.

[0257] The target address information is the storage location information of the logic code corresponding to the second initial logic component.

[0258] Specifically, if the target generation method is a component orchestration generation method, that is, if the target object selects the component orchestration generation method as the generation method for the logical component, step SB generates a second target logical component based on the target generation method, which may include: obtaining the target flow control relationship diagram corresponding to the component to be generated; obtaining the parameter information corresponding to the start node and the end node respectively; and generating the second target logical component based on the target flow control relationship diagram and the parameter information corresponding to the start node and the end node respectively.

[0259] Furthermore, in this embodiment, the target flow control relationship diagram corresponding to the component to be generated can be obtained first, and then the parameter information corresponding to the start node and the end node can be obtained respectively. Alternatively, the parameter information corresponding to the start node and the end node can be obtained first, and then the target flow relationship diagram corresponding to the component to be generated can be obtained. Alternatively, the target flow control relationship diagram corresponding to the component to be generated and the parameter information corresponding to the start node and the end node can be obtained simultaneously. This is not limited in this embodiment.

[0260] The target flow control diagram includes a start node, an end node, and at least one intermediate node. In this embodiment, the logical relationships between the nodes can be obtained from the target flow control diagram.

[0261] In this embodiment, each intermediate node represents a logical component. Each intermediate node can establish a binding relationship with a logical component based on the operation of the target object; that is, the intermediate node can represent a logical component. Furthermore, the intermediate node can also represent multiple logical components, as detailed below. Figure 16a and Figure 16b In this embodiment of the application, the parameter information includes: input parameter information and output parameter information.

[0262] Specifically, obtaining the target flow control diagram may include: obtaining an initial flow control diagram and determining the target flow control diagram based on the initial flow control diagram. In this embodiment, the obtained initial flow control diagram can be at least one. If there is only one initial flow control diagram, it can contain multiple nodes and can also represent a logical component. The intermediate nodes in an initial flow control diagram can represent an initial sub-logical component. If an initial flow control diagram consists of multiple sub-initial logical components, the target flow control diagram can be obtained by adjusting the relationship between the sub-initial logical components or by deleting some sub-initial logical components. If there are at least two initial control diagrams, the target object can adjust the relationship between the initial control diagrams to obtain the target flow control diagram. Of course, each initial control diagram can also be adjusted in the above manner, which is not limited in this embodiment. In this embodiment, the initial flow control diagram is the flow control diagram used when generating logical components during the generation process of historically generated pages. Furthermore, the initial flow control diagram can be either the flow control diagram used during the generation of logical components in the process of generating previously generated pages, or a pre-configured flow control diagram. The configuration flow control diagram is as follows: Figure 16a and Figure 16b As shown.

[0263] Further, obtaining the target flow control diagram may specifically include: based on the target object's selection operation on historical logical components, obtaining each historical logical component, establishing relationships between each historical logical component, and generating the target flow control diagram based on the relationships between each historical logical component. In this embodiment, when generating the target flow control diagram, the target object may also select some logical components and establish relationships between these logical components to further determine the target flow control diagram based on these historical logical components and their relationships. For example, the target object selects to use logical components 1, 2, and 3, and establishes logical relationships between logical components 1, 2, and 3, to further obtain the target flow control diagram based on logical components 1, 2, 3, and the relationships between each logical component. In this embodiment of the application, if a certain logical component in the target flow control relationship diagram cannot be obtained from the historical logical components, the logical component can be generated by registering the logical component through the HTTP interface, or by uploading code to generate the logical component. The methods of generating logical components by registering the logical component through the HTTP interface and by uploading code are detailed in the above embodiments and will not be repeated here.

[0264] Furthermore, empty nodes can be selected by the target object or by dragging, and relationships between the empty nodes can be established. Then, the relationships between the empty nodes and logical components or flow control nodes can be bound to obtain the target flow control relationship diagram, and then the logical components can be obtained based on the flow control relationship diagram.

[0265] Specifically, logical components can be obtained by selecting a target object or by dragging an empty node, such as... Figure 17 As shown, where:

[0266] i. Enter the orchestration editor, click the empty node in the middle, and select the logic component or flow control node to be added from the right; add an empty node by clicking the "+" sign below the node.

[0267] ii. Click the “Start Point” or “End Point” node to bind the input and output parameter fields of the logic component.

[0268] iii. After completing the node orchestration, you need to fill in the basic information of the logical component, then save and publish. At this point, returning to the event configuration panel, you can select the published logical component, such as... Figure 18 As shown.

[0269] Taking a common lottery logic orchestration as an example, business scenarios may involve various lottery formats, such as card-flipping lotteries or scratch-off lotteries, but the core logic remains the lottery itself. Therefore, users can achieve logic combination and reuse by orchestrating logic components (e.g., Figure 19 (As shown).

[0270] Specifically, based on the above embodiments, a target logic component can be obtained, and then bound according to the obtained target logic component and module UI performance information to obtain a second target module.

[0271] The UI performance information includes: at least one UI node; the UI performance of a module corresponding to a reconstructed UI structure uploaded by the target object; binding the target logical components with the UI performance information, which may specifically include: determining the mapping relationship between each target logical component and each UI node based on the trigger operation of the target object; the target logical components include at least one of a first target logical component or a second target logical component; binding the output parameters of each target logical component with the corresponding UI node.

[0272] Specifically, users select the UI node to bind on the canvas or in the left-hand UI node panel, pull up the drawer, select the output parameters of the logic component, and click "Confirm Binding." Ultimately, changes in the specific data output by the final logic component will drive UI changes through the binding relationship, displaying the corresponding data content on the page. This could be information such as the user's nickname and avatar retrieved from the backend. Figures 20a-20b As shown. In this embodiment, the Runtime layer serves as a bridge connecting UI components and logic components. It is used to drive the display of UI components by using the data results returned after the logic components are executed, such as... Figure 20c As shown. The Runtime layer can be used for UI-driven updates, preloading (loading) logic components, execution and destruction of logic components, data storage and isolation, parsing events and linkage protocols, and component lifecycle management and execution, etc.

[0273] In this embodiment of the application, the purpose of the execution return result of the logic component is to provide it to the UI scene. Therefore, the data returned by the logic component needs to automatically drive changes in the UI. The output code type is a React component, and its data is stored in the React component state. Therefore, a runtime layer is needed as a bridge to store the returned data value in the state.

[0274] Here we use the publish-subscribe pattern. After the runtime finishes executing the component's logic, it stores the node's data in the component's store state and publishes an event indicating that the node's data has changed. Other nodes subscribe to this change and actively set their state (calling setState), triggering changes in the UI. The result data of each component's logic execution is stored in the runtime's global context.

[0275] Data field binding binds the results of the logic component's execution, ultimately driving UI changes. This field might be an array used to loop through a series of DOM nodes, or it might be a basic type, such as a number or string, directly displayed on the DOM node. Therefore, we designed online data binding and variable expressions. Users can configure loops, select variables, write variable expressions, and control states themselves.

[0276] After user configuration, the system converts the configuration content into a protocol (such as "__markerConf", recording the configuration binding content of all nodes). Finally, the protocol and the module UI reconstruction draft are converted into a code output component process. The overall chain is as follows: Figure 21 As shown. The configured protocol is carried on the Vhtml module and will be displayed on the canvas in real time based on the configured content (e.g., Figure 22 (The overall page protocol structure shown).

[0277] Furthermore, after obtaining the logic components, an operational item configuration form is generated and bound. In this embodiment, the input parameters of the event logic components can be generated without code through a visual drag-and-drop method in the form editor; for the module UI node style operational item form, in the "Operable Item Configuration" panel, the operator selects any UI node, and the system will automatically output common style forms according to the node type. The operator can complete the configuration by checking the boxes, and the form will automatically generate the code, as shown in the example below. Figure 23 As shown. In this embodiment, the form operation item configuration on the right is generated visually, as shown below. Figure 24 and Figure 25As shown. The editor supports implementation based on the Formily form solution. The operational form items of the module can greatly improve the reusability of the module, which is very important to the module. Our original implementation method was to complete it by hand by case development, but using the Formily solution and wanting to deliver quickly brings the following challenges. Specifically, these may include: a high learning curve, making it difficult for other teams to integrate, and a long learning curve, which increases development time; most of the developed forms are combinations of different form controls, and development generally involves writing a lot of descriptive and repetitive code; the form content has no predictable pattern, and the required configuration items are diverse (mainly images, text, colors); the form item control forms are varied (such as input boxes, drop-down lists, cards, etc.), and need to be dynamically adjusted according to different business scenarios.

[0278] Based on the above, we summarize two main types of operational form types: module style forms and logic forms, enabling zero-code form generation. Style forms can be generated simply through configuration. After selecting a UI node in the left panel, the right side automatically recognizes the current node and recommends component types. Users only need to configure the component name and the required attributes to generate form configuration items for that node, as shown in the image. Logic forms, on the other hand, are unrelated to styles. They are generated through drag-and-drop in the form generator editor, and the generated forms can be shared and reused within the team.

[0279] Furthermore, after configuring and replacing all modules using the methods described above, you can proceed with the page preview or publishing process, as detailed below. Figure 26 As shown. After clicking "Publish," the backend API is invoked, and the backend calls a dedicated build pipeline. The pipeline uniformly builds code for the logical components, modules, and page protocols used by each page module. All file artifacts are uploaded to a cloud storage bucket, and the page's static HTML code is pushed to the Git repository based on the user-configured address, such as... Figure 27 In this embodiment, a pipelined approach is used to generate executable landing page files and reusable module code for page and module construction, which are then uploaded and stored in the cloud. Specifically, as follows... Figure 28 As shown.

[0280] The above embodiments provide a method for page generation. A specific example is given in the following embodiments, as shown below:

[0281] 1. In response to the page generation request of the target object, display the page generation interface. This page generation interface can show two page generation methods (automatic parsing and creation method and creation from blank method) for the user to choose from. If the user chooses the automatic parsing and creation method, the target page will be generated according to the automatic parsing and creation method. At this time, upload the page design draft. The page design draft is completed by the designer according to the design specifications and uploaded in the PS software plugin.

[0282] 2. Using a Photoshop plugin, group and package the design drafts according to the delivery requirements and upload them to the system. At least one page module can correspond to a set of page design drafts; that is, a set of page design drafts corresponds to at least one page module. During upload, each set of design draft pages is automatically parsed to obtain the first module information corresponding to the page module to be generated. The first module information may include: image resource content (image), text resource content (text), the position information of the page resource content in the first page to be generated (i.e., the position information of the image and text), and group information (group information may include the identifier information of the group to which the page design draft corresponding to the first module information belongs).

[0283] 3. Enter the system platform, click the menu "Page Link", click "Create Page Template", select "Automatic Parsing and Creation", fill in the basic information and select the group of uploaded design drafts (a group of design draft pages (the first group of design draft pages)).

[0284] 4. Obtain the selected design draft page and convert it into the editor's page protocol; after entering the editor page, multiple page modules to be replaced can be displayed;

[0285] 5. When a user clicks on a page module to be replaced, at least one candidate page module that matches the page module to be replaced can be identified.

[0286] 6. Based on the target object's selection operation for replaceable modules, determine the target module, and replace the first module information corresponding to the module to be replaced onto the target module to achieve one-click skinning;

[0287] 7. Based on the above, intelligent module replacement can be performed on each module to be replaced, so as to achieve one-click skin change.

[0288] 8. If, as described in step 5, there is a design module for which no matching replacement module can be found, or if the user believes that none of the matching replacement modules meet their requirements, the user can click "Add Module" or "Upload and Add" to enter the module development page, upload the UI reconstruction draft for that module, and fill in the module information (the module information of the module to be added). It should be noted that the UI reconstruction draft can be generated by parsing the page design draft based on a large model and knowledge base, or it can be obtained through other means, such as being uploaded directly by the user. The corresponding module is generated based on the uploaded module UI reconstruction draft to replace the design module.

[0289] 9. Based on the module information filled in in step 8, recommend the configuration information of reusable events in existing modules;

[0290] 10. After the user clicks to select, the configuration information of the event will be reused in the current module.

[0291] 11. If any of the following conditions (1)(2)(3) are met, click Add Event, fill in the event name and configure the event type. The system will automatically recommend logical components or search for suitable logical components globally based on the event name and event type.

[0292] (1) No reusable event information is recommended in 9;

[0293] (2) In case 10, the user did not select any event configuration information;

[0294] (3) Users can directly click to add an event;

[0295] 12. After displaying the logical components in step 11, the user selects one of them. At this time, the configuration items of the selected logical component are displayed: input parameter configuration, events thrown by the logical component (the life cycle of the logical component itself), and data sharing linkage.

[0296] 13. Users can modify these configuration items or leave them as is. However, after clicking save, the event corresponding to the configuration item will be obtained. The event can include the event name and the name of the corresponding component. At this time, the configured logical component can be obtained.

[0297] 14. If the logical component cannot be obtained through steps 11, 12, and 13, it can be generated in the following three ways;

[0298] A) Generate logical components by registering them via HTTP components;

[0299] (1) Display callable backend data interfaces;

[0300] (2) Users can select at least one backend data interface from the callable backend data interfaces and convert it into a frontend logical component;

[0301] B) Logic components are generated by having developers upload logic code;

[0302] (1) Display an area where you can write or upload code;

[0303] (2) After uploading the code, click Generate to generate a logic component;

[0304] C) Generate logical components through online orchestration;

[0305] iv. Enter the orchestration editor, click the empty node in the middle, and select the logic component or flow control node to be added from the right; add an empty node by clicking the "+" sign below the node.

[0306] v. Click the "Start Point" or "End Point" node to bind the input and output parameter fields of the logic component.

[0307] vi. After completing the node orchestration, you need to fill in the basic information of the logical component, then save and publish. At this point, you can return to the time configuration panel and select the published logical component.

[0308] 4. After completing the event configuration, proceed to the third step: data field binding. The user selects the UI node to bind on the canvas or in the left-hand UI node panel, pulls up the drawer, selects the output parameter of the logic component, and clicks "Confirm Binding." Ultimately, changes in the specific data output by the final logic component will drive UI changes through the binding relationship, displaying the corresponding data content on the page. This could be information such as the user's nickname or avatar retrieved from the backend.

[0309] 5. Generate and bind the operation item configuration form.

[0310] a) The input parameters of the event logic component can be generated with zero code through a visual drag-and-drop method in the form editor.

[0311] b) Module UI node style operation item form: In the "Configurable Operation Items" panel, the user selects any UI node, and the system will automatically output common style forms according to the node type. The user can complete the configuration by checking the boxes, and the form will be automatically generated.

[0312] 6. After completing the configuration and replacement of all modules, you can proceed with the page preview or publishing process.

[0313] Another process: (when there is no design draft drawn by a designer)

[0314] 1. In response to the page generation request of the target object, display the page generation interface. This page generation interface can show two page generation methods (automatic parsing creation method and creation from blank method) for the user to choose from. If the user chooses the creation from blank method, the target page will be generated according to the creation from blank method. At this time, upload the UI reconstruction draft of the module, and upload the UI reconstruction draft for the module, and fill in the module information (the module information of the module to be added).

[0315] 2. Based on the module information filled in in step 1, recommend the configuration information of reusable events in existing modules;

[0316] 3. After the user clicks to select, the configuration information of the event will be reused in the current module.

[0317] 4. Click "Add Event", fill in the event name and configure the event type. The system will automatically recommend logic components or search for suitable logic components globally based on the event name and event type.

[0318] 5. After displaying the logical components in step 4, the user selects one of them. At this time, the configuration items of the selected logical component are displayed: input parameter configuration, events thrown by the logical component (the life cycle of the logical component itself), and data sharing linkage.

[0319] 6. Users can modify these configuration items or leave them as is. However, after clicking save, the event corresponding to the configuration item will be obtained. The event can include the event name and the name of the component it corresponds to. At this time, the configured logical component can be obtained.

[0320] 7. If the logical component cannot be obtained through steps 4, 5, and 6, it can be generated in the following three ways;

[0321] A) Generate logical components by registering them via HTTP components;

[0322] (1) Display callable backend data interfaces;

[0323] (2) Users can select at least one backend data interface from the callable backend data interfaces and convert it into a frontend logical component;

[0324] Specifically, in response to the target object's selection of the generation method registered via the HTTP interface, the first parameter configuration interface of the second target logical component is displayed. Then, the first parameter configuration information entered by the target object on the first parameter configuration interface is obtained. The first parameter configuration information includes: the name information of the second target logical component, the type of the second target logical component, the method used by the second target logical component, the input fields corresponding to the second target logical component, and the output fields used by the second target logical component. Then, the second target logical component is generated based on the first parameter configuration information.

[0325] B) Logic components are generated by having developers manually write and upload logic code.

[0326] Specifically, in this embodiment, after displaying the second parameter configuration interface of the second target logic component, the target address information corresponding to the second initial logic component is generated by obtaining the second parameter configuration information input by the target object through the second parameter configuration interface; wherein, the target address information is the storage location information of the logic code corresponding to the second initial logic component, and then, based on the target address information, the logic code corresponding to the second initial logic component is obtained, and in response to the target object's adjustment operation on the logic code, the adjusted logic code is obtained, and the second target logic component is generated based on the adjusted logic code.

[0327] C) Generate logical components through online orchestration (mostly);

[0328] iv. Enter the orchestration editor, click the empty node in the middle, and select the logic component or flow control node to be added from the right; add an empty node by clicking the "+" sign below the node.

[0329] v. Click the "Start Point" or "End Point" node to bind the input and output parameter fields of the logic component.

[0330] vi. After completing the node orchestration, you need to fill in the basic information of the logical component, then save and publish. At this point, you can return to the time configuration panel and select the published logical component.

[0331] 8. After completing the event configuration, proceed to the third step: data field binding. Users select the UI node to bind in the canvas or the left-hand UI node panel, pull up the drawer, select the output parameter of the logic component, and click "Confirm Binding." Ultimately, changes in the specific data output by the final logic component will drive UI changes through the binding relationship, displaying the corresponding data content on the page. This could include information such as the user's nickname and avatar retrieved from the backend.

[0332] 9. Generate and bind the operation item configuration form.

[0333] a) The input parameters of the event logic component can be generated with zero code through a visual drag-and-drop method in the form editor.

[0334] b) Module UI node style operation item form: In the "Configurable Operation Items" panel, users can select any UI node, and the system will automatically output common style forms according to the node type. Users can complete the configuration by checking the boxes, and the form will be automatically generated.

[0335] 10. After completing the configuration and replacement of all modules, you can proceed with the page preview or publishing process.

[0336] Using the page generation method described above, the original development model produced 8 pages per week, while the current system, with its reusability, can complete one page template in one hour. The development of customized functional modules has also been reduced from one every two days to one every half day. Furthermore, the original formally form operation configuration solution required an average of 2.5 days to learn and 1 day to implement the code. However, with the form generator and configuration, operation item configuration forms can be generated with zero code, and complex operation configuration forms can be completed in less than half an hour.

[0337] Based on the same principle as the page generation method provided in the embodiments of this application, the embodiments of this application also provide a page generation apparatus, such as... Figure 29 As shown, the device 2900 may include: wherein,

[0338] The first acquisition module 2901 is used to acquire the page design file of the first page to be generated; the page design file includes at least one subpage design file, and one subpage design file corresponds to at least one page module;

[0339] The first parsing module 2902 is used to parse each subpage design file to obtain the first module information of the corresponding page module to be generated; wherein, the first module information of the page module to be generated includes the page resource content and the position information of the page resource content in the first page to be generated;

[0340] The identification module 2903 is used to identify, for each page module to be generated, a candidate page module that matches the first module information of the page module to be generated from the page module library.

[0341] The target page module obtaining module 2904 is used to display the candidate page module corresponding to each page module to be generated to the target object. In response to the target object's determination operation of the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated.

[0342] The first generation module 2905 is used to generate the first target page based on the obtained target page modules.

[0343] In one possible implementation of this application embodiment, the device 2900 further includes: a first display module, wherein...

[0344] The first display module is used to respond to the page generation request operation of the target object and display the page generation interface; wherein, the page generation interface displays the page generation methods; the page generation methods include: a first page generation method and a second page generation method;

[0345] Specifically, when the first acquisition module 2901 acquires the page design file of the first page to be generated, it is used to: acquire the page design file of the first page to be generated in response to the target object's selection operation for the first page generation method.

[0346] In another possible implementation of this application embodiment, the device 2900 further includes: a second display module, a second acquisition module, a second parsing module, a third acquisition module, a first filtering module, a determining module, a fourth acquisition module, a second generation module, and a third generation module, wherein,

[0347] The second display module is used to respond to the page module creation operation triggered by the target object and display the UI reconstruction draft upload entry.

[0348] The second acquisition module is used to acquire the UI reconstruction draft through the UI reconstruction draft upload entry; the page module creation operation includes: the target object's selection operation for the second page generation method, or the module creation operation triggered by the target object's page generation interface under the first page generation method;

[0349] The second parsing module is used to parse the UI reconstruction draft and obtain the UI performance information corresponding to the second page to be generated;

[0350] The third acquisition module is used to acquire the second module information in response to the target object's input operation on the second target page; the second module information includes: module name, module description information and the cover information corresponding to the module.

[0351] The first filtering module is used to filter out the event configurations contained in candidate page modules that match the information in the second module and display them to the target object. The page module database stores the page module information generated during the generation process of historically generated pages. The historically generated page module information includes event information for the page module function configuration during the generation process. The event information for the page module function configuration includes logical component information for processing the module function logic.

[0352] The determination module is used to determine each initial event and the first initial logic component corresponding to each initial event from the event configuration contained in the candidate page module based on the selection operation of the target object for the candidate page module.

[0353] The fourth acquisition module is used to acquire the event information and parameter information of the first initial logic component for each initial event input by the target object; wherein, the event information includes: basic information of the event name, event configuration type information and historically configured logic component parameter information, and the parameter information of the first initial logic component includes: input parameter configuration, events thrown by the logic component and data sharing linkage information;

[0354] The second generation module is used to generate each target event based on each initial event and the parameter information of the first initial logic component corresponding to the initial event; wherein the target event contains at least one first target logic component;

[0355] The third generation module is used to bind each target logical component and UI performance information based on the binding operation of at least one first target logical component and UI performance information configured for each target event by the target object, and generate a second target page based on the binding result.

[0356] In another possible implementation of this application embodiment, the device 2900 further includes: a third display module, a fifth acquisition module, and a second filtering module, wherein,

[0357] The third display module is used to display the page event configuration interface if the first preset condition is met; wherein the first preset condition includes: there is no matching candidate page module in the page module database, or the creation operation of the logical component triggered by the target object is detected;

[0358] The fifth acquisition module is used to acquire the event configuration information input by the target object through the event configuration interface; the event configuration information includes: basic information of the event name and event configuration type information;

[0359] The second filtering module is used to filter the first initial logical component from the logical component database based on event configuration information.

[0360] In another possible implementation of this application embodiment, the device 2900 further includes: a fourth display module and a fourth generation module, wherein...

[0361] The fourth display module is used to display a selection interface for the logical component generation method based on the target object's request operation for generating logical components if the second preset condition is met; wherein, the logical component generation method includes at least one of the following: component orchestration generation method, generation of logical components through HTTP interface registration method, and generation of logical components by uploading code.

[0362] The fourth generation module is used to respond to the target object's selection operation for the generation method of the logical component, and generate a second target logical component based on the selected target generation method;

[0363] The second preset condition includes: the first initial logical component is not matched in the logical component database based on the event configuration information, or the creation operation of the logical component triggered by the target object is detected.

[0364] In another possible implementation of this application embodiment, if the target generation method is a component orchestration generation method, the fourth generation module, when generating the second target logical component based on the target generation method, is specifically used for:

[0365] Obtain the target flow control diagram corresponding to the component to be generated; wherein, the target flow control diagram includes: a start node, an end node, and at least one intermediate node; wherein, an intermediate node represents a logical component;

[0366] Obtain the parameter information corresponding to the start node and the end node respectively. The parameter information includes: input parameter information and output parameter information.

[0367] The second target logic component is generated based on the parameter information corresponding to the target flow control relationship diagram, the starting node, and the ending node.

[0368] In another possible implementation of this application embodiment, the fourth generation module, when obtaining the target flow control relationship diagram, is specifically used for any of the following:

[0369] Obtain the initial flow control diagram and determine the target flow control diagram based on the initial flow control diagram; wherein, the initial flow control diagram is the flow control diagram used when generating logical components during the generation process of historically generated pages;

[0370] Based on the target object's selection operation for historical logic components, obtain each historical logic component, establish the relationship between each historical logic component, and generate the target flow control relationship diagram based on the relationship between each historical logic component.

[0371] In another possible implementation of this application embodiment, if the target logical component is generated through an HTTP interface registration method, the fourth generation module, when generating the second target logical component based on the target generation method, specifically performs the following:

[0372] In response to the target object's selection of the generation method registered via the HTTP interface, the first parameter configuration interface of the second target logic component is displayed;

[0373] Obtain the first parameter configuration information entered by the target object on the first parameter configuration interface. The first parameter configuration information includes: the name information of the second target logic component, the type of the second target logic component, the method used by the second target logic component, the input fields corresponding to the second target logic component, and the output fields used by the second target logic component.

[0374] Based on the configuration information of the first parameter, a second target logical component is generated.

[0375] In another possible implementation of this application embodiment, if the target logic component is generated by uploading code, the fourth generation module, when generating the second target logic component based on the target generation method, is specifically used for:

[0376] Displays the second parameter configuration interface for the second target logic component;

[0377] The target object obtains the second parameter configuration information entered on the second parameter configuration interface, and generates the target address information corresponding to the second initial logic component; wherein, the target address information is the storage location information of the logic code corresponding to the second initial logic component;

[0378] Based on the target address information, obtain the logic code corresponding to the second initial logic component;

[0379] In response to the target object's adjustment operation on the logic code, the adjusted logic code is obtained, and a second target logic component is generated based on the adjusted logic code.

[0380] Another possible implementation of this application embodiment includes UI performance information comprising: at least one UI node; one UI node corresponds to the UI performance of one module, specifically, a reconstructed UI structure uploaded by the target object corresponds to the UI performance of one module; the third generation module, when binding the target logical component with the UI performance information, is specifically used for:

[0381] Based on the triggering operation of the target object, determine the mapping relationship between each target logical component and each UI node; the target logical component includes at least one of the first target logical component or the second target logical component.

[0382] Bind the output parameters of each target logic component to the corresponding UI node.

[0383] It should be noted that the first acquisition module 2901, the second acquisition module, the third acquisition module, the fourth acquisition module, and the fifth acquisition module can be the same acquisition module, or they can all be different acquisition modules, or they can be partially different acquisition modules; the first parsing module 2902 and the second parsing module can be the same parsing module, or they can be different parsing modules; the first display module, the second display module, the third display module, and the fourth display module can be the same display module, or they can all be different display modules, or they can be partially the same display module; the first generation module 2905, the second generation module, the third generation module, and the fourth generation module can be the same generation module, or they can all be different generation modules, or they can be partially the same module; the above are not limited in the embodiments of this application.

[0384] This application provides a page generation apparatus. Compared with related technologies, in this embodiment, after obtaining a page design file for a first page to be generated, the page design file includes at least one sub-page design file, and each sub-page design file corresponds to at least one page module. By parsing each sub-page design file, the first module information of the corresponding page module to be generated is obtained. The first module information includes page resource content and the position information of the page resource content in the first page to be generated. For each page module to be generated, candidate page modules that match the first module information of the page module to be generated are identified from the page module library. Then, in response to the target object's determination operation on the candidate page modules, the first module information of the target page module is replaced with the first module information of the page module to be generated to obtain the target page module corresponding to the page module to be generated. Based on the obtained target page modules, the first target page is generated. In this embodiment, by automatically parsing the page design file, the page module to be replaced and the corresponding candidate module can be obtained. By the target object's selection operation on a certain module among the candidate modules, the page information is replaced, thereby generating the first target page. This eliminates the need for developers to convert it into program code and then generate the front-end page, thereby improving the efficiency of front-end page development.

[0385] Figure 30 A schematic diagram of the structure of an electronic device to which this application embodiment applies is shown, such as... Figure 30 As shown, the electronic device may be a server or a user terminal, and the electronic device may be used to implement the methods provided in any embodiment of this application.

[0386] like Figure 30 As shown, the electronic device 2000 may primarily include at least one processor 2001. Figure 30 The diagram shows components such as a memory 2002, a communication module 2003, and an input / output interface 2004. Optionally, these components can be connected and communicate with each other via a bus 2005. It should be noted that... Figure 30 The structure of the electronic device 2000 shown is merely illustrative and does not constitute a limitation on the electronic devices to which the methods provided in the embodiments of this application are applicable.

[0387] The memory 2002 can be used to store operating systems and applications, etc. The applications can include computer programs that implement the methods shown in the embodiments of this application when invoked by the processor 2001, and can also include programs for implementing other functions or services. The memory 2002 can be ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices that can store information and computer programs, or it can be EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited thereto.

[0388] Processor 2001 is connected to memory 2002 via bus 2005, and implements corresponding functions by calling application programs stored in memory 2002. Processor 2001 can be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 2001 can also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0389] Electronic device 2000 can connect to a network via communication module 2003 (which may include, but is not limited to, components such as a network interface) to communicate with other devices (such as user terminals or servers) through the network and achieve data interaction, such as sending data to or receiving data from other devices. Communication module 2003 may include wired network interfaces and / or wireless network interfaces, meaning the communication module may include at least one of wired or wireless communication modules.

[0390] Electronic device 2000 can connect to required input / output devices, such as keyboards and display devices, via input / output interface 2004. Electronic device 2000 itself may have a display device, and other display devices can also be connected externally via interface 2004. Optionally, storage devices, such as hard drives, can also be connected via interface 2004 to store data from electronic device 2000, retrieve data from storage devices, or store data from storage devices into memory 2002. It is understood that input / output interface 2004 can be a wired interface or a wireless interface. Depending on the actual application scenario, the device connected to input / output interface 2004 can be a component of electronic device 2000 or an external device connected to electronic device 2000 when needed.

[0391] The bus 2005 used to connect the various components may include a pathway for transmitting information between these components. The bus 2005 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Depending on its function, the bus 2005 can be divided into address bus, data bus, control bus, etc.

[0392] Optionally, for the solution provided in the embodiments of this application, the memory 2002 can be used to store a computer program that executes the solution of this application, and the processor 2001 runs the computer program. When the processor 2001 runs the computer program, it implements the operation of the method or apparatus provided in the embodiments of this application.

[0393] Based on the same principle as the method provided in the embodiments of this application, the embodiments of this application provide a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, it can implement the corresponding content of the aforementioned method embodiments.

[0394] This application also provides a computer program product, which includes a computer program that, when executed by a processor, can implement the corresponding content of the aforementioned method embodiments.

[0395] It should be noted that the terms "first," "second," "third," "fourth," "1," "2," etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown in the figures or text.

[0396] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0397] It should be understood that although arrows indicate various operation steps in the flowcharts of this application's embodiments, the order in which these steps are implemented is not limited to the order indicated by the arrows. Unless explicitly stated herein, in some implementation scenarios of this application's embodiments, the implementation steps in each flowchart can be executed in other orders as required. Furthermore, some or all steps in each flowchart, based on the actual implementation scenario, may include multiple sub-steps or multiple stages. Some or all of these sub-steps or stages can be executed at the same time, and each sub-step or stage can also be executed at different times. In scenarios where execution times differ, the execution order of these sub-steps or stages can be flexibly configured according to requirements, and this application's embodiments do not limit this.

[0398] The above description is only an optional implementation method for some implementation scenarios of this application. It should be noted that for those skilled in the art, other similar implementation methods based on the technical concept of this application without departing from the technical concept of this application also fall within the protection scope of the embodiments of this application.

Claims

1. A method of page generation, characterized by, The method includes: Obtain the page design file of the first page to be generated; the page design file includes at least one subpage design file, and one subpage design file corresponds to at least one page module; Each subpage design file is parsed to obtain the first module information of the corresponding page module to be generated; wherein, the first module information of the page module to be generated includes page resource content and the position information of the page resource content in the first page to be generated; For each page module to be generated, based on the first module information of the page module to be generated, a candidate page module that matches the first module information of the page module to be generated is identified from the page module library; For each page module to be generated, the candidate page module corresponding to each page module to be generated is displayed to the target object. In response to the target object's determination operation for the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated. Based on the obtained target page modules, a first target page is generated.

2. The method according to claim 1, characterized in that, The method further includes: In response to a page generation request operation for a target object, a page generation interface is displayed; wherein, the page generation interface displays page generation methods; the page generation methods include: a first page generation method and a second page generation method; The step of obtaining the page design file of the first page to be generated includes: In response to the target object's selection operation for the first page generation method, the page design file of the first page to be generated is obtained.

3. The method according to claim 2, characterized in that, The method further includes: In response to the page module creation operation triggered by the target object, the UI reconstruction draft upload entry is displayed, and the UI reconstruction draft is obtained through the UI reconstruction draft upload entry; wherein, the page module creation operation includes: the target object's selection operation for the second page generation method, or the module creation operation triggered by the target object's page generation interface under the first page generation method; The UI reconstruction draft is analyzed to obtain the UI performance information corresponding to the second page to be generated; In response to the target object's input operation on the second module information in the second target page, the second module information is obtained; the second module information includes: module name, module description information, and the cover information corresponding to the module. Based on the second module information, the event configurations contained in candidate page modules that match the second module information are filtered from the page module database and displayed to the target object; wherein, the page module database stores page module information generated during the generation process of historically generated pages, and the historically generated page module information includes event information for the page module function configuration during the generation process; wherein, the event information for the page module function configuration includes logical component information for processing module function logic; Based on the target object's selection operation for the candidate page module, each initial event and the first initial logic component corresponding to each initial event are determined from the event configuration contained in the candidate page module. Obtain the event information and parameter information of the first initial logic component input by the target object for each initial event; wherein, the event information includes: basic information of the event name, event configuration type information and historically configured logic component parameter information, and the parameter information of the first initial logic component includes: input parameter configuration, events thrown by the logic component and data sharing linkage information; Each target event is generated based on the parameter information of each initial event and the first initial logic component corresponding to that initial event; wherein, each target event contains at least one first target logic component; Based on the binding operation of at least one first target logic component configured for each target event by the target object and the UI performance information, each target logic component and the UI performance information are bound together, and a second target page is generated based on the binding result.

4. The method according to claim 3, characterized in that, The method further includes: If the first preset condition is met, the page event configuration interface is displayed; wherein, the first preset condition includes: there is no matching candidate page module in the page module database, or, the creation operation of the event triggered by the target object is detected; The event configuration information input by the target object is obtained through the event configuration interface; wherein, the event configuration information includes: basic information of the event name and event configuration type information; The first initial logical component is selected from the logical component database based on the event configuration information.

5. The method according to claim 3 or 4, characterized in that, The method further includes: If the second preset condition is met, then based on the target object's request operation for generating the logical component, a selection interface for the logical component generation method is displayed; wherein, the logical component generation method includes at least one of the following: component orchestration generation method, generation of logical components through HTTP interface registration method, and generation of logical components by uploading code; In response to the target object's selection operation for the logical component generation method, a second target logical component is generated based on the selected target generation method; The second preset condition includes: the first initial logical component is not matched in the logical component database based on the event configuration information, or the creation operation of the logical component triggered by the target object is detected.

6. The method according to claim 5, characterized in that, If the target generation method is the component orchestration generation method, the step of generating the second target logic component based on the target generation method includes: Obtain the target flow control relationship diagram corresponding to the component to be generated; wherein, the target flow control relationship diagram includes: a start node, an end node, and at least one intermediate node; wherein, an intermediate node represents a logical component; Obtain the parameter information corresponding to the starting node and the ending node respectively, wherein the parameter information includes: input parameter information and output parameter information; The second target logic component is generated based on the target flow control relationship diagram, the parameter information corresponding to the starting node and the ending node.

7. The method according to claim 6, characterized in that, The acquisition of the target flow control diagram includes any one of the following: Obtain an initial flow control diagram and determine the target flow control diagram based on the initial flow control diagram; wherein, the initial flow control diagram is the flow control diagram used when generating logical components during the generation process of historically generated pages; Based on the target object's selection operation for historical logic components, each historical logic component is obtained, and the relationship between each historical logic component is established. Based on the relationship between each historical logic component, the target flow control relationship diagram is generated.

8. The method according to claim 5, characterized in that, If the target logical component is generated via an HTTP interface registration method, the generation of the second target logical component based on the target generation method includes: In response to the target object's selection operation for the generation method registered via the HTTP interface, the first parameter configuration interface of the second target logic component is displayed; Obtain the first parameter configuration information input by the target object on the first parameter configuration interface. The first parameter configuration information includes: the name information of the second target logical component, the type of the second target logical component, the interface request method used by the second target logical component, the interface address requested by the second target logical component, the input fields corresponding to the second target logical component, and the output fields used by the second target logical component. Based on the first parameter configuration information, the second target logical component is generated.

9. The method according to claim 5, characterized in that, If the target logic component is generated by uploading code, the step of generating the second target logic component based on the target generation method includes: Displays the second parameter configuration interface for the second target logic component; The target object obtains the second parameter configuration information input on the second parameter configuration interface, and generates the target address information corresponding to the second initial logic component; wherein, the target address information is the storage location information of the logic code corresponding to the second initial logic component; Based on the target address information, obtain the logic code corresponding to the second initial logic component; In response to the target object's adjustment operation on the logic code, the adjusted logic code is obtained, and the second target logic component is generated based on the adjusted logic code.

10. The method according to claim 5, characterized in that, The UI performance information includes: at least one UI node; one UI node corresponds to the UI performance of one module; Binding the target logic component to the UI performance information includes: Based on the triggering operation of the target object, the mapping relationship between each target logical component and each UI node is determined; the target logical component includes at least one of a first target logical component or a second target logical component. Bind the output parameters of each target logic component to the corresponding UI node.

11. A page generation apparatus, characterized in that, The device includes: The first acquisition module is used to acquire the page design file of the first page to be generated; the page design file includes at least one subpage design file, and one subpage design file corresponds to at least one page module; The first parsing module is used to parse each of the sub-page design files to obtain the first module information of the corresponding page module to be generated; wherein, the first module information of the page module to be generated includes page resource content and the position information of the page resource content in the first page to be generated; The identification module is used to identify, for each page module to be generated, a candidate page module that matches the first module information of the page module to be generated from the page module library. The target page module obtaining module is used to display the candidate page module corresponding to each page module to be generated to the target object. In response to the target object's determination operation for the candidate page module, the target page module corresponding to the page module to be generated is obtained by replacing the first module information of the target page module with the first module information of the page module to be generated. The first generation module is used to generate a first target page based on the obtained target page modules.

12. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the page generation method according to any one of claims 1 to 10 when running the computer program.

13. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the page generation method according to any one of claims 1 to 10.

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

Images