Web page display method, web page display system and readable storage medium

Abstract

The embodiments of the present invention provide a web page display method, a web page display system, and a readable storage medium. The web page display method includes: obtaining at least one query condition on the web page; setting any query condition as a navigation condition; rendering the web page so that the first preset position on the web page displays a navigation area, wherein the navigation area includes the navigation condition. The web page display method provided by the embodiments of the present invention achieves the above-mentioned purpose of adding a navigation area to the web page by setting any query condition on the web page as a navigation condition and rendering the web page so that the first preset position on the web page displays a navigation area. The front end adds a navigation area to the web page by setting the query condition as a navigation condition. During development, there is no need to configure a tree model for the front end, which reduces the development difficulty and improves the development efficiency.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a web page display method, a web page display system, and a readable storage medium. Background Art

[0002] Traditionally, developing a web page displaying a tree table requires developing a tree component, a query area container, and a table component. Business data is retrieved and displayed through front-end and back-end interaction. Displaying different data for different scenarios requires providing multiple business data interfaces, and front-end components must be adjusted at the code level to implement the functionality, making development a cumbersome task. Summary of the Invention

[0003] The present invention aims to solve at least one of the technical problems existing in the prior art or related art.

[0004] To this end, a first aspect of an embodiment of the present invention is to propose a web page display method.

[0005] A second aspect of the embodiments of the present invention is to provide a web page display system.

[0006] A third aspect of the embodiments of the present invention provides a readable storage medium.

[0007] In view of this, according to the first aspect of an embodiment of the present invention, a web page display method is proposed, including: obtaining at least one query condition on the web page; setting any query condition as a navigation condition; rendering the web page so that a navigation area is displayed at a first preset position on the web page, wherein the navigation area includes the navigation condition.

[0008] The web page display method provided by the embodiment of the present invention sets any query condition on the web page as a navigation condition and renders the web page so that the first preset position on the web page displays the navigation area, thereby achieving the above-mentioned purpose of adding a navigation area to the web page. The front end sets the query condition as the navigation condition to achieve the addition of the navigation area to the web page. On the one hand, during development, there is no need to configure a tree model for the front end, which reduces the development difficulty and improves the development efficiency. On the other hand, when the navigation area is displayed at the first preset position on the web page, since the method of setting the query condition of the front end as the navigation condition is adopted, the front end no longer needs to interact with the back end to retrieve business data from the back end, which improves the speed of web page display, reduces the development difficulty, and reduces the development tasks. In addition, when displaying different data through different demand scenarios, since the front end does not need to interact with the back end to retrieve data, it is no longer necessary to provide multiple sets of business data interfaces for data interaction between the front end and the back end, which greatly reduces the development tasks, reduces the development difficulty, and reduces the development cost.

[0009] In addition, the webpage display method in the above technical solution provided by the present invention may also have the following additional technical features:

[0010] In the above technical solution, before the step of obtaining at least one query condition on the web page, it also includes: obtaining metadata of the web page, wherein the metadata includes a list model and a query model; rendering the metadata to generate a visual interface for the web page.

[0011] In this technical solution, metadata for a web page is acquired and rendered to generate a visual interface. Since tree model metadata is not required, the amount of metadata required is reduced, the speed of metadata retrieval is increased, and thus the speed of generating the visual interface is increased. Furthermore, for front-ends that need to display different data for different demand scenarios, there is no need to provide multiple tree models. This fundamentally solves the problem of heavy development workloads, significantly reduces development tasks, eases development difficulty, and reduces development costs.

[0012] In any of the above technical solutions, the step of rendering the metadata specifically includes: parsing the metadata to generate an initial page; and rendering the initial page to generate a visual interface.

[0013] In this technical solution, metadata is parsed through a front-end public framework, page initialization rendering is performed to generate an initial page, and then the initial page is rendered through the web page rendering engine to generate a visual interface for user use.

[0014] In any of the above technical solutions, the web page display method further includes: setting any navigation condition to display navigation; rendering the navigation area so that the navigation condition is displayed on the navigation area.

[0015] In this technical solution, by setting any navigation condition to display navigation and rendering the navigation area, the navigation condition set to display navigation can be displayed in the navigation area. Since only navigation conditions set to display navigation can be displayed in the navigation area, navigation conditions not set to display navigation are not in the navigation area, that is, navigation conditions not set to display navigation are hidden in the navigation area. On the one hand, since the navigation conditions displayed in the navigation area can be customized, the flexibility of the navigation area is improved. On the other hand, the navigation area does not need to display all navigation conditions, but only displays the display navigation required by the user, thereby reducing the area of ​​the first preset position occupied by the navigation area on the web page, thereby allowing the web page to provide a larger display area for other areas.

[0016] In any of the above technical solutions, the step of rendering the navigation area specifically includes: sending a rendering request to a rendering engine; and the rendering engine rendering the navigation area.

[0017] This technical solution uses the web page's rendering engine to render the navigation area. This eliminates the need for separate rendering components, reducing development workload and eases development difficulty. Furthermore, because only the navigation area—that is, the navigation area at the first preset position on the web page—is rendered, while other unchanged areas on the web page are not rendered, rendering speed is greatly improved, thereby increasing the display speed of the web page.

[0018] In any of the above technical solutions, the web page display method also includes: setting any navigation condition as a query condition; rendering the web page so that a second preset position on the web page displays a query area, wherein the query area includes the query condition.

[0019] In this technical solution, by setting any navigation condition as a query condition and rendering the web page, on the one hand, the purpose of modifying the navigation conditions of the navigation area is achieved. The navigation condition set as a query condition will no longer belong to the navigation area, that is, it will neither be set as a display navigation to be displayed in the navigation area nor exist in a hidden state in the navigation area. On the other hand, by switching the common conditions on the web page (i.e., query conditions, navigation conditions, etc.) between navigation conditions and query conditions, the purpose of controlling whether the common conditions on the web page are displayed in the navigation area or in the query area is achieved. No page rule configuration is required, and this can be achieved through page operations such as mouse clicks.

[0020] In any of the above technical solutions, the query areas are displayed in the form of a list on the web page.

[0021] In this technical solution, the purpose of quickly displaying a list on a web page is achieved by displaying the query area in the form of a list on the web page. By switching between navigation conditions and query conditions, a quick switch between the tree table and the list is achieved, thereby achieving the setting of which common conditions in the current web page are displayed in the query area and which common conditions are displayed in the navigation area, thereby achieving the purpose of setting the content of the navigation area and the content of the query area according to the current scene. In addition, since the front end does not need to retrieve the data of the tree node from the back end, that is, there is no need to configure multiple sets of data interfaces for data exchange, the development task is greatly reduced, the development difficulty is reduced, and the navigation conditions are provided by the query conditions of the query area, there is no need to configure multiple sets of tree model metadata, which fundamentally solves the problem of heavy development tasks. Furthermore, during the use of the web page, the common conditions on the web page can be switched between query conditions and navigation conditions according to the needs of different scenarios, which greatly improves the flexibility of the web page.

[0022] In any of the above technical solutions, the navigation area is displayed in the form of a tree table on the web page.

[0023] This technical solution uses a navigation area to display a tree table on a web page, achieving the goal of quickly displaying a tree table on the web page. This eliminates the need to configure a separate tree model for the web page, thus reducing development workload and improving development efficiency. Furthermore, query conditions set as navigation conditions can be customized by the user, greatly increasing the flexibility of the web page.

[0024] According to a second aspect of an embodiment of the present invention, the present invention provides a web page display system, including: a memory, the memory storing a program or instruction; a processor, the processor executing the program or instruction to implement the steps of the web page display method in any technical solution of the first aspect.

[0025] Embodiments of the present invention provide a webpage display system comprising a memory and a processor. When executing a program or instruction, the processor is capable of implementing the steps of the webpage display method of any of the technical solutions of the first aspect. Therefore, the system has all the beneficial technical effects of the webpage display method of any of the technical solutions of the first aspect, and will not be further elaborated here.

[0026] According to a third aspect of an embodiment of the present invention, the present invention provides a readable storage medium having a program or instruction stored thereon, which, when executed by a processor, implements the steps of the web page display method provided by any technical solution of the first aspect.

[0027] The readable storage medium provided by the embodiment of the present invention can implement the steps of the web page display method provided by any technical solution of the first aspect. Therefore, it has all the beneficial technical effects of the web page display method provided by any technical solution of the first aspect, which will not be repeated here.

[0028] Additional aspects and advantages of the invention will become apparent from the description which follows, or may be learned by practice of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] The above and / or additional aspects and advantages of the present invention will become apparent and readily understood from the following description of the embodiments with reference to the accompanying drawings, in which:

[0030] Figure 1 A flowchart showing a web page display method according to an embodiment of the present invention is shown;

[0031] Figure 2 A flowchart showing a web page display method according to another embodiment of the present invention is shown;

[0032] Figure 3 A flowchart showing a web page display method according to another embodiment of the present invention is shown;

[0033] Figure 4 A flowchart showing a web page display method according to another embodiment of the present invention is shown;

[0034] Figure 5 A flowchart showing a web page display method according to another embodiment of the present invention is shown;

[0035] Figure 6 A flowchart showing a web page display method according to another embodiment of the present invention is shown;

[0036] Figure 7 A structural diagram of a web page display system according to an embodiment of the present invention is shown;

[0037] Figure 8 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0038] Figure 9 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0039] Figure 10 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0040] Figure 11 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0041] Figure 12A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0042] Figure 13 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0043] Figure 14 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0044] Figure 15 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0045] Figure 16 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0046] Figure 17 A schematic diagram showing a web page display method according to an embodiment of the present invention;

[0047] Figure 18 A schematic diagram showing a web page display method according to an embodiment of the present invention is shown.

[0048] The corresponding relationship between the reference numerals and component names is as follows:

[0049] 700 web page display system, 702 memory, 704 processor, 800 query area, 802 query conditions, 804 navigation area, 806 navigation conditions, 808 display navigation area, 810 display navigation, 812 display setting area, 814 display navigation setting area, 816 list area, 818 table item, 820 table item setting menu, 900 visual interface. DETAILED DESCRIPTION

[0050] In order to more clearly understand the above-mentioned objects, features and advantages of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be noted that, in the absence of conflict, the embodiments of the present application and the features therein can be combined with each other.

[0051] In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention may also be implemented in other ways different from those described herein. Therefore, the scope of protection of the present invention is not limited to the specific embodiments disclosed below.

[0052] Refer to the following Figures 1 to 18 A web page display method, a web page display system, and a readable storage medium are described according to some embodiments of the present invention.

[0053] Example 1

[0054] like Figure 1 As shown, embodiment 1 provides a web page display method, including:

[0055] Step 102: Obtain at least one query condition on the web page;

[0056] Step 104, setting any query condition as a navigation condition;

[0057] Step 106 : Rendering the webpage so that a navigation area is displayed at a first preset position on the webpage, wherein the navigation area includes navigation conditions.

[0058] The web page display method provided by the embodiment of the present invention sets any query condition on the web page as a navigation condition and renders the web page so that the first preset position on the web page displays the navigation area, thereby achieving the above-mentioned purpose of adding a navigation area to the web page. The front end sets the query condition as the navigation condition to achieve the addition of the navigation area to the web page. On the one hand, during development, there is no need to configure a tree model for the front end, which reduces the development difficulty and improves the development efficiency. On the other hand, when the navigation area is displayed at the first preset position on the web page, since the method of setting the query condition of the front end as the navigation condition is adopted, the front end no longer needs to interact with the back end to retrieve business data from the back end, which improves the speed of web page display, reduces the development difficulty, and reduces the development tasks. In addition, when displaying different data through different demand scenarios, since the front end does not need to interact with the back end to retrieve data, it is no longer necessary to provide multiple sets of business data interfaces for data interaction between the front end and the back end, which greatly reduces the development tasks, reduces the development difficulty, and reduces the development cost.

[0059] Furthermore, in this embodiment, the step of rendering the webpage specifically includes rendering a first preset location on the webpage. By rendering the first preset location on the webpage, the navigation area is displayed at the first preset location. Since only a portion of the webpage is rendered, the rendering speed is increased, thereby increasing the display speed of the webpage.

[0060] Furthermore, in an embodiment, the navigation area is displayed on the web page in the form of a tree table. This allows for quick tree display on the web page, eliminating the need to configure a separate tree model for the web page. This reduces development workload and improves development efficiency. Furthermore, query conditions set as navigation conditions can be customized by the user, significantly increasing the flexibility of the web page.

[0061] Example 2

[0062] Based on Example 1, Example 2 provides a web page display method, which further limits the step of obtaining at least one query condition on the web page to: obtaining metadata of the web page, wherein the metadata includes a list model and a query model; and rendering the metadata to generate a visual interface for the web page.

[0063] In a specific embodiment, Figure 2 As shown, a web page display method includes:

[0064] Step 202: Obtain metadata of the webpage, wherein the metadata includes a list model and a query model;

[0065] Step 204: Render the metadata to generate a visual interface for the web page;

[0066] Step 206, obtaining at least one query condition on the web page;

[0067] Step 208, setting any query condition as a navigation condition;

[0068] Step 210 : Rendering the webpage so that a navigation area is displayed at a first preset position on the webpage, wherein the navigation area includes navigation conditions.

[0069] In this embodiment, metadata for a web page is acquired and rendered to generate a visual interface for the web page. Since tree model metadata does not need to be acquired, the amount of metadata required is reduced, the speed of metadata retrieval is increased, and thus the speed of generating the visual interface is increased. Furthermore, for front-ends that need to display different data according to different demand scenarios, there is no need to provide multiple tree models. This solves the problem of requiring multiple sets of metadata for page descriptions on multiple pages, fundamentally resolving the issue of heavy development workloads, significantly reducing development workload, difficulty, and cost.

[0070] Furthermore, in this embodiment, the step of rendering the metadata specifically includes: parsing the metadata to generate an initial page; and rendering the initial page to generate a visual interface. Specifically, the metadata is parsed by the front-end public framework, and page initialization rendering is performed to generate the initial page. The initial page is then rendered by the web page rendering engine to generate a visual interface for the user.

[0071] Furthermore, in this embodiment, when a user first uses a webpage, the generated visualization page only includes the list area generated by the list model and the query area generated by the query model. When the user is not using the webpage for the first time, the visualization interface is configured based on the user's settings from the last time they used the webpage. For example, if the user set a navigation area on the webpage during their last use, the visualization interface will include the list area generated by the list model, the query area generated by the query model, and the navigation area composed of navigation conditions when the user uses the webpage again.

[0072] like Figure 8 As shown, in a specific embodiment, metadata of a web page is obtained and rendered to generate a visual interface 900 for the web page.

[0073] Furthermore, if Figure 9 、 Figure 10 、 Figure 11 and Figure 12 As shown, at least one query condition 802 on a web page is obtained, any query condition 802 is set as a navigation condition 806, and the web page is rendered so that a navigation area 804 is displayed at a first preset position on the web page, wherein the navigation area 804 includes the navigation condition 806. Specifically, the query condition 802 can be set as the navigation condition 806 by the following method: Figure 10 and Figure 11 The setting method shown is that each common condition (such as a warehouse) is configured with a display setting area 812 for setting the display position. The display setting area 812 is used to set the common condition to be displayed in the navigation area or the query area. The display setting area 812 is configured with two drop-down menus, one for the navigation area and the other for the query area, for the user to set whether the common condition is displayed in the navigation area or in the query area. It is understandable that when the display position of the common condition is set to the navigation area, the common condition is displayed in the navigation area, and when the display position of the common condition is set to the query area, the common condition is displayed in the query area.

[0074] Example 3

[0075] Based on any of the above embodiments, Figure 3 As shown, embodiment 3 provides a web page display method, further limiting the web page display method to further include:

[0076] Step 302, setting any navigation condition to display navigation;

[0077] Step 304: Render the navigation area so that the navigation conditions are displayed on the navigation area.

[0078] In this embodiment, by setting any navigation condition to display navigation and rendering the navigation area, the navigation condition set to display navigation can be displayed in the navigation area. Since only navigation conditions set to display navigation can be displayed in the navigation area, navigation conditions not set to display navigation are not in the navigation area, that is, navigation conditions not set to display navigation are hidden in the navigation area. On the one hand, since the navigation conditions displayed in the navigation area can be customized, the flexibility of the navigation area is improved. On the other hand, the navigation area does not need to display all navigation conditions, only the navigation conditions required by the user are displayed, thereby reducing the area of ​​the first preset position occupied by the navigation area on the web page, thereby allowing the web page to provide a larger display area for other areas. Specifically, in one embodiment, when the navigation area includes only one navigation condition, the one navigation condition is set to display navigation, and the one navigation condition is displayed in the navigation area. In another embodiment, when the navigation area includes at least two navigation conditions, any one of the navigation conditions can be set to display navigation. In this case, only the navigation condition set to display navigation can be displayed in the navigation area, and the navigation condition not set to display navigation is hidden and not displayed in the navigation area of ​​the page.

[0079] Furthermore, in this embodiment, the step of rendering the navigation area specifically includes: sending a rendering request to a rendering engine; and the rendering engine rendering the navigation area. By using the webpage's rendering engine to render the navigation area, on the one hand, there is no need to configure a separate rendering component, which reduces the development workload and eases the development difficulty. On the other hand, because only the navigation area is rendered, that is, only the navigation area at the first preset position of the webpage is rendered, and other unchanged areas of the webpage are not rendered, the rendering speed is greatly improved, thereby increasing the display speed of the webpage.

[0080] In this embodiment, by setting the query condition as the navigation condition and setting the navigation condition as the display navigation, the purpose of configuring the page according to the required scenario can be achieved, so that different required scenarios need to be displayed, and there is no need to modify the model and other configurations of the metadata template, nor is there any need to configure more complex interaction rules for switching between lists and tree tables.

[0081] In this embodiment, by quickly setting navigation conditions and quickly setting the navigation conditions displayed in the navigation area (i.e., displaying navigation), on-demand binding and presentation of data are achieved. According to the requirements of different scenarios, it is determined whether the common conditions on the web page (i.e., navigation conditions, query conditions, etc.) are displayed in the query area or in the navigation area. That is, according to the current scenario requirements, it is determined which common conditions are displayed in the navigation area and which navigation condition is currently displayed in the navigation area. By abstracting all operations into the page operations of the web page, when implementing different demand scenarios and generating different navigation areas, there is no need for secondary development or reconfiguration of metadata templates. In addition, it is possible to achieve rapid switching between the query area and the navigation area (i.e., to achieve a list and a tree table), and it is possible to adapt to the combination of different query areas and navigation areas (different trees and tables) for different demand scenarios. No page rule configuration is required, and it can be achieved only through page operations such as mouse clicks, which greatly reduces the development workload and easily enables different tenants of the SAAS system to customize different tree table navigation filtering scenarios.

[0082] like Figure 13 、 Figure 14 、 Figure 15 In a specific embodiment, any navigation condition 806 is set to display navigation 810, and the navigation area 804 is rendered so that the navigation condition 806 is displayed on the navigation area 804, wherein the display navigation 810 is displayed in the display navigation area 808. Specifically, the navigation condition 806 is set to display navigation 810. Figure 15 and Figure 16 The setting method shown is that each navigation area 804 is configured with a display navigation setting area 814 for setting the display navigation 810. The display navigation setting area 814 is used to set the navigation condition 806 to be displayed in the display navigation area 808. The display navigation setting area 814 is configured with a drop-down menu. The drop-down menu displays the navigation condition 806 to be selected, so that the user can set any navigation condition 806 to be selected to be displayed in the display navigation area 808. For example, if the supplier is set as the display navigation, the display navigation displayed in the display navigation area is the supplier. Furthermore, the webpage also includes a list area 816. The list area 816 includes multiple items 818. For any display navigation 810, the item 818 that the display navigation 810 needs to display in the list area 816 can also be set. The specific setting method can be used Figure 17 In the method shown, the table item 818 is configured with a table item setting menu 820 for setting whether the table item 818 is displayed in the list area 816.

[0083] Example 4

[0084] Based on any of the above embodiments, Figure 4As shown, the fourth embodiment provides a web page display method, which further defines the web page display method as including:

[0085] Step 402, setting any navigation condition as a query condition;

[0086] Step 404 : Render the webpage so that a query area is displayed at a second preset position on the webpage, wherein the query area includes the query condition.

[0087] In this embodiment, by setting any navigation condition as a query condition and rendering the web page, on the one hand, the purpose of modifying the navigation conditions of the navigation area is achieved. The navigation condition set as a query condition will no longer belong to the navigation area, that is, it will neither be set as a display navigation to be displayed in the navigation area nor exist in a hidden state in the navigation area. On the other hand, by switching the common conditions on the web page (i.e., query conditions, navigation conditions, etc.) between navigation conditions and query conditions, the purpose of controlling whether the common conditions on the web page are displayed in the navigation area or in the query area is achieved. No page rule configuration is required, and this can be achieved through page operations such as mouse clicks.

[0088] Furthermore, in one embodiment, the step of rendering the webpage specifically includes rendering a second preset location on the webpage. By rendering the second preset location on the webpage, the query area is displayed at the second preset location. Since only a portion of the webpage is rendered, the rendering speed is increased, thereby increasing the display speed of the webpage.

[0089] Furthermore, in another embodiment, the step of rendering the webpage specifically includes rendering a first preset location and a second preset location on the webpage. By rendering the first preset location and the second preset location on the webpage, the query area is displayed at the second preset location, while the navigation area is displayed at the first preset location. Furthermore, the size of the navigation area is adjusted based on the number of navigation conditions in the navigation area, and the space occupied by the navigation area on the webpage is rearranged. Since only a portion of the webpage is rendered, the rendering speed is improved, thereby increasing the webpage display speed.

[0090] Furthermore, in another embodiment, the step of rendering the webpage specifically includes rendering the entire webpage. By rendering only the entire webpage, the distribution of various display areas (i.e., navigation area, query area, or list area, etc.) on the entire webpage can be rearranged, and the space occupied by each display area can be adjusted based on the number of display areas, thereby improving the flexibility of page display.

[0091] Furthermore, in this embodiment, the query area is displayed in the form of a list on the web page. By displaying the query area in the form of a list on the web page, the purpose of quickly displaying the list on the web page is achieved. By switching between the navigation conditions and the query conditions, a quick switch between the tree table and the list is achieved, thereby achieving the setting of which common conditions in the page of the current web page are displayed in the query area and which common conditions are displayed in the navigation area, thereby achieving the purpose of setting the content of the navigation area and the content of the query area according to the current scenario. In addition, since the front end does not need to retrieve the data of the tree node from the back end, that is, there is no need to configure multiple sets of data interfaces for data exchange, the development task is greatly reduced and the development difficulty is reduced. Moreover, the navigation conditions are provided by the query conditions of the query area, and there is no need to configure multiple sets of tree model metadata, which fundamentally solves the problem of heavy development tasks. Furthermore, during the use of the web page, the common conditions on the web page can be switched between query conditions and navigation conditions according to the needs of different scenarios, which greatly improves the flexibility of the web page.

[0092] like Figure 16 、 Figure 17 and Figure 18 As shown, in a specific embodiment, any navigation condition 806 is set as the query condition 802, and the web page is rendered so that the second preset position on the web page displays the query area 800, wherein the query area 800 includes the query condition 802.

[0093] Example 5

[0094] Based on any of the above embodiments, Figure 5 As shown, embodiment 5 provides a web page display method, including:

[0095] Step 502: Obtain metadata of the webpage, wherein the metadata includes a list model and a query model;

[0096] Step 504: Render the metadata to generate a visual interface for the web page;

[0097] Step 506, obtaining at least one query condition on the web page;

[0098] Step 508, setting any query condition as a navigation condition;

[0099] Step 510: Rendering the webpage so that a navigation area is displayed at a first preset position on the webpage, wherein the navigation area includes navigation conditions;

[0100] Step 512, setting any navigation condition to display navigation;

[0101] Step 514: Render the navigation area so that the navigation conditions are displayed on the navigation area.

[0102] In this embodiment, the user selects the navigation conditions to be displayed in the navigation area according to the needs of different scenarios. By setting any navigation condition to display navigation and rendering the navigation area, the navigation condition set to display navigation can be displayed in the navigation area. Since only the navigation conditions set to display navigation can be displayed on the navigation area, the navigation conditions that are not set to display navigation are not on the navigation area, that is, the navigation conditions that are not set to display navigation are hidden in the navigation area. On the one hand, since the navigation conditions being displayed in the navigation area can be customized, the flexibility of the navigation area is improved. On the other hand, the navigation area does not have to display all navigation conditions, but only displays the display navigation required by the user, thereby reducing the area of ​​the first preset position occupied by the navigation area on the web page, thereby enabling the web page to provide a larger display area for other areas. Specifically, in one embodiment, when the navigation area includes only one navigation condition, the one navigation condition is set to display navigation, and the one navigation condition is displayed on the navigation area. In another embodiment, when the navigation area includes at least two navigation conditions, any one of the navigation conditions can be set to display navigation. At this time, only the navigation condition set to display navigation can be displayed on the navigation area, and the navigation condition not set to display navigation is hidden and not displayed in the navigation area of ​​the page.

[0103] Example 6

[0104] Based on any of the above embodiments, Figure 6 As shown, embodiment 6 provides a web page display method, including:

[0105] Step 602: Obtain metadata of the webpage, wherein the metadata includes a list model and a query model;

[0106] Step 604: Render the metadata to generate a visual interface for the web page;

[0107] Step 606, obtaining at least one query condition on the web page;

[0108] Step 608, setting any query condition as a navigation condition;

[0109] Step 610: Render the webpage so that a navigation area is displayed at a first preset position on the webpage, wherein the navigation area includes navigation conditions.

[0110] Step 612, setting any navigation condition as a query condition;

[0111] Step 614 : Render the webpage so that a query area is displayed at a second preset position on the webpage, wherein the query area includes the query condition.

[0112] In this embodiment, users can set navigation conditions as query conditions based on the needs of different scenarios. This causes the public conditions set as query conditions to switch display areas, switching from displaying them in the navigation area to displaying them in the query area, i.e., switching from a tree view to a list view. By switching public conditions (i.e., query conditions, navigation conditions, etc.) on a web page between navigation conditions and query conditions, the purpose of controlling whether the public conditions on a web page are displayed in the navigation area or in the query area is achieved. This is achieved without any page rule configuration, and can be achieved simply through page operations such as mouse clicks.

[0113] Example 7

[0114] like Figure 7 As shown, embodiment seven provides a web page display system 700, including: a memory 702, the memory 702 stores a program or instruction; a processor 704, the processor 704 executes the program or instruction to implement the steps of the web page display method in any of the above technical solutions.

[0115] The webpage display system 700 provided in this embodiment of the present invention includes a memory 702 and a processor 704. When executing a program or instruction, the processor 704 can implement the steps of the webpage display method in any of the above-mentioned technical solutions. Therefore, the system has all the beneficial technical effects of the webpage display method provided by any of the above-mentioned technical solutions, which will not be further described here.

[0116] Example 8

[0117] Embodiment 8 provides a readable storage medium on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps of the web page display method provided by any of the above technical solutions are implemented.

[0118] The readable storage medium provided in the embodiment of the present invention can implement the steps of the web page display method provided by any of the above technical solutions. Therefore, it has all the beneficial technical effects of the web page display method provided by any of the above technical solutions, which will not be repeated here.

[0119] It should be noted that in the claims, any reference signs placed between parentheses shall not be construed as limiting the claims. The word "comprising" does not exclude the presence of components or steps not listed in the claim. The word "a" or "an" preceding a component does not exclude the presence of a plurality of such components. The invention can be implemented by means of hardware comprising several different components and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means may be embodied by one and the same item of hardware. The use of the words first, second, third etc. does not indicate any order. These words may be interpreted as names.

[0120] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0121] The above are merely preferred embodiments of the present invention and are not intended to limit the present invention. Those skilled in the art will readily appreciate that various modifications and variations of the present invention are possible. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention shall be included within the scope of protection of the present invention.

Claims

1. A web page display method, characterized in that: include: Obtain at least one query condition on the web page; Setting any of the query conditions as a navigation condition; Rendering the webpage so that a navigation area is displayed at a first preset position on the webpage. Wherein, the navigation area includes the navigation condition; Setting any of the navigation conditions as a query condition; Rendering the webpage so that a second preset position on the webpage displays a query area, Wherein, the query area includes the query condition; The webpage further includes a list area, the list area includes a plurality of items, and for any display navigation, the item that the display navigation needs to display in the list area is set; Before the step of obtaining at least one query condition on the web page, the method further includes: Obtaining metadata of a webpage, wherein the metadata includes a list model and a query model; Rendering the metadata to generate a visual interface for the web page; When a user uses a web page for the first time, the generated visualization page includes a list area generated by the list model and a query area generated by the query model. When a user does not use the web page for the first time, the visualization interface is configured according to the settings of the user's last use.

2. The web page display method according to claim 1, characterized in that: The step of rendering the metadata specifically includes: Parsing the metadata to generate an initial page; The initial page is rendered to generate the visual interface.

3. The web page display method according to claim 2, characterized in that: The webpage display method further includes: Setting any one of the navigation conditions as the display navigation; Rendering is performed on the navigation area so that the navigation condition is displayed on the navigation area.

4. The web page display method according to claim 3, characterized in that: The step of rendering the navigation area specifically includes: Send rendering request to rendering engine; The rendering engine renders the navigation area.

5. The web page display method according to claim 1, characterized in that: The query areas are displayed in the form of a list on the web page.

6. The web page display method according to any one of claims 1 to 4, characterized in that: The navigation area is displayed in the form of a tree table on the web page.

7. A web page display system, characterized in that: include: a memory storing programs or instructions; A processor, wherein the processor executes a program or an instruction to implement the steps of the web page display method according to any one of claims 1 to 6.

8. A readable storage medium having a program or instruction stored thereon, characterized in that: When the program or instruction is executed by a processor, the steps of the web page display method according to any one of claims 1 to 6 are implemented.

Images