Page display method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a page display method and device, electronic equipment and storage medium, and relate to the technical field of computers. In the case of opening a page, if a selection operation on a target page component in the page component is obtained, display data corresponding to the target page component is obtained from a server, the target page component is rendered based on the display data, data is requested on demand, corresponding content is automatically displayed, and the page is rendered, thereby overcoming the problem of browser resource waste in related technologies.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a page display method and device, electronic equipment and storage medium. BACKGROUND

[0002] In the related art, the way of writing a page is to write the attribute name fixedly, reassign values to the attribute in the life cycle, or load all components of the page into the current program at one time, so as to make the user have an experience of using a local application. However, this method will cause the current page to be replaced with the corresponding field as soon as the server modifies the data field, which will affect the performance of the browser. SUMMARY

[0003] In view of the above problems, the present application provides a page display method and device, electronic equipment and storage medium to at least solve the problems in the related art.

[0004] In the first aspect, the embodiments of the present application provide a page display method, comprising:

[0005] In the case of opening a page, the page is displayed, wherein the page comprises a page component;

[0006] In the case of obtaining a selection operation on a target page component in the page component, the display data corresponding to the target page component is obtained from the server;

[0007] The target page component is rendered based on the display data.

[0008] In an embodiment, the page display method further comprises:

[0009] A layout framework of the page is constructed;

[0010] A page component is added in the layout framework, and a display variable of the page component is set as responsive data;

[0011] Display data corresponding to the page component is obtained;

[0012] A corresponding relationship between the display variable of each page component and the display data is established, and an ID of the page is defined, so as to open the page through the ID.

[0013] In an embodiment, the above establishing a corresponding relationship between the display variable of each page component and the display data comprises:

[0014] Initializing each display variable of the responsive writing;

[0015] The display data corresponding to each display variable is obtained based on a life cycle function call interface;

[0016] The display data is stored in the display variable to establish a corresponding relationship between the display variable of each page component and the display data.

[0017] In an embodiment, the page component includes a document object model, and the target page component is rendered based on the display data, including:

[0018] The display data is processed through array traversal to confirm the corresponding document object model;

[0019] The target page component displays the document object model.

[0020] In an embodiment, the page component includes a document object model, and the target page component is rendered based on the display data, including:

[0021] The display data is processed through array filtering to obtain classified array data;

[0022] The classification field is determined based on the classified array data;

[0023] The target page component displays the document object model corresponding to the classification field based on the classification field.

[0024] In an embodiment, the page display method further includes:

[0025] The page component is encapsulated as a dynamic component, wherein the display variable of the page component is defined based on the responsive variable.

[0026] In a second aspect, the embodiments of the present application provide a page display device, including: a display module, configured to display a page in a case where the page is opened, wherein the page includes a page component; an acquisition module, configured to acquire display data corresponding to a target page component from a server in a case where a selection operation for the target page component in the page component is acquired; and a rendering module, configured to render the target page component based on the display data.

[0027] In an embodiment, the page display device further includes: a construction module, configured to construct a layout framework of the page; an addition module, configured to add a page component in the layout framework and set a display variable of the page component as responsive data; a display data acquisition module, configured to acquire display data corresponding to a page component; and an establishment module, configured to establish a corresponding relationship between a display variable of each page component and the display data, and define an ID of the page to open the page through the ID.

[0028] In a third aspect, an electronic device is provided, and the device includes at least one processor and a memory. The processor is configured to execute a computer program stored in the memory to implement the method for displaying a page according to any one of the embodiments of the first aspect.

[0029] In a fourth aspect, a computer storage medium is provided, and the computer storage medium stores one or more programs, and the one or more programs are executable by an electronic device as described in the third aspect to implement the method for displaying a page according to any one of the embodiments of the first aspect.

[0030] The method and device for displaying a page, the electronic device, and the storage medium provided in the embodiments of the present application can obtain display data corresponding to a target page component from a server in a case where the target page component is selected in a case where a page is opened, render the target page component based on the display data, and automatically display corresponding content, so as to render the page, thereby overcoming the problem of waste of browser resources in the related art.

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

[0032] The present application will be described in more detail below based on the embodiments and with reference to the accompanying drawings.

[0033] Figure 1 A flowchart of a method for displaying a page according to an embodiment of the present application is shown;

[0034] Figure 2 Another flowchart of a method for displaying a page according to an embodiment of the present application is shown;

[0035] Figure 3 A flowchart of step S240 in a method for displaying a page according to an embodiment of the present application is shown;

[0036] Figure 4 A block diagram of a device for displaying a page according to an embodiment of the present application is shown;

[0037] Figure 5 A block diagram of an electronic device for executing a method for displaying a page according to an embodiment of the present application is shown;

[0038] Figure 6The computer readable storage medium for storing or carrying a display method of a page according to the embodiments of the present application is shown. DETAILED DESCRIPTION

[0039] In order to make the objects, technical solutions and advantages of the present application clearer, further detailed description will be made to the present application in combination with embodiments and drawings, the illustrative embodiments of the present application and the description thereof are only used to explain the present application, and do not limit the present application.

[0040] In the related art, there are some problems in real-time of the page, for example, the price, inventory, product picture and the like of the page of the online shopping mall need to be changed with the data of the server, instead of recompiling the code.

[0041] In the way of writing the page, the attribute name is written dead, the attribute is revalued in the life cycle or the method, or all the components of the page are loaded into the current program at the first request, the purpose is to make the user have an experience of using the local application program, and there is a problem of affecting the performance of the browser.

[0042] In view of the above problems, the applicant proposes the display method, device, electronic equipment and storage medium of the page according to the embodiments of the present application, by obtaining the display data corresponding to the target page component from the server in the case that the selection operation of the target page component in the page component is obtained in the case that the page is opened, and rendering the target page component based on the display data, the corresponding content is automatically displayed on demand, and the page is rendered. The display method of the page is described in detail in the subsequent embodiments.

[0043] Before the embodiments of the present application are described, the following terms are described:

[0044] HTML (Hyer Text Markup Language) is a markup language. It includes a series of tags, and the information to be expressed is written into an HTML file according to a certain rule, and the HTML file is recognized by a special browser, and the HTML file is "translated" into information that can be recognized, that is, the web page seen.

[0045] DOM (Document Object Model) is a set of APIs for HTML and XML files. The essence of DOM is to build a bridge between the web page and the script language or the program language.

[0046] DIV (DIVision) is the position and hierarchy of the cascading style sheet unit, and the DIV element is used to provide structure and background elements for the content of the block-lever in the HTML document.

[0047] The following describes the application scenarios of the page display method provided in the embodiments of this application:

[0048] Please see Figure 1 , Figure 1 This is a flowchart illustrating a page display method provided in an embodiment of this application. It should be understood that the page display method 100 involved in the embodiments of this application can be applied to, for example... Figure 4 The page shown is displayed by the display device 400 and the electronic device 200. Figure 5 In this context, the electronic device 200 can be one or more devices, such as a smartphone, tablet, computer, or portable computer, etc., and this application does not specifically limit the specific devices in this regard.

[0049] The various embodiments of this application will now be described in detail with reference to the accompanying drawings.

[0050] Figure 1 This is a flowchart illustrating a page display method provided in an embodiment of this application. The method may include steps S110 to S130.

[0051] Step S110: If the page is open, display the page, which includes page components.

[0052] In this embodiment of the application, the page component can be a dynamic page component.

[0053] Step S120: If a selection operation is obtained for the target page component in the page components, obtain the display data corresponding to the target page component.

[0054] For example, if a category button API returns data with three types, the dynamic component will generate three buttons based on these three types of fields to filter data that matches that type. For instance, if a category button API returns data with three types: dessert, meat, and snacks, the dynamic component will generate three buttons based on these three fields to filter data that matches that type.

[0055] Step S130: Render the target page component based on the display data.

[0056] In the embodiment of the present application, in the case that the selection operation for the target page component in the page component is acquired, the display data corresponding to the target page component is acquired, and the target page component is rendered based on the display data. After the user selects the target page component needed in the page, the display data corresponding to the target component is obtained from the server, so as to realize the loading of the corresponding page component and the rendering of the information in the corresponding target component in the page according to the user's own needs, without the need to render all components, and the dynamic rendering of components, buttons, texts, pictures and the like can be realized. The code amount is reduced, the page fluency is increased, the browser resource consumption is reduced, and the front-end page can be adaptively changed without recompilation along with the change of the data types in the server.

[0057] Please refer to Figure 2 , Figure 2 Another flowchart of a display method of a page provided in the embodiment of the present application is provided, which can include steps S210 to S240.

[0058] Step S210: rendering the target page component based on the display data.

[0059] In the embodiment of the present application, the display data can be the data stored in advance by the server, for example, the number and category of displayed goods in an e-commerce platform, which can be pre-stored by the server.

[0060] Step S220: adding the page component in the layout framework, and setting the display variable of the page component as responsive data.

[0061] In the embodiment of the present application, various page components are added in the layout framework in the page to constitute a dynamic page, and in the case that the display variable of the page component changes, the change can be adjusted correspondingly.

[0062] Step S230: acquiring the display data corresponding to the page component.

[0063] Step S240: establishing the corresponding relationship between the display variable of each page component and the display data, and defining the ID of the page, so as to open the page through the ID.

[0064] In the embodiment of the present application, after the created custom ID named show Data (display data) is acquired, the created dom element can be added to the layout basis at the position of the acquired custom ID by using the inner HTML method.

[0065] Exemplarily, the created button is still in the loop and not really added to the page, the created button can be added to the div with data-id="showData" by using the inner HTML method of the dom object.

[0066] Please refer to Figure 3 , Figure 3 A flowchart of step S240 in a page display method according to an embodiment of the present application is shown, which can include steps S310 to S330.

[0067] Step S310: initialize each display variable of responsive writing.

[0068] In the embodiment of the present application, the variables required by the page can be defined after the component is introduced into the page of the home page, and each display variable is assigned an initial value for use.

[0069] Step S320: obtain display data corresponding to each display variable based on a life cycle function call interface.

[0070] Step S330: store the display data into the display variable to establish the corresponding relationship between the display variable and the display data of each page component.

[0071] In the embodiment of the present application, the component is introduced into the page of the home page, the variables required by the home page are defined and assigned an initial value for use, the interface can be called in the life cycle function to obtain the data of the database, and the data in the interface is stored into the corresponding variable.

[0072] Exemplarily, in an online shopping mall, most of the data types have variables such as product type, quantity stock, etc., the variables with corresponding names are created in the data, and the data obtained when the page is loaded or created is directly assigned to these variables for use.

[0073] In some embodiments, step S130 includes steps S132 to S134.

[0074] Step S132: the display data is processed by array traversal to confirm the corresponding document object model.

[0075] Step S134: display the document object model in the target page component.

[0076] In the embodiment of the present application, the data is directly used to traverse the data, and by using the method provided by the array, the backend interface is not called, the browser resources are saved, and the running speed of the browser is improved.

[0077] In some embodiments, step S130 comprises:

[0078] The display data is filtered through an array to obtain classified array data.

[0079] In the embodiments of the present application, the data filtered from the array is stored in a new array, which can be used to display all classified data.

[0080] The classification field is determined based on the classified array data.

[0081] The document object model corresponding to the classification field is displayed on the target page component based on the classification field.

[0082] In the embodiments of the present application, when there is a selection function, the desired data is filtered from the array using the array filtering method (filter) to store it in a new array, which is used to display the classified data. After obtaining the desired data from the array, the required dom element (such as HTML tags (button)) is created in each loop, and the variable in the element is defined as a responsive variable.

[0083] For example, in the case of an online shopping mall, there are home supplies, digital products, food, and other categories in the mall. When creating these category buttons, the productType field in the data can be obtained using arr.filter(), and the text content of the button can be set to {{product Type}} to create the button.

[0084] In some embodiments, the page display method further comprises:

[0085] The page component is encapsulated as a dynamic component, wherein the variables displayed in the page component are defined based on responsive variables.

[0086] In this embodiment, the variables displayed in the page component are defined using responsive variables (responsive is automatically changed according to the change of data). The data obtained from the parent component can be assigned to the corresponding variable.

[0087] For example, in the main page index.vue (index view), the HTML template is created, then a tag is written as the basis and a custom id is added, <div data-id＝"show data”> (Code example, for reference) so that this part can be obtained in the JavaScript part.

[0088] In the embodiment of the present application, the components can be pre-packaged, the data displayed in the components can be written in a responsive manner, a layout framework can be created in the page and a custom id can be added, the components can be introduced into the corresponding page, variables can be initialized in the data, basic data can be obtained by calling an interface in the life cycle onload (loading) and created (creation), the obtained data can be used to traverse an array and then create a dom element corresponding to the data, variables in the dom element can also be set to be responsive, and finally the layout framework corresponding to the custom id created in the first step can be obtained, the newly created dom element can be added to the framework by using inner HTML, so as to realize dynamic display of the page.

[0089] Please refer to Figure 4 , Figure 4 A structural block diagram of a page display device provided in the present application, the page display device 400 comprises a display module 410, an acquisition module 420 and a rendering module 430, wherein:

[0090] The display module 410 is configured to display a page when the page is opened, wherein the page comprises page components.

[0091] The acquisition module 420 is configured to acquire display data corresponding to a target page component from a server when a selection operation on the target page component in the page components is acquired.

[0092] The rendering module is configured to render the target page component based on the display data.

[0093] Optionally, the display device 400 further comprises a construction module, an adding module, a display data acquisition module and an establishing module, wherein:

[0094] The construction module is configured to construct a layout framework of the page.

[0095] The adding module is configured to add the page components in the layout framework and set display variables of the page components to be responsive data.

[0096] The display data acquisition module is configured to acquire display data corresponding to the page components.

[0097] The establishing module is configured to establish a corresponding relationship between display variables of each page component and display data and define an ID of the page, so as to open the page through the ID.

[0098] It should be noted that the device embodiments in the present application correspond to the foregoing method embodiments, and the specific principles in the device embodiments can be referred to the content in the foregoing method embodiments, which will not be described herein again.

[0099] In several embodiments provided in the present embodiment, the coupling between the modules can be electrical, mechanical or other forms of coupling.

[0100] In addition, each functional module in each embodiment of the present application can be integrated in one processing module, or each module can exist physically alone, or two or more modules can be integrated in one module. The integrated module can be realized in the form of hardware or in the form of a software functional module.

[0101] Please refer to Figure 5 , Figure 5 A structural block diagram of an electronic device 200 that can execute the display method of the page provided in the embodiments of the present application is provided, and the electronic device 200 can be a smart phone, a tablet computer, a computer or a portable computer, etc.

[0102] The electronic device 200 further includes a processor 202 and a memory 204. The memory 204 stores programs that can execute the contents in the foregoing embodiments, and the processor 202 can execute the programs stored in the memory 204.

[0103] The processor 202 can include one or more cores for processing data and a message matrix unit. The processor 202 connects various parts in the entire electronic device 200 through various interfaces and lines, executes various functions and processes data of the electronic device 200 by running or executing instructions, programs, code sets or instruction sets stored in the memory 204, and calling data stored in the memory 204. Alternatively, the processor 202 can be realized in at least one of hardware forms of a digital signal processing (DSP), a field-programmable gate array (FPGA), a programmable logic array (PLA). The processor 202 can be integrated with one or a combination of a central processing unit (CPU), a graphics processing unit (GPU) and a modem, etc. The CPU is mainly used to process operating systems, user interfaces and application programs, etc.; the GPU is used to render and draw display content; and the modem is used to process wireless communication. It can be understood that the above-mentioned modem can also not be integrated into the processor, but can be realized by a separate communication chip.

[0104] The memory 204 can include a random access memory (RAM) and can also include a read-only memory (ROM). The memory 204 can be used to store instructions, programs, codes, code sets, or instruction sets. The memory 204 can include a program storage area and a data storage area, where the program storage area can store instructions for implementing an operating system, instructions for implementing at least one function (e.g., instructions for a user to obtain a random number), instructions for implementing each of the method embodiments described below, and the like. The data storage area can also store data (e.g., a random number) created by the terminal in use, and the like.

[0105] The electronic device 200 can also include a network module and a screen. The network module is configured to receive and send electromagnetic waves, and to convert the electromagnetic waves and electrical signals to each other, so as to communicate with a communication network or other devices, for example, an audio playing device. The network module can include various existing circuit elements for performing these functions, for example, an antenna, a radio frequency transceiver, a digital signal processor, an encryption / decryption chip, a subscriber identity module (SIM) card, a memory, and the like. The network module can communicate with various networks such as the Internet, an intranet, a wireless network, or other devices through the wireless network. The wireless network described above can include a cellular telephone network, a wireless local area network, or a metropolitan area network. The screen can display interface content and perform data interaction.

[0106] Reference is made to Figure 6 , Figure 6 A structural block diagram of a computer readable storage medium provided by an embodiment of the present application is shown. The computer readable storage medium 500 stores program codes 510, which can be invoked by a processor to execute the methods described in the above method embodiments.

[0107] The computer readable storage medium 500 can be an electronic storage such as a flash memory, an EEPROM (electrically erasable programmable read-only memory), an EPROM, a hard disk, or a ROM. Alternatively, the computer readable storage medium includes a non-transitory computer readable medium. The computer readable storage medium 500 has a storage space for the program codes 510 for executing any of the method steps described above. These program codes 510 can be read from or written into one or more computer program products. The program codes 510 can be compressed in an appropriate form, for example.

[0108] The embodiment of the present application further provides a computer program product or computer program, which comprises computer instructions stored in the computer readable storage medium 500. The processor of the computer device reads the computer instructions from the computer readable storage medium 500, and the processor 202 executes the computer instructions, so that the computer device executes the page display method described in the various optional implementation manners.

[0109] The above embodiments are only used to illustrate the technical solutions of the present application, but not limit the present application; although the present application is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that the technical solutions recorded in the foregoing embodiments can be modified, or some technical features can be replaced equivalently; and the modifications or replacements do not drive the essence of the corresponding technical solutions out of the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A display method of a page, characterized by, The method comprises: In the case of opening a page, display the page, wherein the page comprises a page component; In the case of obtaining a selection operation on a target page component in the page component, obtain display data corresponding to the target page component from a server, comprising: confirming the number of data types and the type identifiers corresponding to each data type from the display data, and dynamically generating target buttons corresponding to each data type based on the number of data types and type identifiers, and inserting the target buttons into the target page component; wherein each target button is used to filter data conforming to its corresponding data type; Render the target page component based on the display data.

2. The method of claim 1, wherein, The method further comprises: Building a layout framework of the page; Adding a page component in the layout framework, and setting the display variable of the page component as responsive data; Obtaining display data corresponding to the page component; Establishing a corresponding relationship between the display variable of each page component and the display data, and defining the ID of the page to open the page through the ID.

3. The method of claim 2, wherein, The establishment of the corresponding relationship between the display variable of each page component and the display data comprises: Initializing each display variable for responsive writing; Obtaining display data corresponding to each display variable based on a life cycle function call interface; Storing the display data into the display variable to establish the corresponding relationship between the display variable of each page component and the display data.

4. The method of claim 2, wherein, The page component comprises a document object model, and rendering the target page component based on the display data comprises: Processing the display data through array traversal to confirm the corresponding document object model; Displaying the document object model in the target page component.

5. The method of claim 2, wherein, The page component comprises a document object model, and rendering the target page component based on the display data comprises: Obtaining classified array data by filtering the display data through an array; Determining a classification field based on the classified array data; Displaying the document object model corresponding to the classification field in the target page component based on the classification field.

6. The method of claim 1, wherein, The method further comprises: Packaging the page component as a dynamic component, wherein the display variable of the page component is defined based on the responsive variable.

7. A display device of a page, characterized by comprising: The device comprises: A display module for displaying a page in the case of opening the page, wherein the page comprises a page component, and the page component comprises a classification button; An acquisition module for obtaining display data corresponding to a target page component from a server in the case of obtaining a selection operation on the target page component in the page component, comprising: confirming the number of data types and the type identifiers corresponding to each data type from the display data, and dynamically generating target buttons corresponding to each data type based on the number of data types and type identifiers, and inserting the target buttons into the target page component; wherein each target button is used to filter data conforming to its corresponding data type; A rendering module for rendering the target page component based on the display data.

8. The display device of pages according to claim 7, wherein, The device further comprises: A constructing module, configured to construct a layout framework of the page; An adding module, configured to add a page component in the layout framework, and set a display variable of the page component as responsive data; A display data obtaining module, configured to obtain display data corresponding to the page component; An establishing module, configured to establish a corresponding relationship between the display variable of each page component and the display data, and define an ID of the page, so as to open the page through the ID.

9. An electronic device, comprising: comprise: one or each processor; a memory; one or each program, wherein the one or each program is stored in the memory and configured to be executed by the one or each processor, and the one or each program is configured to execute the page display method in any one of claims 1-6.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores program code, and the program code can be called and executed by one or each processor to execute the page display method in any one of claims 1-6.

Images