Data rendering method and device and electronic equipment

Abstract

The invention provides a data rendering method and device and electronic equipment, and relates to the field of data processing, in particular to the technical fields of data rendering, page loading and the like. According to the specific implementation scheme, a first data acquisition request is sent to a back end; wherein the first data acquisition request is used for requesting to acquire previous page data, and the previous page data is at least one piece of previous paging data in multiple pieces of paging data obtained by performing paging processing on the to-be-rendered data; receiving previous page data sent by the rear end; sending a second data acquisition request to the back end; wherein the second data acquisition request is used for requesting to acquire data of a next page, and the data of the next page is at least one piece of paging data after the data of the previous page in the multiple pieces of paging data; and in the process of waiting the back end to return the data of the back page, performing data rendering and display according to the data of the front page. Therefore, the front end can render and display the previous page data while waiting for obtaining the next page data, and the user experience is improved.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing, specifically to technical fields such as data rendering and page loading, and in particular to a data rendering method, device and electronic device. Background Art

[0002] When faced with data processing needs at the trillion level, such as querying the number of log data with the field method of get in hundreds of billions of log data lines in a certain period of time, and displaying the query results in the form of a bar chart, due to the need to retrieve hundreds of billions of data, the processing speed is slow and the response time is long. During this period, users can only see that the page is loading and cannot view the bar chart normally, resulting in a poor user experience. Summary of the invention

[0003] The present disclosure provides a data rendering method, device and electronic device.

[0004] According to a first aspect of the present disclosure, a data rendering method is provided, which is applied to a front end and includes:

[0005] Sending a first data acquisition request to the backend; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data that is sequentially preceding among a plurality of page data obtained by paging the data to be rendered;

[0006] receiving the previous page data sent by the back end;

[0007] Sending a second data acquisition request to the backend; wherein the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data;

[0008] While waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data.

[0009] According to a second aspect of the present disclosure, a data rendering method is provided, which is applied to a backend and includes:

[0010] Receive a first data acquisition request sent by the front end; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging data to be rendered;

[0011] Sending the previous page data to the front end;

[0012] A second data acquisition request sent by the front end is received; wherein the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data.

[0013] According to a third aspect of the present disclosure, a data rendering device is provided, which is applied to a front end and includes:

[0014] A first sending module is used to send a first data acquisition request to the backend; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging data to be rendered;

[0015] A first receiving module, used for receiving the previous page data sent by the back end;

[0016] A second sending module is used to send a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data;

[0017] The first processing module is used to render and display data according to the previous page data while waiting for the back end to return the subsequent page data.

[0018] According to a fourth aspect of the present disclosure, a data rendering device is provided, which is applied to a backend and includes:

[0019] A second receiving module is used to receive a first data acquisition request sent by the front end; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging data to be rendered;

[0020] A third sending module, used for sending the previous page data to the front end;

[0021] The third receiving module is used to receive a second data acquisition request sent by the front end; wherein the second data acquisition request is used to request to obtain the subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data.

[0022] According to a fifth aspect of the present disclosure, there is provided an electronic device, including:

[0023] at least one processor; and

[0024] a memory communicatively connected to the at least one processor; wherein,

[0025] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the data rendering method proposed in the first aspect of the present disclosure, or execute the data rendering method proposed in the second aspect of the present disclosure.

[0026] According to a sixth aspect of the present disclosure, a non-transitory computer-readable storage medium of computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the data rendering method proposed in the first aspect of the present disclosure, or to execute the data rendering method proposed in the second aspect of the present disclosure.

[0027] According to a seventh aspect of the present disclosure, a computer program product is provided, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the data rendering method proposed in the first aspect of the present disclosure, or implements the data rendering method proposed in the second aspect of the present disclosure.

[0028] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure.

[0030] Figure 1 A flowchart of a data rendering method provided in the first embodiment of the present disclosure;

[0031] Figure 2 A flowchart of a data rendering method provided in Embodiment 2 of the present disclosure;

[0032] Figure 3 A flowchart of a data rendering method provided in Embodiment 3 of the present disclosure;

[0033] Figure 4 A flowchart of a data rendering method provided in Embodiment 4 of the present disclosure;

[0034] Figure 5 A flowchart of a data rendering method provided in Embodiment 5 of the present disclosure;

[0035] Figure 6 A schematic diagram of the structure of a data rendering device provided in Embodiment 6 of the present disclosure;

[0036] Figure 7 This is a structural diagram of a data rendering device provided in Embodiment 7 of the present disclosure;

[0037] Figure 8A schematic block diagram of an example electronic device that can be used to implement embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0038] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0039] The data rendering method, device and electronic device according to the embodiments of the present disclosure are described below with reference to the accompanying drawings.

[0040] Figure 1 A flowchart of a data rendering method provided in Embodiment 1 of the present disclosure.

[0041] It should be noted that the data rendering method of the embodiment of the present disclosure is applied to the front end.

[0042] like Figure 1 As shown, the data rendering method may include the following steps S101 to S104:

[0043] Step S101: Send a first data acquisition request to a backend.

[0044] The first data acquisition request is used to request to acquire previous page data, where the previous page data is at least one page data that is sequentially preceding among a plurality of page data obtained by paging the data to be rendered.

[0045] The data to be rendered may be any data, such as table data, bar charts, etc.

[0046] As an example, if the data to be rendered is part or all of hundreds of billions of rows of table data, the multiple rows of data to be rendered can be paged according to a set number of rows to obtain multiple paged data, where one paged data contains the set number of rows of data to be rendered.

[0047] As another example, if the data to be rendered is a column chart, a vertical bar (a column) in the column chart can be regarded as a page data to obtain multiple page data.

[0048] In the embodiment of the present disclosure, when the front end needs to render and display the data to be rendered, it can send a first data acquisition request to the back end to request to obtain at least one paging data that is in the front order among multiple paging data obtained by paging the data to be rendered.

[0049] Optionally, multiple page data obtained by paging the data to be rendered are uniquely identified by page numbers, and the first data acquisition request carries the page number of the previous page data.

[0050] As a possible implementation, any paging data is obtained by retaining the data within the target data range corresponding to the paging data in the data to be rendered, and setting the data within each data range other than the target data range in the data to be rendered to a set value. Thus, by retaining only the data within the target data range, the amount of data that needs to be processed by the front end can be significantly reduced, thereby speeding up the rendering speed.

[0051] Among them, for the example where the data to be rendered is part or all of the data in hundreds of billions of rows of table data, the target data range corresponding to any paging data is the specific set number of rows corresponding to the paging data; for the example where the data to be rendered is a bar chart, the target data range corresponding to any paging data is the horizontal category corresponding to the paging data.

[0052] The setting value can be a null value, a placeholder, a default value, etc.

[0053] As an example, assuming that the data to be rendered is a bar chart, and the bar chart consists of 30 vertical bars (30 columns), then the paging data of the first page is data consisting of 30 vertical bars (30 columns), of which only the first vertical bar (first column) has data, and the data of the remaining 29 vertical bars (29 columns) are set to set values, such as 0. The paging data of other pages are similar and will not be repeated here.

[0054] Therefore, through paging processing, the amount of data requested by the front end in a single request is reduced, thereby reducing the pressure on the back end and the occupancy of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time.

[0055] Step S102, receiving the previous page data sent by the back end.

[0056] In the embodiment of the present disclosure, after receiving the first data acquisition request sent by the front end, the back end will send the previous page data requested by the front end to the front end. Accordingly, the front end can receive the previous page data sent by the back end.

[0057] Step S103: Send a second data acquisition request to the backend.

[0058] The second data acquisition request is used to request acquisition of subsequent page data, where the subsequent page data is at least one page data that is sequentially subsequent to the previous page data among the multiple page data.

[0059] That is, the order of the subsequent page data in the multiple page data obtained by paging the data to be rendered should be located after the previous page data. Therefore, by orderly acquiring the page data, the integrity and consistency of the data can be ensured, and the problem of missing or repeated data can be avoided.

[0060] In the embodiment of the present disclosure, there is no restriction on the execution order of the front end sending the first data acquisition request to the back end and the front end sending the second data acquisition request to the back end. Optionally, the front end can send the first data acquisition request and the second data acquisition request to the back end at the same time; it can also send the first data acquisition request to the back end first, and then send the second data acquisition request to the back end after receiving the previous page data sent by the back end; it can also send the first data acquisition request to the back end first, and then send the second data acquisition request to the back end (regardless of whether the previous page data sent by the back end is received), and so on.

[0061] Step S104, while waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data.

[0062] In the disclosed embodiment, while waiting for the backend to return the data of the subsequent page (having received the data of the previous page sent by the backend), data rendering and display can be performed based on the data of the previous page, so that the user can see part of the data (the data of the previous page) without waiting for all the data to be loaded, thereby improving the loading speed and user experience. In addition, the data rendering and display are progressive, and as the data of the subsequent page is gradually loaded, the user can see more data. This dynamic loading method achieves the animation effect of displaying the paging data in sequence, which can make the page loading smoother.

[0063] As a possible implementation manner, before data rendering, data processing may be performed on the previous page data to process the previous page data into data required for data rendering.

[0064] The data rendering method of the disclosed embodiment reduces the amount of data requested by the front end in a single request through paging processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time. By orderly acquiring paging data, the integrity and consistency of the data can be ensured, and the problem of missing or duplicate data can be avoided. For application scenarios with large amounts of data, users can browse the data step by step instead of loading all the data at once, which improves the loading speed and user experience.

[0065] It should be noted that in the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information are all carried out with the user's consent, and are in compliance with relevant laws and regulations and do not violate public order and good morals.

[0066] In order to clearly illustrate the above embodiment, the present disclosure further proposes a data rendering method.

[0067] Figure 2 This is a flowchart of the data rendering method provided in the second embodiment of the present disclosure.

[0068] like Figure 2 As shown, the data rendering method may include the following steps S201 to S204:

[0069] Step S201: Send a first data acquisition request to the backend.

[0070] In any embodiment of the present disclosure, the front end may send a data acquisition request to the back end through an interface corresponding to the data to be rendered, that is, the front end requests the previous page data through the interface.

[0071] Therefore, the front end can realize on-demand loading by requesting data through the interface, that is, the front end will only load data when needed, thereby reducing unnecessary resource consumption.

[0072] Step S202, receiving the previous page data sent by the back end.

[0073] In any embodiment of the present disclosure, the previous page data sent by the backend can be received through the interface corresponding to the data to be rendered. That is, the backend returns the previous page data through the interface.

[0074] For explanations of steps S201 - S202 , reference may be made to the relevant descriptions in any embodiment of the present disclosure and will not be repeated here.

[0075] Step S203, determining whether there is any unobtained paging data according to the number of previous page data and the total number of pages of data to be rendered, so as to send a second data acquisition request to the backend if there is any unobtained paging data.

[0076] In the disclosed embodiment, after receiving the previous page data sent by the back end, the front end can first determine whether there is any unobtained paging data based on the number of pages of the previous page data and the total number of pages of data to be rendered, and then send a second data acquisition request to the back end if there is any unobtained paging data. Thus, by pre-determining whether there is any unobtained paging data and sending a data acquisition request only when necessary, unnecessary network requests can be avoided, the occupancy of network bandwidth can be reduced, the processing load of the back end can be reduced, and the back end can be more effectively processed. Other requests.

[0077] Optionally, the page number of the previous page data can be selected by the front end when requesting to obtain the previous page data, and the first data acquisition request sent by the front end to the back end can carry the page number of the previous page data, so that the back end can determine which page data are the previous page data requested by the first data acquisition request from the multiple page data obtained through paging processing of the data to be rendered.

[0078] Optionally, the total number of pages of data to be rendered can be sent synchronously by the backend when sending the previous page data to the frontend, that is, after receiving the first data acquisition request sent by the frontend, the backend will send the previous page data requested by the frontend and the total number of pages of data to be rendered to the frontend.

[0079] Step S204, while waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data.

[0080] For the explanation of step S204, reference may be made to the relevant description in any embodiment of the present disclosure, and no further details will be given here.

[0081] In the data rendering method of the disclosed embodiment, the front end requests data through an interface, which can realize on-demand loading, that is, the front end will only load data when needed, thereby reducing unnecessary resource consumption. By pre-judging whether there is unobtained paging data and sending a data acquisition request only when necessary, unnecessary network requests can be avoided, the occupation of network bandwidth can be reduced, the processing load of the back end can be reduced, and the back end can be more effectively processed. Other requests.

[0082] It should be noted that in the present disclosure, there may be a situation where at least one paging data has been obtained before obtaining the previous page data. Figure 3 This process is described below.

[0083] Figure 3 This is a flowchart of the data rendering method provided in the third embodiment of the present disclosure.

[0084] like Figure 3 As shown, the data rendering method may include the following steps S301 to S306:

[0085] Step S301: Send a first data acquisition request to the backend.

[0086] For the explanation of step S301, reference may be made to the relevant description in any embodiment of the present disclosure, and no further details will be given here.

[0087] Step S302: while waiting for the backend to return the previous page data, data rendering and display are performed according to the acquired historical paging data.

[0088] The historical page data is at least one page data that is sequentially before the previous page among the multiple page data.

[0089] In the embodiment of the present disclosure, the front end has already obtained the historical paging data before obtaining the previous page data, that is, before the front end sends the first data acquisition request to the back end, the front end has already sent at least one data acquisition request to the originating end for requesting to obtain part or all of the historical paging data, and has also received the historical paging data sent by the back end. At this time, after the front end sends the first data acquisition request to the back end, it can render and display data according to the acquired historical paging data (while waiting for the back end to return the previous page data).

[0090] As a possible implementation method, if the number of historical paging data is one, then in the process of rendering and displaying data based on the acquired historical paging data, the data can be rendered and displayed directly based on this historical paging data; if the number of historical paging data is multiple, then in the process of rendering and displaying data based on the acquired historical paging data, it is necessary to first merge these multiple historical paging data, and then render and display the data based on the merged data.

[0091] Therefore, by rendering and displaying data based on the acquired historical paging data while waiting for the backend to return the previous page data, users will not see a blank screen or loading animation, thereby improving the user experience.

[0092] Step S303, receiving the previous page data sent by the back end.

[0093] Step S304: Send a second data acquisition request to the backend.

[0094] The explanation of step S303 to step S304 can refer to the relevant description in any embodiment of the present disclosure, and will not be repeated here.

[0095] Step S305 , while waiting for the backend to return the subsequent page data, generate fused paging data according to the previous page data and the historical paging data.

[0096] In the disclosed embodiment, the front end has already obtained the historical paging data before obtaining the previous page data, so that the front end needs to render and display the data based on the previous page data and the historical paging data while waiting for the back end to return the subsequent page data. Specifically, the front end can first fuse the previous page data and the historical paging data to obtain the fused paging data, and then render and display the data based on the fused paging data. Therefore, by fusing the data to be rendered before rendering, and then rendering and displaying the data based on the fused data, the number of rendering times can be reduced and the rendering efficiency can be improved.

[0097] As an example, assume that the data to be rendered is a bar chart, and the bar chart consists of 4 vertical bars (4 columns), and the data amounts corresponding to these 4 vertical bars (4 columns) are 30, 70, 50, and 80 respectively. If any paging data is obtained by retaining the data in the target data range corresponding to the paging data in the data to be rendered, and setting the data in each data range except the target data range in the data to be rendered to a set value (the set value is assumed to be 0), then the paging data of the first page can be expressed as [30, 0, 0, 0], the paging data of the second page can be expressed as [0, 70, 0, 0], the paging data of the third page can be expressed as [0, 0, 50, 0], and the paging data of the fourth page can be expressed as [0, 0, 0, 80]. Assuming that the paging data of the first page is historical paging data, and the paging data of the second page is previous page data, the previous page data and the historical paging data are fused to obtain the following fused paging data: [30, 70, 0, 0].

[0098] Step S306, rendering and displaying data according to the fused paging data.

[0099] The data rendering method of the disclosed embodiment can reduce the number of rendering times and improve rendering efficiency by first fusing the data to be rendered before rendering, and then rendering and displaying the data based on the fused data.

[0100] It should be noted that the above embodiment is described from the perspective of the front end. In order to more clearly illustrate the data rendering process, the embodiment of the present disclosure provides a possible implementation of a data rendering method described from the perspective of the back end. Figure 4 This is a flowchart of the data rendering method provided in the fourth embodiment of the present disclosure.

[0101] like Figure 4 As shown, the data rendering method may include the following steps S401 to S403:

[0102] Step S401: receiving a first data acquisition request sent by a front end.

[0103] The first data acquisition request is used to request to acquire previous page data, where the previous page data is at least one page data that is sequentially preceding among a plurality of page data obtained by paging the data to be rendered.

[0104] In the embodiment of the present disclosure, when the front end needs to render and display the data to be rendered, the front end can send a first data acquisition request to the back end to request to obtain at least one of the multiple paging data obtained by the paging processing of the data to be rendered. Correspondingly, the back end can receive the first data acquisition request sent by the front end.

[0105] For the explanation of this step, please refer to the relevant description in any embodiment of the present disclosure, and will not be repeated here.

[0106] Step S402, sending the previous page data to the front end.

[0107] In the embodiment of the present disclosure, after receiving the first data acquisition request sent by the front end, the back end will send the previous page data requested by the front end to the front end.

[0108] Optionally, the multiple paging data obtained by the paging process of the data to be rendered are uniquely identified by page numbers, and the first data acquisition request carries the page number of the previous page data. Thus, the backend can determine which paging data from the multiple paging data obtained by the paging process of the data to be rendered are the previous page data requested by the first data acquisition request according to the page number of the previous page data carried in the first data acquisition request, and send the determined previous page data to the frontend.

[0109] For the explanation of this step, please refer to the relevant description in any embodiment of the present disclosure, and will not be repeated here.

[0110] Step S403: receiving a second data acquisition request sent by the front end.

[0111] The second data acquisition request is used to request acquisition of subsequent page data, where the subsequent page data is at least one page data that is sequentially subsequent to the previous page data among the multiple page data.

[0112] In the embodiment of the present disclosure, the front end sends a second data acquisition request to the back end to request to acquire at least one paging data that is sequentially after the previous page data among the multiple paging data obtained by the paging processing of the data to be rendered. Accordingly, the back end can receive the second data acquisition request sent by the front end.

[0113] For the explanation of this step, please refer to the relevant description in any embodiment of the present disclosure, and will not be repeated here.

[0114] In the data rendering method of the disclosed embodiment, the front end reduces the amount of data requested by the front end in a single request through paging processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time. By orderly acquiring paging data, the integrity and consistency of the data can be ensured, and the problem of missing or duplicate data can be avoided. For application scenarios with large amounts of data, users can browse the data step by step instead of loading all the data at once, which improves the loading speed and user experience.

[0115] In order to clearly illustrate the above embodiment, an example is now given for illustration.

[0116] In the related art, the bar chart display solution is that the front end initiates an interface request, and after the interface returns the data, the front end renders the bar chart. However, if it is necessary to aggregate hundreds of billions of rows of data (such as querying the number of logs with the field method of get in hundreds of billions of logs in a certain period of time, and displaying them in the form of a bar chart), after the page requests the bar chart interface, the interface itself needs to retrieve hundreds of billions of logs, which is slow and the interface response time is long. During this period, the page is always in a loading state, and the bar chart cannot be displayed normally, resulting in a poor user experience.

[0117] In order to solve the problem of slow response of column chart interface, the present invention loads column chart by paging, thus achieving Figure 1 The animation effects displayed one by one improve the user experience.

[0118] It should be noted that the present disclosure is mainly used for the aggregation of data volumes of hundreds of billions, and the aggregation results are displayed in bar charts. It is mainly to solve the problems of large data volume, slow response of the aggregation interface, slow loading of the bar chart, and poor user experience.

[0119] Figure 5 This is a flowchart of the data rendering method provided in Embodiment 5 of the present disclosure.

[0120] like Figure 5 As shown, the data rendering method may include the following steps S501 to S512:

[0121] Step S501, page initialization.

[0122] The page starts loading the bar chart, and the page is in the bar chart loading state.

[0123] Step S502: the interface requests the first page of data of the bar chart.

[0124] The front end requests the first page of data of the column chart from the back end through the interface. Among them, a vertical bar (a column) in the column chart is regarded as a paged data, and the first page of data refers to the first vertical bar (a column) in the column chart.

[0125] Step S503, the interface returns the first page data of the bar chart and the total number of pages of the bar chart.

[0126] The backend returns the requested first page of the column chart data and the total number of columns to the frontend through the interface. The total number of columns refers to the total number of vertical bars (one column) contained in the column chart. For example, if a column chart consists of 30 vertical bars (30 columns), the total number of columns is 30.

[0127] Step S504: Process the data into data required for rendering a bar chart.

[0128] Before rendering the bar chart, it is necessary to process the acquired first page data of the bar chart to process the acquired first page data of the bar chart into data required for rendering the bar chart, and then render the bar chart according to the processed data.

[0129] Step S505: bar chart rendering.

[0130] Step S506, determining the size relationship between the current page and the total number of pages in the column chart to determine whether to request the next page of data.

[0131] Optionally, the current page can be compared with the total number of pages in the column chart to determine whether to request the next page of data. If there is a next page, the interface continues to request the next page of data; if not, the request is not continued.

[0132] Step S507: If not, do not continue the request.

[0133] Step S508: If yes, the interface requests the next page of data of the bar chart.

[0134] Step S509, the interface returns the next page of data of the bar chart and the total number of pages of the bar chart.

[0135] Step S510, the acquired next page data of the bar chart is merged with the previously acquired bar chart page data, and the merged data is processed into data required for rendering the bar chart.

[0136] After the next page of data of the column chart is returned, the next page of data of the column chart obtained in response is merged with the previously obtained column chart page data, and then the column chart is rendered, thereby achieving the effect of paging loading of the column chart.

[0137] Step S511, bar chart rendering.

[0138] Step S512, determining the size relationship between the current page and the total number of pages in the column chart to determine whether to request the next page of data.

[0139] In summary, the bar chart interface implements a paging mechanism. The purpose of this is to reduce the response time of a single interface. If the paging mechanism is not implemented, the interface response is 30s. For example, the response speed of the bar chart paging interface is 1s. The front end serially requests the bar chart interface, and the bar chart is rendered each time the interface returns. The front end serially requests the bar chart interface, and the response data is spliced ​​through a certain mechanism. For example, the bar chart response data of the first page is [0, 0, 0, 80], and the bar chart response data of the second page is [0, 0, 50, 0]. The front end splices it into [0, 0, 50, 80] and renders the bar chart. As a result, the response time of a single interface is reduced, and the effect achieved is the bar chart paging loading effect. Compared with waiting for a long time for an interface to display the loading state, the loading speed and user experience are improved.

[0140] With the above Figures 1 to 3 Corresponding to the data rendering method provided in the embodiment, the present disclosure also provides a data rendering device. Figures 1 to 3 The data rendering method provided in the embodiment corresponds to the data rendering method, so the implementation of the data rendering method is also applicable to the data rendering device provided in the embodiment of the present disclosure, and will not be described in detail in the embodiment of the present disclosure.

[0141] Figure 6 This is a structural diagram of a data rendering device provided in Embodiment 6 of the present disclosure.

[0142] like Figure 6 As shown, the data rendering device 600 may include: a first sending module 610 , a first receiving module 620 , a second sending module 630 and a first processing module 640 .

[0143] The first sending module 610 is used to send a first data acquisition request to the backend; wherein the first data acquisition request is used to request to acquire the previous page data, and the previous page data is at least one page data that is sequentially preceding among a plurality of page data obtained by paging the data to be rendered;

[0144] A first receiving module 620, configured to receive the previous page data sent by the back end;

[0145] The second sending module 630 is used to send a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire the subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data;

[0146] The first processing module 640 is used to render and display data according to the previous page data while waiting for the back end to return the subsequent page data.

[0147] In a possible implementation of the embodiment of the present disclosure, the above-mentioned device further includes:

[0148] The determination module is used to determine whether there is unobtained paging data according to the number of pages of previous page data and the total number of pages of data to be rendered, so as to send a second data acquisition request to the backend if there is unobtained paging data.

[0149] In a possible implementation of the embodiment of the present disclosure, the above-mentioned device further includes:

[0150] The second processing module is used to render and display data according to the acquired historical paging data while waiting for the backend to return the previous page data; wherein the historical paging data is at least one paging data in the order before the previous page among the multiple paging data.

[0151] In a possible implementation of the embodiment of the present disclosure, the first processing module 640 is further configured to:

[0152] While waiting for the backend to return the subsequent page data, generate fused paging data based on the previous page data and historical paging data;

[0153] Render and display data based on fused paging data.

[0154] In a possible implementation of the embodiment of the present disclosure, the first sending module 610 is further configured to:

[0155] Send a data acquisition request to the backend through the interface corresponding to the data to be rendered;

[0156] The first receiving module 620 is further configured to:

[0157] Receive the previous page data sent by the backend through the interface corresponding to the data to be rendered;

[0158] The second sending module 630 is further used for:

[0159] A second data acquisition request is sent to the backend through the interface corresponding to the data to be rendered.

[0160] In a possible implementation of the embodiment of the present disclosure, any paging data is obtained by retaining the data within the target data range corresponding to the paging data in the data to be rendered, and setting the data within each data range other than the target data range in the data to be rendered to a set value.

[0161] The data rendering device of the disclosed embodiment reduces the amount of data requested by the front end in a single request through paging processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time. For application scenarios with large amounts of data, users can browse the data step by step instead of loading all the data at one time, which improves the loading speed and user experience.

[0162] With the above Figure 4 Corresponding to the data rendering method provided in the embodiment, the present disclosure also provides a data rendering device. Figure 4 The data rendering method provided in the embodiment corresponds to the data rendering method, so the implementation of the data rendering method is also applicable to the data rendering device provided in the embodiment of the present disclosure, and will not be described in detail in the embodiment of the present disclosure.

[0163] Figure 7 This is a structural diagram of a data rendering device provided in Embodiment 7 of the present disclosure.

[0164] like Figure 7As shown, the data rendering device 700 may include: a second receiving module 710 , a third sending module 720 and a third receiving module 730 .

[0165] The second receiving module 710 is used to receive a first data acquisition request sent by the front end; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging the data to be rendered;

[0166] The third sending module 720 is used to send the previous page data to the front end;

[0167] The third receiving module 730 is used to receive a second data acquisition request sent by the front end; wherein the second data acquisition request is used to request to obtain subsequent page data, and the subsequent page data is at least one page data in a plurality of page data that is sequentially after the previous page data.

[0168] In a possible implementation of the embodiment of the present disclosure, the second receiving module 710 is further configured to:

[0169] Receive a first data acquisition request sent by the front end through an interface corresponding to the data to be rendered;

[0170] The third sending module 720 is further used for:

[0171] Send the previous page data to the front end through the interface corresponding to the data to be rendered;

[0172] The third receiving module 730 is further configured to:

[0173] The second data acquisition request sent by the front end is received through the interface corresponding to the data to be rendered.

[0174] In a possible implementation of the embodiment of the present disclosure, any paging data is obtained by retaining the data in the first data range corresponding to the paging data in the data to be rendered, and setting the data in each data range other than the first data range in the data to be rendered to a set value.

[0175] In the data rendering device of the disclosed embodiment, the front end reduces the amount of data requested by the front end in a single request through paging processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time. By obtaining paging data in an orderly manner, the integrity and consistency of the data can be ensured, and the problem of missing or duplicate data can be avoided. For application scenarios with large amounts of data, users can browse the data step by step instead of loading all the data at once, which improves the loading speed and user experience.

[0176] In order to implement the above embodiments, the present disclosure also provides an electronic device, which may include at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the data rendering method proposed in any of the above embodiments of the present disclosure.

[0177] In order to implement the above embodiments, the present disclosure further provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute the data rendering method proposed in any of the above embodiments of the present disclosure.

[0178] In order to implement the above embodiments, the present disclosure further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, it implements the data rendering method proposed in any of the above embodiments of the present disclosure.

[0179] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0180] Figure 8 A schematic block diagram of an example electronic device that can be used to implement embodiments of the present disclosure is shown.

[0181] Among them, the electronic device may include the server and the client in the above-mentioned embodiment. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices and other similar computing devices. The components shown herein, their connections and relationships, and their functions are only examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0182] like Figure 8 As shown, the device 800 includes a computing unit 801, which can perform various appropriate actions and processes according to a computer program stored in a ROM (Read-Only Memory) 802 or a computer program loaded from a storage unit 807 to a RAM (Random Access Memory) 803. In the RAM 803, various programs and data required for the operation of the device 800 can also be stored. The computing unit 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An I / O (Input / Output) interface 805 is also connected to the bus 804.

[0183] A number of components in the device 800 are connected to the I / O interface 805, including: an input unit 806, such as a keyboard, a mouse, etc.; an output unit 807, such as various types of displays, speakers, etc.; a storage unit 808, such as a disk, an optical disk, etc.; and a communication unit 809, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 809 allows the device 800 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0184] The computing unit 801 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 801 include, but are not limited to, a CPU (Central Processing Unit), a GPU (Graphic Processing Units), various dedicated AI (Artificial Intelligence) computing chips, various computing units running machine learning model algorithms, a DSP (Digital Signal Processor), and any appropriate processor, controller, microcontroller, etc. The computing unit 801 performs the various methods and processes described above, such as the above-described data rendering method. For example, in some embodiments, the above-described data rendering method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 808. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 800 via the ROM 802 and / or the communication unit 809. When the computer program is loaded into the RAM 803 and executed by the computing unit 801, one or more steps of the data rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 801 may be configured to execute the above data rendering method in any other appropriate manner (for example, by means of firmware).

[0185] Various embodiments of the systems and techniques described above herein may be implemented in digital electronic circuit systems, integrated circuit systems, FPGAs (Field Programmable Gate Arrays), ASICs (Application-Specific Integrated Circuits), ASSPs (Application Specific Standard Products), SOCs (System On Chips), CPLDs (Complex Programmable Logic Devices), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include: being implemented in one or more computer programs that may be executed and / or interpreted on a programmable system including at least one programmable processor that may be a dedicated or general-purpose programmable processor that may receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0186] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0187] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or device, or any suitable combination of the foregoing. More specific examples of machine-readable storage media may include electrical connections based on one or more lines, portable computer disks, hard disks, RAM, ROM, EPROM (Electrically Programmable Read-Only-Memory) or flash memory, optical fiber, CD-ROM (Compact Disc Read-Only Memory), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0188] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (Cathode-Ray Tube) or LCD (Liquid Crystal Display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0189] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: LAN (Local Area Network), WAN (Wide Area Network), the Internet, and blockchain networks.

[0190] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship between the client and the server is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or a cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services (Virtual Private Server). The server may also be a server of a distributed system, or a server combined with a blockchain.

[0191] It should be noted that artificial intelligence is a discipline that studies how computers can simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, planning, etc.), and includes both hardware-level and software-level technologies. Artificial intelligence hardware technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, and big data processing; artificial intelligence software technologies mainly include computer vision technology, speech recognition technology, natural language processing technology, as well as machine learning / deep learning, big data processing technology, knowledge graph technology, and other major directions.

[0192] Cloud computing refers to a technology system that uses network access to elastically scalable shared physical or virtual resource pools, including servers, operating systems, networks, software, applications, and storage devices, and can deploy and manage resources in an on-demand, self-service manner. Cloud computing technology can provide efficient and powerful data processing capabilities for the application of technologies such as artificial intelligence and blockchain, as well as model training.

[0193] According to the technical solution of the embodiment of the present disclosure, a first data acquisition request is sent to the backend; wherein the first data acquisition request is used to request the acquisition of the previous page data, and the previous page data is at least one paging data that is sequentially preceding among multiple paging data obtained by paging the data to be rendered; the previous page data sent by the backend is received; a second data acquisition request is sent to the backend; wherein the second data acquisition request is used to request the acquisition of the subsequent page data, and the subsequent page data is at least one paging data that is sequentially following the previous page data among multiple paging data; while waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data. Thus, the frontend can render and display the previous page data while waiting for the acquisition of the subsequent page data, thereby improving the user experience.

[0194] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0195] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A data rendering method, applied to the front end, comprising: Sending a first data acquisition request to the backend; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data that is sequentially preceding among a plurality of page data obtained by paging the data to be rendered; receiving the previous page data sent by the back end; Sending a second data acquisition request to the backend; wherein the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data; While waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data.

2. The data rendering method according to claim 1, wherein: Before sending the second data acquisition request to the backend, the method further includes: According to the number of pages of the previous page data and the total number of pages of the data to be rendered, it is determined whether there is any unobtained paging data, so as to send a second data acquisition request to the backend if there is any unobtained paging data.

3. The data rendering method according to claim 1, wherein: The method further comprises: While waiting for the backend to return the previous page data, data rendering and display are performed according to the acquired historical paging data; wherein the historical paging data is at least one paging data that is sequentially before the previous page among the multiple paging data.

4. The data rendering method according to claim 3, wherein: The step of rendering and displaying data according to the previous page data while waiting for the backend to return the subsequent page data includes: In the process of waiting for the backend to return the subsequent page data, generating fused paging data according to the previous page data and the historical paging data; Data rendering and display are performed according to the fused paging data.

5. The data rendering method according to claim 1, wherein: The sending a first data acquisition request to the backend includes: Sending the first data acquisition request to the backend through the interface corresponding to the data to be rendered; The receiving the previous page data sent by the back end includes: Receiving the previous page data sent by the backend through the interface corresponding to the data to be rendered; The sending a second data acquisition request to the backend includes: The second data acquisition request is sent to the backend through the interface corresponding to the data to be rendered.

6. The data rendering method according to any one of claims 1 to 5, wherein: Any of the paging data is obtained by retaining the data in the target data range corresponding to the paging data in the data to be rendered, and setting the data in each data range other than the target data range in the data to be rendered to a set value.

7. A data rendering method, applied to a backend, comprising: Receive a first data acquisition request sent by the front end; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging data to be rendered; Sending the previous page data to the front end; A second data acquisition request sent by the front end is received; wherein the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data.

8. The data rendering method according to claim 7, wherein: The receiving a first data acquisition request sent by the front end includes: Receiving the first data acquisition request sent by the front end through the interface corresponding to the data to be rendered; The sending the previous page data to the front end includes: Sending the previous page data to the front end through the interface corresponding to the data to be rendered; The receiving a second data acquisition request sent by the front end includes: The second data acquisition request sent by the front end is received through the interface corresponding to the data to be rendered.

9. The data rendering method according to claim 7 or 8, wherein: Any of the paging data is obtained by retaining the data in the target data range corresponding to the paging data in the data to be rendered, and setting the data in each data range other than the target data range in the data to be rendered to a set value.

10. A data rendering device, applied to a front end, comprising: A first sending module is used to send a first data acquisition request to the backend; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging data to be rendered; A first receiving module, used for receiving the previous page data sent by the back end; A second sending module is used to send a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data; The first processing module is used to render and display data according to the previous page data while waiting for the back end to return the subsequent page data.

11. The data rendering device according to claim 10, wherein: The device further comprises: The determination module is used to determine whether there is unobtained paging data according to the number of pages of the previous page data and the total number of pages of the data to be rendered, so as to send a second data acquisition request to the backend if there is unobtained paging data.

12. The data rendering device according to claim 10, wherein: The device further comprises: The second processing module is used to render and display data according to the acquired historical paging data while waiting for the backend to return the previous page data; wherein the historical paging data is at least one paging data in the plurality of paging data that is sequentially before the previous page.

13. The data rendering device according to claim 12, wherein: The first processing module is further used for: In the process of waiting for the backend to return the subsequent page data, generating fused paging data according to the previous page data and the historical paging data; Data rendering and display are performed according to the fused paging data.

14. The data rendering device according to claim 10, wherein: The first sending module is further used for: Sending the first data acquisition request to the backend through the interface corresponding to the data to be rendered; The first receiving module is further used for: Receiving the previous page data sent by the backend through the interface corresponding to the data to be rendered; The second sending module is further used for: The second data acquisition request is sent to the backend through the interface corresponding to the data to be rendered.

15. The data rendering device according to any one of claims 10 to 14, wherein: Any of the paging data is obtained by retaining the data in the target data range corresponding to the paging data in the data to be rendered, and setting the data in each data range other than the target data range in the data to be rendered to a set value.

16. A data rendering device, applied to a backend, comprising: A second receiving module is used to receive a first data acquisition request sent by the front end; wherein the first data acquisition request is used to request to obtain previous page data, and the previous page data is at least one page data that is sequentially preceding among multiple page data obtained by paging the data to be rendered; A third sending module, used for sending the previous page data to the front end; The third receiving module is used to receive a second data acquisition request sent by the front end; wherein the second data acquisition request is used to request to obtain the subsequent page data, and the subsequent page data is at least one page data in the plurality of page data that is sequentially after the previous page data.

17. The data rendering device according to claim 16, wherein: The second receiving module is further used for: Receiving the first data acquisition request sent by the front end through the interface corresponding to the data to be rendered; The third sending module is further used for: Sending the previous page data to the front end through the interface corresponding to the data to be rendered; The third receiving module is further used for: The second data acquisition request sent by the front end is received through the interface corresponding to the data to be rendered.

18. The data rendering device according to claim 16 or 17, wherein: Any of the paging data is obtained by retaining the data in the first data range corresponding to the paging data in the data to be rendered, and setting the data in each data range other than the first data range in the data to be rendered to a set value.

19. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the data rendering method described in any one of claims 1-6, or execute the data rendering method described in any one of claims 7-9.

20. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to enable the computer to execute the data rendering method according to any one of claims 1-6, or to execute the data rendering method according to any one of claims 7-9.

21. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the data rendering method according to any one of claims 1 to 6, or implements the data rendering method according to any one of claims 7 to 9.

Images