Page generation method and device, electronic equipment and readable storage medium

Abstract

The invention relates to the technical field of page development, and provides a page generation method and device, electronic equipment and a readable storage medium. The method comprises the steps of obtaining a page identifier corresponding to at least one to-be-generated page and an element corresponding to each to-be-generated page; performing relation mapping processing on the elements corresponding to the to-be-generated pages to obtain component identifiers corresponding to the elements; determining a component corresponding to each element according to a preset view layer directory and the component identifier corresponding to each element; obtaining target data corresponding to each element from a preset database according to the component corresponding to each element; and rendering the target data corresponding to each element on the basis of the page identifier corresponding to each to-be-generated page to obtain at least one target page, so that the page generation efficiency is improved, the maintainability and expandability of the page are enhanced, and the automation degree of page generation is improved.

Description

Technical Field

[0001] The present disclosure relates to the technical field of page development, and in particular to a page generation method, device, electronic device and readable storage medium. Background Art

[0002] In traditional page development, developers usually need to develop each page element separately, and each page element needs to call different data interfaces separately to fill the page. This method is efficient when dealing with fixed page elements and data sources, but it is less efficient when facing dynamically changing page elements and data sources. Conventionally, each page element can be customized and developed separately, but due to the non-fixed nature of page elements and data sources, the page cannot be reused quickly; or page development can be carried out through a low-code platform, which can reduce development workload and improve development efficiency, but it is not compatible with the original project components. The cascading style sheet effect and page interaction method of the page are not highly compatible with customization.

[0003] It can be seen that the existing technology has problems such as poor reusability and low compatibility of generated pages due to the instability of data sources and the technical stack limitations of low-code platforms. Summary of the invention

[0004] In view of this, the embodiments of the present disclosure provide a page generation method, device, electronic device and readable storage medium to solve the problems in the prior art of poor reusability and low compatibility of generated pages due to the non-fixedness of data sources and the technical stack limitations of low-code platforms.

[0005] According to a first aspect of an embodiment of the present disclosure, a method for generating a page is provided, comprising: obtaining a page identifier corresponding to at least one page to be generated and elements corresponding to each page to be generated; performing relationship mapping processing on the elements corresponding to each page to be generated to obtain a component identifier corresponding to each element; determining a component corresponding to each element according to a preset view layer directory and a component identifier corresponding to each element; obtaining target data corresponding to each element from a preset database according to the component corresponding to each element; and rendering the target data corresponding to each element based on the page identifier corresponding to each page to be generated to obtain at least one target page.

[0006] According to a second aspect of an embodiment of the present disclosure, a device for generating a page is provided, comprising: an acquisition module for acquiring a page identifier corresponding to at least one page to be generated and elements corresponding to each page to be generated; a first processing module for performing relationship mapping processing on the elements corresponding to each page to be generated, and obtaining a component identifier corresponding to each element; a determination module for determining a component corresponding to each element according to a preset view layer directory and a component identifier corresponding to each element; a second processing module for acquiring target data corresponding to each element from a preset database according to the component corresponding to each element; and a third processing module for performing rendering processing on the target data corresponding to each element based on the page identifier corresponding to each page to be generated, and obtaining at least one target page.

[0007] According to a third aspect of an embodiment of the present disclosure, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.

[0008] According to a fourth aspect of an embodiment of the present disclosure, a readable storage medium is provided, which stores a computer program, and when the computer program is executed by a processor, the steps of the above method are implemented.

[0009] Compared with the prior art, the disclosed embodiment has the following beneficial effects: by obtaining a page identifier corresponding to a page to be generated and elements corresponding to each page to be generated, by performing relationship mapping on the elements corresponding to each page to be generated, the component identifier corresponding to each element in the page to be generated is obtained; according to a preset view layer directory and the component identifier corresponding to each element, the backend implementation method of each element, that is, the component corresponding to each element is determined; then, according to the component corresponding to each element, the target data configured for each component, that is, the target data corresponding to each element, can be obtained from a preset database; based on the page identifier corresponding to each page to be generated, the target data corresponding to each element is rendered to obtain at least one target page, thereby improving the rapid reuse capability of the target page, enhancing the compatibility of the target page, and improving the processing efficiency of page generation; decoupling page elements from components through modular layout, and associating them through component identifiers, so that each part of the page can be independently maintained and updated without modifying the entire page, thereby enhancing the maintainability and scalability of the target page. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0011] Figure 1 is a schematic diagram of an application scenario of an embodiment of the present disclosure;

[0012] Figure 2 It is a flowchart of a method for generating a page provided by an embodiment of the present disclosure;

[0013] Figure 3 It is a structural schematic diagram of a page generation device provided by an embodiment of the present disclosure;

[0014] Figure 4 It is a structural schematic diagram of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0015] In the following description, specific details such as specific system structures and technologies are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present disclosure. However, it should be clear to those skilled in the art that the present disclosure may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obstructing the description of the present disclosure with unnecessary details.

[0016] A method and device for generating a page according to an embodiment of the present disclosure will be described in detail below with reference to the accompanying drawings.

[0017] Figure 1 Schematic diagram of an application scenario of an embodiment of the present disclosure. The application scenario may include terminal devices 1, 2 and 3, a server 4 and a network 5.

[0018] Terminal devices 1, 2 and 3 can be hardware or software. When terminal devices 1, 2 and 3 are hardware, they can be various electronic devices with display screens and supporting communication with server 4, including but not limited to smart phones, tablet computers, laptop portable computers and desktop computers, etc.; when terminal devices 1, 2 and 3 are software, they can be installed in the above electronic devices. Terminal devices 1, 2 and 3 can be implemented as multiple software or software modules, or as a single software or software module, and the embodiments of the present disclosure are not limited to this. Furthermore, various applications can be installed on terminal devices 1, 2 and 3, such as data processing applications, instant messaging tools, social platform software, search applications, shopping applications, etc.

[0019] The server 4 may be a server that provides various services, for example, a background server that receives a request sent by a terminal device that establishes a communication connection with the server, and the background server may receive and analyze the request sent by the terminal device, and generate a processing result. The server 4 may be a single server, or a server cluster composed of several servers, or a cloud computing service center, which is not limited in the embodiments of the present disclosure.

[0020] It should be noted that the server 4 can be hardware or software. When the server 4 is hardware, it can be various electronic devices that provide various services for the terminal devices 1, 2, and 3. When the server 4 is software, it can be multiple software or software modules that provide various services for the terminal devices 1, 2, and 3, or it can be a single software or software module that provides various services for the terminal devices 1, 2, and 3, and the embodiments of the present disclosure are not limited to this.

[0021] The network 5 can be a wired network connected by coaxial cable, twisted pair and optical fiber, or it can be a wireless network that can interconnect various communication devices without wiring, such as Bluetooth, Near Field Communication (NFC), infrared, etc., which is not limited in the embodiments of the present disclosure.

[0022] The user can establish a communication connection with the server 4 via the terminal devices 1, 2 and 3 via the network 5 to receive or send information, etc. Specifically, the server 4 can obtain the page identifier corresponding to the page to be generated and the elements corresponding to each page to be generated via the terminal devices 1, 2 and 3, and obtain the component identifier corresponding to each element in the page to be generated by mapping the elements corresponding to each page to be generated. According to the preset view layer directory and the component identifier corresponding to each element, the backend implementation method of each element, that is, the component corresponding to each element, is determined, and then the target data of each component configuration, that is, the target data corresponding to each element, can be obtained from a preset database according to the component corresponding to each element, and the target data corresponding to each element is rendered based on the page identifier corresponding to each page to be generated to obtain at least one target page.

[0023] It should be noted that the specific types, quantities and combinations of the terminal devices 1, 2 and 3, the server 4 and the network 5 can be adjusted according to the actual needs of the application scenario, and the embodiments of the present disclosure are not limited to this.

[0024] Figure 2 It is a flowchart of a method for generating a page provided by an embodiment of the present disclosure. Figure 2 The page generation method can be Figure 1 The server executes. Figure 2As shown, the method for generating the page includes:

[0025] Step 201: Obtain a page identifier corresponding to at least one to-be-generated page and elements corresponding to each to-be-generated page.

[0026] Specifically, the unique identifier of at least one page to be generated can be obtained by calling the back-end service interface or querying the database. The unique identifier of the page to be generated is the page identifier corresponding to the page to be generated, and the elements corresponding to the page to be generated. The elements corresponding to the page to be generated may include text, pictures, links, or buttons, etc., which constitute the page content, and are not limited here. The elements corresponding to the page to be generated can be stored in the form of a data structure or a database table, and the elements corresponding to the page to be generated can be extracted by parsing the data structure or querying the database, wherein the data structure can be JavaScript Object Notation (JSON) or Extensible Markup Language (XML), etc., which are not limited here. This enhances the flexibility and dynamism of the page content, and can quickly generate diversified pages according to different needs, improves the degree of automation of page generation, reduces manual intervention, and reduces the difficulty of maintenance.

[0027] The page to be generated may be a web page or an application interface, etc., which is not limited here. The page to be generated has not been actually created, but there is a clear generation requirement. The page to be generated can be dynamically generated according to different users, different scenarios, or different data; the page identifier corresponding to the page to be generated can be an identifier used to uniquely identify each page to be generated. The page identifier corresponding to the page to be generated can be a number, a string, or a combination of numbers and characters, which is not limited here, and can be used to identify and locate the corresponding page to be generated; the elements corresponding to the page to be generated can be various components constituting the content of the page, and the elements corresponding to the page to be generated include but are not limited to text content, pictures, videos, links, buttons, and / or form elements, etc. The elements corresponding to the page to be generated can be configured through front-end technology and form a user's display page interface, wherein the front-end technology includes but is not limited to HyperText Markup Language (HTML), Cascading Style Sheets (CSS), or JavaScript, etc. The elements corresponding to the page to be generated can be obtained by parsing the design draft, template file, or directly reading from a data source such as a database.

[0028] For example, the page identifier a corresponding to the page A to be generated and the elements corresponding to the page A to be generated may be element 1, element 2, and element 3 respectively, which may be called through the backend service interface.

[0029] Step 202 : performing relationship mapping processing on the elements corresponding to each to-be-generated page to obtain a component identifier corresponding to each element.

[0030] Specifically, through the correspondence between each element corresponding to the page to be generated and the component identifier, based on a preset list of correspondence between elements and component identifiers, each element corresponding to the page to be generated can be mapped to the corresponding component identifier in a preset component library, thereby enhancing the correlation between the elements corresponding to the page to be generated and the back-end component identifier, improving the automation and flexibility of page construction, improving the reusability of page component identifiers, simplifying the management difficulty of page components, and improving the efficiency and quality of page development.

[0031] Among them, the component identifier corresponding to the element can be the identification code or mark of the corresponding component in the component library of each element corresponding to the page to be generated, which is not limited here. The component identifier corresponding to the element can be obtained by the element's attributes, type, and position in the page and other information, which is not limited here. Combined with the preset element and component identifier correspondence list, the most appropriate component identifier is searched and matched from the component library. The component identifier corresponding to the element can be used to identify the identity of the component corresponding to the element, and can also be used to determine the component's display method, behavior logic, and interaction method with other components, etc., which are not limited here.

[0032] For example, through the correspondence between element 1, element 2, and element 3 corresponding to page A to be generated and the component identifiers, based on a preset list of correspondence between elements and component identifiers, each element corresponding to page A to be generated can be mapped to the corresponding component identifier in the preset component library to obtain a component identifier corresponding to element 1, a component identifier corresponding to element 2, and a component identifier corresponding to element 3.

[0033] Step 203: Determine the component corresponding to each element according to the preset view layer directory and the component identifier corresponding to each element.

[0034] Specifically, by traversing the preset view layer directory, the component identifiers corresponding to the elements of the page to be generated can be parsed to obtain the component configuration data corresponding to the elements, wherein the preset view layer directory can be a pre-set directory structure, and the preset view layer directory can be used to store different view interface components. The elements corresponding to the page to be generated include but are not limited to buttons or text boxes, etc. Based on the component configuration data corresponding to the elements, the specific components corresponding to each element are searched and determined in the preset view layer directory, so that the elements corresponding to the page to be generated and the components can be accurately mapped, ensuring that the elements corresponding to the page to be generated can be rendered and the components can be functionally implemented, thereby enhancing the degree of modularity and maintainability, and directly associating interface elements with corresponding components to improve the convenience of modification, replacement, or reuse, thereby improving development efficiency.

[0035] Among them, the preset view layer directory can be a directory structure pre-set during the software development process. The preset view layer directory can be used to store and control interface components. The preset view layer directory can be divided according to function or page type, which is not limited here. It can be used to store different types of view interface files and their related component codes or resources; in the user interface configuration process, the component corresponding to the element can be the specific implementation method corresponding to each visible or interactive element in the background code. The elements include but are not limited to buttons, input boxes, and / or pictures, etc. The components corresponding to the elements can be obtained through classes, functions, modules in the programming language or component libraries in the framework, etc., which are not limited here. The components corresponding to the elements may contain the logic and style required to implement the element. The components corresponding to the elements can be used to build user interfaces, respond to user operations, and interact with other system components, etc., which are not limited here.

[0036] For example, the element may be a "shopping cart" button, and the component identifier corresponding to the "shopping cart" button may be parsed to obtain the corresponding configuration data, and then the corresponding "shopping cart" component may be found in the view layer directory according to the configuration data of the component identifier corresponding to the "shopping cart" button, wherein the "shopping cart" component may be pre-registered in the view layer directory, and the "shopping cart" component may include code and styles for processing the logic of adding to the shopping cart, and the target page may be a product list page, and then the component identifier may be configured for the "shopping cart" button in the HTML or template file of the product list page.

[0037] Step 204 , obtaining target data corresponding to each element from a preset database according to the component corresponding to each element.

[0038] Specifically, the various elements corresponding to the identified pages to be generated can be traversed through preset data screening conditions, and the component identifiers corresponding to the elements can be used as query statements to perform query operations in a preset database to obtain target data associated with each element. The target data corresponding to each element can include but is not limited to the element's configuration information, user permissions, status data, and / or interaction logic, etc. The corresponding elements of the page to be generated can be buttons or text boxes in the target page, etc., which are not limited here. The component identifiers corresponding to the elements can be component identity identification tags or class names, etc., which are not limited here. This enhances the accuracy and efficiency of target data acquisition, and avoids data mismatch or omission problems by directly mapping elements to their corresponding target data, thereby improving the response speed and dynamic interaction capabilities of the target page, and enhancing flexibility and scalability.

[0039] Among them, the preset database can be a database established and maintained in advance, and the preset database can be used to store data information associated with each element in the target page and the components corresponding to the elements. The data information associated with each element in the target page and the components corresponding to the elements may include but is not limited to the configuration parameters of the elements, user interaction records, and / or business logic rules, etc.; the target data corresponding to the element can be data information directly associated with the component corresponding to the element, and the target data corresponding to the element can be stored in the form of database tables, records, or key-value pairs, which are not limited here. The target data corresponding to the element can also be indexed by the component corresponding to the element.

[0040] For example, the target page may be a product details page, which may contain multiple elements, such as product images, price tags, and purchase buttons. The preset data filtering condition may be to query product prices. Then, by constructing corresponding query statements and components corresponding to price tags, data queries may be performed in the preset database to obtain the target data corresponding to the price tag elements, i.e., the product price data.

[0041] Step 205 , rendering the target data corresponding to each element based on the page identifier corresponding to each to-be-generated page to obtain at least one target page.

[0042] Specifically, each to-be-generated page and the dynamically generated target data can be matched and rendered, wherein the to-be-generated page can be identified and distinguished by the corresponding page identifier, and the to-be-generated page can be traversed to obtain the corresponding element content according to the page identifier corresponding to the to-be-generated page, the element content including but not limited to text, picture, and / or video, etc., and then the elements corresponding to the to-be-generated page can be rendered and displayed on the corresponding to-be-generated page according to the target page layout and design requirements through the front-end technology or the template engine, to generate at least one target page, wherein the front-end technology includes but is not limited to HTML, CSS, or JavaScript, etc., and the target page can be obtained by combining the target data and the page structure, thereby enhancing the flexibility of content management, and by dynamically generating diversified pages according to the page identifier, improving development efficiency and enhancing user experience.

[0043] Among them, the target page can be a digital document generated by rendering processing, which can include a configured layout and data content. The target page can be a web page, a mobile application interface, or an electronic magazine page, etc., which is not limited here. The target page can be obtained by combining a static page template and dynamic target data. The target page can be used to display product information, provide user interactive services, or disseminate news information and other scenarios, which are not limited here.

[0044] For example, based on the product identification information on the product details page, the corresponding information of the product can be retrieved from a preset database, including but not limited to the name, price, picture, and description, etc., and then the corresponding information of the product and the HTML template of the page to be generated can be rendered through the template engine to obtain a target page containing detailed information of the product.

[0045] According to the technical solution provided by the embodiment of the present disclosure, by obtaining the page identifier corresponding to the page to be generated and the elements corresponding to each page to be generated, by performing relationship mapping on the elements corresponding to each page to be generated, the component identifier corresponding to each element in the page to be generated is obtained, and according to the preset view layer directory and the component identifier corresponding to each element, the back-end implementation method of each element, that is, the component corresponding to each element, is determined, and then the target data of each component configuration, that is, the target data corresponding to each element, can be obtained from a preset database according to the component corresponding to each element, and the target data corresponding to each element is rendered based on the page identifier corresponding to each page to be generated to obtain at least one target page, thereby improving the rapid reuse capability of the target page, enhancing the compatibility of the target page, and improving the processing efficiency of page generation, decoupling the page elements from the components through a modular layout, and associating them through component identifiers, so that each part of the page can be independently maintained and updated without modifying the entire page, thereby enhancing the maintainability and scalability of the target page.

[0046] In some embodiments, before determining the component corresponding to each element based on a preset view layer directory and a component identifier corresponding to each element, it also includes: determining an initial view layer directory of at least one page to be generated in response to a directory creation instruction; obtaining at least one preset dynamic component; obtaining components corresponding to each initial view layer directory from at least one preset dynamic component; and registering components corresponding to each initial view layer directory based on the initial view layer directory of the page to be generated to obtain a preset view layer directory.

[0047] Specifically, it can respond to a directory creation instruction issued by a user or a program, which determines the page to be generated that needs to create an initial view layer directory structure, and then obtain dynamic components from a preset component library. The obtained dynamic components are reusable and can be configured and displayed according to different page requirements. According to the characteristics of the initial view layer directory, components that match the initial view layer directory can be determined from preset dynamic components to obtain components corresponding to the initial view layer directory. Then, the components corresponding to the initial view layer directory can be registered, and the components corresponding to the initial view layer directory can be associated with the initial view layer directory to obtain a preset view layer directory.

[0048] Among them, the directory creation instruction can be an operation instruction that triggers creation, and the directory creation instruction can be generated by the user through a graphical interface operation or a program code call; the initial view layer directory of the page to be generated can be a directory structure for storing and controlling elements corresponding to the page, and the directory structure can be used to determine the organization method and access path of the elements corresponding to the page, etc., which are not limited here; the preset dynamic component can be a pre-set dynamic component (DynamicComponents) collection, and the dynamic component can dynamically switch and render different components according to runtime data in the Vue application, and can display different component contents according to conditions or user interactions in the Vue application; the component corresponding to the initial view layer directory can be a component determined from the preset dynamic components and associated with the initial view layer directory according to the characteristics of the initial view layer directory during the creation process of the initial view layer directory, and the component corresponding to the initial view layer directory can establish a connection with the initial view layer directory through registration processing.

[0049] For example, the page to be generated may be a user center page. In response to a directory creation instruction, an initial view layer directory may be created for the user center page, and components may be obtained from a preset dynamic component library. The obtained components may include carousels, list displays, and form submissions, etc., which are not limited here. The obtained components may be matched and registered with the corresponding initial view layer directory according to the configuration requirements of the user center page, and the target page, i.e., the user center page, may be constructed by combining components such as carousels, list displays, and form submissions with the initial view layer directory.

[0050] According to the technical solution provided by the embodiment of the present disclosure, by responding to the directory creation instruction issued by the user or the program, the component matching the initial view layer directory can be determined from the preset dynamic components, and the component corresponding to the initial view layer directory can be obtained. Then, the component corresponding to the initial view layer directory can be registered, and the component corresponding to the initial view layer directory can be associated with the initial view layer directory to obtain the preset view layer directory, thereby enhancing the flexibility of page development, dynamically adjusting the correspondence between the view layer directory and the component according to actual needs, improving development efficiency, and enhancing the maintainability and scalability of the page.

[0051] In some embodiments, before obtaining at least one preset dynamic component, it also includes: obtaining at least one preset initial component; editing each preset initial component to obtain a definition component corresponding to each preset initial component; packaging the definition component corresponding to each preset initial component to obtain at least one preset dynamic component.

[0052] Specifically, at least one initial component can be retrieved and obtained from the preset component library. The initial component can be a software module containing pre-set processing logic. Each initial component can be edited, including but not limited to adjusting the properties, style, and / or logic of the component to meet the needs or scenarios, so that the definition component corresponding to the preset initial component can be obtained. The definition component can be encapsulated, and the encapsulation process may include steps such as integrating dependencies, optimizing performance, and / or setting interfaces, which are not limited here. Then, at least one dynamic component can be obtained. The dynamic component is flexible and reusable, and can be dynamically displayed or executed according to different business logics or user interactions.

[0053] Among them, the preset initial component can be a software module containing basic structure and functions, and the preset initial component can be used as a basic unit for building complex applications; the definition component corresponding to the preset initial component can be a component obtained by editing the preset initial component, and the definition component corresponding to the preset initial component can include configuration attributes, styles, logic and other definitions. The definition component can be an intermediate form in the process of transforming the initial component into a dynamic component, and can be used to build complex user interfaces or functional logic.

[0054] For example, the preset initial components may include product display function implementation components, shopping cart implementation components, and order list implementation components, etc., and then the preset initial components can be edited according to the configuration requirements of the target page, including but not limited to adjusting the layout and style of the product display, or increasing the function implementation logic such as the quantity limit of products in the shopping cart, and then the definition component corresponding to the preset initial component can be obtained, and the definition component can be encapsulated into a dynamic component, such as a product details page component, a shopping cart component, and an order list component, etc.

[0055] According to the technical solution provided by the embodiment of the present disclosure, by retrieving and obtaining at least one initial component from a preset component library, each initial component can be edited, so that a definition component corresponding to the preset initial component can be obtained, and the definition component can be encapsulated to obtain at least one dynamic component, thereby enhancing the flexibility and efficiency of page generation, improving the reusability and maintainability of components, and improving the response speed. Through the conversion process from preset initial components to dynamic components, repeated coding work is reduced, and the consistency and scalability of components are ensured.

[0056] In some embodiments, relationship mapping processing is performed on the elements corresponding to each page to be generated to obtain a component identifier corresponding to each element, including: structural parsing processing is performed on the elements corresponding to each page to be generated to obtain a document object model tree corresponding to each element; matching processing is performed on the document object model tree corresponding to each element to obtain a component identifier corresponding to each element.

[0057] Specifically, the corresponding HTML structure of each page to be generated can be traversed and parsed programmatically, wherein the programming method includes but is not limited to languages ​​such as JavaScript or Python, and the elements corresponding to the page to be generated and the hierarchical relationship of the elements can be converted into a Document Object Model Tree (DOM Tree), wherein the elements corresponding to the page to be generated include but are not limited to buttons, input boxes, and / or pictures, etc., and the DOM Tree can be a tree structure, and each node of the DOM Tree represents an element on the page to be generated, and the parent-child relationship between nodes can be used to characterize the nested relationship of the elements in the HTML document, and then the elements in the DOM Tree can be matched through a preset component identifier mapping rule or algorithm, and each element is mapped to a corresponding front-end component identifier to obtain a component identifier corresponding to each element, and the component identifier can correspond to a component in a component library in a front-end framework, and the front-end framework is but not limited to React or Vue, etc.

[0058] The document object model tree corresponding to the element can be used to represent the structured representation of the HTML or XML document in memory. The document object model tree corresponding to the element can be constructed from the document source code by the browser's parser. Each node represents an element in the document, including but not limited to,, etc., and may also include the element's attributes, child elements, and association information with other elements. The acquisition of the DOM Tree may be achieved through a programming interface, which includes but is not limited to JavaScript's DOM API, etc., which may query, modify, and add page elements at runtime.

[0059] For example, the page to be generated can be a product details page, a shopping cart page, and an order page. Then, by performing structural analysis on the elements corresponding to the page to be generated, the DOM Tree corresponding to each element can be obtained. Through matching processing, the elements in the page to be generated can be mapped to the component identifiers in the preset component library. For example, the product image element can be mapped to the image display component identifier, the price tag element can be mapped to the text display component identifier, and the "Add to Cart" button can be mapped to the interactive button component identifier.

[0060] According to the technical solution provided by the embodiment of the present disclosure, by programmatically traversing and parsing the corresponding HTML structure of each page to be generated, the elements corresponding to the page to be generated and the hierarchical relationship of the elements can be converted into a DOM Tree, and then the elements in the DOM Tree can be matched through a preset component identifier mapping rule or algorithm, and each element can be mapped to the corresponding front-end component identifier to obtain the component identifier corresponding to each element, thereby enhancing the degree of automation of page generation, improving code reusability and maintainability, and improving development efficiency.

[0061] In some embodiments, the component corresponding to each element is determined based on a preset view layer directory and a component identifier corresponding to each element, including: parsing the component identifier corresponding to each element to obtain component configuration data corresponding to each element; instantiating the component of the preset view layer directory based on the component configuration data corresponding to each element to obtain the component corresponding to each element.

[0062] Specifically, the component identifier corresponding to each element can be parsed. The component identifier corresponding to the element can include the type, attributes and possible associated data of the component. The component identifier corresponding to the element can be converted into the component configuration data corresponding to the element through parsing, including but not limited to the component type, style, and / or event processing function and other information. Then, the component configuration data corresponding to the element can be used to instantiate the component in the preset view layer directory, that is, dynamically create a component instance and configure the properties of the component, so as to obtain the component instance corresponding to each element, that is, the component corresponding to each element.

[0063] Among them, the component configuration data corresponding to the element can be a collection of all information required to describe and configure the component instance. The component configuration data corresponding to the element can be obtained by parsing the component identifier corresponding to the element, including but not limited to the component type, style, behavior, and / or data binding, etc. The component configuration data corresponding to the element can be structured data, including but not limited to JSON or XML, etc. The component configuration data corresponding to the element can be used to guide the creation and configuration of the component at runtime.

[0064] For example, the elements corresponding to the page to be generated may be product images, price tags, and purchase buttons, and the component identifiers corresponding to each element may be obtained through configuration, and then the corresponding component configuration data may be read from the configuration file according to the component identifiers corresponding to the elements, such as the Uniform Resource Locator (URL) of the image, the price format, and the behavior after the button is clicked, and then the component configuration data corresponding to the elements may be used to instantiate the components in the preset view layer directory, dynamically construct the UI interface of the product details page, and obtain the components corresponding to each element.

[0065] According to the technical solution provided by the embodiment of the present disclosure, by parsing the component identifier corresponding to each element, the component identifier corresponding to the element is converted into the component configuration data corresponding to the element, and then the preset view layer directory can be instantiated by the component configuration data corresponding to the element to obtain the component instance corresponding to each element, that is, the component corresponding to each element, thereby enhancing the flexibility and maintainability of page generation, managing elements in a componentized manner, enhancing the modularity of target page construction, facilitating reuse and modification, improving development efficiency, reducing repetitive coding work, and improving user experience and response speed.

[0066] In some embodiments, target data corresponding to each element is obtained from a preset database according to the components corresponding to each element, including: constructing a query statement corresponding to the preset database based on preset data screening conditions; querying and processing the data corresponding to the preset database according to the query statement corresponding to the preset database and the components corresponding to each element to obtain the target data corresponding to each element.

[0067] Specifically, a query statement corresponding to the preset database can be constructed according to the preset data screening conditions, and then the query statement corresponding to the preset database can be combined with the components corresponding to each element to query the preset database to obtain the target data corresponding to each element, wherein the preset data screening conditions can be user identification information or time range, etc., which are not limited here.

[0068] Among them, the preset data screening conditions may be conditions set according to needs or user interaction behaviors for screening database records. The preset data screening conditions may include but are not limited to user identification information, timestamp range, geographic location, and / or commodity category, etc., which can be used to determine the data scope of the retrieval; the query statement corresponding to the preset database may be a statement for retrieving data from the preset database written in a preset database query language according to the preset data screening conditions. The query statement corresponding to the preset database may define the table, field, screening conditions, and sorting and grouping rules to be queried. The preset database query language may be a structured query language (SQL); the data corresponding to the preset database may be a structured data set stored in the preset database. The data corresponding to the preset database may be stored and controlled by a preset database management system, and may be retrieved and accessed through query statements. The data corresponding to the preset database may include user information, product information, and / or transaction records, etc., which are not limited here.

[0069] For example, you can query the product name element, extract the corresponding target data from the query result according to the corresponding component, and display the product name obtained by the query on the target page.

[0070] According to the technical solution provided by the embodiment of the present disclosure, a query statement corresponding to the preset database is constructed according to the preset data screening conditions, and then the preset database can be queried through the query statement corresponding to the preset database combined with the components corresponding to each element to obtain the target data corresponding to each element, thereby enhancing the flexibility and dynamism of the data, and data can be dynamically retrieved from the database according to user interaction or application logic, thereby improving the efficiency and accuracy of data processing, and reducing unnecessary data transmission and processing through preset screening conditions and componentized data requests.

[0071] In some embodiments, the above-mentioned page generation method also includes: obtaining a page identifier corresponding to the target page and an update element corresponding to at least one target page; performing relationship mapping processing on the update elements corresponding to each target page to obtain a component identifier corresponding to each update element; determining the component corresponding to each update element according to a preset view layer directory and a component identifier corresponding to each update element; filtering and processing the data corresponding to the preset database through the component corresponding to each update element to obtain the update data corresponding to each update element; rendering and processing the update data corresponding to each update element based on the page identifier corresponding to the target page to obtain an updated page.

[0072] Specifically, a page identifier corresponding to the target page and at least one update element corresponding to the target page can be obtained, relationship mapping processing can be performed on the update elements corresponding to the target page to obtain component identifiers corresponding to the update elements, components corresponding to each update element can be determined through a preset view layer directory and component identifiers corresponding to each update element, a preset database can be screened through the components corresponding to each update element to obtain update data corresponding to each update element, and then based on the page identifier corresponding to the target page, the update data corresponding to each update element can be rendered onto the target page to generate an update page.

[0073] Among them, the page identifier corresponding to the target page can be a string or number that identifies the target page, which can be used to distinguish different pages or page states; the update element corresponding to the target page can be the part of the target page that needs to be updated according to data changes, including but not limited to product lists, user information, and / or order status, etc. The content of the update element corresponding to the target page can be dynamically adjusted according to the data in the preset database; the component identifier corresponding to the update element can be a string or code used to identify the component bound to the update element, and the component identifier corresponding to the update element can be associated with and execute the corresponding component logic to obtain or update the data; the component corresponding to the update element can be a logical unit for processing update element data acquisition, conversion, and rendering. The components corresponding to each update element correspond to corresponding functions and data models, and can process and display data; the update page can be a page containing updated data, and the update page can be used to represent the data status of the completed update or the result of the user operation.

[0074] For example, the page identifier of the news page and the news title element that needs to be updated on the news page can be obtained, and relationship mapping can be performed on the news title element to find the corresponding component identifier and determine the associated component. Then, the preset database can be queried through the component corresponding to the news title element to obtain the corresponding news data. The updated data can be rendered on the news page according to the page identifier corresponding to the news page to generate an updated page containing the updated news title.

[0075] According to the technical solution provided by the embodiment of the present disclosure, by obtaining a page identifier corresponding to a target page and an update element corresponding to at least one target page, a relationship mapping process can be performed on the update element corresponding to the target page to obtain a component identifier corresponding to the update element, and the component corresponding to each update element can be determined through a preset view layer directory and a component identifier corresponding to each update element, and the preset database can be screened through the components corresponding to each update element to obtain update data corresponding to each update element, and then based on the page identifier corresponding to the target page, the update data corresponding to each update element can be rendered onto the target page to generate an update page, thereby enhancing the dynamic update capability of the page, so that the page can dynamically update content according to user behavior or data changes, thereby improving the smoothness and real-time nature of the user experience, improving the accuracy and efficiency of data processing, and processing the update elements in a componentized manner to improve the flexibility and scalability of the system.

[0076] All the above optional technical solutions can be arbitrarily combined to form optional embodiments of the present disclosure, and will not be described in detail here.

[0077] The following are embodiments of the device disclosed herein, which can be used to execute the method embodiments disclosed herein. For details not disclosed in the device embodiments disclosed herein, please refer to the method embodiments disclosed herein.

[0078] Figure 3 Schematic diagram of a device for generating a page provided by an embodiment of the present disclosure. Figure 3 As shown, the page generation device includes:

[0079] An acquisition module 301 is used to acquire a page identifier corresponding to at least one to-be-generated page and elements corresponding to each to-be-generated page;

[0080] The first processing module 302 is used to perform relationship mapping processing on the elements corresponding to each to-be-generated page to obtain a component identifier corresponding to each element;

[0081] A determination module 303, used to determine the component corresponding to each element according to a preset view layer directory and a component identifier corresponding to each element;

[0082] The second processing module 304 is used to obtain target data corresponding to each element from a preset database according to the components corresponding to each element;

[0083] The third processing module 305 is used to render the target data corresponding to each element based on the page identifier corresponding to each page to be generated, so as to obtain at least one target page.

[0084] According to the technical solution provided by the embodiment of the present disclosure, by obtaining the page identifier corresponding to the page to be generated and the elements corresponding to each page to be generated, by performing relationship mapping on the elements corresponding to each page to be generated, the component identifier corresponding to each element in the page to be generated is obtained, and according to the preset view layer directory and the component identifier corresponding to each element, the back-end implementation method of each element, that is, the component corresponding to each element, is determined, and then the target data of each component configuration, that is, the target data corresponding to each element, can be obtained from a preset database according to the component corresponding to each element, and the target data corresponding to each element is rendered based on the page identifier corresponding to each page to be generated to obtain at least one target page, thereby improving the rapid reuse capability of the target page, enhancing the compatibility of the target page, and improving the processing efficiency of page generation, decoupling the page elements from the components through a modular layout, and associating them through component identifiers, so that each part of the page can be independently maintained and updated without modifying the entire page, thereby enhancing the maintainability and scalability of the target page.

[0085] In some embodiments, the above-mentioned page generation device is also used to determine the initial view layer directory of at least one page to be generated in response to a directory creation instruction; obtain at least one preset dynamic component; obtain the components corresponding to each initial view layer directory from at least one preset dynamic component; and register the components corresponding to each initial view layer directory based on the initial view layer directory of the page to be generated to obtain a preset view layer directory.

[0086] In some embodiments, the generation device of the above-mentioned page is also used to obtain at least one preset initial component; edit each preset initial component to obtain a definition component corresponding to each preset initial component; and encapsulate the definition component corresponding to each preset initial component to obtain at least one preset dynamic component.

[0087] In some embodiments, the first processing module 302 is specifically used to perform structural analysis processing on the elements corresponding to each to-be-generated page to obtain a document object model tree corresponding to each element; and perform matching processing on the document object model tree corresponding to each element to obtain a component identifier corresponding to each element.

[0088] In some embodiments, the determination module 303 is specifically used to parse the component identifier corresponding to each element to obtain the component configuration data corresponding to each element; instantiate the components of the preset view layer directory according to the component configuration data corresponding to each element to obtain the components corresponding to each element.

[0089] In some embodiments, the second processing module 304 is specifically used to construct a query statement corresponding to a preset database based on preset data screening conditions; perform query processing on the data corresponding to the preset database according to the query statement corresponding to the preset database and the components corresponding to each element to obtain the target data corresponding to each element.

[0090] In some embodiments, the above-mentioned page generation device is also used to obtain a page identifier corresponding to the target page and an update element corresponding to at least one target page; perform relationship mapping processing on the update elements corresponding to each target page to obtain a component identifier corresponding to each update element; determine the component corresponding to each update element based on a preset view layer directory and a component identifier corresponding to each update element; filter the data corresponding to the preset database through the component corresponding to each update element to obtain update data corresponding to each update element; render the update data corresponding to each update element based on the page identifier corresponding to the target page to obtain an update page.

[0091] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present disclosure.

[0092] Figure 4 Schematic diagram of an electronic device 4 provided in an embodiment of the present disclosure. Figure 4 As shown, the electronic device 4 of this embodiment includes: a processor 401, a memory 402, and a computer program 403 stored in the memory 402 and executable on the processor 401. When the processor 401 executes the computer program 403, the steps in the above-mentioned method embodiments are implemented. Alternatively, when the processor 401 executes the computer program 403, the functions of the modules / units in the above-mentioned device embodiments are implemented.

[0093] The electronic device 4 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 4 may include, but is not limited to, a processor 401 and a memory 402. Those skilled in the art will appreciate that Figure 4 The electronic device 4 is merely an example and does not limit the electronic device 4 , and may include more or less components than those shown in the figure, or different components.

[0094] The processor 401 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc.

[0095] The memory 402 may be an internal storage unit of the electronic device 4, for example, a hard disk or memory of the electronic device 4. The memory 402 may also be an external storage device of the electronic device 4, for example, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the electronic device 4. The memory 402 may also include both an internal storage unit and an external storage device of the electronic device 4. The memory 402 is used to store computer programs and other programs and data required by the electronic device.

[0096] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units.

[0097] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium (e.g., a computer-readable storage medium). Based on this understanding, the present disclosure implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, and the computer program code may be in source code form, object code form, executable file or some intermediate form, etc. The computer-readable storage medium may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc.

[0098] The above embodiments are only used to illustrate the technical solutions of the present disclosure, rather than to limit them. Although the present disclosure has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should all be included in the protection scope of the present disclosure.

Claims

1. A method for generating a page, characterized in that: include: Obtaining a page identifier corresponding to at least one to-be-generated page and elements corresponding to each of the to-be-generated pages; Performing relationship mapping processing on the elements corresponding to each of the pages to be generated to obtain a component identifier corresponding to each of the elements; Determine the component corresponding to each of the elements according to the preset view layer directory and the component identifier corresponding to each of the elements; Acquire target data corresponding to each of the elements from a preset database according to the components corresponding to each of the elements; The target data corresponding to each of the elements is rendered based on the page identifier corresponding to each of the pages to be generated to obtain at least one target page.

2. The method for generating a page according to claim 1, characterized in that: Before determining the component corresponding to each element according to the preset view layer directory and the component identifier corresponding to each element, the method further includes: In response to the directory creation instruction, determining an initial view layer directory of at least one of the pages to be generated; Get at least one preset dynamic component; Obtaining components corresponding to each of the initial view layer directories from at least one preset dynamic component; Based on the initial view layer directory of the page to be generated, registration processing is performed on the components corresponding to each of the initial view layer directories to obtain the preset view layer directory.

3. The method for generating a page according to claim 2, characterized in that: Before obtaining at least one preset dynamic component, the method further includes: Obtain at least one preset initial component; Editing each of the preset initial components to obtain a definition component corresponding to each of the preset initial components; The definition components corresponding to each of the preset initial components are packaged to obtain at least one preset dynamic component.

4. The method for generating a page according to claim 1, characterized in that: The performing relationship mapping processing on the elements corresponding to the pages to be generated to obtain component identifiers corresponding to the elements includes: Performing structural analysis on the elements corresponding to each of the pages to be generated to obtain a document object model tree corresponding to each of the elements; Matching processing is performed on the document object model tree corresponding to each of the elements to obtain a component identifier corresponding to each of the elements.

5. The method for generating a page according to claim 1, characterized in that: The determining, according to the preset view layer directory and the component identifiers corresponding to the elements, the components corresponding to the elements, comprises: Parsing the component identifiers corresponding to the elements to obtain the component configuration data corresponding to the elements; The preset view layer directory is instantiated according to the component configuration data corresponding to each of the elements to obtain the components corresponding to each of the elements.

6. The method for generating a page according to claim 1, characterized in that: The acquiring target data corresponding to each of the elements from a preset database according to the components corresponding to each of the elements comprises: Based on the preset data screening conditions, construct a query statement corresponding to the preset database; According to the query statement corresponding to the preset database and the components corresponding to each of the elements, query processing is performed on the data corresponding to the preset database to obtain the target data corresponding to each of the elements.

7. The method for generating a page according to claim 1, characterized in that: The method further comprises: Acquire a page identifier corresponding to the target page and at least one update element corresponding to the target page; Performing relationship mapping processing on the update elements corresponding to each of the target pages to obtain component identifiers corresponding to each of the update elements; Determine the component corresponding to each of the update elements according to the preset view layer directory and the component identifier corresponding to each of the update elements; Filtering and processing the data corresponding to the preset database through the components corresponding to each of the update elements to obtain update data corresponding to each of the update elements; The update data corresponding to each of the update elements is rendered based on the page identifier corresponding to the target page to obtain an update page.

8. A device for generating a page, characterized in that: include: An acquisition module, used to acquire a page identifier corresponding to at least one to-be-generated page and elements corresponding to each of the to-be-generated pages; A first processing module is used to perform relationship mapping processing on the elements corresponding to each of the pages to be generated, so as to obtain a component identifier corresponding to each of the elements; A determination module, used to determine the component corresponding to each of the elements according to a preset view layer directory and a component identifier corresponding to each of the elements; A second processing module, used for acquiring target data corresponding to each of the elements from a preset database according to the components corresponding to each of the elements; The third processing module is used to render the target data corresponding to each of the elements based on the page identifiers corresponding to each of the pages to be generated, so as to obtain at least one target page.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images