CN110688594A

CN110688594A - Page jump method and device for front end of webpage

Info

Publication number: CN110688594A
Application number: CN201910971930.4A
Authority: CN
Inventors: 刘鼎; 任亮; 何欢鹏
Original assignee: SHENZHOU DIGITAL RONGXIN SOFTWARE Co Ltd
Current assignee: SHENZHOU DIGITAL RONGXIN SOFTWARE Co Ltd
Priority date: 2019-10-14
Filing date: 2019-10-14
Publication date: 2020-01-14

Abstract

The invention provides a page jump method and device for a front end of a webpage. The method comprises the following steps: acquiring a page jump request uploaded by a client; storing the original page into a page stack in the front end of the webpage; pushing a new page requested by the client to the client; when a page return request of a client is acquired, acquiring the original page from a page stack; and returning the obtained original page to the client. The webpage jump method and the webpage jump device at the front end of the webpage avoid frequent interaction with the server due to page rollback.

Description

Page jump method and device for front end of webpage

Technical Field

The invention relates to the technical field of web front ends, in particular to a page jump method and device of a web front end.

Background

At present, apps with low requirements for native functions of mobile platforms are generally developed by adopting a front-end technology, and pages are organized by using front-end routing.

When the user returns to the previous page, the page is reloaded, and the previous page state cannot be reserved; meanwhile, data interaction between pages can cause a large amount of template codes.

Disclosure of Invention

The technical problem to be solved by the invention is to provide a method and a device for page jump at the front end of a webpage, so that frequent interaction with a server end caused by page rollback is avoided.

In order to solve the technical problem, the invention provides a page jump method of a webpage front end, which comprises the following steps: acquiring a page jump request uploaded by a client; storing the original page into a page stack in the front end of the webpage; pushing a new page requested by the client to the client; when a page return request of a client is acquired, acquiring the original page from a page stack; and returning the obtained original page to the client.

In some embodiments, the original page and the new page are both dynamic pages.

In some embodiments, further comprising: before storing the original page into the page stack, the page identifier of the original page is stored into the return result stack.

In some embodiments, further comprising: checking whether a current page has a return result; and if the returned result exists, informing the new page to execute the business logic.

In some embodiments, checking whether the current page has a returned result comprises: popping a record from the stack top of a return result stack; and checking whether the page identifier in the stack top record is matched with the original page.

In some embodiments, checking whether the current page has a returned result further comprises: if not, the record with the stack top pop is discarded.

In some embodiments, the page stack and the return result stack are implemented by a mixin in a front end framework.

In some embodiments, the front end frame comprises: js.

In some embodiments, the mixin is disposed in a component of the vue.

In addition, the invention also provides a page jump device at the front end of the webpage, which comprises: one or more processors; a storage device, configured to store one or more programs, which when executed by the one or more processors, cause the one or more processors to implement the page jump method according to the foregoing front end of the web page.

After adopting such design, the invention has at least the following advantages:

by arranging the page stack at the front end of the webpage, when a page rollback request sent by the client is obtained, the original browsing page needing to be returned to the client is obtained from the page stack, so that unnecessary interaction with a server is greatly reduced, and the interaction times between the server and the back end are reduced.

Drawings

The foregoing is only an overview of the technical solutions of the present invention, and in order to make the technical solutions of the present invention more clearly understood, the present invention is further described in detail below with reference to the accompanying drawings and the detailed description.

FIG. 1 is a flowchart of a page jump method of a front end of a web page according to an embodiment of the present invention;

FIG. 2 is a flowchart of a page loading process provided by an embodiment of the invention;

FIG. 3 is a flowchart of a page rollback procedure provided by an embodiment of the present invention;

FIG. 4 is a flow diagram of a return result checking process provided by an embodiment of the present invention;

fig. 5 is a structural diagram of a page jump apparatus at the front end of a web page according to an embodiment of the present invention.

Detailed Description

The preferred embodiments of the present invention will be described in conjunction with the accompanying drawings, and it will be understood that they are described herein for the purpose of illustration and explanation and not limitation.

Fig. 1 shows a flowchart of a page jump method of a front end of a web page according to an embodiment of the present invention. Referring to fig. 1, the page jump method of the front end of the web page includes:

and S11, acquiring the page jump request uploaded by the client.

And S12, storing the original page into the page stack.

S13, pushing the new page requested by the client to the client.

And S14, when the page return request of the client is obtained, obtaining the original page from the page stack.

And S15, returning the acquired original page to the client.

When a client requests a new page, the front end of the webpage stacks the original page displayed by the client, namely stores the original page into the page stack. When a rollback request of a client is received, the original page needing to be displayed again is not obtained by accessing the back end, but the original page is directly obtained by the page stack. Therefore, when a rollback request of the client is received, the back end does not need to acquire the original page, and the number of interaction with the back end is greatly reduced.

Furthermore, in some embodiments of the present invention, whether the new page to which the client jumps or the original web page to which the client requires rollback, should be a dynamic web page. The dynamic web page is a web page in which at least a part of code is dynamically generated. These web pages are requested at different times and the displayed web pages are not identical. Typically, the dynamic web page may be a web page written in javascript code.

In some embodiments of the invention, the page stack is implemented by mixin technology. Also, mixin is embedded in a front end framework such as vue. More specifically, mixin appears as a component of vue router in the vue.

Fig. 2 shows a flowchart of a page loading process provided by an embodiment of the present invention. Referring to FIG. 2, the operation of the page load process includes:

s21, adding the original page identification into the return result stack.

And S22, adding the original page into a page stack in the front end of the webpage.

And S23, jumping to a new page.

S24, checking whether the original page has a return result.

S25, if the result is returned, the new page is informed to execute the business logic.

The effect of setting the return result stack in the front end of the web page is to realize the transmission of parameters between different dynamic pages.

Specifically, before the original page is stored in the page stack, the page identifier of the original page is stored in the returned result stack. After loading the new page, the return results stack is viewed. And if the return result exists in the return result stack, executing the business logic of the new page according to the return result. Such business logic typically includes: and calculating and displaying page parameters.

The return result stack is the same as the page stack and is also realized by a mixin technology.

Through the setting of the page stack and the return result stack, when the user returns, the user does not need to request the server again, and the load of the server is reduced. In addition, page codes do not need to be concerned about data transmission; meanwhile, the reusability of the page is increased, for example, a certain detail page can have a plurality of instances at the same time, and the instances are not mutually influenced.

Fig. 3 shows a flowchart of a page rollback procedure provided by an embodiment of the present invention. Referring to fig. 3, the operation of the page back procedure includes:

and S31, returning the current page.

And S32, popping the current page to a page stack.

S33, the return result is set.

S34, return to the previous page.

Here, the setting return result referred to mainly means deletion of a return result corresponding to a page that pops up a stack. Through the return result setting operation, the consistency of the return result stack and the data stored in the page stack can be ensured.

Fig. 4 shows a flowchart of a returned result checking process provided by the embodiment of the present invention. Referring to fig. 4, the operation of the return result checking process includes:

s41, pop a record from the top of the returned result stack.

S42, checking whether the page identification in the stack top record is matched with the current page.

S43, if matching, proceeding to S24, otherwise discarding the record.

FIG. 5 is a block diagram of a page jump apparatus of the front end of a web page according to the present invention. Referring to fig. 5, the page jump apparatus at the front end of the web page includes: a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for system operation are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.

The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.

The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the present invention in any way, and it will be apparent to those skilled in the art that the above description of the present invention can be applied to various modifications, equivalent variations or modifications without departing from the spirit and scope of the present invention.

Claims

1. A page jump method of a webpage front end is characterized by comprising the following steps:

acquiring a page jump request uploaded by a client;

storing the original page into a page stack in the front end of the webpage;

pushing a new page requested by the client to the client;

when a page return request of a client is acquired, acquiring the original page from a page stack;

and returning the obtained original page to the client.

2. The method of claim 1, wherein the original page and the new page are both dynamic pages.

3. The method for page jump of web page front end according to claim 2, further comprising:

before storing the original page into the page stack, the page identifier of the original page is stored into the return result stack.

4. The method for page jump of web page front end according to claim 3, further comprising:

checking whether a current page has a return result;

and if the returned result exists, informing the new page to execute the business logic.

5. The method for page jump of web page front end according to claim 4, wherein checking whether the current page has returned result comprises:

popping a record from the stack top of a return result stack;

and checking whether the page identifier in the stack top record is matched with the original page.

6. The method for page jump of web page front end according to claim 5, wherein checking whether the current page has returned result further comprises:

if not, the record popped from the top of the stack is discarded.

7. The page jump method of the front end of the web page as recited in claim 1 or 3, wherein the page stack and the return result stack are implemented by mixin a front end frame.

8. The page jump method of the front end of the web page as recited in claim 7, wherein the front end frame comprises: js.

9. The page jump method of the front end of web page according to claim 8, characterized in that mixin is set in the component of vue.

10. A page jump device of a front end of a web page, comprising:

one or more processors;

a storage device for storing one or more programs,

when executed by the one or more processors, cause the one or more processors to implement the page jump method of the front end of the web page according to any one of claims 1 to 9.