Page rendering method and device, equipment and storage medium

Abstract

The embodiment of the present disclosure provides a page rendering method, device and equipment and a storage medium. A scrolling operation triggered by a user on a current page is monitored, and a visible area is determined based on the monitored scrolling operation; wherein the scrolling operation includes horizontal scrolling or vertical scrolling; a plurality of target service data corresponding to the visible area is obtained; wherein the plurality of target service data has a topological structure relationship; position information of the plurality of target service data in the visible area is determined according to the topological structure relationship; and the plurality of target service data is rendered to the current page for display based on the position information. The page rendering method provided in the embodiment renders the plurality of target service data corresponding to the visible area to the page based on the topological structure relationship, so that the displayed service data presents a hierarchical style, and the diversity of service data display and the convenience of data maintenance are improved.

Description

TECHNICAL FIELD

[0001] Embodiments of the present disclosure relate to the technical field of page rendering, and particularly relate to a page rendering method and device, equipment and a storage medium. BACKGROUND

[0002] Currently, when data is displayed in a page, various different structures can be used for display, such as table structure, Gantt chart structure and tree structure. Among them, the tree structure is widely used for view display because it can be arbitrarily folded and unfolded and can accommodate more information in limited space.

[0003] The existing tree view function is relatively simple in display and interaction, and cannot meet the needs of complex business data. SUMMARY

[0004] Embodiments of the present disclosure provide a page rendering method, device, equipment and storage medium, which renders business data according to a topological structure relationship to a page, so that the displayed business data presents a hierarchical style, improving the diversity of business data display and the convenience of data maintenance.

[0005] In a first aspect, embodiments of the present disclosure provide a page rendering method, comprising:

[0006] monitoring a scroll operation triggered by a user in a current page, and determining a visible area based on the monitored scroll operation; wherein the scroll operation includes horizontal scrolling or vertical scrolling;

[0007] obtaining a plurality of target business data corresponding to the visible area; wherein the plurality of target business data has a topological structure relationship;

[0008] determining position information of the plurality of business data in the visible area according to the topological structure relationship;

[0009] rendering the plurality of business data to the current page for display based on the position information.

[0010] In a second aspect, embodiments of the present disclosure also provide a page rendering device, comprising:

[0011] a visible area determination module configured to monitor a scroll operation triggered by a user in a current page, and determine a visible area based on the monitored scroll operation; wherein the scroll operation includes horizontal scrolling or vertical scrolling;

[0012] a target business data acquisition module configured to obtain a plurality of target business data corresponding to the visible area; wherein the plurality of target business data has a topological structure relationship;

[0013] determine position information of the plurality of pieces of service data in the visible area according to the topological structure relationship;

[0014] render the plurality of pieces of service data to the current page for display based on the position information.

[0015] In a third aspect, the embodiments of the present disclosure further provide an electronic device, which comprises:

[0016] one or more processors;

[0017] a storage device configured to store one or more programs,

[0018] When the one or more programs are executed by the one or more processors, the one or more processors implement the page rendering method according to the embodiments of the present disclosure.

[0019] In a fourth aspect, the embodiments of the present disclosure further provide a storage medium containing computer executable instructions, which, when executed by a computer processor, are used to perform the page rendering method according to the embodiments of the present disclosure.

[0020] The embodiments of the present disclosure disclose a page rendering method, device, equipment and storage medium. A scrolling operation triggered by a user on a current page is monitored, and a visible area is determined based on the monitored scrolling operation. The scrolling operation includes horizontal scrolling or vertical scrolling. A plurality of pieces of target service data corresponding to the visible area are obtained. The plurality of pieces of target service data have a topological structure relationship. Position information of the plurality of pieces of service data in the visible area is determined according to the topological structure relationship. The plurality of pieces of service data are rendered to the current page for display based on the position information. The page rendering method provided in the embodiments renders the plurality of pieces of target service data corresponding to the visible area to the page based on the topological structure relationship, so that the displayed service data presents a hierarchical style, and the diversity of service data display and the convenience of data maintenance are improved. BRIEF DESCRIPTION OF DRAWINGS

[0021] The above and other features, advantages, and aspects of the embodiments of the present disclosure will become more apparent as various embodiments of the present disclosure are disclosed in detail with reference to the drawings and detailed description. Identical or similar reference numerals in the drawings denote identical or similar elements. It should be understood that the drawings are schematic, and the original and elements are not necessarily drawn according to the scale.

[0022] Figure 1a is a flowchart of a page rendering method provided by the embodiments of the present disclosure;

[0023] Figure 1b is a signaling diagram for obtaining target service data in the embodiments;

[0024] Figure 2a is a topology diagram of target service data provided by an embodiment of the present disclosure;

[0025] Figure 2b is a topology diagram of target service data provided by an embodiment of the present disclosure;

[0026] Figure 2c is an effect diagram rendered out of target service data provided by an embodiment of the present disclosure;

[0027] Figure 3a is a schematic diagram of a system service data topology diagram provided by an embodiment of the present disclosure;

[0028] Figure 3b is a schematic diagram of a configuration page provided by an embodiment of the present disclosure;

[0029] Figure 3c is a structural schematic diagram of an initial service data topology diagram provided by an embodiment of the present disclosure;

[0030] Figure 4a is a schematic diagram of a system service data topology diagram and an initial service data topology diagram provided by an embodiment of the present disclosure;

[0031] Figure 4b is a schematic diagram of a service data topology sub-diagram provided by an embodiment of the present disclosure;

[0032] Figure 4c is a filtered service data topology sub-diagram provided by an embodiment of the present disclosure;

[0033] Figure 4d is a schematic diagram of a second candidate service data topology sub-diagram provided by an embodiment of the present disclosure;

[0034] Figure 4e is a schematic diagram of a target service data topology diagram provided by an embodiment of the present disclosure;

[0035] Figure 5 is a structural schematic diagram of a page rendering apparatus provided by an embodiment of the present disclosure;

[0036] Figure 6 is a structural schematic diagram of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0037] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is understood that the present disclosure can be embodied in various forms and should not be interpreted as being limited to the embodiments set forth herein; rather, these embodiments are provided so as to more completely and thoroughly understand the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for illustrative purposes and are not intended to limit the scope of protection of the present disclosure.

[0038] It should be understood that each of the steps recited in the method embodiments of the present disclosure can be performed in different orders and / or in parallel. In addition, the method embodiments can include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0039] The term "comprising" and variations thereof as used herein are open-ended, that is "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Related terms are defined in the following description.

[0040] It should be noted that the terms "first", "second", and the like in the present disclosure are only used to distinguish different devices, modules or units, and are not intended to limit the order or interdependence of the functions performed by these devices, modules or units.

[0041] It should be noted that the terms "one", "multiple" in the present disclosure are illustrative and not limiting, and those skilled in the art should understand that unless otherwise explicitly stated in the context, it should be understood as "one or more".

[0042] The names of the messages or information exchanged between the devices in the embodiments of the present disclosure are only for illustrative purposes, and are not intended to limit the scope of the messages or information.

[0043] It can be understood that before using the technical solutions disclosed in the embodiments of the present disclosure, the type, scope of use, use scenario, etc. of the personal information involved in the present disclosure should be informed to the user and the authorization of the user should be obtained in accordance with relevant laws and regulations.

[0044] For example, when responding to the active request of the user, a prompt message is sent to the user to explicitly prompt the user that the operation requested to be performed will require the acquisition and use of the personal information of the user. Thus, the user can voluntarily choose whether to provide personal information to the software or hardware, such as electronic devices, application programs, servers or storage media, etc. that perform the operation of the technical solutions of the present disclosure according to the prompt message.

[0045] As an optional but non-limiting implementation manner, in response to receiving the active request of the user, the manner of sending the prompt information to the user may be, for example, a pop-up window manner, in which the prompt information may be presented in a text manner. In addition, the pop-up window may also carry a selection control for the user to select "agree" or "disagree" to provide the personal information to the electronic device.

[0046] It can be understood that the above notification and user authorization obtaining process is only illustrative and does not limit the implementation manners of the present disclosure, and other manners meeting the relevant laws and regulations can also be applied to the implementation manners of the present disclosure.

[0047] It can be understood that the data (including but not limited to the data itself, the acquisition or use of the data) involved in the technical solution should comply with the requirements of the relevant laws and regulations and the relevant provisions.

[0048] Figure 1a A flowchart of a page rendering method provided by the embodiment of the present disclosure is shown. The embodiment of the present disclosure is applicable to the case of rendering a page. The method can be executed by a page rendering device. The device can be implemented in the form of software and / or hardware. Optionally, the device can be implemented by an electronic device, which can be a mobile terminal, a PC terminal, or a server.

[0049] As shown in Figure 1a , the method comprises:

[0050] S110, monitoring a scroll operation triggered by a user on a current page, and determining a visible area based on the monitored scroll operation.

[0051] In this embodiment, a scroll control can be used to monitor the scroll operation triggered by the user on the current page. For example, the scroll control can be a view scroll control (ScrollView), which has a scroll bar and supports hiding the scroll bar. The principle of monitoring the scroll operation triggered by the user on the current page can be understood as detecting the position to which the scroll bar moves.

[0052] The visual area can be understood as a display area of the current page, and the process of determining the visual area can be understood as a process of determining boundary coordinate information of the visual area. Specifically, the process of determining the visual area based on the monitored scroll operation can be: if the scroll operation is vertical scrolling, obtaining a vertical coordinate of a current position of the scroll bar, determining vertical coordinates of upper and lower boundaries of the visual area based on the vertical coordinate of the current position of the scroll bar, and obtaining a position of the visual area; if the scroll operation is horizontal scrolling, obtaining a horizontal coordinate of a current position of the scroll bar, determining horizontal coordinates of left and right boundaries of the visual area based on the horizontal coordinate of the current position of the scroll bar, and obtaining a position of the visual area. In the embodiment, the principle of monitoring the scroll operation triggered by the user on the current page can refer to the working principle of the existing ScrollView control, which is not limited here.

[0053] S120, obtaining a plurality of target business data corresponding to the visual area.

[0054] The plurality of target business data have a topological structure relationship. The topological structure relationship can be a tree structure relationship, which can be understood as a hierarchical nested structure. In this embodiment, the technology is explained by taking the tree structure as an example. After obtaining the topological structure relationship between the target business data, the hierarchical information of each target business data and the target business data of the upper level and the lower level associated therewith can be obtained, i.e., the hierarchical information of each target business data and its parent node and child node.

[0055] The target business data can include target identity information (Identity document, ID) and target attribute information. In this embodiment, the process of obtaining the plurality of target business data corresponding to the visual area can be understood as a process of loading the plurality of target business data corresponding to the visual area. In this embodiment, the target identity information and the target attribute information are loaded twice, i.e., the target identity information is loaded first, and the target attribute information is loaded later.

[0056] Optionally, before monitoring the scroll operation triggered by the user on the current page, the method further includes the following step: loading identity information of full business data of the current page.

[0057] The full business data can be understood as all business data that can be displayed on the current page. In this embodiment, when the user opens the current page for the first time, the view component will first send a page request to the data source, the data source will return the identity information of the full business data of the page to the view component according to the page request, and cache the identity information of the full business data. In this embodiment, since the identity information occupies a very small memory space, the request for the identity information of the full business data will not affect the memory.

[0058] Correspondingly, the process of acquiring the multiple pieces of service data corresponding to the visible area can be: acquiring, from the identification information, multiple pieces of target identification information corresponding to the visible area based on the set mapping relationship; and loading multiple pieces of target attribute information based on the multiple pieces of target identification information.

[0059] In this embodiment, since the visible area is represented by the boundary coordinate information, when the boundary coordinate information of the visible area is acquired, it can be known which service data is covered by the visible area. For example, one visible area covers the 100th to 200th service data, and another visible area covers the 150th to 250th service data.

[0060] Exemplarily, Figure 1b is a signaling diagram for acquiring target service data in this embodiment, as shown in Figure 1b The flow includes the following steps:

[0061] 1) The view configuration component acquires a view ID and generates a configuration request according to the view ID;

[0062] 2) The view configuration request is sent to the server;

[0063] 3) The server returns view configuration information according to the view configuration request;

[0064] 4) The view configuration component sends the generated search parameter to the data flow component;

[0065] 5) The data flow component sends a search request to the server according to the search parameter;

[0066] 6) The server returns the full-amount service data ID (also referred to as page skeleton information) of the view to the data flow component according to the search request;

[0067] 7) The data flow component sends the full-amount service data ID to the interface layer for rendering;

[0068] 8) The interface layer sends the target ID corresponding to the current visible area to the data flow component;

[0069] 9) The data flow component sends a data request to the server based on the target ID;

[0070] 10) The server returns the attribute information corresponding to the target ID (referred to as instance information in the figure) according to the data request;

[0071] 11) The attribute information corresponding to the target ID is sent to the interface layer for rendering.

[0072] Specifically, after the visible region is determined, the view component can obtain a plurality of target identification information from the identification information of the cached full-amount business data according to the visible region, and send the plurality of target identification information to the data source, and the data source returns a plurality of target attribute information corresponding to the plurality of target identification information to the view component. In this embodiment, only the target attribute information required by the visible region needs to be loaded, lazy loading of the target attribute information is achieved, that is, only the currently required data is loaded, memory resources are saved, and loading of useless resources is reduced.

[0073] Optionally, after the plurality of target attribute information is loaded according to the plurality of target identification information, the method further includes the following steps: determining a predicted visible region; and loading predicted attribute information corresponding to the predicted visible region.

[0074] The predicted visible region can be understood as a visible region that can be predicted to be scrolled to based on a scrolling trend predicted by a user-triggered scrolling operation. The predicted visible region can be determined by: first obtaining a direction and a speed of a scrolling operation triggered by a current user, and then inputting the direction and the speed of the scrolling operation into a preset prediction algorithm to obtain the predicted visible region. The process of loading the predicted attribute information corresponding to the predicted visible region can be: first obtaining a plurality of predicted identification information from the identification information of the cached full-amount business data according to the predicted visible region, sending the plurality of predicted identification information to the data source by the view component, returning a plurality of predicted attribute information corresponding to the plurality of predicted identification information to the view component by the data source, and caching the plurality of predicted attribute information.

[0075] In this embodiment, the visible region is predicted, the preloading of the attribute information is achieved, and when the actual visible region and the predicted visible region overlap or partially overlap, the part of the business data that has been loaded can be directly used, so that the waiting time for loading data is reduced and the user experience is improved.

[0076] S130, determining position information of the plurality of target business data in the visible region according to the topological structure relationship.

[0077] The topological structure relationship records the hierarchical information of each target business data and the association relationship between the target business data. In this embodiment, the plurality of business data needs to be displayed in the form of a list in the current interface. The form of the list can be understood as: one target business data occupies one row or one column, and the target identification information and the target attribute information are displayed in the corresponding column or row in a certain order. In this embodiment, the target identification information can be placed at the first position. In order to make the displayed target business data match the topological structure relationship, different hierarchical information corresponds to different indentation information, and the indentation information and the hierarchical information present an inverse proportional relationship, that is, the higher the level, the smaller the indentation information, and the smaller the level, the larger the indentation information. In this embodiment, the root node is in the highest level.

[0078] Specifically, the manner of determining the position information of the plurality of target service data in the visual area according to the topological structure relationship can be: determining the hierarchical information of each target service data according to the topological structure relationship; and determining the position information of the cell where the target service data is located according to the hierarchical information.

[0079] The cell is a row cell or a column cell, and the position information of the cell can be understood as the position information of the left top vertex of the cell. In this embodiment, a List View control can be used to render the target service data. Each row of cells in the List View is used to display a target service data, and each row of cells is divided into left and right parts. The left part is a header, and the right part is a body.

[0080] If the cell is a row cell, the position information of the cell includes longitudinal position information and horizontal indentation information. If the cell is a column cell, the position information of the cell includes horizontal position information and longitudinal indentation information.

[0081] Specifically, if the cell is a row cell, the row height of the row cell needs to be configured. The process of determining the position information of the cell where the target service data is located according to the hierarchical information can be: first, determining the order of the target service data in the topological structure according to the hierarchical information; then, determining the longitudinal coordinate of the corresponding cell of the target service data according to the order and the row height; then, determining the horizontal indentation information of the cell according to the hierarchical information; then, determining the horizontal coordinate based on the horizontal indentation information; and finally, determining the position information of the cell based on the horizontal coordinate and the longitudinal coordinate. In this embodiment, the horizontal indentation information of the cells where the target service data in the same hierarchical level is located is the same.

[0082] Specifically, if the cell is a column cell, the column width of the column cell needs to be configured. The process of determining the position information of the cell where the target service data is located according to the hierarchical information can be: first, determining the order of the target service data in the topological structure according to the hierarchical information; then, determining the horizontal coordinate of the corresponding cell of the target service data according to the order and the column height; then, determining the longitudinal indentation information of the cell according to the hierarchical information; then, determining the longitudinal coordinate based on the longitudinal indentation information; and finally, determining the position information of the cell based on the horizontal coordinate and the longitudinal coordinate. In this embodiment, the longitudinal indentation information of the cells where the target service data in the same hierarchical level is located is the same.

[0083] In this embodiment, taking a row cell as an example, assuming the row height is set to h and the sequence number (starting from 0) is represented by n, then for each target business data, the vertical coordinate of its corresponding cell determined by the sorting and row height can be expressed as: y = h * n. Assuming the indentation coefficient is β and the hierarchy information is represented by m, the horizontal coordinate determined by the horizontal indentation information can be expressed as: x = (m-1) * β. For example, assuming the determined target business data includes A1, B1, C1, D1, E1, A2, B2, C2, D2, and E23. Figure 2a and Figure 2b A topology diagram of the target business data, such as Figure 2a As shown, A1 is the root node, B1 and C1 are child nodes of A1, and D1 and E1 are child nodes of B1. Figure 2b As shown, A2 is the root node, B2 and C2 are child nodes of A2, and D2 and E2 are child nodes of B2. A1 and A2 are at the first level, B1, B2, C1, and C2 are at the second level, and D1, E2, D2, and E2 are at the third level. The target business data is sorted as A1-B1-C1-D1-E1-A2-B2-C2-D2-E2. For example, for E1, its sorting number is 4, and it is at the third level. Therefore, the vertical coordinate of its cell is y = 4h, and the horizontal coordinate is x = (3-1)*β. Figure 2c The rendered image of the target business data, such as Figure 2c As shown, A1 and A2 have the same indentation size, B1, B2, C1 and C2 have the same indentation size, and D1, E2, D2 and E2 have the same indentation size. In this embodiment, the location information of the cell containing the target business data is determined based on the hierarchical information, so that the displayed target instance data matches the topology structure. This not only improves the diversity of data display but also provides a user-friendly data interface diagram with low editing costs.

[0084] S140: Render multiple target business data items to the current page for display based on location information.

[0085] Specifically, after obtaining the location information of the cell where each target business data is located, the target business data is rendered into the corresponding cell based on the location information.

[0086] In this embodiment, since target identification information is loaded before target attribute information, the target identification information can be rendered first, followed by the target attribute information. This embodiment supports the simultaneous display of massive amounts of data.

[0087] In this embodiment, the target business data can be rendered using the canvas rendering mode.

[0088] The technical scheme of the embodiment of the present disclosure monitors a scroll operation triggered by a user on a current page, determines a visible area based on the monitored scroll operation, wherein the scroll operation comprises horizontal scroll or vertical scroll; acquires a plurality of pieces of target business data corresponding to the visible area, wherein the plurality of pieces of target business data have a topological structure relationship; determines position information of the plurality of pieces of business data in the visible area according to the topological structure relationship; and renders the plurality of pieces of business data to the current page for display based on the position information. The page rendering method provided in the embodiment renders the plurality of pieces of target business data corresponding to the visible area to the page based on the topological structure relationship, so that the displayed business data presents a hierarchical style, supports one-time display of massive data, and improves the diversity of business data display and the convenience of data maintenance.

[0089] Optionally, before monitoring the scroll operation of the user on the current page, the method further comprises the following steps: receiving an initial business data topological graph configured by the user; and fusing the initial business data topological graph and a system business data topological graph to obtain a target business data topological graph.

[0090] The initial business data topological graph can be a topological graph obtained by the user selecting at least one piece of business data from system business data and configuring a hierarchical relationship of the selected at least one piece of business data based on a business requirement. The system business data can be business data pre-set for a current business, and the system business data can be called by the user.

[0091] In the embodiment, the initial business data topological graph configured by the user can not match the logic between the system business data, and therefore, the initial business data topological graph and the system business data topological graph need to be fused to obtain a final business data topological graph, i.e., a target business data topological graph. In the embodiment, the initial business data topological graph and the system business data topological graph are fused to ensure the accuracy of the configured business data topological graph.

[0092] Specifically, the process of receiving the initial business data topological graph configured by the user can be: displaying the system business data topological graph in a resource panel; dragging at least one piece of business data selected by the user from the resource panel to a configuration panel based on a drag operation of the user; receiving a hierarchical relationship of the at least one piece of business data configured by the user in the configuration panel; and generating the initial business data topological graph based on the hierarchical relationship.

[0093] The resource panel and the configuration panel are in the same page, which can be referred to as a configuration page. The resource panel and the configuration panel are in different areas. The resource panel is used to display system business data. The configuration panel is used to receive a configuration operation of a user to generate an initial business data topology diagram. The system business data topology diagram is displayed in the form of a list in the resource panel. That is, there is a hierarchical relationship between the system business data. The system business data is displayed in the form of a list in the resource panel according to the order of the hierarchical relationship. In this embodiment, the attribute information of each system business data is also displayed in the resource list for the user to select and configure.

[0094] The process of displaying the system business data topology diagram in the resource panel can be rendering the system business data topology diagram to the resource panel. In this embodiment, the resource panel can be rendered in a page (dom) rendering mode, and the configuration panel is rendered in a canvas mode.

[0095] The principle of dragging the business data from the resource panel to the configuration panel can be that a canvas component in the configuration panel listens to a drag start event, a drag over event and a drop event in the resource panel, and then distributes the listened events to the subcomponents in the canvas.

[0096] Optionally, the process of receiving the hierarchical relationship configured by the user for the at least one business data in the configuration panel can be receiving a moving operation of the user for the at least one business data in the configuration panel, and configuring the hierarchical relationship based on the moving operation.

[0097] The moving operation can be understood as a drag operation in the configuration panel, which can be realized by simulating a mouse down event, a mouse move event and a mouse up event. In this embodiment, the user can move the selected business data at will to configure the hierarchical relationship. In this embodiment, the user can configure the business data topology diagram according to the business requirements in the configuration page, and can adjust the hierarchy of the business data at will to improve the flexibility of the configuration.

[0098] An exemplary system business data topology diagram is shown in FIG. 1. Figure 3a An exemplary system business data topology diagram is shown in FIG. 1. Figure 3a As shown in FIG. 1, A is a root node, B and C are child nodes of A, D and E are child nodes of B, and F is a child node of C. Figure 3b An exemplary configuration page is shown in FIG. 2. Figure 3b As shown in FIG. 2, the left area is a resource panel, which contains system business data displayed in the form of a list. In the configuration panel, a configuration operation triggered by the user can be received. Figure 3bAs shown in the resource panel, the attribute information of each system business data can also be displayed, "A" includes attribute a1, attribute a2 and attribute a3; "B" includes attribute b1 and attribute B2, and the attribute information of "C", "D", "E" and "F" is not displayed. In this embodiment, an expansion / collapsing button is arranged on each system business data in the resource panel, and the user can expand or collapse the attribute information of the system business data by clicking the expansion / collapsing button. For example, Figure 3b As shown in the configuration panel, the business data selected by the user includes two "A", one "B" and one "C", one of the "A" is located at the first level, the other "A" is located at the third level, "B" is located at the second level, and "C" is located at the third level. Figure 3c FIG. 6 is a structural schematic diagram of an initial business data topology graph in this embodiment. As shown in FIG. 6, Figure 3c The topology graph is based on Figure 3b the configuration of the user, as shown in FIG. 7, one of the "A" is the root node, "B" is the child node of "A", and the other "A" and "C" are both child nodes of "B". Figure 3c

[0099] Specifically, the process of fusing the initial business data topology graph and the system business data topology graph to obtain the target business data topology graph can be: extracting a plurality of business data topology subgraphs in the system business data topology graph that meet a set condition; filtering the plurality of business data topology subgraphs to obtain a first candidate business data topology subgraph; merging the first candidate business data topology subgraph to obtain a second candidate business data topology subgraph; and cutting the second candidate business data topology subgraph based on the initial business data topology graph to obtain the target business data topology graph.

[0100] The set condition is that the root node of the business data topology subgraph is the same as the root node of the initial business data topology graph, that is, the business data corresponding to the root node of the business data topology subgraph is the same as the business data corresponding to the root node of the initial business data topology graph. In this embodiment, in the business data topology graph, the same business data can be in different levels, so at least one business data topology subgraph that meets the set condition can be extracted. For example, Figure 4a FIG. 8 is a schematic diagram of the system business data topology graph and the initial business data topology graph in this embodiment. As shown in FIG. 8, Figure 4a The root node of the initial business data topology graph is A, so the business data topology subgraph with the root node A is extracted from the system business data topology graph. Figure 4b FIG. 9 is a schematic diagram of a business data topology subgraph. As shown in FIG. 9, three business data topology subgraphs are extracted, and the root node of each of the three business data topology subgraphs is A. Figure 4b

[0101] ​​Specifically, the manner of filtering the plurality of service data topology subgraphs to obtain the first candidate service data topology subgraph can be: filtering out the service data topology subgraph that does not contain the initial service data topology graph.

[0102] The initial service data topology graph can be understood as the complete topology structure of the initial service data topology graph. Figure 4a and Figure 4b As shown in FIG. 1, the rightmost service data topology subgraph does not contain the initial service data topology graph, and thus the service data topology subgraph is deleted. Figure 4b As shown in FIG. 1, the rightmost service data topology subgraph does not contain the initial service data topology graph, and thus the service data topology subgraph is deleted. Figure 4c As shown in FIG. 1, the rightmost service data topology subgraph does not contain the initial service data topology graph, and thus the service data topology subgraph is deleted. Figure 4c As shown in FIG. 1, the rightmost service data topology subgraph does not contain the initial service data topology graph, and thus the service data topology subgraph is deleted.

[0103] Specifically, the manner of merging the first candidate service data topology subgraph to obtain the second candidate service data topology subgraph can be: performing de-duplication and merging of the first candidate service data topology subgraph from the root node to obtain the second candidate service data topology subgraph.

[0104] The de-duplication and merging from the root node can be understood as: performing de-duplication and merging of the service data at the same level to merge the first candidate service data topology subgraph into one second candidate service data topology subgraph. For example, for the two first candidate service data topology subgraphs of Figure 4c , the de-duplication and merging from the root node is performed, the first level of both is A, and thus A is de-duplicated; the second level has C and D, and thus C and D are de-duplicated, and finally the second level has B, C, D, and F; the right first candidate service data topology subgraph does not have the third level and the fourth level, and thus the third level and the fourth level of the left first candidate service data topology subgraph are directly retained, thereby obtaining the second candidate service data topology subgraph of Figure 4d .

[0105] Specifically, the manner of pruning the second candidate service data topology subgraph based on the initial service data topology graph to obtain the target service data topology graph can be: obtaining the corresponding nodes of the initial service data topology graph and the second candidate service data topology subgraph; and pruning the N-level child nodes of the corresponding nodes of the second candidate service data topology subgraph.

[0106] N is a positive integer greater than 1. The pruning of the N-level child nodes of the corresponding nodes of the second candidate service data topology subgraph can be understood as: only retaining the first-level child nodes of the corresponding nodes. For example, for the second candidate service data topology subgraph of Figure 4dThe second candidate business data topology subgraph in the second candidate business data topology subgraph whose root node A corresponds to the root node A in the initial business data topology graph, so only the first level child nodes of the root node A are retained, and for C and D in the second level in the second candidate business data topology subgraph, C and D in the second level in the initial business data topology graph are corresponded, so only the first level child nodes of C and D in the second level are retained, and finally the target business data topology graph shown in FIG. 6 is obtained. Figure 4e The target business data topology graph shown in FIG. 6.

[0107] In this embodiment, the initial business data topology graph and the system business data topology graph are fused, so that the accuracy of the generated target business data topology graph can be improved.

[0108] Figure 5 A structure diagram of a page rendering device provided by an embodiment of the present disclosure is shown in FIG. 5. Figure 5 As shown in FIG. 5, the device includes:

[0109] The visual area determination module 510 is configured to monitor a scroll operation triggered by a user on a current page, and determine a visual area based on the monitored scroll operation. The scroll operation includes horizontal scrolling or vertical scrolling.

[0110] The target business data acquisition module 520 is configured to acquire a plurality of pieces of target business data corresponding to the visual area. The plurality of pieces of target business data have a topological structure relationship.

[0111] The position information determination module 530 is configured to determine position information of the plurality of pieces of business data in the visual area according to the topological structure relationship.

[0112] The rendering module 540 is configured to render the plurality of pieces of business data to the current page for display based on the position information.

[0113] Optionally, the position information determination module 530 is further configured to:

[0114] determine level information of each piece of target business data according to the topological structure relationship.

[0115] determine position information of a cell in which the target business data is located according to the level information. The cell is a row cell or a column cell.

[0116] rendering the plurality of pieces of business data to the current page for display based on the position information includes:

[0117] rendering the target business data into a corresponding cell based on the position information.

[0118] Optionally, if the cell is a row cell, the position information of the cell comprises longitudinal position information and transverse indentation information; if the cell is a column cell, the position information of the cell comprises transverse position information and longitudinal indentation information.

[0119] Optionally, the method further comprises:

[0120] receiving an initial service data topology configured by a user;

[0121] fusing the initial service data topology and a system service data topology to obtain a target service data topology.

[0122] Optionally, the method further comprises:

[0123] displaying the system service data topology in a resource panel;

[0124] dragging at least one service data selected by the user from the resource panel to a configuration panel based on a drag operation of the user;

[0125] receiving a hierarchical relationship configured by the user for the at least one service data in the configuration panel;

[0126] generating an initial service data topology based on the hierarchical relationship.

[0127] Optionally, the method further comprises:

[0128] receiving a movement operation of the user for the at least one service data in the configuration panel;

[0129] configuring a hierarchical relationship based on the movement operation.

[0130] Optionally, the method further comprises:

[0131] extracting a plurality of service data topology subgraphs from the system service data topology, wherein the plurality of service data topology subgraphs satisfy a set condition that root nodes of the service data topology subgraphs are the same as a root node of the initial service data topology;

[0132] filtering the plurality of service data topology subgraphs to obtain a first candidate service data topology subgraph;

[0133] merging the first candidate service data topology subgraph to obtain a second candidate service data topology subgraph;

[0134] trimming the second candidate service data topology subgraph based on the initial service data topology to obtain a target service data topology.

[0135] Optionally, the method further comprises:

[0136] filtering out the service data topology subgraph which does not contain the initial service data topology graph.

[0137] Optionally, the topology graph configuration module is further configured to:

[0138] performing deduplication and merging on the first candidate service data topology subgraph starting from the root node to obtain a second candidate service data topology subgraph;

[0139] performing pruning on the second candidate service data topology subgraph based on the initial service data topology graph to obtain a target service data topology graph, including:

[0140] obtaining corresponding nodes of the initial service data topology graph and the second candidate service data topology subgraph;

[0141] pruning N-level child nodes of the corresponding nodes of the second candidate service data topology subgraph to obtain a target service data topology graph; wherein N is a positive integer greater than 1.

[0142] Optionally, the target service data obtaining module 520 is further configured to:

[0143] loading identification information of full-service data of the current page;

[0144] obtaining a plurality of pieces of target identification information corresponding to the visible area from the identification information based on a set mapping relationship; wherein the set mapping relationship is a mapping relationship between the visible area and service data;

[0145] loading a plurality of pieces of target attribute information based on the plurality of pieces of target identification information.

[0146] Optionally, the method further includes: a predicted visible area determining module, configured to

[0147] determine a predicted visible area;

[0148] loading predicted attribute information corresponding to the predicted visible area.

[0149] The page rendering apparatus provided in the embodiments of the present disclosure can perform the page rendering method provided in any of the embodiments of the present disclosure, and has the corresponding function modules and beneficial effects of performing the method.

[0150] It should be noted that each unit and module included in the above apparatus is only divided according to function logic, but is not limited to the above division, as long as the corresponding functions can be implemented; in addition, the specific names of each functional unit are only for convenient mutual distinction, and do not limit the protection scope of the embodiments of the present disclosure.

[0151] Figure 6This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Reference is made below. Figure 6 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 6 The diagram below shows the structure of the terminal device or server 500. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and vehicle terminals (e.g., vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 6 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0152] like Figure 6 As shown, electronic device 500 may include a processing unit (e.g., central processing unit, graphics processor, etc.) 501, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 502 or a program loaded from storage device 508 into random access memory (RAM) 503. The RAM 503 also stores various programs and data required for the operation of electronic device 500. The processing unit 501, ROM 502, and RAM 503 are interconnected via bus 504. An edit / output (I / O) interface 505 is also connected to bus 504.

[0153] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 508 including, for example, magnetic tapes, hard disks, etc.; and communication devices 509. Communication device 509 allows electronic device 500 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 500 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0154] In particular, according to embodiments of the present disclosure, the processes described above with reference to the flowcharts can be implemented as a computer software program. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for executing the methods illustrated by the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network by the communication apparatus 509, or installed from the storage apparatus 508, or installed from the ROM 502. When the computer program is executed by the processing apparatus 501, the above-mentioned functions defined in the methods of the embodiments of the present disclosure are executed.

[0155] The names of the messages or information exchanged between the plurality of devices in the embodiments of the present disclosure are only for illustrative purposes, and are not intended to limit the scope of the messages or information.

[0156] The electronic device provided by the embodiments of the present disclosure and the page rendering method provided by the above-described embodiments belong to the same inventive concept, and the technical details not described in detail in the present embodiment can be referred to the above-described embodiments, and the present embodiment has the same beneficial effects as the above-described embodiments.

[0157] The embodiments of the present disclosure provide a computer storage medium having a computer program stored thereon, which, when executed by a processor, implements the page rendering method provided by the above-described embodiments.

[0158] It should be noted that the computer-readable medium described above can be a computer-readable signal medium or a computer-readable storage medium or any combination thereof. The computer-readable storage medium, for example, can be, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any suitable combination of the foregoing. More specific examples of the computer-readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the disclosure, the computer-readable storage medium can be any tangible medium that contains or stores a program used by or in connection with an instruction execution system, apparatus or device. In the disclosure, the computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, in which the computer-readable program code is contained. Such a propagated data signal can take any of a variety of forms, including, but not limited to, an electromagnetic signal, an optical signal, or any suitable combination of the foregoing. The computer-readable signal medium can also be any computer-readable medium that is not a storage medium and that can communicate, propagate or transport a program for use by or in connection with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including, but not limited to, wire, cable, RF (radio frequency), etc., or any suitable combination of the foregoing.

[0159] In some embodiments, the client, server, or both can communicate using any current known or future developed network protocol, such as HTTP (HyperText Transfer Protocol), and can be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include local area networks ("LAN"), wide area networks ("WAN"), the Internet, and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any current known or future developed networks.

[0160] The computer-readable medium described above can be included in the electronic device described above; or can exist separately from the electronic device, and can be accessed via the electronic device.

[0161] The computer-readable medium described above carries one or more programs, which, when executed by the electronic device, cause the electronic device to:

[0162] The computer readable medium carries one or more programs when the one or more programs are executed by the electronic device, the electronic device is caused to: monitor a scroll operation triggered by a user on a current page, determine a visible area based on the monitored scroll operation; wherein the scroll operation comprises horizontal scroll or vertical scroll; obtain a plurality of pieces of target service data corresponding to the visible area; wherein the plurality of pieces of target service data have a topological structure relationship; determine position information of the plurality of pieces of target service data in the visible area according to the topological structure relationship; and render the plurality of pieces of target service data to the current page for display based on the position information.

[0163] Computer program code for carrying out operations of the present disclosure can be written in any of one or more programming languages or combinations of languages including object or visual programming languages such as Java, Smalltalk, C++ or conventional procedural programming languages such as the "C" programming language or similar programming languages. The program code can execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computer (for example, through the Internet using an Internet Service Provider).

[0164] The flow and block diagrams in the drawings show architectural, functional, and operational representations of possible implementations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flow and block diagrams can represent a module, a segment, or a portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that in some alternative implementations, the functions noted in the blocks can occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently or the blocks may

[0165] The units described in the embodiments of the present disclosure can be implemented in the form of software, or can be implemented in the form of hardware. In some cases, the names of the units do not constitute a limitation on the units themselves. For example, the first obtaining unit can also be described as a unit that obtains at least two Internet protocol addresses.

[0166] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, and without limitation, exemplary types of hardware logic components that can be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system on a chips (SOCs), complex programmable logic devices (CPLDs), etc.

[0167] In the context of the present disclosure, a machine-readable medium can be a tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium will include one or more lines of electrical connections, portable computer disks, hard disk drives, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fibers, portable compact disc read-only memories (CD-ROMs), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0168] The above description is only specific embodiments of the present disclosure and is not intended to limit the scope of the present disclosure. The scope of the present disclosure is determined by the scope of the claims, and encompasses all the technical solutions falling within the scope of the claims, as well as their equivalents. For example, the above-mentioned technical features can be replaced with other technical features disclosed in the present disclosure (but not limited to) having similar functions to form a technical solution.

[0169] Moreover, while operations are depicted in a particular order, this should not be understood as requiring such an order nor infringing on the scope of the disclosure. Certain of the operations described in the discussion are combinable into a single operation, and certain operations can be separated into several operations. In some embodiments, the operations described in the discussion can be performed in an order different than presented in the discussion. In some embodiments, the operations described in the discussion can be performed concurrently. Also, while several specific implementation details are discussed in the discussion, these should not be interpreted as limiting the scope of the disclosure. Rather, certain features described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable sub-combination.

[0170] Although the subject matter has been described in language specific to structural features and / or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.

Claims

1. A method of rendering a page, the method comprising: The method comprises the following steps: monitoring a scroll operation triggered by a user on a current page, and determining a visible area based on the monitored scroll operation; the scroll operation comprises horizontal scroll or vertical scroll; obtaining a plurality of target service data corresponding to the visible area; the plurality of target service data have a topological structure relationship; determining position information of the plurality of target service data in the visible area according to the topological structure relationship; rendering the plurality of target service data to the current page for display based on the position information; the target service data comprises target identification information and target attribute information, and the plurality of target service data corresponding to the visible area is obtained by the following steps: loading identification information of full-service data of the current page, wherein the full-service data is all service data that can be displayed on the current page; obtaining a plurality of target identification information corresponding to the visible area from the identification information based on a set mapping relationship; the set mapping relationship is a mapping relationship between the visible area and service data; loading a plurality of target attribute information based on the plurality of target identification information; determining a predicted visible area; loading predicted attribute information corresponding to the predicted visible area, wherein the predicted visible area is a visible area predicted by a set prediction algorithm based on the direction and speed of the scroll operation triggered by the user.

2. The method of claim 1, wherein, The method comprises the following steps: determining hierarchical information of each target service data according to the topological structure relationship; determining position information of a cell in which the target service data is located according to the hierarchical information; the cell is a row cell or a column cell; the method comprises the following steps: rendering the target service data into the corresponding cell based on the position information.

3. The method of claim 2, wherein, If the cell is a row cell, the position information of the cell comprises vertical position information and horizontal indentation information; if the cell is a column cell, the position information of the cell comprises horizontal position information and vertical indentation information.

4. The method of claim 1, wherein, Before monitoring the scroll operation of the user on the current page, the method further comprises the following steps: receiving an initial service data topological graph configured by the user; fusing the initial service data topological graph and a system service data topological graph to obtain a target service data topological graph.

5. The method of claim 4, wherein, The method comprises the following steps: displaying the system service data topological graph in a resource panel; dragging at least one service data selected by the user from the resource panel to a configuration panel based on a drag operation of the user; receiving a hierarchical relationship configured by the user for the at least one service data in the configuration panel; generating an initial service data topological graph based on the hierarchical relationship.

6. The method of claim 5, wherein, The method comprises the following steps: receiving a movement operation of the user for the at least one service data in the configuration panel; configuring a hierarchical relationship based on the movement operation.

7. The method of claim 5, wherein, The method comprises the following steps: extracting a plurality of service data topology subgraphs satisfying a set condition from the system service data topology graph; wherein the set condition is that root nodes of the service data topology subgraphs are the same as a root node of the initial service data topology graph; filtering the plurality of service data topology subgraphs to obtain a first candidate service data topology subgraph; merging the first candidate service data topology subgraph to obtain a second candidate service data topology subgraph; trimming the second candidate service data topology subgraph based on the initial service data topology graph to obtain a target service data topology graph.

8. The method of claim 7, wherein, filtering the plurality of service data topology subgraphs to obtain a first candidate service data topology subgraph, comprising: filtering out service data topology subgraphs that do not contain the initial service data topology graph.

9. The method of claim 7, wherein, merging the first candidate service data topology subgraph to obtain a second candidate service data topology subgraph, comprising: de-duplicating and merging the first candidate service data topology subgraph from the root node to obtain a second candidate service data topology subgraph; trimming the second candidate service data topology subgraph based on the initial service data topology graph to obtain a target service data topology graph, comprising: obtaining corresponding nodes of the initial service data topology graph and the second candidate service data topology subgraph; trimming N-level child nodes of the corresponding nodes of the second candidate service data topology subgraph to obtain a target service data topology graph; wherein N is a positive integer greater than 1.

10. A page rendering apparatus characterized by comprising: comprising: a visible area determination module configured to monitor a scrolling operation triggered by a user on a current page, and determine a visible area based on the monitored scrolling operation; wherein the scrolling operation includes horizontal scrolling or vertical scrolling; a target service data acquisition module configured to acquire a plurality of target service data corresponding to the visible area; wherein the plurality of target service data have a topological structure relationship; a position information determination module configured to determine position information of the plurality of target service data in the visible area according to the topological structure relationship; a rendering module configured to render the plurality of target service data to the current page for display based on the position information; the target service data acquisition module is further configured to: load identification information of full-service data of the current page, wherein the full-service data is all service data that can be displayed in the current page; acquire a plurality of target identification information corresponding to the visible area from the identification information based on a set mapping relationship; wherein the set mapping relationship is a mapping relationship between the visible area and service data; load a plurality of target attribute information based on the plurality of target identification information; optionally, further comprising a predicted visible area determination module configured to determine a predicted visible area; load predicted attribute information corresponding to the predicted visible area, wherein the predicted visible area is a visible area predicted by a set prediction algorithm based on a direction and speed of a scrolling operation triggered by a user.

11. An electronic device, comprising: The electronic device comprises: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement a page rendering method as claimed in any one of claims 1-9.

12. A storage medium containing computer-executable instructions for performing a page rendering method as claimed in any one of claims 1-9 when executed by a computer processor.

Images