Page rendering method, device, apparatus, storage medium and product

CN115481337BActive Publication Date: 2026-09-18HAIER YOUJIA INTELLIGENT TECH (BEIJING) CO LTD +2
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202211046385.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-08-30
Publication Date
2026-09-18
Estimated Expiration
2042-08-30

AI Technical Summary

Technical Problem

[0005]本申请提供一种页面渲染方法、装置、设备、存储介质及产品,用以解决现有的页面渲染加载速度的问题

Benefits of technology

[0021] This application provides a page rendering method, apparatus, device, storage medium, and product. Responding to a front-end page retrieval request, it employs a data acquisition layer to acquire the raw data corresponding to the request; a data processing layer calls the data acquisition layer file to retrieve the raw data from the data acquisition layer, and preprocesses the raw data to obtain data to be rendered; a data rendering layer calls the data processing layer file to retrieve the data to be rendered from the data processing layer, and performs data rendering processing on the data to be rendered to obtain a rendered page; finally, the rendered page is displayed. By splitting the process into three layers and assigning different functions to each layer, the events handled by each layer become singular, achieving high cohesion and low coupling; the data processing layer and data rendering layer call different files respectively, which can accelerate the rendering loading speed.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115481337B_ABST
    Figure CN115481337B_ABST
Patent Text Reader

Abstract

The application provides a page rendering method, device, equipment, storage medium and product. The method comprises the following steps: in response to a page acquisition request of a front end, acquiring original data corresponding to the request by using a data acquisition layer; calling a data acquisition layer file to acquire the original data of the data acquisition layer by using a data processing layer, and preprocessing the original data by using the data processing layer to obtain data to be rendered; calling a data processing layer file to acquire the data to be rendered of the data processing layer by using a data rendering layer, and performing data rendering processing on the data to be rendered by using the data rendering layer to obtain a rendered page; and displaying the rendered page. According to the application, different functions are given to each layer through three-layer splitting, different files are called by the data processing layer and the data rendering layer, and the rendering loading speed can be accelerated.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page rendering method, apparatus, device, storage medium, and product. Background Technology

[0002] Rendering refers to the process of transforming models and data into images. For example, when designing a website, the structure and data of each page can be designed, and then the designed pages can be rendered to generate the final web page.

[0003] Currently, the concept of componentization has been introduced into the front-end development process, dividing the entire system into multiple modules for development, making the overall project structure clearer.

[0004] However, within the module, there is no distinction between view rendering and data retrieval processing, resulting in the same file having to perform both page rendering and data retrieval tasks, which in turn affects the page rendering and loading speed. Summary of the Invention

[0005] This application provides a page rendering method, apparatus, device, storage medium, and product to solve the existing problem of page rendering loading speed.

[0006] Firstly, this application provides a page rendering method, including:

[0007] In response to the front-end's page retrieval request, the data retrieval layer is used to obtain the original data corresponding to the request;

[0008] The data processing layer calls the data acquisition layer file to obtain the raw data from the data acquisition layer, and the data processing layer preprocesses the raw data to obtain the data to be rendered.

[0009] The data rendering layer calls the data processing layer file to obtain the data to be rendered from the data processing layer, and then uses the data rendering layer to perform data rendering processing on the data to be rendered to obtain the rendered page;

[0010] The rendered page is displayed.

[0011] Secondly, this application provides a page rendering apparatus, comprising:

[0012] The data acquisition module is used to respond to the front-end page acquisition request and acquire the raw data corresponding to the request using the data acquisition layer;

[0013] The data processing module is used to call the data acquisition layer file to obtain the raw data from the data acquisition layer, and to preprocess the raw data using the data processing layer to obtain the data to be rendered.

[0014] The data rendering module uses the data rendering layer to call the data processing layer file to obtain the data to be rendered from the data processing layer, and uses the data rendering layer to perform data rendering processing on the data to be rendered to obtain the rendered page;

[0015] The display module is used to display the rendered page.

[0016] Thirdly, the present invention provides an electronic device, a processor, and a memory communicatively connected to the processor;

[0017] The memory stores computer-executed instructions;

[0018] The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in the first aspect.

[0019] Fourthly, the present invention provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the method described in the first aspect.

[0020] Fifthly, the present invention provides a computer program product, including a computer program that, when executed by a processor, implements the method described in the first aspect.

[0021] This application provides a page rendering method, apparatus, device, storage medium, and product. Responding to a front-end page retrieval request, it employs a data acquisition layer to acquire the raw data corresponding to the request; a data processing layer calls the data acquisition layer file to retrieve the raw data from the data acquisition layer, and preprocesses the raw data to obtain data to be rendered; a data rendering layer calls the data processing layer file to retrieve the data to be rendered from the data processing layer, and performs data rendering processing on the data to be rendered to obtain a rendered page; finally, the rendered page is displayed. By splitting the process into three layers and assigning different functions to each layer, the events handled by each layer become singular, achieving high cohesion and low coupling; the data processing layer and data rendering layer call different files respectively, which can accelerate the rendering loading speed. Attached Figure Description

[0022] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0023] Figure 1 This is a schematic diagram of the network architecture of the page rendering method provided by the present invention;

[0024] Figure 2This is a flowchart illustrating the page rendering method provided in Embodiment 1 of the present invention;

[0025] Figure 3 This is a flowchart illustrating the page rendering method provided in Embodiment 3 of the present invention;

[0026] Figure 4 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of the present invention;

[0027] Figure 5 This is a first block diagram of an electronic device used to implement the page rendering method of the embodiments of the present invention;

[0028] Figure 6 This is a second block diagram of an electronic device used to implement the page rendering method of the embodiments of the present invention.

[0029] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0030] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0031] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or smart device that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or smart devices.

[0032] To clearly understand the technical solution of this application, the solutions of the prior art will be described in detail first.

[0033] Rendering refers to the process of transforming models and data into images. For example, in website design, the structure and data of each page can be designed, and then the final webpage is generated by rendering the designed pages. In front-end development, the concept of componentization is introduced, dividing the entire system into multiple modules for development, making the overall project structure clearer.

[0034] However, within the module, there is no distinction between view rendering and data fetching processing. This results in a single file performing both page rendering and data fetching tasks, thus impacting page rendering and loading speed. Furthermore, handling both view and data layer processing in the same file increases file size, reduces code readability, and increases code coupling, failing to meet the requirements of high cohesion and low coupling, which brings inconvenience to later maintenance and optimization.

[0035] Therefore, addressing the issue of slow page rendering speed in existing technologies, the inventors discovered that, in response to a front-end page retrieval request, a data retrieval layer obtains the raw data corresponding to the request; a data processing layer calls the data retrieval layer's file to retrieve the raw data from the data retrieval layer, and preprocesses the raw data to obtain the data to be rendered; a data rendering layer calls the data processing layer's file to retrieve the data to be rendered from the data processing layer, and performs data rendering processing on the data to be rendered to obtain the rendered page; finally, the rendered page is displayed. By splitting the code into three layers and assigning different functions to each layer, the events handled by each layer become singular, achieving high cohesion and low coupling in the code; the data processing layer and the data rendering layer call different files, which can accelerate rendering loading speed.

[0036] Therefore, based on the above-mentioned inventive discovery, the inventors proposed the technical solution of the embodiments of the present invention. The application scenarios of the page rendering method provided by the embodiments of the present invention will be described below.

[0037] like Figure 1As shown, the application scenario corresponding to the page rendering method provided in this embodiment of the invention includes: electronic device 1. When a user clicks the submit form button on the interface of the electronic device, a page retrieval request is triggered. The electronic device 1 responds to the front-end page retrieval request by using a data retrieval layer to obtain the original data corresponding to the request. The electronic device 1 uses a data processing layer to call the data retrieval layer file to obtain the original data from the data retrieval layer. The electronic device 1 uses the data processing layer to preprocess the original data to obtain the data to be rendered. The electronic device 1 uses a data rendering layer to call the data processing layer file to obtain the data to be rendered from the data processing layer. The electronic device 1 uses the data rendering layer to perform data rendering processing on the data to be rendered to obtain the rendered page. The electronic device 1 displays the rendered page. By splitting the data into three layers and assigning different functions to each layer, the events processed by each layer become singular, achieving high cohesion and low coupling. The data processing layer and the data rendering layer call different files respectively, which can accelerate the rendering loading speed.

[0038] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0039] Example 1

[0040] Figure 2 This is a flowchart illustrating the page rendering method provided in Embodiment 1 of the present invention, as shown below. Figure 2 As shown, the execution subject of the page rendering method provided in this embodiment is a page rendering device, which is located in an electronic device. Therefore, the page rendering method provided in this embodiment includes the following steps:

[0041] Step 101: In response to the front-end page retrieval request, the data retrieval layer is used to obtain the original data corresponding to the request.

[0042] In this embodiment, the front-end component is divided into three layers: a data acquisition layer, a data processing layer, and a data rendering layer. The data acquisition layer is used to acquire data, the data processing layer is used to process data, and the data rendering layer is used to render the data. Based on user actions on the page, requests are triggered; for example, when a user clicks to submit a form, a page acquisition request is triggered. In response to the front-end's page acquisition request, the data acquisition layer retrieves the raw data from the back-end corresponding to the page acquisition request, and then interacts with the back-end through the data acquisition layer.

[0043] Step 102: The data processing layer calls the data acquisition layer file to obtain the raw data from the data acquisition layer, and the data processing layer preprocesses the raw data to obtain the data to be rendered.

[0044] In this embodiment, the data processing layer calls the data acquisition layer file to obtain the raw data from the data acquisition layer, and the data processing layer preprocesses the raw data to obtain the data to be rendered. The preprocessing includes detecting the status code of the raw data, detecting the data format of the raw data, and converting the raw data.

[0045] Step 103: The data rendering layer calls the data processing layer file to obtain the data to be rendered from the data processing layer, and the data rendering layer performs data rendering processing on the data to be rendered to obtain the rendered page.

[0046] In this embodiment, the data rendering layer calls the data processing layer file to obtain the data to be rendered from the data processing layer, and the data rendering layer performs data rendering processing on the data to be rendered to obtain the rendered page.

[0047] Step 104: Display the rendered page.

[0048] In this embodiment, the rendered page is displayed in the display area.

[0049] In this embodiment, in response to a page retrieval request from the front end, a data retrieval layer obtains the raw data corresponding to the page retrieval request. A data processing layer then calls the data retrieval layer's file to retrieve the raw data. The data processing layer preprocesses the raw data to obtain the data to be rendered. Finally, a data rendering layer calls the data processing layer's file to retrieve the data to be rendered. The data rendering layer then performs data rendering processing on the data to be rendered, obtaining the rendered page, and displaying the rendered page. This three-layer split assigns different functions to each layer, making the events handled by each layer more singular, achieving high cohesion and low coupling. The data processing layer and the data rendering layer call different files, which speeds up the rendering loading process.

[0050] Example 2

[0051] Based on the page rendering method provided in Embodiment 1 of the present invention, step 101 has been further refined, specifically including the following steps:

[0052] Step 1011: In response to the front-end page retrieval request, the data retrieval layer retrieves the original data corresponding to the request from the back-end database through the corresponding interface.

[0053] In this embodiment, in response to the front-end's page retrieval request, the data retrieval layer retrieves the original data corresponding to the request from the back-end database through the corresponding interface. Specifically, the data rendering layer uses the xmlhttprequest object to send and receive XML or other data between the browser and the web server via HTTP, thereby interacting with the back-end and retrieving the original data stored in the database to the front-end through the interface.

[0054] In this embodiment, a data acquisition layer interacts with the backend, giving each layer different functions, so that the events processed by each layer become singular.

[0055] Example 3

[0056] Figure 3 This is a flowchart illustrating the page rendering method provided in Embodiment 3 of the present invention, as shown below. Figure 3 As shown, based on the page rendering method provided in Embodiment 1 of the present invention, the data processing layer used in step 102 to preprocess the original data and obtain the data to be rendered is further refined, specifically including the following steps:

[0057] Step 1021: The data processing layer is used to check the status code of the original data to determine whether the status code of the original data is correct.

[0058] In this embodiment, a data processing layer is used to check the status code of the original data to determine whether the status code of the original data is correct. If the status code of the original data is incorrect, an error message component is used to display the error; if the status code of the original data is correct, the data format of the original data is checked.

[0059] Step 1022: If the status code of the original data is correct, the data processing layer is used to check the data format of the original data to determine whether the data format of the original data is correct.

[0060] In this embodiment, if the status code of the original data is correct, the data processing layer checks the data format of the original data to determine whether the data format of the original data is correct. If the data format of the original data is incorrect, it is recorded in the log.

[0061] Step 1023: If the original data format is correct, the data processing layer is used to convert the original data and the converted data is determined as the data to be rendered.

[0062] In this embodiment, if the original data has the correct data format, the data processing layer is used to convert the original data, mainly by converting the business data in the original data, and then determining the converted original data as the data to be rendered.

[0063] In this embodiment, a data acquisition layer is used to process the data, and different functions are assigned to each layer, so that the events processed by each layer become singular.

[0064] Example 4

[0065] Based on the page rendering method provided in Embodiment 3 of the present invention, step 1021 has been further refined, specifically including the following steps:

[0066] Step 1021a: Use the data processing layer to obtain the preset status code and compare the status code of the original data with the preset status code.

[0067] In this embodiment, a data processing layer is used to obtain a preset status code, and the status code of the original data is compared with the preset status code. Based on the comparison result, it is determined whether the status code of the original data is correct.

[0068] Step 1021b: If the status code of the original data is consistent with the preset status code, then the status code of the original data is determined to be correct.

[0069] In this embodiment, if the status code of the original data is consistent with the preset status code, it is determined that the status code of the original data is correct, and the data processing layer continues to verify the data format of the original data.

[0070] Step 1021c: If the status code of the original data is inconsistent with the preset status code, then the status code of the original data is determined to be incorrect.

[0071] In this embodiment, if the status code of the original data is inconsistent with the preset status code, it is determined that the status code of the original data is incorrect, and the error is displayed using the prompt component.

[0072] In this embodiment, the status code of the original data is checked to facilitate timely detection of problems and subsequent processing is carried out only if the status code of the original data is correct.

[0073] Example 5

[0074] Based on the page rendering method provided in Embodiment 3 of the present invention, step 1022 has been further refined, specifically including the following steps:

[0075] Step 1022a: Use the data processing layer to obtain the preset data format.

[0076] In this embodiment, a data processing layer is used to obtain a preset data format, and the data format of the original data is compared with the preset data format. Based on the comparison result, it is determined whether the data format of the original data is correct.

[0077] Step 1022b: If the original data format is a preset data format, then the original data format is determined to be correct.

[0078] In this embodiment, if the original data format is a preset data format, then the original data format is determined to be correct, and the data processing layer continues to perform data conversion on the original data.

[0079] Step 1022c: If the original data format is not the preset data format, then the original data format is determined to be incorrect.

[0080] In this embodiment, if the original data format is not a preset data format, the original data is determined to be in error and recorded in the log.

[0081] In this embodiment, the data format of the original data is checked for correctness, and conversion processing is performed if the status code of the original data is correct.

[0082] Example 6

[0083] Based on the page rendering methods provided in Embodiments 1 to 5 of this invention, the data rendering process of the data to be rendered in step 103 using a data rendering layer to obtain a more refined rendering page specifically includes the following steps:

[0084] Step 1031: The data rendering layer calls the preset rendering framework to perform data rendering processing on the data to be rendered, and obtains the rendered page.

[0085] In this embodiment, the preset rendering framework includes the Vue framework and the React framework. Vue is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up; the core Vue library focuses only on the view layer. The rendering framework is set according to the actual situation, and the data rendering layer calls the preset rendering framework to process the data to be rendered, thus obtaining the rendered page.

[0086] In this embodiment, by splitting the process into three layers and assigning different functions to each layer, the events processed by each layer become more singular, which can speed up the rendering and loading process.

[0087] Figure 4 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of the present invention, as shown below. Figure 4 As shown, the page rendering device 200 provided in this embodiment includes a data acquisition module 201, a data processing module 202, a data rendering module 203, and a display module 204.

[0088] The system comprises the following modules: Data Acquisition Module 201, which responds to page retrieval requests from the front end by acquiring the corresponding raw data using the data acquisition layer; Data Processing Module 202, which uses the data processing layer to call the data acquisition layer file to retrieve the raw data from the data acquisition layer, and preprocesses the raw data to obtain the data to be rendered; Data Rendering Module 203, which uses the data rendering layer to call the data processing layer file to retrieve the data to be rendered from the data processing layer, and performs data rendering processing on the data to be rendered to obtain the rendered page; and Display Module 204, which displays the rendered page.

[0089] Optionally, the data acquisition module is also used to respond to the front-end page acquisition request by using the data acquisition layer to obtain the original data corresponding to the request from the back-end database through the corresponding interface.

[0090] Optionally, the data processing module is further configured to use the data processing layer to check the status code of the original data to determine whether the status code of the original data is correct; if the status code of the original data is correct, the data processing layer is used to check the data format of the original data to determine whether the data format of the original data is correct; if the data format of the original data is incorrect, the data processing layer is used to convert the original data and determine the converted data as the data to be rendered.

[0091] Optionally, the data processing module is further configured to obtain a preset status code using the data processing layer, and compare the status code of the original data with the preset status code; if the status code of the original data matches the preset status code, the status code of the original data is determined to be correct; if the status code of the original data does not match the preset status code, the status code of the original data is determined to be incorrect.

[0092] Optionally, the data processing module is further configured to obtain a preset data format using the data processing layer; if the original data format is the preset data format, then the original data format is determined to be correct; if the original data format is not the preset data format, then the original data format is determined to be incorrect.

[0093] Optionally, the data rendering module is also used to call a preset rendering framework using the data rendering layer to perform data rendering processing on the data to be rendered, and obtain the rendered page.

[0094] Figure 5 This is a first block diagram of an electronic device used to implement the page rendering method of this invention, such as... Figure 5 As shown, the electronic device 300 includes: a memory 301 and a processor 302.

[0095] Memory 301 stores computer-executed instructions;

[0096] The processor 302 executes computer execution instructions stored in the memory 301, causing the processor 302 to perform the method provided in any of the above embodiments.

[0097] Figure 6 This is a second block diagram of an electronic device used to implement the page rendering method of this invention, such as... Figure 6 As shown, the electronic device can be a computer, digital broadcasting terminal, messaging device, tablet device, personal digital assistant, server, server cluster, etc.

[0098] Electronic device 800 may include one or more of the following components: processing component 802, memory 804, power supply component 806, multimedia component 808, audio component 810, input / output (I / O) interface 812, sensor component 814, and communication component 816.

[0099] Processing component 802 typically controls the overall operation of electronic device 800, such as operations associated with display, telephone calls, data communication, camera operation, and recording operations. Processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the methods described above. Furthermore, processing component 802 may include one or more modules to facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802.

[0100] Memory 804 is configured to store various types of data to support the operation of electronic device 800. Examples of this data include instructions for any application or method operating on electronic device 800, contact data, phonebook data, messages, pictures, videos, etc. Memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0101] Power supply component 806 provides power to various components of electronic device 800. Power supply component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to electronic device 800.

[0102] Multimedia component 808 includes a screen that provides an output interface between electronic device 800 and user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of touch or swipe actions but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 808 includes a front-facing camera and / or a rear-facing camera. When electronic device 800 is in an operating mode, such as a shooting mode or video mode, the front-facing camera and / or rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0103] Audio component 810 is configured to output and / or input audio signals. For example, audio component 810 includes a microphone (MIC) configured to receive external audio signals when electronic device 800 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 804 or transmitted via communication component 816. In some embodiments, audio component 810 also includes a speaker for outputting audio signals.

[0104] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0105] Sensor assembly 814 includes one or more sensors for providing state assessments of various aspects of electronic device 800. For example, sensor assembly 814 can detect the on / off state of electronic device 800, the relative positioning of components such as the display and keypad of electronic device 800, changes in position of electronic device 800 or a component of electronic device 800, the presence or absence of user contact with electronic device 800, orientation or acceleration / deceleration of electronic device 800, and temperature changes of electronic device 800. Sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 814 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 814 may also include an accelerometer, gyroscope, magnetometer, pressure sensor, or temperature sensor.

[0106] Communication component 816 is configured to facilitate wired or wireless communication between electronic device 800 and other devices. Electronic device 800 can access wireless networks based on communication standards, such as WiFi, 2G, or 3G, or combinations thereof. In one exemplary embodiment, communication component 816 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 816 also includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0107] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods described above.

[0108] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, which can be executed by a processor 820 of an electronic device 800 to perform the above-described method. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0109] In an exemplary embodiment, a computer-readable storage medium is also provided, which stores computer-executable instructions that are executed by a processor using the methods in any of the above embodiments.

[0110] In an exemplary embodiment, a computer program product is also provided, including a computer program that is executed by a processor using the method provided in any of the above embodiments.

[0111] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0112] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A page rendering method, characterized in that, The method includes: In response to a page retrieval request from the front end, a data retrieval layer is used to obtain the raw data corresponding to the request. The front end component is divided into three layers, including a data retrieval layer, a data processing layer, and a data rendering layer. The data retrieval layer is used to retrieve data, the data processing layer is used to process data, and the data rendering layer is used to render data. The data processing layer calls the data acquisition layer file to obtain the raw data from the data acquisition layer, and the data processing layer preprocesses the raw data to obtain the data to be rendered. The data rendering layer calls the data processing layer file to obtain the data to be rendered from the data processing layer, and then uses the data rendering layer to perform data rendering processing on the data to be rendered to obtain the rendered page; Display the rendered page; The process of preprocessing the original data using the data processing layer to obtain the data to be rendered includes: The data processing layer is used to verify the status code of the original data to determine whether the status code of the original data is correct. If the status code of the original data is correct, the data processing layer is used to check the data format of the original data to determine whether the data format of the original data is correct. If the original data has the correct data format, the data processing layer is used to convert the original data, and the converted data is determined as the data to be rendered.

2. The method according to claim 1, characterized in that, The response to the front-end page retrieval request uses a data retrieval layer to obtain the raw data corresponding to the request, including: In response to a page retrieval request from the front end, the data retrieval layer retrieves the original data corresponding to the request from the backend database through the corresponding interface.

3. The method according to claim 1, characterized in that, The step of using the data processing layer to verify the status code of the original data to determine whether the status code of the original data is correct includes: The data processing layer is used to obtain a preset status code, and the status code of the original data is compared with the preset status code. If the status code of the original data matches the preset status code, then the status code of the original data is determined to be correct. If the status code of the original data is inconsistent with the preset status code, then the status code of the original data is determined to be incorrect.

4. The method according to claim 1, characterized in that, The step of using the data processing layer to check the data format of the original data to determine whether the data format of the original data is correct includes: The data processing layer is used to obtain a preset data format; If the original data is in the preset data format, then the original data is determined to be in the correct data format. If the data format of the original data is not the preset data format, then the data format of the original data is determined to be incorrect.

5. The method according to any one of claims 1 to 3, characterized in that, The step of using the data rendering layer to perform data rendering processing on the data to be rendered to obtain a rendered page includes: The data rendering layer is used to call a preset rendering framework to process the data to be rendered and obtain the rendered page.

6. A page rendering device, characterized in that, The device includes: The data acquisition module is used to respond to the front-end page acquisition request and acquire the raw data corresponding to the request using the data acquisition layer. The front-end component is divided into three layers, including a data acquisition layer, a data processing layer, and a data rendering layer. The data acquisition layer is used to acquire data, the data processing layer is used to process data, and the data rendering layer is used to render data. The data processing module is used to call the data acquisition layer file to obtain the raw data from the data acquisition layer, and to preprocess the raw data using the data processing layer to obtain the data to be rendered. The data rendering module uses the data rendering layer to call the data processing layer file to obtain the data to be rendered from the data processing layer, and uses the data rendering layer to perform data rendering processing on the data to be rendered to obtain the rendered page; The display module is used to display the rendered page; The data processing module is further configured to use the data processing layer to check the status code of the original data to determine whether the status code of the original data is correct; if the status code of the original data is correct, the data processing layer is used to check the data format of the original data to determine whether the data format of the original data is correct; if the data format of the original data is correct, the data processing layer is used to perform data conversion on the original data, and the converted data is determined as the data to be rendered.

7. An electronic device, comprising: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1 to 5.

9. A computer program product comprising a computer program that, when executed by a processor, implements the method of any one of claims 1 to 5.

Citation Information

Patent Citations

  • Page display method, device and equipment

    CN114265658A