Front-end page dynamic rendering method and device, electronic equipment, storage medium and program product

Abstract

The invention provides a front-end page dynamic rendering method and device, electronic equipment, a storage medium and a program product. The method comprises the steps of obtaining page configuration data; wherein the page configuration data comprises page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information comprises a mapping relationship between a page field and a data field in a page component; obtaining page data corresponding to the page field according to a mapping relationship between the page field and the data field, and performing page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information comprises page data. According to the front-end page dynamic rendering method and device, the electronic equipment, the storage medium and the program product provided by the invention, page dynamic rendering according to the page configuration data is realized, the development and maintenance efficiency of page rendering is improved, and meanwhile, the flexibility and expandability of page rendering are improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end page dynamic rendering method, device, electronic device, storage medium and program product. Background Art

[0002] In enterprise information management, various display-oriented systems such as enterprise resource planning (ERP), customer relationship management (CRM), supply chain management (SCM), etc., are facing frequent iterative update requirements. These system pages usually need to display a large amount of data and provide corresponding operation functions to meet business needs.

[0003] Most display system pages have relatively conventional functions, including filter items, table displays, and operation buttons. During the system iteration process, it is often necessary to add or remove filter items, list fields, or operations. The implementation of these functions often requires a large amount of front-end human resources for repetitive follow-up and adjustment, and lacks efficient solutions. Summary of the invention

[0004] The present invention provides a front-end page dynamic rendering method, device, electronic device, storage medium and program product, which are used to solve the defects in the prior art that page rendering often requires a large amount of front-end human resources for repetitive follow-up and adjustment, and lacks efficient solutions, thereby improving the development and maintenance efficiency of page rendering, and at the same time improving the flexibility and scalability of page rendering.

[0005] The present invention provides a front-end page dynamic rendering method, comprising the following steps: obtaining page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page component; obtaining page data corresponding to the page fields according to the mapping relationship between the page fields and the data fields, and performing page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

[0006] According to a front-end page dynamic rendering method provided by the present invention, page rendering is performed according to the page configuration data and preset page rendering information, including: calling a corresponding page-level dynamic rendering component according to the page type configuration information; and using the page-level dynamic rendering component to perform page rendering according to the page configuration data and preset page rendering information.

[0007] According to a front-end page dynamic rendering method provided by the present invention, the preset page rendering information also includes custom processing logic; the page rendering according to the page configuration data and the preset page rendering information includes: determining the page type according to the page type configuration information; determining the layout method of at least one page component according to the page structure configuration information; determining the component attributes of the at least one page component according to the page component configuration information; wherein the component attributes include the page fields and display attributes; obtaining interface data according to the data interface configuration information; and performing page rendering according to the page type, the layout method of the at least one page component, the component attributes, the interface data, the page data corresponding to the page fields, and the custom processing logic.

[0008] According to a front-end page dynamic rendering method provided by the present invention, before the page rendering is performed according to the layout mode of the at least one page component, the component properties, the interface data, the page data corresponding to the page field and the custom processing logic, the method also includes: in response to the custom processing logic including a first custom processing logic corresponding to the page-level dynamic rendering component, the first custom processing logic is passed in through a first custom processing function interface reserved by the page-level dynamic rendering component for subsequent page rendering processing; in response to the custom processing logic including a second custom processing logic corresponding to the page component, the second custom processing logic is passed in through the first custom processing function interface reserved by the page-level dynamic rendering component, and the second custom processing logic is further transmitted to the second custom processing function interface reserved by the page component for subsequent page rendering processing.

[0009] According to a front-end page dynamic rendering method provided by the present invention, the custom processing logic includes at least one of data initialization, data verification, personalized button and pop-up window call processing logic.

[0010] According to a front-end page dynamic rendering method provided by the present invention, before obtaining the page configuration data, the method also includes: constructing a normalized template for the page configuration data based on GraphQL, and generating a system prompt word based on the normalized template; generating a user prompt word according to a user requirement document, a data query interface and a data query statement for page rendering; and generating the page configuration data according to the system prompt word and the user prompt word using a GPT-based intelligent agent.

[0011] According to a front-end page dynamic rendering method provided by the present invention, the page configuration data also includes a method for obtaining the page data corresponding to the data field, and the acquisition method includes the data query interface and the data query statement; the acquisition of the page data corresponding to the page field according to the mapping relationship between the page field and the data field includes: performing data query based on the data query interface and the data query statement to obtain the page data corresponding to the page field.

[0012] The present invention also provides a front-end page dynamic rendering device, comprising the following modules: an acquisition module, used to: acquire page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page component; a rendering module, used to: acquire page data corresponding to the page field according to the mapping relationship between the page field and the data field, and perform page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

[0013] The present invention also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method for dynamic rendering of a front-end page as described above is implemented.

[0014] The present invention also provides a non-transitory computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the method for dynamic rendering of a front-end page as described in any one of the above is implemented.

[0015] The present invention also provides a computer program product, including a computer program, wherein when the computer program is executed by a processor, the computer program implements any of the above-mentioned methods for dynamic rendering of a front-end page.

[0016] The front-end page dynamic rendering method, device, electronic device, storage medium and program product provided by the present invention obtain page configuration data, the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, the page data configuration information includes the mapping relationship between page fields and data fields in the page component, the page data corresponding to the page field is obtained according to the mapping relationship between the page field and the data field, the page is rendered according to the page configuration data and preset page rendering information, the preset page rendering information includes the page data, and the page is dynamically rendered according to the page configuration data, thereby improving the development and maintenance efficiency of the page rendering, and at the same time improving the flexibility and scalability of the page rendering. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0018] Figure 1 This is one of the flow charts of the front-end page dynamic rendering method provided by the present invention.

[0019] Figure 2 It is a schematic diagram of the data processing process of the dynamic component in the front-end page dynamic rendering method provided by the present invention.

[0020] Figure 3 It is a schematic diagram of the data processing process of the intelligent agent in the front-end page dynamic rendering method provided by the present invention.

[0021] Figure 4 This is the second flow chart of the front-end page dynamic rendering method provided by the present invention.

[0022] Figure 5 It is a structural schematic diagram of the front-end page dynamic rendering device provided by the present invention.

[0023] Figure 6 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0024] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0025] Figure 1 This is one of the flow charts of the front-end page dynamic rendering method provided by the present invention. Figure 1 As shown, the method includes the following: Step S1, obtaining page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page component.

[0026] The front-end page dynamic rendering method provided by the present invention can be applied to the front end. The present invention performs front-end page dynamic rendering based on page configuration data, and when the page is iterated, the page can be re-rendered based on the adjusted page configuration data to achieve automatic and dynamic update of the page.

[0027] The page configuration data can be stored in the backend server or other locations. Before rendering the page, the page configuration data is obtained according to the storage location of the page configuration data. Taking the case where the page configuration data is stored in the backend server as an example, the configuration interface of the front-end server can be called according to the unique identifier of the page, and the application programming interface (API) of the backend server can be called through the front-end server to obtain the page configuration data.

[0028] The page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information. The page data configuration information includes the mapping relationship between page fields and data fields in the page components. The page type configuration information includes information about the page type of the page to be rendered. For example, the page type can be a list page (including filter items, tables, operation buttons, etc.), a form pop-up window, and a detail page. The page structure configuration information includes information about the page structure of the page to be rendered. The page structure information includes the layout method of each page component in the page. The page component configuration information includes information about the component properties of the page component. The data interface configuration information includes information about the interface that needs to be called when the page component is rendered. The page data configuration information includes the mapping relationship between the page fields and data fields in the page component, that is, the specific field information to be displayed by the page field.

[0029] Step S2: acquiring page data corresponding to the page field according to the mapping relationship between the page field and the data field, and performing page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

[0030] The page data corresponding to the page field is obtained according to the mapping relationship between the page field and the data field. Since the page field and the data field have a mapping relationship, the corresponding page data is obtained according to the data field, and the obtained page data is the page data corresponding to the page field. The page is rendered according to the page configuration data and the preset page rendering information. Among them, the preset page rendering information includes page data. That is, the page can be rendered according to the page type configuration information, the page structure configuration information, the page component configuration information, the data interface configuration information, the page data configuration information and the page data.

[0031] The front-end page dynamic rendering method provided by the present invention obtains page configuration data, the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, the page data configuration information includes the mapping relationship between page fields and data fields in the page components, obtains page data corresponding to the page fields according to the mapping relationship between the page fields and the data fields, performs page rendering according to the page configuration data and preset page rendering information, the preset page rendering information includes the page data, realizes dynamic rendering of the page according to the page configuration data, improves the development and maintenance efficiency of the page rendering, and at the same time improves the flexibility and scalability of the page rendering.

[0032] According to a front-end page dynamic rendering method provided by the present invention, page rendering is performed according to the page configuration data and preset page rendering information, including: calling a corresponding page-level dynamic rendering component according to the page type configuration information; and using the page-level dynamic rendering component to perform page rendering according to the page configuration data and preset page rendering information.

[0033] Pre-build page-level dynamic rendering components for page rendering. Different page types correspond to different page-level dynamic rendering components. The page-level dynamic rendering component can embed a combination of different page components according to the needs of the page structure to achieve the final page rendering.

[0034] When rendering a page according to the page configuration data and the preset page rendering information, the corresponding page-level dynamic rendering component is called according to the page type configuration information, and the page-level dynamic rendering component is used to render the page according to the page configuration data and the preset page rendering information.

[0035] The front-end page dynamic rendering method provided by the present invention calls the corresponding page-level dynamic rendering component according to the page type configuration information, uses the page-level dynamic rendering component to render the page according to the page configuration data and the preset page rendering information, and processes the rendering of different types of pages based on different page-level dynamic rendering components, thereby improving the maintainability of the page rendering.

[0036] According to a front-end page dynamic rendering method provided by the present invention, the preset page rendering information also includes custom processing logic; the page rendering according to the page configuration data and the preset page rendering information includes: determining the page type according to the page type configuration information; determining the layout method of at least one page component according to the page structure configuration information; determining the component attributes of the at least one page component according to the page component configuration information; wherein the component attributes include the page fields and display attributes; obtaining interface data according to the data interface configuration information; and performing page rendering according to the page type, the layout method of the at least one page component, the component attributes, the interface data, the page data corresponding to the page fields, and the custom processing logic.

[0037] In addition, to meet different personalized needs, the preset page rendering information also includes a custom processing logic. In this way, when the page is rendered according to the page configuration data and the preset page rendering information, the page can be rendered based on the page configuration data, the page data and the custom processing logic.

[0038] Specifically, the page type is determined according to the page type configuration information; the layout mode of at least one page component is determined according to the page structure configuration information; the component attributes of at least one page component are determined according to the page component configuration information; wherein the component attributes include page fields and display attributes; the interface data is obtained according to the data interface configuration information; the page is rendered according to the page type, the layout mode of at least one page component, the component attributes, the interface data, the page data corresponding to the page fields, and the custom processing logic. When rendering the page, it is necessary to implement the corresponding page type and the layout mode of the page components, the page components are rendered according to the corresponding component attributes and interface data, the page fields correspond to the page data, and the corresponding custom processing logic is implemented.

[0039] Figure 2 The figure is a schematic diagram of the data processing process of the dynamic component in the front-end page dynamic rendering method provided by the present invention. The dynamic component includes a page-level dynamic rendering component and a page component. The data of the page-level dynamic rendering component and the page component are completely decoupled from the UI (user interface), supporting dynamic data binding and high configurability. The components can be reused to ensure efficient rendering and fast response. In addition, unified state management can be further supported to ensure data synchronization and state consistency. Figure 2 In , business logic refers to custom processing logic.

[0040] The front-end page dynamic rendering method provided by the present invention determines the page type according to the page type configuration information, determines the layout mode of at least one page component according to the page structure configuration information, and determines the component attributes of at least one page component according to the page component configuration information; wherein the component attributes include page fields and display attributes, obtains interface data according to the data interface configuration information, and performs page rendering according to the page type, the layout mode of at least one page component, component attributes, interface data, page data corresponding to the page fields, and custom processing logic, thereby meeting the personalized needs of page rendering and improving flexibility.

[0041] According to a front-end page dynamic rendering method provided by the present invention, before the page rendering is performed according to the layout mode of the at least one page component, the component properties, the interface data, the page data corresponding to the page field and the custom processing logic, the method also includes: in response to the custom processing logic including a first custom processing logic corresponding to the page-level dynamic rendering component, the first custom processing logic is passed in through a first custom processing function interface reserved by the page-level dynamic rendering component for subsequent page rendering processing; in response to the custom processing logic including a second custom processing logic corresponding to the page component, the second custom processing logic is passed in through the first custom processing function interface reserved by the page-level dynamic rendering component, and the second custom processing logic is further transmitted to the second custom processing function interface reserved by the page component for subsequent page rendering processing.

[0042] The custom processing logic may include a first custom processing logic corresponding to the page-level dynamic rendering component and a second custom processing logic corresponding to the page component, or include one of the first custom processing logic and the second custom processing logic.

[0043] Before rendering the page according to the layout method, component properties, interface data, page data corresponding to the page fields and custom processing logic of at least one page component, if it is known that the custom processing logic includes a first custom processing logic corresponding to the page-level dynamic rendering component, the first custom processing logic is passed in through the first custom processing function interface reserved for the page-level dynamic rendering component for subsequent page rendering processing. After the first custom processing logic is passed in to the first custom processing function interface, when the page is rendered, relevant processing can be performed according to the preset function of the first custom processing function interface and the first custom processing logic, such as calling the back-end interface to obtain data, and performing corresponding processing on the data by the first custom processing logic.

[0044] If it is known that the custom processing logic includes the second custom processing logic corresponding to the page component, the second custom processing logic is passed in through the first custom processing function interface reserved by the page-level dynamic rendering component, and is transparently transmitted to the second custom processing function interface reserved by the page component for subsequent page rendering processing. After the second custom processing logic is passed in to the second custom processing function interface, when the page is rendered, relevant processing can be performed according to the preset function of the second custom processing function interface and the second custom processing logic, such as calling the backend interface to obtain data, and performing corresponding processing on the data according to the second custom processing logic, etc.

[0045] The page component can be obtained by encapsulating a layer of functions for processing page configuration and page data based on the existing page component. The page-level dynamic rendering component also needs to encapsulate the functions for processing page configuration and page data. By reserving the first custom processing function interface in the encapsulated page-level dynamic rendering component and the second custom processing function interface in the encapsulated page component to pass in different custom processing logics, different data processing and display requirements can be met.

[0046] The front-end page dynamic rendering method provided by the present invention, in response to the custom processing logic including the first custom processing logic corresponding to the page-level dynamic rendering component, the first custom processing logic is passed in through the first custom processing function interface reserved by the page-level dynamic rendering component for subsequent page rendering processing; in response to the custom processing logic including the second custom processing logic corresponding to the page component, the second custom processing logic is passed in through the first custom processing function interface reserved by the page-level dynamic rendering component, and is transparently transmitted to the second custom processing function interface reserved by the page component for subsequent page rendering processing, thereby improving the uniformity and standardization of the custom processing logic passed in, and improving the processing efficiency of the custom processing logic, thereby further improving the efficiency of page rendering development and maintenance.

[0047] According to a front-end page dynamic rendering method provided by the present invention, the custom processing logic includes at least one of data initialization, data verification, personalized button and pop-up window call processing logic.

[0048] The first custom processing logic and the second custom processing logic may include at least one of data initialization, data verification, personalized button and pop-up window invocation processing logic. Other custom processing logics may also be flexibly set according to different requirements.

[0049] Standardized page templates can be set for different page types. The page templates contain samples of custom functions such as data formatting, data initialization, personalized buttons, pop-up window calls, etc. Users can write custom processing logic based on page templates and save them in external page files to maintain the universality and reusability of page-level dynamic rendering components and page components.

[0050] The front-end page dynamic rendering method provided by the present invention further improves the flexibility of page rendering by setting custom processing logic including at least one of data initialization, data verification, personalized button and pop-up window call processing logic.

[0051] According to a front-end page dynamic rendering method provided by the present invention, before obtaining the page configuration data, the method also includes: constructing a normalized template for the page configuration data based on GraphQL, and generating a system prompt word based on the normalized template; generating a user prompt word according to a user requirement document, a data query interface and a data query statement for page rendering; and generating the page configuration data according to the system prompt word and the user prompt word using a GPT-based intelligent agent.

[0052] GraphQL is a query language for APIs. In the embodiment of the present invention, GraphQL is selected to define a standardized protocol for page configuration, providing a unified strongly typed data structure, so that front-end and back-end developers can collaborate on the same data model, reduce communication costs, and avoid errors caused by inconsistent data structures. Page configuration data can be dynamically obtained through the interface or generated by the front end, which is flexible and efficient and suitable for different data scenarios. GraphQL's strong typing ensures data integrity and consistency, clarifies the data type and structure of each field, reduces errors caused by data type mismatches, and is easy to maintain.

[0053] Figure 3 Schematic diagram of the data processing process of the intelligent agent in the front-end page dynamic rendering method provided by the present invention. Figure 3 As shown in the figure, GraphQL is used to define the standardized protocol for page configuration. GraphQL has the characteristics of strong typing, which is easy for the backend to understand and use, and can provide a standardized data structure. In the specific implementation, a standardized template (GraphQL Schema) for page configuration data is built based on GraphQL, including page structure, component configuration, data interface, etc. It is necessary to define standardized templates for different page types such as list pages (including filter items, tables, operations), form pop-ups, and detail pages.

[0054] Using GPT (Generative Pre-Trained Transformer), an agent for generating page configuration data is provided. System prompt words are generated according to the normalized template of the constructed page configuration data. The system prompt words may include information that the generated page configuration data needs to comply with the normalized template, which is used to limit the format of the page configuration data output by the agent. User prompt words are generated based on the user requirement document, data query interface and data query statement (SQL) input by the user. The user prompt words may include information that the generated page configuration data needs to comply with the user requirements, as well as functional information of the data query interface and data query statement when the page configuration data is generated.

[0055] The system prompt words and the user prompt words are input into the intelligent agent, and the intelligent agent can generate page configuration data that meets the requirements according to the system prompt words and the user prompt words.

[0056] The front-end page dynamic rendering method provided by the present invention builds a standardized template for page configuration data based on GraphQL, generates system prompt words based on the standardized template, generates user prompt words according to user demand documents, data query interfaces and data query statements for page rendering, and uses a GPT-based intelligent agent to generate page configuration data according to system prompt words and user prompt words, which not only reduces the tedious work of manually writing page configurations, but also can quickly implement page configurations. The intelligent agent can automatically generate standardized page configuration data according to requirements and data sources, greatly improving development efficiency and accuracy, and ensuring the consistency and integrity of configurations, effectively improving the intelligence of page rendering.

[0057] According to a front-end page dynamic rendering method provided by the present invention, the page configuration data also includes a method for obtaining the page data corresponding to the data field, and the acquisition method includes the data query interface and the data query statement; the acquisition of the page data corresponding to the page field according to the mapping relationship between the page field and the data field includes: performing data query based on the data query interface and the data query statement to obtain the page data corresponding to the page field.

[0058] The page configuration data also includes a method for obtaining the page data corresponding to the data field. The method includes a data query interface and a data query statement. The data query statement includes an input parameter formatting function and an output parameter formatting function.

[0059] Call the business data interface to pull the data information required for the page. When obtaining the page data corresponding to the page field according to the mapping relationship between the page field and the data field, perform data query based on the data query interface and data query statement to obtain the page data corresponding to the page field. In the specific implementation, it is necessary to pass the specific data query interface, input parameter formatting function, and output parameter formatting function into the encapsulated component to pull the data required for processing the page.

[0060] When the page is initialized, the page configuration data can be parsed and converted into configuration items that can be recognized by the front-end components as needed. After the page data is pulled, the page structure and business data are combined to display the complete page.

[0061] The front-end page dynamic rendering method provided by the present invention includes a method for obtaining page data corresponding to data fields through page configuration data, and the obtaining method includes a data query interface and a data query statement. Data query is performed based on the data query interface and the data query statement to obtain page data corresponding to the page field, thereby improving the reliability of page data acquisition.

[0062] Figure 4 This is the second flow chart of the front-end page dynamic rendering method provided by the present invention. Figure 4 As shown, the Client side represents the front end, the Server side represents the front end server, the back end represents the back end server, and the AI ​​tool is a third-party tool used. The method includes the following steps: 1. Use GraphQL to define a standardized protocol for page configuration.

[0063] GraphQL is used as the standardized protocol for page configuration. GraphQL has the characteristics of strong typing, which is easy for the backend to understand and use, and can provide standardized data structure. In specific implementation, it is necessary to define the GraphQLSchema of the page configuration, including page structure, component configuration, data interface, etc. It is necessary to define the GraphQL Schema of the list page (including filter items, tables, operations), form pop-up window and detail page.

[0064] Figure 4 In the , Filter represents the filter item component, Table represents the table component, and Operation represents the operation button component. Modal represents the pop-up window component, and Form represents the form component. Descriptions represents the component that describes the details information on the details page, and List represents the component that controls the display mode of the details information on the details page.

[0065] 2. Page configuration data is automatically generated.

[0066] Using GPT (Generative Pre-Trained Transformer), an intelligent agent for generating GraphQL page configuration is provided. User input requirements, SQL, interface definitions and other information are automatically converted into JSON configuration of the page. In specific implementation, the written GraphQL normalization protocol is provided to GPT as a template, and system prompts are written based on the template. According to the interface definition, SQL, requirements, etc. input by the user, the page fields are automatically matched, and the page configuration data in JSON format with the page fields and data fields mapped is output.

[0067] 3. Implement encapsulation of dynamic rendering components.

[0068] On the basis of business components, another layer is encapsulated to process page configuration and page data. Various custom processing function interfaces are reserved in the encapsulated components to meet different data processing and display requirements. For example, data formatting, data validation, etc. In specific implementation, it is also necessary to create and encapsulate a set of page-level dynamic rendering components, including list filter items + tables, pop-up forms, detail displays, etc., and reserve custom processing function interfaces in the encapsulated components.

[0069] Among them, ListPage represents the page-level dynamic rendering component corresponding to the list page, ARCFormModal represents the page-level dynamic rendering component corresponding to the form pop-up window, and ARCDescriptionsList represents the page-level dynamic rendering component corresponding to the details page.

[0070] 4. Implement page templates for dynamic rendering components.

[0071] Provides standardized page templates, which contain samples of custom functions such as data formatting, data initialization, personalized buttons, and pop-up window calls. These custom functions can be passed into components for use, and business logic can be placed in external page files to maintain the versatility and reusability of components. In specific implementation, it is necessary to create standardized page template files for different types of pages such as list pages, form pop-ups, and detail pages, including commonly used custom function samples, to ensure that components can flexibly pass in different proprietary business logics.

[0072] 5. Initialize the page structure.

[0073] When the page is initialized, the page structure information is pulled from the configuration interface provided by the backend based on the page identifier (Page_id). The page structure information is converted into configuration items such as filterItems and columns that can be recognized by page components such as Filter and Table through the parser. In the specific implementation, it is necessary to write a parser to convert the page structure information returned by the backend into configuration items that can be recognized by the front-end components.

[0074] 6. Pull page data.

[0075] Call the business data interface to pull the data information required for the page from the database. When implementing it, you need to pass the specific interface, input parameter formatting function, and output parameter formatting function into the encapsulated component to pull the data required for processing the page.

[0076] 7. Render the page.

[0077] Combine the page structure and business data to display a complete page. In the specific implementation, it is necessary to render the page according to the parsed configuration items and data to ensure that each component of the page can be displayed correctly and the interactive functions are normal to ensure the normal operation of the page.

[0078] It should be noted that in the specific implementation, the execution order of the above steps can be adjusted as needed if there is no preceding and following constraint relationship. Through the above steps, the dynamic page configuration solution based on GraphQL can be used to achieve specific business needs and improve the efficiency and flexibility of page development. In summary, it not only standardizes the data structure of page configuration data, but also improves development efficiency and system maintainability. At the same time, combined with GPT intelligent body and dynamic rendering components, it further improves the intelligence and flexibility of the solution.

[0079] The front-end page dynamic rendering device provided by the present invention is described below. The front-end page dynamic rendering device described below and the front-end page dynamic rendering method described above can be referred to each other.

[0080] Figure 5 Schematic diagram of the structure of the front-end page dynamic rendering device provided by the present invention. Figure 5As shown, the device includes an acquisition module 10 and a rendering module 20, wherein: the acquisition module 10 is used to: acquire page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page component; the rendering module 20 is used to: acquire page data corresponding to the page field according to the mapping relationship between the page field and the data field, and perform page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

[0081] The front-end page dynamic rendering device provided by the present invention obtains page configuration data, the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, the page data configuration information includes the mapping relationship between page fields and data fields in the page components, obtains page data corresponding to the page fields according to the mapping relationship between the page fields and the data fields, performs page rendering according to the page configuration data and preset page rendering information, the preset page rendering information includes the page data, realizes dynamic rendering of the page according to the page configuration data, improves the development and maintenance efficiency of the page rendering, and at the same time improves the flexibility and scalability of the page rendering.

[0082] Figure 6 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 6 As shown, the electronic device may include: a processor 610, a communication interface 620, a memory 630 and a communication bus 640, wherein the processor 610, the communication interface 620 and the memory 630 communicate with each other through the communication bus 640. The processor 610 may call the logic instructions in the memory 630 to execute the front-end page dynamic rendering method, the method comprising: obtaining page configuration data; wherein the page configuration data comprises page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, the page data configuration information comprises a mapping relationship between a page field and a data field in a page component; obtaining page data corresponding to the page field according to the mapping relationship between the page field and the data field, and performing page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information comprises the page data.

[0083] In addition, the logic instructions in the above-mentioned memory 630 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0084] On the other hand, the present invention also provides a computer program product, which includes a computer program, and the computer program can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer can execute the front-end page dynamic rendering method provided by the above-mentioned methods, and the method includes: obtaining page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page component; according to the mapping relationship between the page fields and the data fields, the page data corresponding to the page fields is obtained, and the page is rendered according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

[0085] On the other hand, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute the front-end page dynamic rendering method provided by the above-mentioned methods, the method comprising: obtaining page configuration data; wherein the page configuration data comprises page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information comprises a mapping relationship between page fields and data fields in the page component; obtaining page data corresponding to the page field according to the mapping relationship between the page field and the data field, and performing page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information comprises the page data.

[0086] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0087] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0088] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention 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. However, 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 invention.

Claims

1. A front-end page dynamic rendering method, characterized in that: include: Acquire page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in the page components; The page data corresponding to the page field is acquired according to the mapping relationship between the page field and the data field, and the page is rendered according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

2. The front-end page dynamic rendering method according to claim 1, characterized in that: The performing page rendering according to the page configuration data and the preset page rendering information includes: Calling a corresponding page-level dynamic rendering component according to the page type configuration information; The page level dynamic rendering component is used to perform page rendering according to the page configuration data and preset page rendering information.

3. The front-end page dynamic rendering method according to claim 2, characterized in that: The preset page rendering information also includes custom processing logic; the page rendering according to the page configuration data and the preset page rendering information includes: Determine the page type according to the page type configuration information; Determining a layout mode of at least one page component according to the page structure configuration information; Determining component attributes of the at least one page component according to the page component configuration information; wherein the component attributes include the page fields and display attributes; Acquire interface data according to the data interface configuration information; The page is rendered according to the page type, the layout mode of the at least one page component, the component attributes, the interface data, the page data corresponding to the page field and the custom processing logic.

4. The front-end page dynamic rendering method according to claim 3 is characterized in that: Before rendering the page according to the layout mode of the at least one page component, the component attributes, the interface data, the page data corresponding to the page field and the custom processing logic, the method further includes: In response to the custom processing logic including the first custom processing logic corresponding to the page-level dynamic rendering component, the first custom processing logic is passed in through a first custom processing function interface reserved by the page-level dynamic rendering component to perform subsequent page rendering processing; In response to the custom processing logic including a second custom processing logic corresponding to the page component, the second custom processing logic is passed into the first custom processing function interface reserved by the page-level dynamic rendering component, and the second custom processing logic is further transmitted to the second custom processing function interface reserved by the page component for subsequent page rendering processing.

5. The front-end page dynamic rendering method according to claim 4, characterized in that: The custom processing logic includes at least one of data initialization, data verification, personalized button and pop-up window call processing logic.

6. The front-end page dynamic rendering method according to claim 1, characterized in that: Before obtaining the page configuration data, the method further includes: Building a normalized template for page configuration data based on GraphQL, and generating system prompt words based on the normalized template; Generate user prompt words based on the user requirement document, data query interface and data query statement rendered on the page; The page configuration data is generated according to the system prompt words and the user prompt words using a GPT-based agent.

7. A front-end page dynamic rendering device, characterized in that: include: An acquisition module, used to: acquire page configuration data; wherein the page configuration data includes page type configuration information, page structure configuration information, page component configuration information, data interface configuration information and page data configuration information, and the page data configuration information includes a mapping relationship between page fields and data fields in a page component; A rendering module is used to: obtain page data corresponding to the page field according to the mapping relationship between the page field and the data field, and perform page rendering according to the page configuration data and preset page rendering information; wherein the preset page rendering information includes the page data.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the front-end page dynamic rendering method as described in any one of claims 1 to 6 is implemented.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for dynamic rendering of a front-end page as described in any one of claims 1 to 6 is implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the method for dynamic rendering of a front-end page as described in any one of claims 1 to 6 is implemented.

Images