Method, device, electronic device and storage medium for loading data by region on a page

Abstract

The present application provides a method, device, electronic device and storage medium for loading data by region on a page. The method includes: dividing a page into multiple regions, adding a corresponding root element identifier to the root element of each region, and passing the root element identifier into a network request library; intercepting the data loading request using the network request library, and creating a loading object based on the root element identifier in the data loading request; loading the loading object under the root element corresponding to the root element identifier so that the region presents a loading effect; intercepting the data response returned by the server using the network request library, and determining the root element based on the root element identifier in the data response; obtaining the loading object corresponding to the root element, closing the loading object to control the region to close the loading effect, and loading the page data returned by the server into the corresponding region. The loading and rendering processes between the regions of the present application are independent of each other, which improves the user experience, reduces waiting time, and improves the flexibility of user operations.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device and storage medium for loading data by region on a page. Background Art

[0002] In enterprise-level backend management systems, monitoring large screens or statistics pages with multiple charts are common functional modules. These pages often need to load and render a large amount of data and elements, which may cause data requests and content rendering to take a long time. The traditional approach is to use a global loading prompt to inform users that data is loading, but this approach has certain problems.

[0003] On the one hand, if you choose to close Loading after all data requests are completed, some data requests may take a long time, which will cause the page to display the loading status for a long time and the user cannot perform other operations, which obviously has a negative impact on the user experience. On the other hand, if you close Loading after the first data request is completed, it may create an illusion that all data requests have been completed, resulting in blank areas on the page. Therefore, the existing page data loading method has the problems of long user waiting time, easy to mislead users, reduced user experience and poor user operation flexibility. Summary of the invention

[0004] In view of this, an embodiment of the present application provides a method, device, electronic device and storage medium for loading data by region on a page to solve the problems of long user waiting time, easy misleading of users, reduced user experience and poor user operation flexibility in the prior art.

[0005] In a first aspect of an embodiment of the present application, a method for loading data by region on a page is provided, comprising: dividing a page into multiple regions, adding a corresponding root element identifier to the root element corresponding to each region, and passing the root element identifier into a network request library; intercepting the data loading request using the network request library, and creating a loading object based on the root element identifier in the data loading request; loading the loading object into the root element corresponding to the root element identifier so that the region corresponding to the root element presents a loading effect; intercepting the data response returned by the server for the data loading request using the network request library, and determining the corresponding root element based on the root element identifier in the data response; obtaining the loading object corresponding to the root element, closing the loading object to control the region to close the loading effect, and loading the page data returned by the server into the corresponding region.

[0006] According to a second aspect of an embodiment of the present application, a device for loading data by region on a page is provided, comprising: a division module, configured to divide a page into multiple regions, add a corresponding root element identifier to the root element corresponding to each region, and pass the root element identifier into a network request library; a creation module, configured to intercept a data loading request using the network request library, and create a loading object according to the root element identifier in the data loading request; a loading module, configured to load the loading object into a root element corresponding to the root element identifier, so that the region corresponding to the root element presents a loading effect; a determination module, configured to intercept a data response returned by a server for the data loading request using the network request library, and determine the corresponding root element according to the root element identifier in the data response; a closing module, configured to obtain the loading object corresponding to the root element, close the loading object to control the region to close the loading effect, and load the page data returned by the server into the corresponding region.

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

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

[0009] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects:

[0010] By dividing the page into multiple areas, adding a corresponding root element identifier to the root element corresponding to each area, and passing the root element identifier into the network request library; using the network request library to intercept the data loading request, and creating a loading object based on the root element identifier in the data loading request; loading the loading object under the root element corresponding to the root element identifier, so that the area corresponding to the root element presents a loading effect; using the network request library to intercept the data response returned by the server for the data loading request, and determining the corresponding root element based on the root element identifier in the data response; obtaining the loading object corresponding to the root element, closing the loading object to control the area to close the loading effect, and loading the page data returned by the server into the corresponding area. The present application can load page data and present loading effects by area, so that the loading and rendering processes between each area can be independent of each other, thereby improving the user experience, reducing waiting time, and increasing the flexibility of user operations. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0012] Figure 1 It is a flowchart of a method for loading data by region on a page provided in an embodiment of the present application;

[0013] Figure 2 It is a schematic diagram of the effect of dividing a page into multiple areas in an actual scenario according to an embodiment of the present application;

[0014] Figure 3 is a schematic diagram showing a loading effect of a region in an exemplary browser page according to an embodiment of the present application;

[0015] Figure 4 is a schematic diagram showing a loading effect of a region in another exemplary browser page according to an embodiment of the present application;

[0016] Figure 5 It is a structural schematic diagram of a device for loading data by region on a page provided in an embodiment of the present application;

[0017] Figure 6 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0019] As described in the background technology, in enterprise-level backend management systems (such as B-side platform management systems), large monitoring screens or statistics pages with multiple charts (such as large-screen monitoring pages) often appear. These pages usually contain a large amount of data and elements, and requesting these data and rendering these contents may take a lot of time. The prior art generally uses the method of loading global Loading to remind users that data is loading, but the global Loading will have the problem of when to close Loading, for example, the following problems may exist:

[0020] (1) Wait until all data requests are completed before closing Loading. However, if some data requests take a long time, the page will continue to prompt that it is loading, affecting the user experience, and the user cannot perform any other operations.

[0021] (2) After the first data request is completed, close Loading. However, this will give the user the illusion that all data requests have been completed, and the page will appear blank.

[0022] Therefore, it is urgent to provide a solution for optimizing the loading performance and user experience of large-screen monitoring or multi-chart statistics pages in the B-side platform management system. This can solve some problems existing in the conventional global loading method when facing large amounts of data and element requests and rendering, such as the closing timing problem, which may lead to a long waiting time or mislead users into thinking that all data has been loaded.

[0023] In view of the problems existing in the above-mentioned prior art, an embodiment of the present application provides a method for loading by region for a multi-chart page, by adding a Loading effect for each region to ensure that its loading and rendering process will not affect other regions. In this way, the page data loading and rendering processes between each region will be independent of each other, and the loading and rendering of the page data can be carried out at the same time. When the user is waiting for a certain area to load, the content of other areas can already be viewed and used. At the same time, when the user needs to refresh the data of a certain area, only the corresponding area needs to be refreshed, and the loading and rendering of other areas will not be affected. Therefore, functions such as local refresh of the area are supported. Thereby improving the user experience, reducing the user's waiting time, and improving the flexibility of user operations.

[0024] The contents of the technical solution of the present application are described in detail below with reference to the accompanying drawings and specific embodiments.

[0025] Figure 1 It is a flow chart of the method for loading data by region on a page provided in an embodiment of the present application. Figure 1 The page area data loading method can be executed by the client. Figure 1 As shown, the method for loading data by region on this page may specifically include:

[0026] S101, dividing the page into multiple areas, adding a corresponding root element identifier to the root element corresponding to each area, and transferring the root element identifier to the network request library;

[0027] S102, intercepting a data loading request using a network request library, and creating a loading object according to a root element identifier in the data loading request;

[0028] S103, loading the loading object into the root element corresponding to the root element identifier, so that the area corresponding to the root element presents a loading effect;

[0029] S104, using the network request library to intercept the data response returned by the server in response to the data loading request, and determining the corresponding root element according to the root element identifier in the data response;

[0030] S105, obtaining a loading object corresponding to the root element, closing the loading object to control the area to close the loading effect, and loading the page data returned by the server into the corresponding area.

[0031] The page of the embodiment of the present application may refer to a browser page, that is, the client of the present application is a browser. Regions are multiple page regions generated by segmenting the browser page according to logic and function. For example, a rectangular browser page can be divided into four equal regions. It should be noted that the embodiment of the present application does not impose any restrictions on the number of divisions, area, position, shape, etc. of the page region.

[0032] The network request library of the embodiment of the present application can adopt the Axios network request library. Axios is a Promise-based HTTP library that can be used in browsers and node.js. It has many advantages, such as supporting browsers and node.js, supporting Promise API, supporting interception of requests and responses, supporting conversion of request and response data, supporting cancellation of requests, etc. In many front-end projects, Axios is widely used to process HTTP requests.

[0033] The interceptor of Axios is a kind of characteristic, can modify or simply check the request or response before they are processed.In the embodiment of the present application, two types of interceptors are used, one is the request interceptor and the other is the response interceptor.

[0034] Among them, request interceptor: request interceptor will be called before the request is sent to the server. Usually, some common request headers can be set here, such as authentication tokens, or some preprocessing can be performed before the request is sent. Response interceptor: response interceptor will be called before the response is returned to the client. Usually, some preprocessing of the returned data can be performed here, or some processing can be performed before returning an error. Interceptors provide the ability to add custom code to the life cycle of HTTP requests.

[0035] In some embodiments, a page is divided into multiple areas, and a corresponding root element identifier is added to the root element corresponding to each area, including: determining the browser page of the client, dividing the browser page into multiple areas according to preset logic and functions, and adding a unique root element identifier to the root element of each area; wherein each area is used to independently load and render data, and a refresh button is provided in each area, and the refresh button is used to load and refresh data for each area separately.

[0036] Specifically, the embodiment of the present application first implements the division and isolation of functions and rendering at the page level. The purpose of dividing the area is to divide the page into multiple areas according to logic and function, and these areas can load and render data independently. For example: a statistical page may contain a chart of sales data, a chart of user behavior, and a chart of inventory data, and these charts can be divided into different areas. The root element of each area will add a unique id identifier (i.e., the root element identifier), so that when performing data requests and rendering, the corresponding area can be found according to the id identifier for operation, ensuring the accuracy of data requests and rendering. In addition, a refresh button can be set in each area, so that the user can refresh the data of an area separately without affecting the display and use of other areas. The present application implements modular design and management of pages, allowing each area to load and render data independently, which is more flexible than global loading, because global loading may cause users to be interrupted when viewing or operating other areas.

[0037] The following is a description of the results of dividing a page into multiple regions in an actual scenario in conjunction with the accompanying drawings. Figure 2 As shown, Figure 2 This is a schematic diagram of the effect of dividing a page into multiple areas in an actual scenario in an embodiment of the present application. The embodiment of the present application divides the page into four rectangular areas, where the upper left area is used to display the content of the growth trend analysis chart, the upper right area is used to display the content of the driving time analysis chart, the lower left area is used to display the content of the mileage distribution chart, and the lower right area is used to display the content of the online vehicle statistics chart. In addition, a refresh button is provided in the upper right corner of each area for loading and refreshing data in that area separately. It should be understood that Figure 2 The page area division result shown is only an optional example. In actual applications, the page can be divided into multiple different areas according to scene requirements, and the data content displayed in the area is not limited to the above-mentioned chart content.

[0038] It should be noted that in HTML, CSS and JavaScript, "elements" usually refer to HTML tags, such as 、 、 <h1>Etc. A page area is usually composed of one or more elements, including these elements and all their child elements. The "root element" is the outermost element in a region, that is, the element that contains all other elements.

[0039] In an example, if a region has the following HTML structure:

[0040] <div id＝"unique-id">

[0041] <h1> Title< / h1>

[0042] Some text...

[0043] <button> Refresh< / button>

[0044]

[0045] So in the above example, This is the root element of this area. <h1>、 and <button>All of them are its child elements. And id="unique-id" is the unique identifier (i.e. root element identifier) ​​added to the root element of this area. Adding a unique id identifier to the root element of each area means that the root element of each area has a unique id, so that the area can be accurately located through this id, so as to request data and render content. Doing so can ensure the correctness of data and the accuracy of operations, and improve page loading efficiency and user experience.

[0046] In some embodiments, a network request library is used to intercept data loading requests, and a loading object is created based on a root element identifier in the data loading request, including: when a client sends a data loading request for each area to a server in a concurrent manner, a request interceptor of the network request library is used to intercept the data loading request, and the root element identifier in the data loading request is read; parameters for creating a loading object are obtained using a preset component library, the style and behavior of the loading object are defined using the attributes of the parameters, and an instance corresponding to the loading object is created based on the parameters, wherein the instance of the loading object has a method for closing the loading object.

[0047] Specifically, the embodiment of the present application will request the page data of each region to the server at the same time by the mode of concurrent request.For the data loading request of each region, the client initiates a request to the back end through the axios network request library, and before the request interceptor of the axios network request library is utilized to intercept the data loading request, the root element identification corresponding to the root element of all regions can be passed into the axios network request library as a parameter.Like this, when one or more regions in the browser page send data loading request to the server at the same time, the data loading request is first intercepted by the request interceptor of the axios network request library, and the axios network request library reads the root element identification in the data loading request, and creates a loading object having a corresponding relationship with the root element identification.

[0048] In practical applications, you can use the Element-Plus component library to create Loading objects (i.e. loading objects). Element-Plus is a desktop component library based on Vue3.0. It contains a wealth of components, making it easy and quick to build user interfaces in Vue. In Element-Plus, Loading is a convenient service that can quickly add a loading effect to any element. The Loading service is provided by the ElLoading.service method, which receives a parameter object whose properties can define various styles and behaviors of Loading.

[0049] In an example, you can use the following code to create a Loading object identified by the root element id:

[0050] const Loading[id]=ElLoading.service({

[0051] spinner:'el-icon-loading',

[0052] background:'rgba(0,0,0,0.3)',

[0053] text:'Loading...'

[0054] });

[0055] In the above code, the properties of the following parameters are used to define the style and behavior of the loading object. For example, the loading icon is defined using the spinner property, the background color of the loading effect is defined using the background property, and the displayed text is defined using the text property. The ElLoading.service method returns a Loading instance, which has a close method that can be used to turn off the loading effect. Therefore, you can use Loading[id].close() to turn off the Loading effect of the corresponding area. In this way, you can create an independent Loading effect for each area, thereby improving the user experience.

[0056] Optionally, you can use the document.getElementById (root element identifier) ​​method to find the corresponding root element, and load the Loading object created using the root element's id into the corresponding root element to make the Loading effect appear in the area, thereby reminding the user that data is being requested without affecting the loading and rendering of other areas.

[0057] Furthermore, after intercepting the data loading request sent by the area of ​​the browser page, using the root element identifier in the data loading request to create a loading object corresponding to the area, the loading object is loaded under the root element corresponding to the area, so that the area presents a loading effect; Figure 3 and Figure 4 As shown, Figure 3 is a schematic diagram showing a loading effect of a region in an exemplary browser page according to an embodiment of the present application, Figure 4 is a schematic diagram showing a loading effect of a region in another exemplary browser page according to an embodiment of the present application;

[0058] Figure 3 Only the upper right area sends a data loading request, so use the Element-Plus component library to create a Loading object for the upper right area, and load the Loading object for the upper right area into the root element of the area, so that the upper right area has a loading effect to remind users that data is being requested. Figure 4 All areas in the data loading request are sent, therefore, the Element-Plus component library is used to create Loading objects for all areas, and the Loading objects are loaded into the root element of the corresponding area, so that all areas have a loading effect to remind users that data is being requested.

[0059] In some embodiments, after loading the loading object into the root element corresponding to the root element identifier, the method also includes: saving the created loading object into the cache of the browser page, and controlling the request interceptor of the network request library to release the intercepted data loading request so as to send the data loading request to the server.

[0060] Specifically, the embodiment of the present application can also save the created Loading object to the cache of the browser page for subsequent use, which can not only avoid repeatedly creating the same Loading object, but also can quickly access these objects when needed.

[0061] In an example, you can use the following code to save a Loading object:

[0062] const cache={}

[0063] function saveCache(key,value){

[0064] cache[key]=value

[0065] }

[0066] saveCache(id,Loading[id])

[0067] In the above code, a JavaScript object cache is used as a cache container, and then a function named saveCache is defined. This function accepts a key and a value, and stores the value in the cache location corresponding to the key. When you need to save a Loading object, just call saveCache(id, Loading[id]), where id is the unique identifier of the region root element (that is, the root element identifier), and Loading[id] is the corresponding Loading object. In this way, you can quickly get the corresponding Loading object through this id when you need it later.

[0068] According to the technical solution provided by the embodiment of the present application, this method associates the Loading state of each area with its corresponding root element, which not only makes the loading and rendering process of each area independent of each other, but also makes it possible to achieve partial refresh of each area. This undoubtedly greatly improves the responsiveness and user experience of the page.

[0069] In some embodiments, a network request library is used to intercept a data response returned by the server for a data loading request, and a corresponding root element is determined based on a root element identifier in the data response, including: after the server receives the data loading request, the server returns a data response generated for the data loading request to the client; the data response is intercepted by a response interceptor of the network request library, wherein the data response includes a root element identifier corresponding to the area that sends the data loading request, and the root element is determined based on the root element identifier.

[0070] Specifically, the embodiment of the present application uses the response interceptor of axios to process the data response of the specific area returned by the service end, and closes the corresponding Loading effect after the page data is returned. Response is intercepted by the response interceptor of axios, for example: in the axios network request library, the response interceptor can be set to pre-process it before the response is processed by then or catch. Here, after utilizing the response interceptor to intercept the data response, the root element identification in the data response is read, and the root element id is obtained, and the corresponding root element can be determined using the root element id, and the region of which root element the response currently returned corresponds to can also be known.

[0071] In some embodiments, obtaining a loading object corresponding to the root element and closing the loading object includes: obtaining the loading object corresponding to the root element identifier from the cache of the browser page based on the root element identifier corresponding to the root element, and calling a method for closing the loading object to close the loading object.

[0072] Specifically, the read root element id is used to obtain the corresponding Loading object from the cache of the browser page, that is, the Loading object identified by the root element id is obtained from the cache. In actual applications, after the area of ​​the browser page sends a data loading request to the server, a Loading object is created based on the root element id in the data loading request and saved in the cache. When the response is returned, the following function loadCache=(key)=>cache[key] can be called, and the root element id can be passed into the function as the key to obtain the corresponding Loading object from the cache.

[0073] Furthermore, after obtaining the loading object corresponding to the root element identifier, the Loading effect of the area can be closed by calling the Loa ding [id]. close () method (i.e., the method of closing the loading object); that is, after obtaining the Loading object, its close method can be called to close the Loading effect of the area, thereby reminding the user that the data in the area has been loaded.

[0074] In some embodiments, after closing the loading object, the method also includes: controlling the response interceptor of the network request library to release the intercepted data response, and passing the data response to the browser page, so that the corresponding area of ​​the browser page loads and renders the page data returned by the server.

[0075] Specifically, after closing the loading object of the area, the response interceptor of axios releases the intercepted data response and returns the page data obtained from the server to the corresponding area of ​​the browser page; optionally, after the server returns the data response to the client, the data response can be received by the then or catch method of axios. At this time, the response can be returned directly to the browser page, or the response data can be processed before returning. After the browser page obtains the page data, the corresponding area is used to load and render the data returned by the server, and the content of the area is presented to the user. When all concurrent requests are executed, the browser page will correctly present all content.

[0076] The embodiment of the present application allows each area to load data independently, and turns off the loading effect of the corresponding area after the data loading is completed, which not only improves the user experience, but also improves the display efficiency of the page, because the user does not need to wait for the data of all areas to be loaded before seeing the results. It should be noted that the embodiment of the present application also supports the user to click the refresh button in the local area, and repeat the content of the above embodiment, so as to refresh only the content of the area without affecting the loading and rendering of other areas.

[0077] According to the technical solution provided by the embodiment of the present application, the method for loading data by region in the embodiment of the present application effectively optimizes the process of data loading and page rendering. By adding the Loading effect to each page area, the user can clearly understand the data loading situation of each area, and the Loading of the entire page cannot be closed because the loading of some data takes too long, thereby improving the user experience. The data loading and rendering of each area are independent and will not affect each other. In this way, when the data of some areas have been loaded, the user can start to view and use these areas without waiting for all data to be loaded, thereby reducing the waiting time. The data request, loading and rendering of each area are independent and can be performed concurrently, which greatly improves the efficiency of data loading and page rendering. It supports regional partial refresh, and each area has its own refresh button. The user can refresh the data of a certain area on demand without reloading the entire page, thereby reducing the resource consumption of data request and rendering, and also improving the user experience. By saving the Loading object of each area in the cache of the browser page, the same Loading object can be avoided from being repeatedly created, thereby improving efficiency. At the same time, after the data request is completed, the corresponding Loading object can be quickly found from the cache and closed by the unique id of the root element, thereby realizing efficient regional loading Loading.

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

[0079] Figure 5 Schematic diagram of the structure of the device for loading data by region on a page provided in an embodiment of the present application. Figure 5 As shown, the page loads data by region including:

[0080] The division module 501 is configured to divide the page into multiple regions, add a corresponding root element identifier to the root element corresponding to each region, and pass the root element identifier to the network request library;

[0081] The creation module 502 is configured to intercept the data loading request by using the network request library, and create a loading object according to the root element identifier in the data loading request;

[0082] The loading module 503 is configured to load the loading object into the root element corresponding to the root element identifier, so that the area corresponding to the root element presents the loading effect;

[0083] The determination module 504 is configured to intercept the data response returned by the server in response to the data loading request by using the network request library, and determine the corresponding root element according to the root element identifier in the data response;

[0084] The closing module 505 is configured to obtain the loading object corresponding to the root element, close the loading object to control the area closing loading effect, and load the page data returned by the server into the corresponding area.

[0085] In some embodiments, Figure 5 The division module 501 determines the browser page of the client, divides the browser page into multiple areas according to preset logic and functions, and adds a unique root element identifier to the root element of each area; wherein each area is used to independently load and render data, and a refresh button is provided in each area, and the refresh button is used to load and refresh data for each area separately.

[0086] In some embodiments, Figure 5 The creation module 502, when the client sends a data loading request for each area to the server in a concurrent manner, intercepts the data loading request using the request interceptor of the network request library, and reads the root element identifier in the data loading request; obtains the parameters for creating the loading object using the preset component library, defines the style and behavior of the loading object using the attributes of the parameters, and creates an instance corresponding to the loading object based on the parameters, wherein the instance of the loading object has a method for closing the loading object.

[0087] In some embodiments, Figure 5 After loading the loading object into the root element corresponding to the root element identifier, the saving module 506 saves the created loading object into the cache of the browser page, and controls the request interceptor of the network request library to release the intercepted data loading request so as to send the data loading request to the server.

[0088] In some embodiments, Figure 5 Determination module 504: After the server receives the data loading request, the server returns the data response generated for the data loading request to the client; the response interceptor of the network request library is used to intercept the data response, wherein the data response includes the root element identifier corresponding to the area sending the data loading request, and the root element is determined based on the root element identifier.

[0089] In some embodiments, Figure 5 The closing module 505 obtains the loading object corresponding to the root element identifier from the cache of the browser page according to the root element identifier corresponding to the root element, and calls the method of closing the loading object to close the loading object.

[0090] In some embodiments, Figure 5 After closing the loading object, the closing module 505 controls the response interceptor of the network request library to release the intercepted data response and pass the data response to the browser page, so that the corresponding area of ​​the browser page loads and renders the page data returned by the server.

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

[0092] Figure 6 Schematic diagram of the structure of the electronic device 6 provided in the embodiment of the present application. Figure 6 As shown, the electronic device 6 of this embodiment includes: a processor 601, a memory 602, and a computer program 603 stored in the memory 602 and executable on the processor 601. When the processor 601 executes the computer program 603, the steps in the above-mentioned various method embodiments are implemented. Alternatively, when the processor 601 executes the computer program 603, the functions of each module / unit in the above-mentioned various device embodiments are implemented.

[0093] Exemplarily, the computer program 603 may be divided into one or more modules / units, which are stored in the memory 602 and executed by the processor 601 to complete the present application. The one or more modules / units may be a series of computer program instruction segments capable of completing specific functions, which are used to describe the execution process of the computer program 603 in the electronic device 6.

[0094] The electronic device 6 may be a desktop computer, a notebook, a PDA, a cloud server, or other electronic device. The electronic device 6 may include, but is not limited to, a processor 601 and a memory 602. Those skilled in the art will appreciate that Figure 6 It is only an example of the electronic device 6 and does not constitute a limitation of the electronic device 6. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the electronic device may also include input and output devices, network access devices, buses, etc.

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

[0096] The memory 602 may be an internal storage unit of the electronic device 6, for example, a hard disk or memory of the electronic device 6. The memory 602 may also be an external storage device of the electronic device 6, for example, a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device 6. Further, the memory 602 may also include both an internal storage unit of the electronic device 6 and an external storage device. The memory 602 is used to store computer programs and other programs and data required by the electronic device. The memory 602 may also be used to temporarily store data that has been output or is to be output.

[0097] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0098] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0099] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0100] In the embodiments provided in the present application, it should be understood that the disclosed devices / computer equipment and methods can be implemented in other ways. For example, the device / computer equipment embodiments described above are only schematic. For example, the division of modules or units is only a logical function division. There may be other division methods in actual implementation. Multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0101] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0103] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. The computer program may include computer program code, and the computer program code may be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium. It should be noted that the content contained in the computer-readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, the computer-readable medium does not include electric carrier signals and telecommunication signals.

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

Claims

1. A method for loading data by region on a page, characterized in that: include: Divide the page into multiple areas, add a corresponding root element identifier to the root element corresponding to each area, and pass the root element identifier to the network request library; Using the network request library to intercept the data loading request, and creating a loading object according to the root element identifier in the data loading request; Loading the loading object into the root element corresponding to the root element identifier so that the area corresponding to the root element presents a loading effect; Using the network request library to intercept the data response returned by the server in response to the data loading request, and determining the corresponding root element according to the root element identifier in the data response; Obtain the loading object corresponding to the root element, close the loading object to control the area to close the loading effect, and load the page data returned by the server into the corresponding area; The step of dividing the page into a plurality of regions and adding a corresponding root element identifier to the root element corresponding to each region includes: Determine the browser page of the client, divide the browser page into a plurality of regions according to preset logic and function, and add a unique root element identifier to the root element of each region; Each of the regions is used to independently load and render data, and a refresh button is provided in each of the regions, and the refresh button is used to load and refresh data for each of the regions individually; The method of intercepting the data loading request by using the network request library and creating a loading object according to the root element identifier in the data loading request includes: When the client sends a data loading request for each of the regions to the server in a concurrent manner, the data loading request is intercepted by the request interceptor of the network request library, and the root element identifier in the data loading request is read; Parameters for creating the loading object are obtained using a preset component library, the style and behavior of the loading object are defined using the attributes of the parameters, and an instance corresponding to the loading object is created according to the parameters, wherein the instance of the loading object has a method for closing the loading object.

2. The method according to claim 1, characterized in that After loading the load object into the root element corresponding to the root element identifier, the method further includes: The created loading object is saved in the cache of the browser page, and the request interceptor of the network request library is controlled to release the intercepted data loading request so as to send the data loading request to the server.

3. The method according to claim 1, characterized in that The method of using the network request library to intercept a data response returned by the server in response to the data loading request, and determining a corresponding root element according to a root element identifier in the data response, includes: After the server receives the data loading request, the server returns a data response generated for the data loading request to the client; The data response is intercepted by using the response interceptor of the network request library, wherein the data response includes a root element identifier corresponding to the area sending the data loading request, and the root element is determined according to the root element identifier.

4. The method according to claim 2, characterized in that: The obtaining the loading object corresponding to the root element and closing the loading object includes: According to the root element identifier corresponding to the root element, a loading object corresponding to the root element identifier is obtained from the cache of the browser page, and a method for closing the loading object is called to close the loading object.

5. The method according to claim 4, characterized in that After closing the loading object, the method further includes: The response interceptor controlling the network request library releases the intercepted data response and passes the data response to the browser page, so that the corresponding area of ​​the browser page loads and renders the page data returned by the server.

6. A device for loading data by region on a page, characterized in that: include: A division module is configured to divide the page into a plurality of regions, add a corresponding root element identifier to a root element corresponding to each region, and pass the root element identifier to the network request library; A creation module, configured to intercept a data loading request using the network request library, and create a loading object according to a root element identifier in the data loading request; A loading module, configured to load the loading object into a root element corresponding to the root element identifier, so that an area corresponding to the root element presents a loading effect; A determination module is configured to intercept a data response returned by the server to the data loading request using the network request library, and determine a corresponding root element according to a root element identifier in the data response; A closing module is configured to obtain a loading object corresponding to the root element, close the loading object to control the closing loading effect of the area, and load the page data returned by the server into the corresponding area; The partitioning module is used to determine the browser page of the client, divide the browser page into a plurality of regions according to preset logic and function, and add a unique root element identifier to the root element of each region; each region is used to load and render data independently, and a refresh button is provided in each region, and the refresh button is used to load and refresh data for each region separately; The creation module is used to intercept the data loading request using the request interceptor of the network request library and read the root element identifier in the data loading request when the client sends a data loading request for each area to the server in a concurrent manner; use a preset component library to obtain parameters for creating the loading object, use the attributes of the parameters to define the style and behavior of the loading object, and create an instance corresponding to the loading object based on the parameters, wherein the instance of the loading object has a method for closing the loading object.

7. An electronic device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 5 when executing the program.

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

Images