Page rendering method

Abstract

The application provides a page rendering method, and relates to the technical fields of Internet and big data. The method comprises the following steps: a client loads basic information and entity-level relationship line information of a plurality of target entities from a server; the entity-level relationship line information is used to indicate the association relationship between the plurality of target entities; and the basic information and the entity-level relationship line information of the plurality of target entities are used to render thumbnails of the plurality of target entities and relationship lines between the thumbnails on a canvas to obtain and display a first target page. Thus, in the initialization loading and rendering stage of the page, only the basic information and the entity-level relationship line information of each target entity are loaded and rendered, the loading and rendering speed can be improved, the waiting time of the user can be reduced, and only the relationship lines between entities are displayed in the initialized rendering page, without displaying the relationship lines between fields in the entities, so that the number of relationship lines in the page can be reduced, and the recognition of the relationship between entities can be enhanced.

Description

Technical Field

[0001] This application relates to the fields of Internet and big data technology, and in particular to a page rendering method. Background Technology

[0002] Web-based refers to the client-side of applications developed based on Web technologies. In a B / S (Browser / Server) architecture data model management platform on the Web, if the data model is designed or viewed in a visual mode, the content of entities (such as data tables) associated with the data model needs to be rendered onto the page.

[0003] In related technologies, the details of all entities are loaded at once and rendered onto the view interface. Users can zoom or move the view scene to display some or all entities.

[0004] However, loading and rendering all the details of the entities at once results in slow interface loading and rendering speeds, and users have to wait a long time for page feedback. Summary of the Invention

[0005] This application aims to at least partially address one of the technical problems in the related art.

[0006] This application proposes a page rendering method that loads and renders only the basic information and entity-level relationship lines of each target entity during the initial loading and rendering phases of the page. This can improve the loading and rendering speed, reduce the user's waiting time, and display the relationship lines between entities only in the page during initial rendering, instead of displaying the relationship lines between fields in the entity. This can reduce the number of relationship lines on the page and enhance the recognizability of the relationships between entities.

[0007] The first aspect of this application provides a page rendering method, including:

[0008] The server loads basic information and entity-level relationship information of multiple target entities; wherein, the entity-level relationship information is used to indicate the association relationship between the multiple target entities.

[0009] Based on the basic information of the multiple target entities and the entity-level relationship line information, render the thumbnails of the multiple target entities and the relationship lines between the thumbnails of the multiple target entities on the canvas to obtain the first target page;

[0010] Display the first target page.

[0011] A second aspect of this application provides a page rendering apparatus, comprising:

[0012] A loading module is used to load basic information and entity-level relationship line information of multiple target entities from the server; wherein, the entity-level relationship line information is used to indicate the association relationship between the multiple target entities;

[0013] The rendering module is used to render thumbnails of the multiple target entities and the relationship lines between the thumbnails of the multiple target entities on the canvas based on the basic information of the multiple target entities and the entity-level relationship line information, so as to obtain the first target page.

[0014] The display module is used to display the first target page.

[0015] A third aspect of this application provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, it implements the page rendering method as proposed in the first aspect of this application.

[0016] The fourth aspect of this application provides a non-transitory computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the page rendering method as proposed in the first aspect of this application.

[0017] A fifth aspect of this application provides a computer program product that, when instructions in the computer program product are executed by a processor, performs a page rendering method as proposed in a first aspect of this application.

[0018] The technical solutions provided by the above embodiments of this application bring at least the following beneficial effects:

[0019] Firstly, during the initial loading and rendering phase of the page, only loading and rendering the basic information and entity-level relationship lines of each target entity can improve the loading and rendering speed and reduce the user's waiting time. Furthermore, displaying the relationship lines between entities only in the page during initial rendering, rather than displaying the relationship lines between fields in the entity, can reduce the number of relationship lines on the page, reduce the complexity of the relationships between entities, and enhance the recognizability of the relationships between entities.

[0020] Secondly, only the basic information of each target entity under the target topic and the entity-level relationship line information used to indicate the relationship between each target entity are loaded, without loading the basic information of all entities in the database. This can not only meet the user's actual query needs, but also further improve the loading and rendering speed and reduce the user's waiting time.

[0021] Thirdly, users can update the details of the first target entity to meet their personalized modification needs.

[0022] Fourthly, the client can determine the first details information based on the updated entity details pop-up window. The first details information is the updated details information corresponding to the first target entity. The client then sends the first details information to the server so that the server can update the details information of the first target entity in the database based on the first details information, thereby achieving the synchronization and effectiveness of the details information update.

[0023] Fifthly, in thumbnail mode, the details of the entity that the user wants to view are only loaded and rendered when the user wants to view the details of the entity, and the details of the entity are displayed in the form of a pop-up on the first target page. This not only meets the user's personalized viewing needs, but also improves loading and rendering speed.

[0024] Sixthly, in thumbnail mode, if the user zooms in on the first target page, the detailed information of each entity in the current view is loaded and rendered, allowing the user to intuitively understand the detailed information of each entity and the relationship between them, thus meeting the user's viewing needs.

[0025] Seventhly, in the details display mode, users can not only intuitively understand the relationships between different entities, but also intuitively understand the relationships between fields within different entities. This makes it easier for users to intuitively sort out entity and field relationships and meet their actual viewing needs.

[0026] Eighthly, by preloading the details of entities located within preloaded areas adjacent to the current view, after the user pans the current view, the details of entities moved into the panned current view can be directly rendered in the canvas based on the preloaded entity details, reducing user waiting time and improving the user experience. Furthermore, after the user pans the current view, the details display area of ​​entities moved out of the panned current view can be unloaded from the canvas, reducing storage resource consumption.

[0027] Ninthly, when the user zooms in on the current view again, and the zoom ratio is less than the set zoom ratio, the client can switch from details display mode to thumbnail mode to meet the user's personalized viewing needs.

[0028] In summary, during the initial page loading phase, rendering only the thumbnail page (referred to as the first target page in this application) can reduce user waiting time. If the user triggers a zoom operation on the current view during the thumbnail display, the decision is made based on the zoom level of the current view: either continue displaying the thumbnail page or render the details page (referred to as the second target page in this application). In other words, this application provides both thumbnail and details display modes, allowing the display of thumbnail and details pages according to the user's desired zoom level, thus satisfying the user's personalized page display and viewing needs.

[0029] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0030] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:

[0031] Figure 1 A schematic flowchart illustrating a page rendering method provided in an embodiment of this application;

[0032] Figure 2 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0033] Figure 3 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0034] Figure 4 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0035] Figure 5 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0036] Figure 6 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0037] Figure 7 A flowchart illustrating another page rendering method provided in an embodiment of this application;

[0038] Figure 8 This is a schematic diagram of the entity details pop-up window provided in the embodiments of this application;

[0039] Figure 9 This is a schematic diagram of a nine-square grid on a canvas provided in an embodiment of this application;

[0040] Figure 10This is a schematic diagram showing the content displayed in the current view provided in the embodiments of this application;

[0041] Figure 11 A schematic diagram showing the content displayed in the current view after translation, as provided in an embodiment of this application;

[0042] Figure 12 This is a schematic diagram of the structure of a page rendering apparatus provided in an embodiment of this application;

[0043] Figure 13 This is a schematic diagram of the structure of an electronic device shown in an exemplary embodiment of this application. Detailed Implementation

[0044] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0045] In related technologies, the details of all entities are loaded at once and rendered onto the view interface. Users can zoom or move the view scene to display some or all entities, and select a single entity or multiple entities for editing, deletion, and other operations.

[0046] However, the above method has at least the following drawbacks:

[0047] 1. Loading all entity details at once can easily cause data congestion, resulting in longer waiting times for users to receive page feedback;

[0048] 2. When displaying the details of all entities with a large amount of data on the front end, the number of DOM (Document Object Model) objects generated may exceed the capacity of the user's computer and browser, resulting in lag, freezing, or even browser crashes on the web.

[0049] 3. When rendering entities, rendering the relationship lines between all entities and the relationship lines between fields in different entities is too complex, and the recognition of field relationships in entities is low.

[0050] In view of at least one of the above-mentioned problems, this application proposes a page rendering method and apparatus.

[0051] The page rendering method and apparatus of this application are described below with reference to the accompanying drawings.

[0052] Figure 1 This is a flowchart illustrating a page rendering method provided in an embodiment of this application.

[0053] The page rendering method provided in this application embodiment can be applied to a client, where a client refers to a software program, such as a browser, that runs on an electronic device and provides services to the user.

[0054] Among them, electronic devices can be any device with computing capabilities, such as personal computers (PCs), mobile terminals, etc. Mobile terminals can be hardware devices with various operating systems, touch screens and / or displays, such as mobile phones, tablets, personal digital assistants, wearable devices, and intelligent robots.

[0055] like Figure 1 As shown, this page rendering method may include the following steps:

[0056] Step S101: Load basic information and entity-level relationship information of multiple target entities from the server; wherein, the entity-level relationship information is used to indicate the association relationship between multiple target entities.

[0057] In this application embodiment, the basic information of the target entity (such as a data table) may include, but is not limited to: the target entity's attribute information (including but not limited to identification information (such as ID (Identity), name (such as Chinese name, English name), type, etc.).

[0058] In the embodiments of this application, different target entities may have a relationship. For example, if target entity 1 is the parent table and target entity 2 and target entity 3 are the child tables under target entity 1, then target entity 1 has a relationship with target entity 2 and target entity 3 respectively.

[0059] In this embodiment, the client can load basic information and entity-level association information of multiple target entities from the server, wherein the entity-level relationship information is used to indicate the association relationship between multiple target entities.

[0060] Step S102: Based on the basic information and entity-level relationship line information of multiple target entities, render the thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain the first target page.

[0061] In this embodiment of the application, the client can render thumbnails of multiple target entities on a canvas based on the basic information of multiple target entities, and render the relationship lines between the thumbnails of multiple target entities on the canvas based on the entity-level relationship line information, so as to obtain the first target page.

[0062] Step S103: Display the first target page.

[0063] In this embodiment of the application, the client may also display a first target page so that the logged-in user on the client can intuitively understand the thumbnails of each target entity and the relationship between each target entity.

[0064] The page rendering method of this application embodiment loads basic information and entity-level relationship line information of multiple target entities from the server through the client; wherein, the entity-level relationship line information is used to indicate the association relationship between multiple target entities; based on the basic information and entity-level relationship line information of multiple target entities, thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities are rendered on the canvas to obtain a first target page; the first target page is then displayed. Therefore, in the page initialization loading and rendering stage, only the basic information and entity-level relationship line information of each target entity are loaded and rendered, which can improve the loading and rendering speed, reduce the user's waiting time, and, by only displaying the relationship lines between entities in the initially rendered page, and not displaying the relationship lines between fields within entities, the number of relationship lines on the page can be reduced, the complexity of the relationships between entities can be reduced, and the recognizability of the relationships between entities can be enhanced.

[0065] To clearly illustrate how basic information and entity-level relationship information of multiple target entities are loaded from the server in any embodiment of this application, this application also proposes a page rendering method.

[0066] Figure 2 This is a flowchart illustrating another page rendering method provided in an embodiment of this application.

[0067] like Figure 2 As shown, this page rendering method may include the following steps:

[0068] Step S201: Send a query request to the server; wherein the query request includes the target topic, which is the topic of the data model created by the client.

[0069] In this embodiment of the application, the user can create a data model on the client. When the data model is displayed or browsed on the client in a visualization mode, the client can obtain the theme of the data model (referred to as the target theme in this application) and send a query request carrying the target theme to the server.

[0070] The data model can include physical models, logical models, conceptual models, etc. It is an abstract organization of various types of data, providing an abstract framework for the information representation and operation of the database system.

[0071] It's important to note that data model design is a crucial means and method for organizing data structures and determining data relationships. Data modeling is a core component in scenarios such as business system construction, data lake building, and data warehouse design. During data processing, data models are designed based on data requirements. The results of these designs are then combined with data processing logic to develop valuable data that meets business needs. This data serves enterprise operational monitoring, risk analysis, and daily business management, acting as a booster and accelerator for enterprise digital transformation.

[0072] Step S202: Receive the query response sent by the server; wherein, the query response is the server's response to the query request, querying each target entity under the target topic from the database, obtaining the basic information and entity-level relationship line information of each target entity from the database, and generating it based on the basic information and entity-level relationship line information of each target entity.

[0073] Among them, entity-level relationship line information is used to indicate the association relationship between multiple target entities.

[0074] In this embodiment of the application, after receiving a query request, the server can respond to the query request by querying the database for each target entity (such as a data table) located under the target topic, obtaining the basic information and entity-level relationship line information of each target entity from the database, and sending a query response carrying the basic information and entity-level relationship line information of each target entity to the client.

[0075] Step S203: Based on the basic information and entity-level relationship line information of multiple target entities, render the thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain the first target page.

[0076] Step S204: Display the first target page.

[0077] The explanation of steps S203 to S204 can be found in the relevant description in any embodiment of this application, and will not be repeated here.

[0078] The page rendering method of this application embodiment can load only the basic information of each target entity under the target theme and the entity-level relationship line information used to indicate the relationship between each target entity, without loading the basic information of all entities in the database. This can not only meet the user's actual query needs, but also further improve the loading and rendering speed and reduce the user's waiting time.

[0079] In one possible implementation of this application, after displaying the first target page, only the details of the target entity (referred to as the first target entity in this application) that the user wants to view can be loaded, and the details of the first target entity can be displayed in the form of a pop-up window on the first target page. The following is in conjunction with... Figure 3 The above process will be explained in detail.

[0080] Figure 3 This is a flowchart illustrating another page rendering method provided in an embodiment of this application.

[0081] like Figure 3 As shown, this page rendering method may include the following steps:

[0082] Step S301: Load the basic information and entity-level relationship information of multiple target entities from the server.

[0083] Among them, entity-level relationship line information is used to indicate the association relationship between multiple target entities.

[0084] Step S302: Based on the basic information and entity-level relationship line information of multiple target entities, render the thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain the first target page.

[0085] Step S303: Display the first target page.

[0086] The explanation of steps S301 to S303 can be found in the relevant description in any embodiment of this application, and will not be repeated here.

[0087] Step S304: In response to the triggering operation of the thumbnail of the first target entity in the first target page, load the detailed information of the first target entity from the server.

[0088] In this embodiment of the application, the triggering operation is an operation triggered by the user, which can be a click operation (click, double-click, etc.), a selection operation, etc.

[0089] In this embodiment of the application, the detailed information includes, but is not limited to: the attribute information of the first target entity (including but not limited to identification information (such as ID), name (such as Chinese name, English name), type, and information of each field in the first target entity).

[0090] In this embodiment of the application, in response to a user-triggered operation that triggers a thumbnail of a first target entity on a first target page, the detailed information of the first target entity can be loaded from the server based on the identification information of the first target entity.

[0091] Step S305: Based on the details of the first target entity, render and display the entity details pop-up window corresponding to the first target entity on the first target page.

[0092] The entity details pop-up window displays at least one of the following:

[0093] The first item is the attribute information of the first target entity.

[0094] The second item is the field list, which includes all the fields within the first target entity.

[0095] The third item is the first relationship line information in the entity-level relationship line information, wherein the first relationship line information is used to indicate each target entity that has an association relationship with the first target entity.

[0096] In this embodiment of the application, based on the detailed information of the first target entity, an entity details pop-up window corresponding to the first target entity can be rendered and displayed on the first target page, so that users can intuitively obtain the detailed information of the first target entity.

[0097] In one possible implementation of this application embodiment, the user can also trigger a field in the field list in the entity details pop-up to display the field details pop-up corresponding to that field.

[0098] As an example, the client can respond to a user-triggered action on a target field in the field list of the entity details pop-up, and render and display the field details pop-up corresponding to the target field on the first target page.

[0099] The field details pop-up window displays at least one of the following:

[0100] The first item is the attribute information of the target field (such as Chinese name, English name, data type, length, precision, whether it is empty, etc.).

[0101] The second item is the second relationship line information (or field-level relationship line information) corresponding to the target field. The second relationship line information is used to indicate the fields that are related to the target field.

[0102] For example, the field details pop-up window can include primary keys and foreign keys, which can be used to indicate the fields that are related to the target field.

[0103] Optionally, users can also update the attribute information of the target field and / or the information of the second relationship line in the field details pop-up window of the target field.

[0104] In one possible implementation of this application embodiment, the user can also update the details information of the first target entity in the entity details pop-up window of the first target entity.

[0105] As an example, a client may respond to a user-triggered update to an entity details popup by performing at least one of the following:

[0106] The first step is to update the attribute information of the first target entity.

[0107] The second step is to update at least one field in the field list (e.g., re-edit, delete, etc.).

[0108] The third option is to add at least one new field to the field list.

[0109] The fourth step is to update the information on the first relationship line.

[0110] This allows users to update the details of the first target entity to meet their personalized modification needs.

[0111] In one possible implementation of this application embodiment, the client can also determine the first details information based on the updated entity details pop-up window, wherein the first details information is the updated details information corresponding to the first target entity, and send the first details information to the server so that the server updates the details information of the first target entity in the database based on the first details information, thereby achieving the synchronization and effectiveness of the details information update.

[0112] The page rendering method of this application embodiment loads and renders the details of the entity that the user wants to view only when the user has the option to view the details of the entity, and displays the details of the entity in the form of a pop-up window on the first target page. This not only meets the user's personalized viewing needs, but also improves the loading and rendering speed.

[0113] In one possible implementation of this application embodiment, the user can also zoom in on the first target page to display detailed information about the entity. The following is in conjunction with... Figure 4 The above process will be explained in detail.

[0114] Figure 4 This is a flowchart illustrating another page rendering method provided in an embodiment of this application.

[0115] like Figure 4 As shown, in Figures 1 to 3 Based on any of the illustrated embodiments, the page rendering method may further include the following steps:

[0116] Step S401: In response to the scaling operation on the first target page, determine the first scaling ratio of the first target page.

[0117] In this embodiment, the user can zoom in and out of the first target page (or the client's current view). For example, the user can zoom in and out of the first target page (or the client's current view) using the mouse wheel, or by clicking the zoom in / out buttons on the toolbar. Correspondingly, the client can determine a first zoom level of the first target page in response to the user's zoom operation, or it can determine a first zoom level of the current view in response to the user's zoom operation.

[0118] Step S402: Determine whether the first scaling ratio has reached the set scaling ratio. If yes, proceed to steps S403 to S405. If no, proceed to step S406.

[0119] The scaling factor is used to display detailed information about the target entity.

[0120] Among them, the scaling ratio is set to a preset scaling ratio, which can also be called the detail display scaling ratio. For example, the scaling ratio can be 0.8, 0.85, 0.9, etc.

[0121] It should be noted that steps S403 to S405 and step S406 are two parallel implementation methods, and in actual application, only one needs to be executed.

[0122] Step S403: Determine at least one second target entity located within the current view of the client from among the target entities.

[0123] In this embodiment of the application, when the first zoom level reaches the set zoom level, at least one second target entity located within the current view of the client can be determined from each target entity.

[0124] Step S404: Load the detailed information of each second target entity from the server.

[0125] In this embodiment of the application, the client can load detailed information of each second target entity from the server based on the identification information (such as ID) of each second target entity.

[0126] Step S405: Based on the details and entity-level relationship information of each second target entity, render the details display area of ​​each second target entity and the connection lines between each details display area on the canvas to obtain the second target page and display the second target page.

[0127] In this embodiment of the application, the client can render the detail display area (or entity detail diagram) of each second target entity on the canvas according to the detail information of each second target entity, and render the connection line between each detail display area on the canvas according to the entity-level relationship line information, so as to obtain the second target page and display the second target page.

[0128] In one possible implementation of this application embodiment, when the client loads the details of each second target entity from the server, it can also load field-level relationship line information from the server. The field-level relationship information is used to indicate the association relationship between fields within each second target entity. For step S405, the client can render the details display area of ​​each second target entity on the canvas according to the details of each second target entity, and render the connection lines between the details display areas on the canvas according to the entity-level relationship line information, and render the connection lines between the fields in the details display areas on the canvas according to the field-level relationship line information, so as to obtain the second target page.

[0129] This allows users to intuitively understand the relationships between different entities, as well as the relationships between fields within different entities, making it easier for them to visually organize entity and field relationships and meeting their actual viewing needs.

[0130] Step S406: According to the first scaling ratio, scale the thumbnails of each target entity in the first target page and the relationship line between the thumbnails of each target entity.

[0131] In this embodiment of the application, if the first scaling ratio does not reach the set scaling ratio, the client does not need to load and render the details of the entity. At this time, the thumbnails of each target entity in the first target page and the relationship line between the thumbnails of each target entity can be scaled proportionally according to the first scaling ratio.

[0132] The page rendering method of this application, when the user performs a zoom operation on the first target page, loads and renders the detailed information of the entities, which allows the user to intuitively understand the detailed information of each entity and the relationship between each entity, thus meeting the user's viewing needs.

[0133] In one possible implementation of this application embodiment, to improve page rendering efficiency and further reduce user waiting time, a portion of entity details can be preloaded. For example, after step S403, the client can determine a third target entity located within multiple first preloaded areas from among the target entities based on entity-level relationship line information and a first scaling ratio, and load the third target entity's details from the server according to the third target entity's identification information (such as ID). The first preloaded areas are adjacent to the current view on the canvas, and the size of each first preloaded area matches the size of the current view.

[0134] Therefore, when the client pans the current view, the corresponding detail display area of ​​the entity can be rendered directly on the canvas based on the preloaded detail information. The following section combines... Figure 5 The above process will be explained in detail.

[0135] Figure 5 This is a flowchart illustrating another page rendering method provided in an embodiment of this application.

[0136] like Figure 5 As shown, in Figure 4 Based on the illustrated embodiment, after step S405, the page rendering method may further include the following steps:

[0137] Step S501: In response to the translation operation of the current view, determine the fourth target entity that has been moved in and the fifth target entity that has been moved out within the current view after translation.

[0138] In this embodiment of the application, the user can pan the current view. For example, the user can trigger the panning of the current view by dragging the side scroll bar (left / right / up / down). Correspondingly, the client can respond to the panning operation triggered by the user and determine the fourth target entity that moves in and the fifth target entity that moves out in the current view after the panning.

[0139] Step S502: Determine the details of the fourth target entity from the details of each third target entity.

[0140] In this embodiment of the application, the client can determine the details of the fourth target entity from the details of the preloaded third target entity based on the identification information of the fourth target entity.

[0141] Step S503: Based on the details of the fourth target entity, render the details display area of ​​the fourth target entity in the current view after translation in the canvas, and unload the details display area of ​​the fifth target entity in the canvas to obtain the updated second target page.

[0142] In this embodiment, the client can render the details display area of ​​the fourth target entity within the current view after panning in the canvas, based on the details information of the fourth target entity. Furthermore, in order to reduce the consumption of storage resources, the client can also unload the details display area of ​​the fifth target entity in the canvas to obtain the updated second target page.

[0143] Step S504: Display the updated second target page.

[0144] In this embodiment of the application, the client can display the updated second target page so that the user can intuitively view the updated second target page.

[0145] In one possible implementation of this application embodiment, the first client may further determine a sixth target entity located within a plurality of second preloaded areas from among the target entities based on entity-level relationship line information and a first scaling ratio, and load the detailed information of the sixth target entity from the server according to the identification information (such as ID) of the sixth target entity. The second preloaded areas are adjacent to the current view after translation on the canvas, and the size of each second preloaded area matches the size of the current view after translation.

[0146] Therefore, when the user pans the current view again, the details of the moved-in entity can be rendered in the canvas based on the preloaded details of the sixth target entity, reducing the user's waiting time and improving the user experience.

[0147] The page rendering method of this application preloads the detailed information of entities located in each preloaded area adjacent to the current view. Thus, after the user pans the current view, the detailed information of the entities moved into the panned current view can be directly rendered in the canvas based on the preloaded detailed information of the entities, which can reduce the user's waiting time and improve the user experience.

[0148] In one possible implementation of this application embodiment, when the user zooms the current view again, and the zoom ratio is less than the set zoom ratio, the client can... Figure 4 The details display mode shown has been switched to, as shown below. Figure 1 The thumbnail mode is shown below. (Followed by...) Figure 6 The above process will be explained in detail.

[0149] Figure 6 This is a flowchart illustrating another page rendering method provided in an embodiment of this application.

[0150] like Figure 6 As shown, in Figure 4 Based on the illustrated embodiment, after step S405, the page rendering method may further include the following steps:

[0151] Step S601: In response to the zoom operation on the current view, determine the second zoom level of the current view.

[0152] In this embodiment, the user can zoom in and out of the current view. For example, the user can zoom in and out using the mouse wheel or by clicking the zoom in / out buttons on the toolbar. Correspondingly, the client can determine a second zoom level for the current view in response to the user's zoom operation.

[0153] Step S602: When the second scaling ratio is less than the set scaling ratio, unload the detail display area of ​​each second target entity in the canvas and the connecting lines between each detail display area.

[0154] In this embodiment of the application, it can be determined whether the second scaling ratio is less than the set scaling ratio. If the second scaling ratio is greater than or equal to the set scaling ratio, it is not necessary to switch to thumbnail mode. At this time, the client can scale the detail display area of ​​each second target entity in the second target page and the connecting lines between each detail display area proportionally according to the second scaling ratio.

[0155] If the second scaling ratio is less than the set scaling ratio, the client can switch to thumbnail mode. In this case, the client can first unload the detail display area of ​​each second target entity in the canvas and the connecting lines between each detail display area to reduce the use of storage resources.

[0156] Step S603: Re-render the thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain the third target page.

[0157] Afterwards, the client can re-render the thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain the third target page, where the content displayed on the third target page can be the same as the content displayed on the first target page.

[0158] Step S604: Display the third target page.

[0159] The page rendering method of this application embodiment allows the client to switch from details display mode to thumbnail mode when the user zooms the current view again, and the zoom ratio is less than the set zoom ratio, so as to meet the user's personalized viewing needs.

[0160] In any embodiment of this application, the page rendering method provided by this application has at least the following advantages:

[0161] 1. In the B / S architecture, the web interface loads entity data in layers, which improves the speed of initial interface loading and rendering and reduces the user's waiting time;

[0162] 2. Load and unload display content on demand, and clear cached content in a timely manner to reduce CPU (Central Processing Unit) and memory usage, thereby improving the rendering performance of the front end.

[0163] 3. The number of relationship lines in the display area has been optimized, reducing the complexity of relationships in global mode or thumbnail mode and enhancing relationship recognition.

[0164] In other words, this application enables the loading of basic information and entity-level relationship information of all entities during the web view initialization phase, significantly reducing the amount of data loaded during initialization compared to loading detailed information of all entities. Based on the set scaling ratio, thumbnail mode or detailed display mode is presented as needed. From a performance perspective, the content loaded within the current view is limited, and content removed from the current view is promptly cleared, achieving dynamic loading and unloading, and rendering of canvas content on demand.

[0165] As an example, the page rendering logic can be as follows: Figure 7 As shown, the specific steps may include:

[0166] Step 1: The web client loads the basic information of all entities through the backend interface, that is, initializes the basic information and generates the entity layout.

[0167] The traditional web application process involves loading 2000 full entity details records. This data transfer exceeds 5MB, taking over 6 seconds to load. Furthermore, once all entity details are rendered in the view, user interaction becomes sluggish or even impossible. Additionally, with more than 2000 details records, the browser may crash due to performance limitations.

[0168] In this application, the Web client loads the basic information of all entities through the backend interface. The data transmission volume of the basic information of 5,000 entities can be controlled within 2-3M. Under normal network transmission speed, the loading time is within 3 seconds. The rendering time of the basic information of 5,000 entities in the form of thumbnails on the canvas is within 1 second. After rendering, there is no lag, and user dragging and other operations are smooth.

[0169] Step 2: In thumbnail mode, the user clicks on the entity title with the mouse, triggering a pop-up entity details window for that single entity. The details displayed in the entity details pop-up window may include the entity name, attributes, field list, etc. For example, the entity details pop-up window may look like this: Figure 8As shown in area 81. Users can trigger a pop-up field details window by clicking on a field in the field list. In this details window, users can add, edit, delete, generate and modify relationships (or relationship lines) between entities and their fields. In thumbnail mode, only relationship lines between entities are displayed; relationship lines between tables or fields are displayed only after entering the details display mode.

[0170] Step 3: The user zooms in and out of the current view using the mouse wheel or by clicking the zoom in / out buttons on the toolbar. When the zoom level is greater than or equal to the set zoom level (e.g., 0.8), the entities within the current view's area are calculated based on the thumbnail layout. The system then switches to the entity detail display mode, rendering the entity detail images (referred to as the detail display area in this application) of each entity within the current view on the canvas. The detail display area shows: entity name, entity attributes, and a list of fields under the entity. While rendering each entity in the current view, the system calculates... Figure 9 The detailed information of each entity within the nine-square grid shown is preloaded to prepare data for the next step of panning the current view.

[0171] As an example, the content displayed in the current view can be as follows: Figure 10 As shown.

[0172] Step 4: When the user drags the side scrollbar of the current view (left / right / up / down), the current view is panned. Entities moving into the panned current view are calculated, and their details are rendered on the canvas based on the preloaded entity details. Simultaneously, entities moving out of the panned current view are calculated, and their information on the canvas is unloaded. The preloading process from Step 3 continues, preloading entities within the nine-grid area of ​​the current view.

[0173] As an example, the content displayed within the current view after panning can be as follows: Figure 11 As shown.

[0174] Step 5: In detail display mode, users can zoom in and out of the current view using the mouse wheel or by clicking the zoom in / out buttons on the toolbar. When the zoom level is less than the set zoom level (e.g., 0.8), switch to thumbnail mode, render thumbnail data based on the basic information of all entities, and unload the detail information of all entities. In thumbnail mode, proceed to the next step as described in Step 2.

[0175] With the above Figures 1-7 Corresponding to the page rendering method provided in the embodiments, this application also provides a page rendering apparatus. Since the page rendering apparatus provided in the embodiments of this application is similar to the one described above... Figures 1-7The page rendering method provided in the embodiments corresponds to the page rendering apparatus provided in the embodiments of this application, and will not be described in detail in the embodiments of this application.

[0176] Figure 12 This is a schematic diagram of the structure of a page rendering device provided in an embodiment of this application.

[0177] like Figure 12 As shown, the page rendering device 1200 may include: a loading module 1201, a rendering module 1202, and a display module 1203.

[0178] The loading module 1201 is used to load basic information and entity-level relationship information of multiple target entities from the server; the entity-level relationship information is used to indicate the association relationship between multiple target entities.

[0179] The rendering module 1202 is used to render thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas based on the basic information and entity-level relationship line information of multiple target entities, so as to obtain the first target page.

[0180] Display module 1203 is used to display the first target page.

[0181] As one possible implementation, the loading module 1201 is specifically used for: sending a query request to the server; wherein the query request includes a target topic, which is the topic of the data model created by the client; receiving a query response sent by the server; wherein the query response is generated by the server in response to the query request, querying each target entity under the target topic from the database, obtaining the basic information and entity-level relationship line information of each target entity from the database, and generating the response based on the basic information and entity-level relationship line information of each target entity.

[0182] As one possible implementation, the loading module 1201 is also used to: load detailed information of the first target entity from the server in response to a triggering operation on a thumbnail of the first target entity in the first target page.

[0183] The rendering module 1202 is also used to: render the entity details pop-up window corresponding to the first target entity in the first target page based on the details information of the first target entity.

[0184] The display module 1203 is also used to display the entity details pop-up window corresponding to the first target entity.

[0185] The entity details pop-up window displays at least one of the following:

[0186] The attribute information of the first target entity; a field list, wherein the field list includes each field within the first target entity; and the first relationship line information in the entity-level relationship line information, wherein the first relationship line information is used to indicate each target entity that has an association relationship with the first target entity.

[0187] As one possible implementation, the rendering module 1202 is also used to: render the field details pop-up corresponding to the target field in the field list of the entity details pop-up in the first target page in response to a trigger operation on the target field.

[0188] The display module 1203 is also used to display a pop-up window showing the field details corresponding to the target field.

[0189] The field details pop-up window displays at least one of the following: attribute information of the target field; and second relationship line information corresponding to the target field, wherein the second relationship line information is used to indicate the fields that are related to the target field.

[0190] As one possible implementation, the page rendering device 1200 may also include:

[0191] The execution module is used to respond to the update operation of the entity details pop-up window and perform at least one of the following: update the attribute information of the first target entity; update at least one field in the field list; add at least one field to the field list; update the information of the first relationship line.

[0192] As one possible implementation, the page rendering device 1200 may also include:

[0193] The first determination module is used to determine the first details information based on the updated entity details pop-up window, wherein the first details information is the updated details information corresponding to the first target entity.

[0194] The sending module is used to send the first details information to the server, whereby the first details information is used by the server to update the details information of the first target entity in the database.

[0195] As one possible implementation, the page rendering device 1200 may also include:

[0196] The second determining module is used to determine a first scaling ratio of the first target page in response to a scaling operation on the first target page.

[0197] The judgment module is used to determine whether the first scaling ratio has reached the set scaling ratio, where the set scaling ratio is used to display the detailed information of the target entity.

[0198] The third determination module is used to determine at least one second target entity located within the current view of the client from among the target entities when the first zoom level reaches the set zoom level.

[0199] Loading module 1201 is also used to: load detailed information of each second target entity from the server.

[0200] The rendering module 1202 is also used to: render the detail display area of ​​each second target entity and the connection lines between each detail display area on the canvas according to the detail information and entity-level relationship line information of each second target entity, so as to obtain the second target page.

[0201] Display module 1203 is also used to display the second target page.

[0202] As one possible implementation, the rendering module 1202 is specifically used to: load field-level relationship line information from the server; wherein, the field-level relationship information is used to indicate the association relationship between fields within each second target entity; and, based on the details information, entity-level relationship line information, and field-level relationship line information of each second target entity, render the details display area of ​​each second target entity, the connecting lines between each details display area, and the connecting lines between fields in each details display area on the canvas to obtain the second target page.

[0203] As one possible implementation, the page rendering device 1200 may also include:

[0204] The fourth determination module is used to determine the third target entity located in multiple first preloaded areas based on entity-level relationship line information and the first scaling ratio, wherein the first preloaded areas are adjacent to the current view on the canvas.

[0205] Loading module 1201 is also used to: load detailed information of a third target entity from the server.

[0206] As one possible implementation, the page rendering device 1200 may also include:

[0207] The fifth determination module is used to determine the fourth target entity that has been moved into the current view and the fifth target entity that has been moved out in response to the translation operation of the current view.

[0208] The sixth determination module is used to determine the details of the fourth target entity from the details of each third target entity.

[0209] The rendering module 1202 is also used to: render the details display area of ​​the fourth target entity within the current view after translation in the canvas, based on the details information of the fourth target entity.

[0210] The first unloading module is used to unload the details display area of ​​the fifth target entity in the canvas to obtain the updated second target page.

[0211] Display module 1203 is also used to display the updated second target page.

[0212] As one possible implementation, the page rendering device 1200 may also include:

[0213] The seventh determination module is used to determine the sixth target entity located in multiple second preloaded areas based on entity-level relationship line information and the first scaling ratio; wherein the second preloaded area is adjacent to the current view after translation on the canvas.

[0214] Loading module 1201 is also used to: load detailed information of the sixth target entity from the server.

[0215] As one possible implementation, the page rendering device 1200 may also include:

[0216] The scaling module is used to scale the thumbnails of each target entity and the relationship line between the thumbnails of each target entity in the first target page according to the first scaling ratio, when the first scaling ratio is not reached.

[0217] As one possible implementation, the page rendering device 1200 may also include:

[0218] The eighth determination module is used to determine a second scaling ratio of the current view in response to a scaling operation on the current view.

[0219] The second unloading module is used to unload the detail display areas of each second target entity in the canvas and the connecting lines between each detail display area when the second scaling ratio is less than the set scaling ratio.

[0220] The rendering module 1202 is also used to: re-render thumbnails of multiple target entities and the relationship lines between the thumbnails of multiple target entities on the canvas to obtain a third target page.

[0221] Display module 1203 is also used to display a third target page.

[0222] The page rendering apparatus of this application embodiment loads basic information and entity-level relationship line information of multiple target entities from the server via a client. The entity-level relationship line information indicates the association relationships between the multiple target entities. Based on the basic information and entity-level relationship line information of the multiple target entities, thumbnails of the multiple target entities and the relationship lines between the thumbnails are rendered on a canvas to obtain a first target page. The first target page is then displayed. Therefore, by loading and rendering only the basic information and entity-level relationship line information of each target entity during the page initialization loading and rendering phase, the loading and rendering speed can be improved, and the user's waiting time can be reduced. Furthermore, by displaying the relationship lines between entities only in the initially rendered page, and not the relationship lines between fields within entities, the number of relationship lines on the page can be reduced, the complexity of the relationships between entities can be reduced, and the recognizability of the relationships between entities can be enhanced.

[0223] To implement the above embodiments, this application also proposes an electronic device, wherein the electronic device can be any device with computing capabilities, the electronic device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, it implements the page rendering method proposed in any of the foregoing embodiments of this application.

[0224] As an example, Figure 13 This is a schematic diagram of the structure of the electronic device 1300 shown in an exemplary embodiment of this application, as follows: Figure 13 As shown, the aforementioned electronic device 1300 may further include:

[0225] The memory 1310 and the processor 1320 are connected by a bus 1330, which connects different components (including the memory 1310 and the processor 1320). The memory 1310 stores a computer program, and when the processor 1320 executes the program, it implements the page rendering method described in the embodiments of this application.

[0226] Bus 1330 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. Examples of these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0227] Electronic device 1300 typically includes a variety of electronic device readable media. These media can be any available media that can be accessed by electronic device 1300, including volatile and non-volatile media, removable and non-removable media.

[0228] Memory 1310 may also include computer system readable media in the form of volatile memory, such as random access memory (RAM) 1340 and / or cache memory 1350. Server 1300 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 1360 may be used to read and write non-removable, non-volatile magnetic media (… Figure 13 Not shown; usually referred to as a "hard drive"). Although Figure 13 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 1330 via one or more data media interfaces. Memory 1310 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of this application.

[0229] A program / utility 1380 having a set (at least one) of program modules 1370 may be stored, for example, in memory 1310. Such program modules 1370 include—but are not limited to—an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Program modules 1370 typically perform the functions and / or methods described in the embodiments of this application.

[0230] Electronic device 1300 can also communicate with one or more external devices 1390 (e.g., keyboard, pointing device, display 1391, etc.), and with one or more devices that enable a user to interact with electronic device 1300, and / or with any device that enables electronic device 1300 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed via input / output (I / O) interface 1392. Furthermore, electronic device 1300 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 1393. As shown, network adapter 1393 communicates with other modules of electronic device 1300 via bus 1330. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 1300, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0231] The processor 1320 performs various functional applications and data processing by running programs stored in the memory 1310.

[0232] It should be noted that the implementation process and technical principles of the electronic device in this embodiment are explained in the foregoing description of the page rendering method of this application embodiment, and will not be repeated here.

[0233] To implement the above embodiments, this application also proposes a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the page rendering method proposed in any of the foregoing embodiments of this application.

[0234] To implement the above embodiments, this application also proposes a computer program product that, when the instructions in the computer program product are executed by a processor, performs the page rendering method proposed in any of the foregoing embodiments of this application.

[0235] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0236] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0237] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0238] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-included system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of computer-readable media include: an electrical connection having one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Alternatively, the computer-readable medium may be paper or other suitable media on which the program can be printed, since the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in a computer memory.

[0239] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0240] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0241] Furthermore, the functional units in the various embodiments of this application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0242] The storage medium mentioned above can be a read-only memory, a disk, or an optical disk, etc. Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of this application.

Claims

1. A page rendering method, characterized in that, Applied to the client side, including: The server loads basic information and entity-level relationship information of multiple target entities; wherein, the entity-level relationship information is used to indicate the association relationship between the multiple target entities, and the basic information of the target entities includes: the attribute information, name, and type of the target entity; Based on the basic information of the multiple target entities and the entity-level relationship line information, render the thumbnails of the multiple target entities and the relationship lines between the thumbnails of the multiple target entities on the canvas to obtain the first target page; Display the first target page; The loading of basic information and entity-level relationship information of multiple target entities from the server includes: Send a query request to the server; wherein the query request includes a target topic, which is the topic of the data model created by the client; Receive the query response sent by the server; The query response is generated by the server in response to the query request, by querying the database for each target entity under the target topic, obtaining the basic information and entity-level relationship line information of each target entity from the database, and generating the response based on the basic information and entity-level relationship line information of each target entity.

2. The method according to claim 1, characterized in that, After displaying the first target page, the method further includes: In response to a trigger operation on a thumbnail of a first target entity in the first target page, detailed information of the first target entity is loaded from the server. The detailed information includes: attribute information, name, type, and information of each field. Based on the detailed information of the first target entity, render and display the entity details pop-up window corresponding to the first target entity on the first target page; The entity details pop-up window displays at least one of the following: The attribute information of the first target entity; A field list, wherein the field list includes each field within the first target entity; The first relationship line information in the entity-level relationship line information is used to indicate each target entity that has an association with the first target entity.

3. The method according to claim 2, characterized in that, After rendering and displaying the entity details pop-up window corresponding to the first target entity on the first target page based on the details information of the first target entity, the method further includes: In response to a trigger operation on a target field in the field list in the entity details pop-up, a field details pop-up corresponding to the target field is rendered and displayed on the first target page; The field details pop-up window displays at least one of the following: The attribute information of the target field; The second relationship line information corresponding to the target field, wherein the second relationship line information is used to indicate each field that has an association with the target field.

4. The method according to claim 1, characterized in that, After displaying the first target page, the method further includes: In response to a zoom operation on the first target page, a first zoom ratio of the first target page is determined; Determine whether the first scaling ratio has reached the set scaling ratio, wherein the set scaling ratio is used to display the detailed information of the target entity; When the first zoom level reaches the set zoom level, at least one second target entity located within the current view of the client is determined from each of the target entities; Load the detailed information of each of the second target entities from the server; Based on the detailed information and entity-level relationship line information of each second target entity, the detailed display area of ​​each second target entity and the connecting lines between each detailed display area are rendered on the canvas to obtain the second target page and display the second target page.

5. The method according to claim 4, characterized in that, The step of rendering the detail display area of ​​each second target entity and the connecting lines between the detail display areas on the canvas according to the detail information and entity-level relationship line information of each second target entity to obtain the second target page includes: Load field-level relationship information from the server; wherein, the field-level relationship information is used to indicate the association relationship between fields within each of the second target entities; Based on the details of each second target entity, the entity-level relationship line information, and the field-level relationship line information, the details display area of ​​each second target entity, the connecting lines between each details display area, and the connecting lines between fields in each details display area are rendered on the canvas to obtain the second target page.

6. The method according to claim 4, characterized in that, After determining at least one second target entity located within the current view of the client from among the target entities when the first zoom level reaches the set zoom level, the method further includes: Based on the entity-level relationship line information and the first scaling ratio, a third target entity located in a plurality of first preloaded areas is determined from each of the target entities, wherein the first preloaded areas are adjacent to the current view on the canvas; The server loads the detailed information of the third target entity.

7. The method according to claim 6, characterized in that, After loading the details of the third target entity, the method further includes: In response to a translation operation on the current view, determine the fourth target entity that has been moved in and the fifth target entity that has been moved out within the current view after translation; The detailed information of the fourth target entity is determined from the detailed information of each of the third target entities; Based on the details of the fourth target entity, render the details display area of ​​the fourth target entity within the current view after translation in the canvas, and unload the details display area of ​​the fifth target entity in the canvas to obtain the updated second target page; The updated second target page is then displayed.

8. The method according to any one of claims 4-7, characterized in that, The method further includes: If the first scaling ratio does not reach the set scaling ratio, the thumbnails of each target entity in the first target page and the relationship line between the thumbnails of each target entity are scaled according to the first scaling ratio.

9. The method according to any one of claims 4-7, characterized in that, The method further includes: In response to a zoom operation on the current view, a second zoom level for the current view is determined; When the second scaling ratio is less than the set scaling ratio, unload the detail display area of ​​each second target entity in the canvas and the connecting lines between each detail display area; The thumbnails of the multiple target entities and the relationship lines between the thumbnails of the multiple target entities are re-rendered on the canvas to obtain the third target page; Display the third target page.

Images