Front-end rendering method, device, equipment, medium and program product

Abstract

The present application provides a front-end rendering method, apparatus, device, medium and program product, which determines the page configuration requirements based on the obtained page loading request, and then uses the front-end configuration center to parse the page configuration requirements for the rendering environment to determine the target configuration, and finally uses the configuration parser to render the target page according to the target configuration. It realizes the use of the front-end configuration center to manage the configuration settings of page rendering without calling the back-end operational data, and solves the existing technology model of relying entirely on the back-end system to maintain and manage business data and templates. For the rendering of light data maintenance pages, the structure is complex, the flexibility cannot be expanded, the real-time dynamic rendering cannot be used, and the multi-environment configuration cannot be used. The technical effect of achieving page rendering without relying on complex back-end management systems and interface programs is achieved, and the rendering tool is simple, flexible and easy to expand.

Description

Technical Field

[0001] The present application relates to the field of computer data processing, and in particular to a front-end rendering method, apparatus, device, medium, and program product. Background Art

[0002] With the continuous development of Internet technology, the corresponding application development work is also increasing. Among them, the rendering and configuration of application pages are the core work of application development.

[0003] Currently, application page rendering and configuration are implemented in two parts: a front-end system responsible for handling interactive operations and rendering logic, and a back-end system responsible for maintaining and managing operational data and various templates. However, for systems requiring minimal data maintenance, or for front-end rendering that involves less back-end data and template management, adopting a unified front-end and back-end collaboration model would complicate rendering, requiring the design of corresponding interface programs and other supporting programs. This would affect development efficiency and overall system complexity, and would also greatly hinder application expansion.

[0004] That is, the existing technology completely relies on the back-end system to maintain and manage business data and templates. There are technical problems such as complex structure, inflexible expansion, inability to render in real time and dynamically, and inability to use multi-environment configuration for the rendering of light data maintenance pages. Summary of the Invention

[0005] The present application provides a front-end rendering method, apparatus, device, medium, and program product to address the existing technology model in which the back-end system is completely dependent on the maintenance and management of business data and templates, resulting in complex structure, inflexible expansion, inability to render in real time and dynamically, and inability to use multi-environment configuration for the rendering of light data maintenance pages. This enables the front-end system to independently render pages in real time and dynamically.

[0006] In a first aspect, the present application provides a method for front-end rendering pages, which is applied to a front-end system and includes:

[0007] Determine page configuration requirements based on the obtained page loading request;

[0008] Utilizing the front-end configuration center to analyze the page configuration requirements for a rendering environment to determine a target configuration, wherein the target configuration indicates how the target page is to be displayed. The rendering environment determines whether the front-end configuration center can satisfy the page configuration requirements, and indicates the relevant configuration data required to satisfy the page configuration requirements.

[0009] Utilize the configuration parser to render the target page according to the target configuration.

[0010] In one possible design, the front-end configuration center is used to analyze the page configuration requirements for a rendering environment to determine a target configuration, including:

[0011] Determining that the target page is rendered without calling a backend system according to the page configuration requirements;

[0012] Among the multiple candidate configurations in the front-end configuration center, the target configuration is screened out according to the page configuration requirements.

[0013] Optionally, the configuration to be selected includes at least one environment configuration set, and the environment configuration set is a set consisting of multiple configurations corresponding to the display environment of the target page.

[0014] In a possible design, selecting the target configuration from the plurality of candidate configurations in the front-end configuration center according to the page configuration requirements includes:

[0015] Determine the display environment according to the page configuration requirements, wherein the display environment includes a test environment, a pre-release trial environment, and an online release environment;

[0016] The target configuration is determined according to the presentation environment and the environment configuration set corresponding to the presentation environment.

[0017] In one possible design, the front-end configuration center is used to manage the creation and maintenance of configurations. The front-end configuration center is located in the front-end system, or is an independent system connected to the front-end system.

[0018] Optionally, the configuration defines a display method for each rendering object, and the rendering objects include: a subpage, a module in the subpage, and a field in the module.

[0019] Optionally, the display method includes: display and hiding.

[0020] In one possible design, the configuration is a set of strings that defines a display method of the rendering object according to the JSON format.

[0021] In one possible design, the utilizing a configuration parser to render the target page according to the target configuration includes:

[0022] Using the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration;

[0023] Distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration, wherein the global sub-page configuration can perform page rendering operations on multiple page rendering interfaces;

[0024] The page rendering interface is used to render each sub-page of the target page according to the sub-page configuration.

[0025] In one possible design, rendering each sub-page of the target page according to the sub-page configuration using the page rendering interface includes:

[0026] Splitting the sub-page configuration according to each module in the sub-page to determine the module configuration;

[0027] Each of the modules is rendered according to the module configuration to achieve rendering of each of the sub-pages.

[0028] In one possible design, rendering each of the modules according to the module configuration to achieve rendering of each of the sub-pages includes:

[0029] Splitting the module configuration into field configurations according to the module;

[0030] Render the fields in the module according to the field configuration.

[0031] Optionally, the front-end system includes a progressive user interface framework Vue, and the using the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration includes:

[0032] Using the computed property tool in the Vue interface program API to split the target configuration into sub-pages to determine the sub-page configuration;

[0033] Correspondingly, distributing the sub-page configuration to the corresponding page rendering interface includes:

[0034] Introducing the sub-page configuration into each component of the target page through a public mixin tool;

[0035] The rendering of each sub-page of the target page according to the sub-page configuration using the page rendering interface includes:

[0036] The v-if function is used within each component to control the rendering of the corresponding field according to the sub-page configuration.

[0037] In a second aspect, the present application provides a front-end rendering device, comprising:

[0038] Get module, used to get page loading request

[0039] A processing module, configured to determine page configuration requirements according to the page loading request;

[0040] A front-end configuration center module is used to analyze the page configuration requirements in a rendering environment to determine a target configuration, wherein the target configuration indicates how the target page is displayed, and the rendering environment determines whether the front-end configuration center module can meet the page configuration requirements, and indicates the relevant configuration data required to meet the page configuration requirements;

[0041] The processing module is further configured to utilize a configuration parser to render the target page according to the target configuration.

[0042] In one possible design, the front-end configuration center module is used to parse the page configuration requirements for a rendering environment to determine a target configuration, including:

[0043] The front-end configuration center module is used to determine that the target page does not need to call the back-end system when rendering according to the page configuration requirements;

[0044] The front-end configuration center module is used to filter out the target configuration from multiple candidate configurations according to the page configuration requirements.

[0045] Optionally, the configuration to be selected includes at least one environment configuration set, and the environment configuration set is a set consisting of multiple configurations corresponding to the display environment of the target page.

[0046] In one possible design, the front-end configuration center module is configured to filter out the target configuration from multiple candidate configurations according to the page configuration requirements, including:

[0047] The front-end configuration center module is used to determine the display environment according to the page configuration requirements, and the display environment includes a test environment, a pre-release trial environment, and an online release environment;

[0048] The front-end configuration center module is configured to determine the target configuration according to the presentation environment and the environment configuration set corresponding to the presentation environment.

[0049] In a possible design, the configuration center module is used to manage the creation and maintenance of configurations. The configuration center module can be located in the front-end system, or can be an independent control system module connected to the front-end system.

[0050] Optionally, the configuration defines a display method for each rendering object, and the rendering objects include: a subpage, a module component in the subpage, and a field in the module component.

[0051] Optionally, the display method includes: display and hiding.

[0052] In one possible design, the configuration is a set of strings that defines a display method of the rendering object according to the JSON format.

[0053] In one possible design, the processing module is further configured to use a configuration parser to render the target page according to the target configuration, including:

[0054] The processing module is further configured to use the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration;

[0055] The processing module is further configured to distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration, wherein the global sub-page configuration can perform page rendering operations on multiple page rendering interfaces;

[0056] The processing module is further configured to render each sub-page of the target page according to the sub-page configuration using the page rendering interface.

[0057] In one possible design, the processing module is further configured to render each sub-page of the target page according to the sub-page configuration using the page rendering interface, including:

[0058] The processing module is further configured to split the sub-page configuration according to each module in the sub-page to determine the module configuration;

[0059] The processing module is further configured to render each of the modules according to the module configuration, so as to achieve rendering of each of the sub-pages.

[0060] In a possible design, the processing module is further configured to render each of the modules according to the module configuration to implement rendering of each of the sub-pages, including:

[0061] The processing module is further configured to split the module configuration into field configurations according to the module;

[0062] The processing module is further configured to render the fields in the module according to the field configuration.

[0063] Optionally, the front-end system includes a progressive user interface framework Vue, and the processing module is further configured to use the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration, including:

[0064] The processing module is further configured to split the target configuration into sub-pages using the computed property tool in the Vue interface program API to determine the sub-page configuration;

[0065] Correspondingly, the processing module is further used to distribute the sub-page configuration to the corresponding page rendering interface, including:

[0066] The processing module is further configured to introduce the sub-page configuration into each component of the target page through a common mixin tool;

[0067] The processing module is further configured to render each sub-page of the target page according to the sub-page configuration using the page rendering interface, including:

[0068] The processing module is further configured to control the rendering of the corresponding fields according to the sub-page configuration through the v-if function within each component.

[0069] In a third aspect, the present application provides an electronic device, comprising:

[0070] a memory for storing program instructions;

[0071] The processor is used to call and execute the program instructions in the memory to perform any possible front-end rendering method provided by the first aspect.

[0072] In a fourth aspect, the present application provides a storage medium, wherein the readable storage medium stores a computer program, and the computer program is used to execute any possible front-end rendering method provided in the first aspect.

[0073] In a fifth aspect, the present application also provides a computer program product, including a computer program, which, when executed by a processor, implements any possible front-end rendering method provided in the first aspect.

[0074] The present application provides a front-end rendering method, apparatus, device, medium and program product, which determines the page configuration requirements based on the obtained page loading request, and then uses the front-end configuration center to parse the page configuration requirements for the rendering environment to determine the target configuration, and finally uses the configuration parser to render the target page according to the target configuration. It realizes the use of the front-end configuration center to manage the configuration settings of page rendering without calling the back-end operational data, and solves the existing technology model of relying entirely on the back-end system to maintain and manage business data and templates. For the rendering of light data maintenance pages, the structure is complex, the flexibility cannot be expanded, the real-time dynamic rendering cannot be used, and the multi-environment configuration cannot be used. The technical effect of achieving page rendering without relying on complex back-end management systems and interface programs is achieved, and the rendering tool is simple, flexible and easy to expand. BRIEF DESCRIPTION OF THE DRAWINGS

[0075] In order to more clearly illustrate the technical solutions in the present application 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 application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0076] Figure 1 A schematic diagram of the structure of the existing application page management system provided for this application;

[0077] Figure 2 A schematic diagram of the structure of the application management system provided for this application;

[0078] Figure 3 A schematic diagram of a flow chart of a front-end rendering method provided in an embodiment of the present application;

[0079] Figure 4 A flowchart of another front-end rendering method provided for this application;

[0080] Figure 5 A schematic diagram illustrating the principle of rendering a page through page configuration provided by the page rendering interface of an embodiment of the present application;

[0081] Figure 6 A schematic diagram of the structure of a front-end rendering device provided in this application;

[0082] Figure 7 This is a schematic diagram of the structure of an electronic device provided in this application. DETAILED DESCRIPTION

[0083] To make the purpose, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative efforts, including but not limited to combinations of multiple embodiments, are within the scope of protection of this application.

[0084] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the numbers used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0085] Existing application page management systems are generally divided into two parts: the front-end system and the back-end system.

[0086] The front-end system includes: a web server used for web front-end processing such as page display processing.

[0087] The back-end system includes: a system for storing business data generated by various users on the front-end page, as well as rendering data related to display templates, tables, images, etc. involved in the front-end page.

[0088] Due to the rapid popularization and development of the Internet, especially the advent of the big data era, the data generated in the front-end pages have posed a great challenge to the storage of databases. Therefore, in recent years, the management and development of back-end systems have been the focus of people's attention. Classic content management systems such as CMS (content management system) have emerged to assist in front-end and back-end data management. The "content" here may include files, tables, pictures, data in the database, and even videos, and all information that users want to publish to the Internet, corporate intranets, or other external websites. It is understandable that the CMS system can also be classified as a back-end system. Its structure is as follows: Figure 1 shown.

[0089] Figure 1 This is a schematic diagram of the structure of the existing application page management system provided by this application. Figure 1As shown, the front-end system 11 may include a client 111 and a front-end server 112. The front-end server 112 is used to render the pages displayed on the client 111, collect data generated by the user after performing operations on different pages of the client 111, and then transmit this data to the back-end system 12. The back-end system 12 includes a CMS server 121 and a back-end database 122. After receiving data or data requests sent by the front-end system, the CMS server 121 stores the data in the back-end database 122 or extracts data or renders templates from the back-end database 122.

[0090] With the continuous enhancement of back-end system functions, the above model has become the common model for current application development. However, it has also given rise to an accompanying problem: CMS software systems are becoming increasingly complex, resulting in the need for both front-end and back-end developers to jointly render each page when developing a new system or application. The front-end system must develop an API (Application Programming Interface) interface for interaction, and the back-end must also cooperate in developing the corresponding API interface, or the front-end and back-end developers must work together to build an API interface. This is because in the existing application interface construction framework, all data is placed in the back-end system, and the front-end at least calls the back-end data, templates, etc. for assembly and splicing, that is, rendering and display.

[0091] The above-mentioned application interface construction framework or page rendering method that completely relies on the backend system has the following problems: (1) A dedicated backend management system is required; (2) The backend management system requires the cooperation of front-end and back-end personnel to update a large amount of matching data, configurations, and templates; (3) It is difficult to expand fields, making the system inflexible; (4) When configuring multiple environments, different systems need to be deployed separately. For example, for the test environment, a test system needs to be deployed. If there are any changes in the pre-release trial environment, a trial system needs to be deployed again. Finally, after the official online release, the official system needs to be redeployed. The workload is large, there is a lot of repetitive work, and development efficiency is low.

[0092] Therefore, in order to address the existing technical issues of relying entirely on back-end systems to maintain and manage business data and templates, resulting in complex structure, limited scalability, inability to render pages dynamically in real time, and inability to use multiple environments, the inventors of this application have proposed the following front-end rendering method, enabling the front-end system to independently render pages dynamically in real time.

[0093] The inventive concept of this application is to configure a lightweight front-end configuration center in the front-end system or independently to manage the configuration data required for page rendering. These configuration data include public templates, display data, commonly used pages, commonly used modules or components, etc., while the data or templates that really need to be maintained and managed by specialized personnel are still placed in the back-end system. The practice of placing commonly used configuration data in the configuration center in this way has the following effects: first, it enables the front-end page to be rendered dynamically quickly without frequent communication with the back-end system, thereby ensuring the dynamic real-time nature of page rendering; second, it reduces the workload of the back-end system, without the need to frequently update maintenance data or call data or templates in the database, so that the back-end system can allocate more computing resources to business operation data that require specialized personnel to maintain and manage, and also improves the management and maintenance efficiency of business operation data.

[0094] The following is a detailed introduction to the front-end rendering method provided by this application with reference to the accompanying drawings.

[0095] Figure 2 This is a schematic diagram of the application management system provided by this application. Figure 2 As shown, after receiving the page loading request or page loading instruction sent by the client 111, the front-end server 112 identifies the page configuration requirements and determines whether it is necessary to call the back-end data / template through the page configuration requirements. If it is a regular page rendering requirement, there is no need to call the back-end data, and the page configuration requirements can be sent to the front-end configuration center 21. The front-end configuration center 21 parses the page configuration requirements and determines whether all configuration files or configuration data saved in the front-end configuration center can support the page configuration requirements, that is, performs environmental analysis. If so, the corresponding configuration is selected from the stored configuration and sent to the front-end server 112 for page rendering.

[0096] Figure 3 A flow chart of a front-end rendering method provided in an embodiment of the present application. Figure 3 As shown, the specific steps of the front-end rendering method include:

[0097] S301: Determine page configuration requirements based on the obtained page loading request.

[0098] In this step, after the client sends a page loading request or a page loading instruction, the front-end server determines the page configuration requirements of the target page to be rendered according to the page loading request.

[0099] Loading pages based on user dynamic page loading requests can save user-side data traffic or page loading time. However, if all loaded pages require the front-end server to communicate with the back-end system to call data, this will undoubtedly affect loading time and give users a poor user experience with slow loading speeds. Therefore, this application adopts a dynamic loading method, directly calling conventional or public configurations from the front-end configuration center to speed up page rendering, achieve fast dynamic page rendering, and improve user experience.

[0100] It should be noted that when a page is loaded, a loading entry program such as the main.js program or function is generally set. The corresponding page configuration requirements are obtained in main.js and sent to the front-end configuration center.

[0101] S302: Utilize the front-end configuration center to analyze the page configuration requirements in the rendering environment to determine the target configuration.

[0102] In this step, the target configuration is used to indicate the display method of the target page, and the rendering environment is used to determine whether the front-end configuration center can meet the page configuration requirements, and to indicate the relevant configuration data required to meet the page configuration requirements.

[0103] Specifically, it is determined whether the backend system needs to be called when rendering the target page based on the page configuration requirements. If not, the target configuration is selected from multiple candidate configurations in the front-end configuration center based on the page configuration requirements.

[0104] It should be noted that in the front-end configuration center, multiple environment configuration sets can be configured according to different environments. The environment configuration set is a set of multiple configurations corresponding to the display environment of the target page. For example, whether the module in the page is displayed or hidden, or certain fields in the module can be displayed or hidden according to different user levels, thereby achieving different rendering requirements for different users. For example, in the pre-release trial environment, some fields that have not been finalized can be configured not to be displayed, and in the formal online environment, they can be configured to be displayed. At this time, two environment configuration sets can be set to correspond to the pre-release trial environment and the formal online environment respectively.

[0105] S303: Utilize the configuration parser to render the target page according to the target configuration.

[0106] In this step, the configuration parser is a tool that processes the target configuration corresponding to the page configuration requirements.

[0107] In this embodiment, in order to make the front-end configuration center lightweight, the stored configuration can be defined in a special format, such as JSON format, and then restored to the corresponding JavaScript object through the configuration parser, so that the software program on the Web server can execute the corresponding rendering program.

[0108] The configuration parser splits the target configuration. For example, if the target page contains multiple sub-pages, and the sub-pages include multiple modules or components, and each module can also include multiple fields, the configuration parser will split the corresponding sub-pages, modules, and fields accordingly to determine whether they need to be rendered and displayed, and obtain the corresponding rendering program parameters to complete the rendering of the target page.

[0109] This embodiment provides a front-end rendering method, which determines the page configuration requirements based on the obtained page loading request, and then uses the front-end configuration center to parse the page configuration requirements for the rendering environment to determine the target configuration, and finally uses the configuration parser to render the target page according to the target configuration. It realizes the use of the front-end configuration center to manage the configuration settings of page rendering without calling the back-end operational data, and solves the technical problems of the existing technology that relies entirely on the back-end system to maintain and manage business data and templates, and the rendering of light data maintenance pages has complex structures, cannot be flexibly expanded, cannot be dynamically rendered in real time, and cannot use multi-environment configurations. It achieves the technical effect of realizing page rendering without relying on complex back-end management systems and interface programs, and the rendering tools are simple, flexible, and easy to expand.

[0110] Figure 4 This is a flow chart of another front-end rendering method provided by this application. Figure 4 As shown, the specific steps of the front-end rendering method include:

[0111] S401: Determine page configuration requirements based on the obtained page loading request.

[0112] In this step, after receiving the page loading request, the front-end server determines the parameter settings corresponding to each page element in the target page to be loaded, that is, the configuration requirements, through the page loading entry main.js.

[0113] S402: Determine that the target page is rendered without calling the backend system according to the page configuration requirements, and send the page configuration requirements to the front-end configuration center.

[0114] In this step, the page loading entry can first determine the usage environment of the target page. The usage environment can be obtained from the information corresponding to the page loading request. For example, if the user terminal opens the target page in a pre-release trial environment, that is, a page loading request is issued, then the corresponding usage environment is the pre-release trial environment. In this environment, all pages do not need to call the back-end system.

[0115] For example, for an officially released online usage environment, some commonly used fixed pages or pages that do not need to display data stored in the back-end database can directly call the configuration stored in the front-end configuration center and the data corresponding to the configuration for rendering.

[0116] S403: Determine the display environment according to the page configuration requirements.

[0117] In this embodiment, the display environment includes: a test environment, a pre-release trial environment, and an online release environment.

[0118] S404: Determine a target configuration according to the presentation environment and an environment configuration set corresponding to the presentation environment.

[0119] In this embodiment, a plurality of candidate configurations are stored in the front-end configuration center. The candidate configurations include at least one environment configuration set, which is a set consisting of multiple configurations corresponding to the display environment of the target page.

[0120] In one possible design, the configuration is a set of strings that defines how to display rendering objects in JSON format. The configuration (including the target configuration) defines how to display each rendering object, including showing or hiding the rendering object. The rendering objects include subpages, modules within the subpages, and fields within the modules.

[0121] It should be noted that the target page includes at least one sub-page, the sub-page includes at least one module, and the module includes at least one field.

[0122] S405: Send the target configuration to the front-end server.

[0123] S406: Use the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration.

[0124] In this embodiment, the front-end system is an application system built with the progressive user interface framework Vue, and the computed property computed tool in the interface program API of Vue is used to split the target configuration into sub-pages to determine the sub-page configuration.

[0125] S407: Distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration.

[0126] In this step, the global sub-page configuration can perform page rendering operations on multiple page rendering interfaces.

[0127] For example, the sub-page configuration is introduced into each component of the target page through a public mixing tool mixin.

[0128] S408: Render each sub-page of the target page according to the sub-page configuration using a page rendering interface.

[0129] This step specifically includes:

[0130] Split the sub-page configuration according to the modules in the sub-page to determine the module configuration;

[0131] Render each module according to the module configuration to achieve the rendering of each sub-page: first split the module configuration into field configuration according to the module, and then render the fields in the module according to the field configuration.

[0132] The following combination Figure 5 The above process is introduced with an example.

[0133] Figure 5 The schematic diagram of the principle of rendering a page through page configuration provided by the page rendering interface of the embodiment of the present application. Figure 5 As shown, the configuration parser parses the template configuration and passes it to the page rendering interface to determine whether the target page needs to be displayed. If not, no rendering is required. If so, the target page will be displayed in each module of the sub-pages contained in the target page. Figure 5 The target configuration consists of only one subpage, which contains multiple modules. If module 1 needs to be displayed, the next step is to determine whether the fields contained in the module need to be displayed. This is the process of splitting the target configuration from subpages to modules and then to fields. Finally, the target page is rendered based on the split results.

[0134] In this embodiment, the v-if function is used within each component, ie, sub-page or module, to control the rendering of the corresponding field according to the sub-page configuration.

[0135] This embodiment provides a front-end rendering method, which determines the page configuration requirements based on the obtained page loading request, and then uses the front-end configuration center to parse the page configuration requirements for the rendering environment to determine the target configuration, and finally uses the configuration parser to render the target page according to the target configuration. It realizes the use of the front-end configuration center to manage the configuration settings of page rendering without calling the back-end operational data, and solves the technical problems of the existing technology that relies entirely on the back-end system to maintain and manage business data and templates, and the rendering of light data maintenance pages has complex structures, cannot be flexibly expanded, cannot be dynamically rendered in real time, and cannot use multi-environment configurations. It achieves the technical effect of realizing page rendering without relying on complex back-end management systems and interface programs, and the rendering tools are simple, flexible, and easy to expand.

[0136] Figure 6 This is a schematic diagram of the structure of a front-end rendering device provided in this application. The front-end rendering device 600 can be implemented by software, hardware, or a combination of both.

[0137] like Figure 6 As shown, the front-end rendering device 600 includes:

[0138] Acquisition module 601, used to obtain page loading request

[0139] Processing module 602, configured to determine page configuration requirements based on the page loading request;

[0140] The front-end configuration center module 603 is used to analyze the page configuration requirements in the rendering environment to determine the target configuration. The target configuration is used to indicate the display method of the target page. The rendering environment is used to determine whether the front-end configuration center module 603 can meet the page configuration requirements and to indicate the relevant configuration data required to meet the page configuration requirements.

[0141] The processing module 602 is further configured to utilize the configuration parser to render the target page according to the target configuration.

[0142] In one possible design, the front-end configuration center module 603 is used to analyze the page configuration requirements in the rendering environment to determine the target configuration, including:

[0143] The front-end configuration center module 603 is used to determine the target page rendering according to the page configuration requirements without calling the back-end system;

[0144] The front-end configuration center module 603 is used to filter out a target configuration from multiple candidate configurations according to page configuration requirements.

[0145] Optionally, the configuration to be selected includes at least one environment configuration set, where the environment configuration set is a set consisting of multiple configurations corresponding to the display environment of the target page.

[0146] In one possible design, the front-end configuration center module 603 is configured to filter out a target configuration from multiple candidate configurations based on page configuration requirements, including:

[0147] The front-end configuration center module 603 is used to determine the display environment according to the page configuration requirements. The display environment includes a test environment, a pre-release trial environment, and an online publishing environment.

[0148] The front-end configuration center module 603 is used to determine the target configuration according to the display environment and the environment configuration set corresponding to the display environment.

[0149] In one possible design, a configuration center module is used to manage the creation and maintenance of configurations. The configuration center module can be located in the front-end system, or can be an independent control system module connected to the front-end system.

[0150] Optionally, the configuration defines how each rendering object is displayed. Rendering objects include: subpages, module components in subpages, and fields in module components.

[0151] Optional display modes include: showing and hiding.

[0152] In one possible design, the configuration is a set of strings that defines how to display the rendered objects according to the JSON format.

[0153] In one possible design, the processing module 602 is further configured to utilize a configuration parser to render a target page according to the target configuration, including:

[0154] The processing module 602 is further configured to use a configuration parser to split the target configuration into sub-pages to determine the sub-page configuration;

[0155] The processing module 602 is further used to distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration. The global sub-page configuration can perform page rendering operations on multiple page rendering interfaces.

[0156] The processing module 602 is further configured to render each sub-page of the target page according to the sub-page configuration using a page rendering interface.

[0157] In one possible design, the processing module 602 is further configured to render each sub-page of the target page according to the sub-page configuration using a page rendering interface, including:

[0158] The processing module 602 is further configured to split the sub-page configuration according to each module in the sub-page to determine the module configuration;

[0159] The processing module 602 is further configured to render each module according to the module configuration to achieve rendering of each sub-page.

[0160] In one possible design, the processing module 602 is further configured to render each module according to the module configuration to implement rendering of each sub-page, including:

[0161] The processing module 602 is further configured to split the module configuration into field configurations according to the module;

[0162] The processing module 602 is further configured to render the fields in the module according to the field configuration.

[0163] Optionally, the front-end system includes a progressive user interface framework Vue. The processing module 602 is further configured to use a configuration parser to split the target configuration into sub-pages to determine the sub-page configuration, including:

[0164] The processing module 602 is further used to split the target configuration into sub-pages using the computed property tool in the Vue interface program API to determine the sub-page configuration;

[0165] Correspondingly, the processing module 602 is further configured to distribute the sub-page configuration to the corresponding page rendering interface, including:

[0166] The processing module 602 is further used to introduce the sub-page configuration into each component of the target page through a public mixing tool mixin;

[0167] The processing module 602 is further configured to render each sub-page of the target page according to the sub-page configuration using the page rendering interface, including:

[0168] The processing module 602 is further used to control the rendering of the corresponding field according to the sub-page configuration through the v-if function within each component.

[0169] It is worth mentioning that Figure 6 The front-end rendering device provided in the illustrated embodiment can execute the method provided in any of the above method embodiments. Its specific implementation principles, technical features, professional terminology explanations and technical effects are similar and will not be repeated here.

[0170] Figure 7 This is a schematic diagram of the structure of an electronic device provided by this application. Figure 7 As shown, the electronic device 700 may include: at least one processor 701 and a memory 702 . Figure 7 An electronic device is shown using a processor as an example.

[0171] The memory 702 is used to store programs. Specifically, the programs may include program codes, and the program codes include computer operation instructions.

[0172] The memory 702 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0173] The processor 701 is configured to execute computer-executable instructions stored in the memory 702 to implement the methods described in the above method embodiments.

[0174] The processor 701 may be a central processing unit (CPU), an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present application.

[0175] Optionally, the memory 702 may be independent or integrated with the processor 701. When the memory 702 is a device independent of the processor 701, the electronic device 700 may further include:

[0176] Bus 703 is used to connect the processor 701 and the memory 702. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. Buses can be divided into address buses, data buses, control buses, etc., but this does not mean that there is only one bus or only one type of bus.

[0177] Optionally, in a specific implementation, if the memory 702 and the processor 701 are integrated on a chip, the memory 702 and the processor 701 can communicate through an internal interface.

[0178] The present application also provides a computer-readable storage medium, which may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, and other media that can store program codes. Specifically, the computer-readable storage medium stores program instructions, and the program instructions are used for the methods in the above-mentioned method embodiments.

[0179] The present application also provides a computer program product, including a computer program, which implements the methods in the above-mentioned method embodiments when executed by a processor.

[0180] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application 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 or all of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A front-end rendering method, characterized in that: Applied to front-end systems, including: Determine page configuration requirements based on the obtained page loading request; When it is determined according to the page configuration requirements that no backend system needs to be called when rendering the target page, a target configuration is selected from a plurality of candidate configurations in the front-end configuration center according to the page configuration requirements; the candidate configurations include at least one environment configuration set, which is a set of multiple configurations corresponding to the display environment of the target page; the target configuration is used to indicate the display mode of the target page; and the front-end configuration center is used to manage the configuration data required for page rendering; Utilizing a configuration parser, rendering the target page according to the target configuration; The utilizing a configuration parser to render the target page according to the target configuration includes: Using the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration; Distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration, wherein the global sub-page configuration can perform page rendering operations on multiple page rendering interfaces; The page rendering interface is used to render each sub-page of the target page according to the sub-page configuration.

2. The front-end rendering method according to claim 1, characterized in that: The target configuration is selected from the plurality of candidate configurations in the front-end configuration center according to the page configuration requirements, including: Determine the display environment according to the page configuration requirements, the display environment including: a test environment, a pre-release trial environment, and an online release environment; The target configuration is determined according to the presentation environment and the environment configuration set corresponding to the presentation environment.

3. The front-end rendering method according to claim 1 or 2, characterized in that: The front-end configuration center is located in the front-end system, or is an independent system connected to the front-end system.

4. The front-end rendering method according to claim 3, wherein: The configuration defines the display method of each rendering object, and the rendering objects include: sub-pages, modules in the sub-pages, and fields in the modules.

5. The front-end rendering method according to claim 4, characterized in that: The display mode includes: display and hiding.

6. The front-end rendering method according to claim 5, characterized in that: The configuration is a set of strings that defines how the rendering object is displayed according to the JSON format.

7. The front-end rendering method according to claim 1, wherein: The rendering of each sub-page of the target page according to the sub-page configuration using the page rendering interface includes: Splitting the sub-page configuration according to each module in the sub-page to determine the module configuration; Each of the modules is rendered according to the module configuration to achieve rendering of each of the sub-pages.

8. The front-end rendering method according to claim 7, characterized in that: The rendering of each module according to the module configuration to achieve rendering of each sub-page includes: Splitting the module configuration into field configurations according to the module; Render the fields in the module according to the field configuration.

9. The front-end rendering method according to claim 1, wherein: The front-end system includes a progressive user interface framework Vue, and the use of the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration includes: Using the computed property tool in the Vue interface program API to split the target configuration into sub-pages to determine the sub-page configuration; Correspondingly, distributing the sub-page configuration to the corresponding page rendering interface includes: Introducing the sub-page configuration into each component of the target page through a public mixin tool; The rendering of each sub-page of the target page according to the sub-page configuration using the page rendering interface includes: The v-if function is used within each component to control the rendering of the corresponding field according to the sub-page configuration.

10. A front-end rendering device, characterized in that: include: Get module, used to get page loading request; A processing module, configured to determine page configuration requirements according to the page loading request; A front-end configuration center module is configured to, when determining that a target page does not need to be rendered by calling a back-end system based on the page configuration requirements, select a target configuration from multiple candidate configurations based on the page configuration requirements, and manage configuration data required for page rendering; the target configuration is used to indicate the display method of the target page; the candidate configurations include at least one environment configuration set, which is a set of multiple configurations corresponding to the display environment of the target page; The processing module is further configured to render the target page according to the target configuration using a configuration parser; The processing module is specifically used to use the configuration parser to split the target configuration into sub-pages to determine the sub-page configuration; distribute the sub-page configuration to the corresponding page rendering interface or perform global registration to establish a global sub-page configuration, and the global sub-page configuration can perform page rendering operations on multiple page rendering interfaces; use the page rendering interface to render each sub-page of the target page according to the sub-page configuration.

11. An electronic device, characterized in that: include: processor; as well as, a memory for storing a computer program for the processor; The processor is configured to execute the front-end rendering method according to any one of claims 1 to 9 by executing the computer program.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the front-end rendering method according to any one of claims 1 to 9 is implemented.

13. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the front-end rendering method according to any one of claims 1 to 9 is implemented.

Images