CN110569463B - Page refreshing method and device and storage medium - Google Patents
Page refreshing method and device and storage medium Download PDFInfo
- Publication number
- CN110569463B CN110569463B CN201910712651.6A CN201910712651A CN110569463B CN 110569463 B CN110569463 B CN 110569463B CN 201910712651 A CN201910712651 A CN 201910712651A CN 110569463 B CN110569463 B CN 110569463B
- Authority
- CN
- China
- Prior art keywords
- page
- address
- target page
- client
- server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention provides a page refreshing method, a page refreshing device and a storage medium. The method comprises the following steps: the method comprises the steps that a proxy server receives a page refreshing request sent by a client, wherein the client is a single-page application client based on an Vue framework, and the page refreshing request comprises an address of a target page; the proxy server converts the address of the target page into an address which can be identified by the server side and sends the converted address to the server side; if the server does not acquire the resource file of the target page according to the converted address, acquiring a main page resource file corresponding to the target page, and returning the main page resource file to the client; after the client loads the main page according to the main page resource file, the client routes to the target page according to a preset Vue routing file. The invention can realize the normal refreshing of the target page on the single-page application.
Description
Technical Field
The present invention relates to the field of network technologies, and in particular, to a page refreshing method, device, and storage medium.
Background
An SPA (Single Page Application) is a special Web Application that loads a Single HTML (hypertext Markup Language) Page and dynamically updates the Page as the user interacts with the Application. It limits all activities in a Web page, and only loads corresponding HTML, JavaScript, CSS (Cascading Style Sheets) when the Web page is initialized. Once the page loading is completed, the SPA does not reload or jump the page due to the operation of the user, but dynamically transforms HTML by using JavaScript, thereby realizing the interaction between the page and the user.
For single-page application, when a user clicks and refreshes on a currently displayed page, a client acquires an address displayed on the current page and sends the address to a server to request resources. However, on the one hand, the address displayed on the current page is not the real address in the server, so the server cannot recognize the address; on the other hand, for single-page applications, only the resource file corresponding to the home page address is saved in the server, so that even if the server can recognize the address of the current page, the resource file corresponding to the address cannot be found.
Therefore, in the prior art, when a single page application refreshes a page as a whole, the server cannot find the resource file of the refreshed page, and therefore, the server returns error information and cannot refresh the page normally.
Disclosure of Invention
In view of the above problems, embodiments of the present invention are proposed to provide a page refresh method, apparatus and storage medium that overcome or at least partially solve the above problems.
In a first aspect, an embodiment of the present invention discloses a page refreshing method, where the method includes:
the method comprises the steps that a proxy server receives a page refreshing request sent by a client; the client is a single-page application client based on an Vue framework, and the page refreshing request comprises an address of a target page;
the proxy server converts the address of the target page into an address which can be identified by a server side and sends the converted address to the server side;
if the server does not acquire the resource file of the target page according to the converted address, acquiring a main page resource file corresponding to the target page, and returning the main page resource file to the client;
and after loading the main page according to the main page resource file, the client routes to the target page according to a preset Vue routing file.
Optionally, the step of converting, by the proxy server, the address of the target page into an address that can be recognized by the server includes: the proxy server extracts virtual homepage address information from the address of the target page; the proxy server searches real homepage address information corresponding to the virtual homepage address information according to a preset mapping relation between a virtual address and a real address; and the proxy server replaces the virtual homepage address information in the address of the target page with the real homepage address information.
Optionally, the step of obtaining the main page resource file corresponding to the target page includes: the server extracts homepage address information from the converted address; and the server side acquires the resource file corresponding to the homepage address information as a main page resource file corresponding to the target page.
Optionally, before the step of the proxy server receiving a page refresh request sent by a client, the method further includes: and after the client sends the page refreshing request, recording the address of the target page.
Optionally, the step of routing to the destination page according to a preset Vue routing file includes: the client acquires the recorded address of the target page and extracts a routing path after homepage address information from the address of the target page; the client searches Vue components corresponding to the routing path according to a preset Vue routing file; and the client renders the Vue component and displays the target page.
In a second aspect, an embodiment of the present invention discloses a page refreshing apparatus, where the apparatus includes a client, a proxy server, and a server;
the proxy server includes:
the receiving module is used for receiving a page refreshing request sent by a client; the client is a single-page application client based on an Vue frame, and the page refreshing request comprises an address of a target page;
the conversion module is used for converting the address of the target page into an address which can be identified by a server and sending the converted address to the server;
the server side comprises: an obtaining module, configured to obtain a main page resource file corresponding to the target page and return the main page resource file to the client if the resource file of the target page is not obtained according to the converted address;
the client comprises: and the routing module is used for routing to the target page according to a preset Vue routing file after loading the main page according to the main page resource file.
Optionally, the conversion module comprises: the first extraction submodule is used for extracting virtual homepage address information from the address of the target page; the address searching submodule is used for searching real homepage address information corresponding to the virtual homepage address information according to a preset mapping relation between a virtual address and a real address; and the replacing submodule is used for replacing the virtual homepage address information in the address of the target page with the real homepage address information.
Optionally, the obtaining module includes: the second extraction submodule is used for extracting homepage address information from the converted address; and the file acquisition submodule is used for acquiring the resource file corresponding to the homepage address information as a main page resource file corresponding to the target page.
Optionally, the client further includes: and the recording module is used for recording the address of the target page after the page refreshing request is sent.
Optionally, the routing module includes: the third extraction submodule is used for acquiring the recorded address of the target page and extracting a routing path after homepage address information from the address of the target page; the component searching submodule is used for searching the Vue component corresponding to the routing path according to a preset Vue routing file; and the display sub-module is used for rendering the Vue component and displaying the target page.
In a third aspect, an embodiment of the present invention discloses a page refreshing apparatus, including: one or more processors; and one or more machine readable media having instructions stored thereon that, when executed by the one or more processors, cause the apparatus to perform the page refresh method of any of the above.
In a fourth aspect, an embodiment of the present invention discloses a computer-readable storage medium storing a computer program for causing a processor to execute the page refresh method as described in any one of the above.
In the embodiment of the invention, a proxy server receives a page refreshing request sent by a client, wherein the client is a single-page application client based on an Vue frame, and the page refreshing request comprises an address of a target page; the proxy server converts the address of the target page into an address which can be identified by the server side and sends the converted address to the server side; if the server does not acquire the resource file of the target page according to the converted address, acquiring a main page resource file corresponding to the target page, and returning the main page resource file to the client; and after loading the main page according to the main page resource file, the client routes to the target page according to a preset Vue routing file. Therefore, in the embodiment of the invention, on one hand, the address of the target page is converted through the proxy server, so that the server can identify when receiving the address of the target page; on the other hand, when the server receives the address of the target page, because the server cannot find the target page corresponding to the whole address, the server acquires the main page resource corresponding to the target page according to the address and returns the main page resource to the client, and the client routes the target page from the main page according to the Vue routing mode of the client, so that the refreshing on the target page is realized.
Drawings
FIG. 1 is a schematic networking diagram of a video network of the present invention;
FIG. 2 is a schematic diagram of a hardware architecture of a node server according to the present invention;
fig. 3 is a schematic diagram of a hardware structure of an access switch of the present invention;
fig. 4 is a schematic diagram of a hardware structure of an ethernet protocol conversion gateway according to the present invention;
FIG. 5 is a flowchart illustrating steps of a page refresh method according to an embodiment of the present invention;
FIG. 6 is a flow chart of a configuration proxy server according to an embodiment of the present invention;
fig. 7 is a block diagram of a page refreshing apparatus according to an embodiment of the present invention.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in further detail below.
The video networking is an important milestone for network development, is a real-time network, can realize high-definition video real-time transmission, and pushes a plurality of internet applications to high-definition video, and high-definition faces each other.
The video networking adopts a real-time high-definition video exchange technology, can integrate required services such as dozens of services of video, voice, pictures, characters, communication, data and the like on a system platform on a network platform, such as high-definition video conference, video monitoring, intelligent monitoring analysis, emergency command, digital broadcast television, delayed television, network teaching, live broadcast, VOD on demand, television mail, Personal Video Recorder (PVR), intranet (self-office) channels, intelligent video broadcast control, information distribution and the like, and realizes high-definition quality video broadcast through a television or a computer.
To better understand the embodiments of the present invention, the following description refers to the internet of view:
some of the technologies applied in the video networking are as follows:
network Technology (Network Technology)
Network technology innovation in video networking has improved the traditional Ethernet (Ethernet) to face the potentially huge first video traffic on the network. Unlike pure network Packet Switching (Packet Switching) or network Circuit Switching (Circuit Switching), the Packet Switching is adopted by the technology of the video networking to meet the Streaming requirement. The video networking technology has the advantages of flexibility, simplicity and low price of packet switching, and simultaneously has the quality and safety guarantee of circuit switching, and realizes the seamless connection of a whole network switching type virtual circuit and a data format.
Switching Technology (Switching Technology)
The video network adopts two advantages of asynchronism and packet switching of the Ethernet, eliminates the defects of the Ethernet on the premise of full compatibility, has end-to-end seamless connection of the whole network, is directly communicated with a user terminal, and directly bears an IP data packet. The user data does not require any format conversion across the entire network. The video networking is a higher-level form of the Ethernet, is a real-time exchange platform, can realize the real-time transmission of the whole-network large-scale high-definition video which cannot be realized by the existing Internet, and pushes a plurality of network video applications to high-definition and unification.
Server Technology (Server Technology)
The server technology on the video networking and unified video platform is different from the traditional server, the streaming media transmission of the video networking and unified video platform is established on the basis of connection orientation, the data processing capacity of the video networking and unified video platform is independent of flow and communication time, and a single network layer can contain signaling and data transmission. For voice and video services, the complexity of video networking and unified video platform streaming media processing is much simpler than that of data processing, and the efficiency is greatly improved by more than one hundred times compared with that of a traditional server.
Storage Technology (Storage Technology)
The super-high speed storage technology of the unified video platform adopts the most advanced real-time operating system in order to adapt to the media content with super-large capacity and super-large flow, the program information in the server instruction is mapped to the specific hard disk space, the media content is not passed through the server any more, and is directly sent to the user terminal instantly, and the general waiting time of the user is less than 0.2 second. The optimized sector distribution greatly reduces the mechanical motion of the magnetic head track seeking of the hard disk, the resource consumption only accounts for 20% of that of the IP internet of the same grade, but concurrent flow which is 3 times larger than that of the traditional hard disk array is generated, and the comprehensive efficiency is improved by more than 10 times.
Network Security Technology (Network Security Technology)
The structural design of the video network completely eliminates the network security problem troubling the internet structurally by the modes of independent service permission control each time, complete isolation of equipment and user data and the like, generally does not need antivirus programs and firewalls, avoids the attack of hackers and viruses, and provides a structural carefree security network for users.
Service Innovation Technology (Service Innovation Technology)
The unified video platform integrates services and transmission, and is not only automatically connected once whether a single user, a private network user or a network aggregate. The user terminal, the set-top box or the PC are directly connected to the unified video platform to obtain various multimedia video services in various forms. The unified video platform adopts a menu type configuration table mode to replace the traditional complex application programming, can realize complex application by using very few codes, and realizes infinite new service innovation.
Networking of the video network is as follows:
the video network is a centralized control network structure, and the network can be a tree network, a star network, a ring network and the like, but on the basis of the centralized control node, the whole network is controlled by the centralized control node in the network.
As shown in fig. 1, the video network is divided into an access network and a metropolitan network.
The devices of the access network part can be mainly classified into 3 types: node server, access switch, terminal (including various set-top boxes, coding boards, memories, etc.). The node server is connected to an access switch, which may be connected to a plurality of terminals and may be connected to an ethernet network.
The node server is a node which plays a centralized control function in the access network and can control the access switch and the terminal. The node server can be directly connected with the access switch or directly connected with the terminal.
Similarly, devices of the metropolitan network portion may also be classified into 3 types: a metropolitan area server, a node switch and a node server. The metro server is connected to a node switch, which may be connected to a plurality of node servers.
The node server is a node server of the access network part, namely the node server belongs to both the access network part and the metropolitan area network part.
The metropolitan area server is a node which plays a centralized control function in the metropolitan area network and can control a node switch and a node server. The metropolitan area server can be directly connected with the node switch or directly connected with the node server.
Therefore, the whole video network is a network structure with layered centralized control, and the network controlled by the node server and the metropolitan area server can be in various structures such as tree, star and ring.
The access network part can form a unified video platform (the part in the dotted circle), and a plurality of unified video platforms can form a video network; each unified video platform may be interconnected via metropolitan area and wide area video networking.
Video networking device classification
1.1 devices in the video network of the embodiment of the present invention can be mainly classified into 3 types: server, exchanger (including Ethernet protocol conversion gateway), terminal (including various set-top boxes, code board, memory, etc.). The video network as a whole can be divided into a metropolitan area network (or national network, global network, etc.) and an access network.
1.2 wherein the devices of the access network part can be mainly classified into 3 types: node server, access exchanger (including Ethernet protocol conversion gateway), terminal (including various set-top boxes, coding board, memory, etc.).
The specific hardware structure of each access network device is as follows:
a node server:
as shown in fig. 2, the network interface module 201, the switching engine module 202, the CPU module 203, and the disk array module 204 are mainly included;
the network interface module 201, the CPU module 203, and the disk array module 204 all enter the switching engine module 202; the switching engine module 202 performs an operation of looking up the address table 205 on the incoming packet, thereby obtaining the direction information of the packet; and stores the packet in a queue of the corresponding packet buffer 206 based on the packet's steering information; if the queue of the packet buffer 206 is nearly full, it is discarded; the switching engine module 202 polls all packet buffer queues and forwards if the following conditions are met: 1) the port send buffer is not full; 2) the queue packet counter is greater than zero. The disk array module 204 mainly implements control over the hard disk, including initialization, read-write, and other operations on the hard disk; the CPU module 203 is mainly responsible for protocol processing with an access switch and a terminal (not shown in the figure), configuring an address table 205 (including a downlink protocol packet address table, an uplink protocol packet address table, and a data packet address table), and configuring the disk array module 204.
The access switch:
as shown in fig. 3, the network interface module mainly includes a network interface module (a downlink network interface module 301 and an uplink network interface module 302), a switching engine module 303 and a CPU module 304;
wherein, the packet (uplink data) coming from the downlink network interface module 301 enters the packet detection module 305; the packet detection module 305 detects whether the Destination Address (DA), the Source Address (SA), the packet type, and the packet length of the packet meet the requirements, and if so, allocates a corresponding stream identifier (stream-id) and enters the switching engine module 303, otherwise, discards the stream identifier; the packet (downstream data) coming from the upstream network interface module 302 enters the switching engine module 303; the incoming data packet of the CPU module 304 enters the switching engine module 303; the switching engine module 303 performs an operation of looking up the address table 306 on the incoming packet, thereby obtaining the direction information of the packet; if the packet entering the switching engine module 303 is from the downstream network interface to the upstream network interface, the packet is stored in the queue of the corresponding packet buffer 307 in association with the stream-id; if the queue of the packet buffer 307 is nearly full, it is discarded; if the packet entering the switching engine module 303 is not from the downlink network interface to the uplink network interface, the data packet is stored in the queue of the corresponding packet buffer 307 according to the guiding information of the packet; if the queue of the packet buffer 307 is close to full, it is discarded.
The switching engine module 303 polls all packet buffer queues and may include two cases:
if the queue is from the downlink network interface to the uplink network interface, the following conditions are met for forwarding: 1) the port send buffer is not full; 2) the queued packet counter is greater than zero; 3) obtaining a token generated by a code rate control module;
if the queue is not from the downlink network interface to the uplink network interface, the following conditions are met for forwarding: 1) the port send buffer is not full; 2) the queue packet counter is greater than zero.
The rate control module 308 is configured by the CPU module 304, and generates tokens for packet buffer queues from all downstream network interfaces to upstream network interfaces at programmable intervals to control the rate of upstream forwarding.
The CPU module 304 is mainly responsible for protocol processing with the node server, configuration of the address table 306, and configuration of the code rate control module 308.
Ethernet co-rotating gateway：
As shown in fig. 4, the apparatus mainly includes a network interface module (a downlink network interface module 401 and an uplink network interface module 402), a switching engine module 403, a CPU module 404, a packet detection module 405, a rate control module 408, an address table 406, a packet buffer 407, a MAC adding module 409, and a MAC deleting module 410.
Wherein, the data packet coming from the downlink network interface module 401 enters the packet detection module 405; the packet detection module 405 detects whether the ethernet MAC DA, the ethernet MAC SA, the ethernet length or frame type, the video network destination address DA, the video network source address SA, the video network packet type, and the packet length of the packet meet the requirements, and if so, allocates a corresponding stream identifier (stream-id); then, the MAC deletion module 410 subtracts MAC DA, MAC SA, length or frame type (2byte) and enters the corresponding receiving buffer, otherwise, discards it;
the downlink network interface module 401 detects the sending buffer of the port, and if there is a packet, obtains the ethernet MAC DA of the corresponding terminal according to the destination address DA of the packet, adds the ethernet MAC DA of the terminal, the MAC SA of the ethernet protocol gateway, and the ethernet length or frame type, and sends the packet.
The other modules in the ethernet protocol gateway function similarly to the access switch.
A terminal:
the system mainly comprises a network interface module, a service processing module and a CPU module; for example, the set-top box mainly comprises a network interface module, a video and audio coding and decoding engine module and a CPU module; the coding board mainly comprises a network interface module, a video and audio coding engine module and a CPU module; the memory mainly comprises a network interface module, a CPU module and a disk array module.
1.3 devices of the metropolitan area network part can be mainly classified into 2 types: node server, node exchanger, metropolitan area server. The node switch mainly comprises a network interface module, a switching engine module and a CPU module; the metropolitan area server mainly comprises a network interface module, a switching engine module and a CPU module.
2. Video networking packet definition
2.1 Access network packet definition
The data packet of the access network mainly comprises the following parts: destination Address (DA), Source Address (SA), reserved bytes, payload (pdu), CRC.
As shown in the following table, the data packet of the access network mainly includes the following parts:
| DA | SA | Reserved | Payload | CRC |
wherein:
the Destination Address (DA) is composed of 8 bytes (byte), the first byte represents the type of the data packet (such as various protocol packets, multicast data packets, unicast data packets, etc.), there are 256 possibilities at most, the second byte to the sixth byte are metropolitan area network addresses, and the seventh byte and the eighth byte are access network addresses;
the Source Address (SA) is also composed of 8 bytes (byte), defined as the same as the Destination Address (DA);
the reserved byte consists of 2 bytes;
the payload part has different lengths according to different types of datagrams, and is 64 bytes if the datagram is various types of protocol packets, and is 32+1024 or 1056 bytes if the datagram is a unicast packet, of course, the length is not limited to the above 2 types;
the CRC consists of 4 bytes and is calculated in accordance with the standard ethernet CRC algorithm.
2.2 packet definition for metropolitan area networks
The topology of a metropolitan area network is a graph and there may be 2, or even more than 2, connections between two devices, i.e., more than 2 connections between a node switch and a node server, between a node switch and a node switch, and between a node switch and a node server. However, the metro network address of the metro network device is unique, and in order to accurately describe the connection relationship between the metro network devices, parameters are introduced in the embodiment of the present invention: a label to uniquely describe a metropolitan area network device.
In this specification, the definition of the Label is similar to that of the Label of MPLS (Multi-Protocol Label Switch), and assuming that there are two connections between the device a and the device B, there are 2 labels for the packet from the device a to the device B, and 2 labels for the packet from the device B to the device a. The label is classified into an incoming label and an outgoing label, and assuming that the label (incoming label) of the packet entering the device a is 0x0000, the label (outgoing label) of the packet leaving the device a may become 0x 0001. The network access process of the metro network is a network access process under centralized control, that is, address allocation and label allocation of the metro network are both dominated by the metro server, and the node switch and the node server are both passively executed, which is different from label allocation of MPLS, and label allocation of MPLS is a result of mutual negotiation between the switch and the server.
As shown in the following table, the data packet of the metro network mainly includes the following parts:
| DA | SA | Reserved | label (R) | Payload | CRC |
Namely Destination Address (DA), Source Address (SA), Reserved byte (Reserved), tag, payload (pdu), CRC. The format of the tag may be defined by reference to the following: the tag is 32 bits with the upper 16 bits reserved and only the lower 16 bits used, and its position is between the reserved bytes and payload of the packet.
Referring to fig. 5, a flowchart illustrating steps of a page refresh method according to an embodiment of the present invention is shown.
The page refreshing method of the embodiment of the invention can comprise the following steps:
In the embodiment of the invention, the client is a single-page application client based on an Vue framework. Vue is a progressive framework for building user interfaces that is built with data-driven and componentized ideas. Vue-Router is the route manager of the Vue framework. Vue-Router has two modes, a hash mode and a history mode. The hash mode uses a hash of a URL (Uniform Resource Locator) to simulate a complete URL, and when the URL changes, a page is not reloaded, but a "#" exists in the address of the hash mode, and the processing procedure is relatively complicated. The Vue-Router in the embodiment of the invention adopts a history mode. After a single page developed by an Vue framework is used and a history mode is used, a user directly clicks a button and the like in the single page, Vue automatically drives a corresponding Dom to display and hide a related front-end Vue component according to the configuration of a Vue-Router routing file in Vue, and interaction is achieved.
After the user clicks to enter the current page on the client, if the user clicks to refresh (F5 refresh), the client will obtain the address displayed in the current page, and generate a page refresh request carrying the address, where the address is the address of the target page.
In the embodiment of the invention, in order to protect the real system path, the real system path is not exposed to the user, and when the system is deployed from the development environment to the real environment, the configuration can be carried out through the proxy server, and an address is virtualized to the user. In an alternative embodiment, the proxy server may be Nginx or the like.
Based on this, the proxy server may be preconfigured. Referring to fig. 6, a flow chart of a configuration proxy server according to an embodiment of the present invention is shown. As shown in fig. 6, the process of configuring the proxy server may include: vue are deployed in a proxy server; adding a mapping relation between a virtual address and a real address in a proxy server; the proxy server is started.
Wherein Vue is deployed in the proxy server, which means that the main page address of the single-page application client based on Vue framework is deployed in the proxy server.
Adding the mapping relationship between the virtual address and the real address in the proxy server means that, in the proxy server, a single-page routing item can be written by using Vue-Router in combination with webpack (packaging tool), and then packaging is performed so as to map the virtual address and the real address, and the mapping relationship between the virtual address and the real address is added.
Initiating a proxy server means that the proxy server is initiated to validate the configuration.
After the configured proxy server is used for reverse proxy, the user-oriented address displayed in the current page is only a virtual address and does not correspond to the real page resource of the server. Therefore, in order to enable the server to correctly identify the address of the target page, the client sends a page refreshing request carrying the address of the target page to the proxy server, and the proxy server converts the address of the target page into the address which can be identified by the server.
In an alternative embodiment, the step of the proxy server converting the address of the target page into the address that can be identified by the server may include steps a1 to A3:
step a1, the proxy server extracts virtual home page address information from the address of the target page.
For the single-page application, the proxy server is configured with the mapping relation between the virtual address and the real address of the home page of the single-page application.
Therefore, the proxy server extracts virtual homepage address information from the address of the target page. The home page address information refers to the first address information after the domain name, such as the first address information after xxx.
Step A2, the proxy server searches the real homepage address information corresponding to the virtual homepage address information according to the preset mapping relation between the virtual address and the real address.
Step A3, the proxy server replaces the virtual homepage address information in the address of the target page with the real homepage address information.
After the proxy server finds the real homepage address information corresponding to the virtual homepage address information, the virtual homepage address information in the address of the target page is replaced by the real homepage address information, and other parts are unchanged.
For example, a mapping relationship between api and index exists in a mapping relationship between a virtual address and a real address configured by the proxy server, where api is the virtual address and index is the real address. If the address displayed in the current page in the client is http: www.xxx.com/api/a/b, the address of the server should be http: www.xxx.com/index/a/b, so the address of the target page carried in the page refresh request is http: www.xxx.com/api/a/b. The proxy server receives the address http of the target page: www.xxx.com/api/a/b extracts virtual homepage address information as api; then, the mapping relation between the api and the index is found from the mapping relation between the virtual address and the real address, and the real homepage address information corresponding to the virtual homepage address information api is known as the index; and then, the address http of the target page: www.xxx.com/api/a/b, replacing api in the api with index, and obtaining the address after conversion as http: www.xxx.com/index/a/b.
In step 503, if the server does not obtain the resource file of the target page according to the converted address, the server obtains a main page resource file corresponding to the target page, and returns the main page resource file to the client.
And after converting the address of the target page into an address which can be identified by the server, the proxy server sends the converted address to the server.
And the server receives the converted address and acquires the resource file of the target page according to the converted address. However, the client is a single-page application based on the Vue framework, which only has one main page, and the server only stores the resource file of the main page. Therefore, the server may or may not be able to acquire the resource file of the target page according to the converted address.
If the target page is a main page, the server can obtain the resource file of the target page according to the converted address, the obtained resource file of the target page is returned to the client by the server, and the client loads the main page according to the resource file of the target page.
If the target page is not the main page but a sub-page of the main page, the server cannot acquire the resource file of the target page according to the converted address. For this situation, if no special processing is performed, the server returns 404 an error message to the client, and the client cannot refresh the page normally. Therefore, in the embodiment of the present invention, if the server does not obtain the resource file of the target page according to the converted address, the server obtains the main page resource file corresponding to the target page, and returns the main page resource file to the client.
In an optional embodiment, the step of obtaining the main page resource file corresponding to the target page may include steps B1 to B2:
and step B1, the server extracts the homepage address information from the converted address.
As described above, the home page address information refers to the first address information after the domain name. Therefore, the server can extract the homepage address information from the converted address according to the characteristic.
Step B2, the server obtains the resource file corresponding to the homepage address information as the main page resource file corresponding to the target page.
The server stores the resource file of the main page, so that the resource file corresponding to the main page address information can be searched according to the main page address information, and the searched resource file is used as the main page resource file corresponding to the target page.
For example, the address of the converted target page is http: www.xxx.com/index/a/b. And the server side searches resource files of target pages, namely an index folder, an a folder and a b.html page, in a file directory of the corresponding system according to the address. However, since the server only stores the resource file of the main page index, the server cannot acquire the resource file of the target page. Therefore, the server can obtain the http: www.xxx.com/index/a/b, extracting the homepage address information index, and then finding out the resource file corresponding to the index, which is the main page resource file corresponding to the target page.
In step 504, after loading the main page according to the main page resource file, the client routes to the target page according to a preset Vue routing file.
And after the server side obtains the main page resource file corresponding to the target page, returning the main page resource file to the client side.
After receiving the main page resource file, the client may load the main page according to the main page resource file, and after loading the main page, automatically route to the target page according to a preset Vue routing file.
In the single-page application based on the Vue framework, each sub-page corresponds to one Vue component, each Vue component corresponds to one routing path, when a user selects and displays a certain sub-page, the sub-page is routed to the corresponding Vue component according to the routing path of the sub-page, and then the searched Vue component is rendered so as to display the corresponding sub-page. Therefore, the client needs to know the routing path corresponding to the target page in order to route to the target page.
In an optional implementation manner, after the client sends a page refresh request carrying an address of a target page, the address of the target page may be recorded. After loading the main page according to the main page resource file, the client may route to the target page according to the recorded address of the target page and the preset Vue routing file.
The step of routing the file to the target page according to the recorded address of the target page and the preset Vue routing file may include steps C1-C3:
and step C1, the client acquires the recorded address of the target page, and extracts the routing path after the homepage address information from the address of the target page.
In a single-page application, the routing path of a particular sub-page is located after the home page address information. Therefore, the client extracts a routing path after the homepage address information from the address of the target page.
And step C2, the client searches Vue components corresponding to the routing path according to a preset Vue routing file.
Vue the routing file stores Vue components and their corresponding routing paths. After extracting the routing path, the client searches Vue components corresponding to the routing path from Vue routing files. For example, a router-link statement of Vue-router can be used to find Vue component corresponding to the routing path.
Step C3, the client renders the Vue component, and the target page is displayed.
The client renders the found Vue component to show the target page. For example, the found Vue component may be rendered using the router-view statement of Vue-router.
For example, after the user clicks the refresh page, the client acquires that the address of the target page is http: www.xxx.com/api/a/b, the client sends a page refresh request carrying the address to the proxy server, and records the address http of the target page: www.xxx.com/api/a/b. After the client receives the main page resource file corresponding to the target page, loading the main page according to the main page resource file, and recording the address http of the target page: www.xxx.com/api/a/b, then simulating the click operation of a user on the loaded main page, searching Vue components corresponding to the routing path a from the routing file, rendering Vue components corresponding to the displayed routing path a, searching Vue components corresponding to the routing path b, and rendering Vue components corresponding to the displayed routing path b, so that the target page can be displayed, and the refreshing operation of the target page is realized.
On one hand, the address of the target page is converted through the proxy server so that the server can identify when receiving the address of the target page; on the other hand, when the server side receives the address of the target page, the server side cannot find the target page corresponding to the whole address, so that the main page resource corresponding to the target page is obtained according to the address and returned to the client side, and the client side routes to the target page from the main page according to the own Vue routing mode, so that the refreshing on the target page is realized.
It should be noted that, for simplicity of description, the method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the illustrated order of acts, as some steps may occur in other orders or concurrently in accordance with the embodiments of the present invention. Further, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred and that no particular act is required to implement the invention.
Referring to fig. 7, a block diagram of a page refreshing apparatus according to an embodiment of the present invention is shown. The page refreshing apparatus of the embodiment of the present invention may include a client 701, a proxy server 702, and a server 703.
The proxy server 702 includes:
a receiving module 7021, configured to receive a page refresh request sent by a client; the client is a single-page application client based on an Vue frame, and the page refreshing request comprises an address of a target page;
a conversion module 7022, configured to convert the address of the target page into an address that can be identified by a server, and send the converted address to the server;
the server 703 includes: an obtaining module 7031, configured to, if the resource file of the target page is not obtained according to the converted address, obtain a main page resource file corresponding to the target page, and return the main page resource file to the client;
the client 701 includes: the routing module 7011 is configured to route the target page according to a preset Vue routing file after the main page is loaded according to the main page resource file.
In an alternative embodiment, the conversion module 7022 includes: the first extraction submodule is used for extracting virtual homepage address information from the address of the target page; the address searching submodule is used for searching real homepage address information corresponding to the virtual homepage address information according to a preset mapping relation between a virtual address and a real address; and the replacing submodule is used for replacing the virtual homepage address information in the address of the target page with the real homepage address information.
In an alternative embodiment, the obtaining module 7031 includes: the second extraction submodule is used for extracting homepage address information from the converted address; and the file acquisition submodule is used for acquiring the resource file corresponding to the homepage address information as a main page resource file corresponding to the target page.
In an optional implementation, the client 701 further includes: and the recording module is used for recording the address of the target page after the page refreshing request is sent.
In an alternative embodiment, the routing module 7011 includes: the third extraction submodule is used for acquiring the recorded address of the target page and extracting a routing path after homepage address information from the address of the target page; the component searching submodule is used for searching the Vue component corresponding to the routing path according to a preset Vue routing file; and the display sub-module is used for rendering the Vue components and displaying the target page.
On one hand, the address of the target page is converted through the proxy server so that the server can identify when receiving the address of the target page; on the other hand, when the server side receives the address of the target page, the server side cannot find the target page corresponding to the whole address, so that the main page resource corresponding to the target page is obtained according to the address and returned to the client side, and the client side routes to the target page from the main page according to the own Vue routing mode, so that the refreshing on the target page is realized.
For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
In the embodiment of the invention, the invention also provides a page refreshing device. The apparatus may include one or more processors and one or more machine-readable media having instructions, such as an application program, stored thereon. When executed by the one or more processors, cause the apparatus to perform the page refresh method described above.
In an embodiment of the invention, there is also provided a non-transitory computer-readable storage medium, such as a memory, including instructions executable by a processor of an electronic device to perform the page refresh method described above. For example, the non-transitory computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.
The embodiments in the present specification are all described in a progressive manner, and each embodiment focuses on differences from other embodiments, and portions that are the same and similar between the embodiments may be referred to each other.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and so forth) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the embodiments of the invention.
Finally, it should also be noted that, in this document, relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The page refreshing method, device and storage medium provided by the present invention are introduced in detail, and a specific example is applied in the text to explain the principle and the implementation of the present invention, and the description of the above embodiment is only used to help understanding the method and the core idea of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. A method for page refresh, the method comprising:
the method comprises the steps that a proxy server receives a page refreshing request sent by a client; the client is a single-page application client based on an Vue framework, and the page refreshing request comprises an address of a target page;
the proxy server converts the address of the target page into an address which can be identified by a server side and sends the converted address to the server side;
if the server does not acquire the resource file of the target page according to the converted address, acquiring a main page resource file corresponding to the target page, and returning the main page resource file to the client;
after loading a main page according to the main page resource file, the client routes to the target page according to a preset Vue routing file;
the method further comprises the following steps: pre-configuring a proxy server, wherein the process of configuring the proxy server comprises:
deploying a home page address of a single-page application client based on an Vue framework in the proxy server; adding a mapping relation between a virtual address and a real address in the proxy server; starting the proxy server;
the step of converting the address of the target page into an address which can be identified by a server by the proxy server comprises the following steps:
the proxy server extracts virtual homepage address information from the address of the target page;
the proxy server searches real homepage address information corresponding to the virtual homepage address information according to a preset mapping relation between a virtual address and a real address;
and the proxy server replaces the virtual homepage address information in the address of the target page with the real homepage address information.
2. The method according to claim 1, wherein the step of obtaining the main page resource file corresponding to the target page comprises:
the server extracts homepage address information from the converted address;
and the server side acquires the resource file corresponding to the homepage address information as a main page resource file corresponding to the target page.
3. The method according to claim 1, before the step of the proxy server receiving the page refresh request sent by the client, further comprising:
and after the client side sends the page refreshing request, recording the address of the target page.
4. The method of claim 1, wherein the step of routing the document to the destination page according to the preset Vue includes:
the client acquires the recorded address of the target page and extracts a routing path after homepage address information from the address of the target page;
the client searches Vue components corresponding to the routing paths according to preset Vue routing files;
and the client renders the Vue component and displays the target page.
5. The page refreshing device is characterized by comprising a client, a proxy server and a server;
the proxy server includes:
the receiving module is used for receiving a page refreshing request sent by a client; the client is a single-page application client based on an Vue framework, and the page refreshing request comprises an address of a target page;
the conversion module is used for converting the address of the target page into an address which can be identified by a server and sending the converted address to the server;
the server side comprises: the acquisition module is used for acquiring a main page resource file corresponding to the target page and returning the main page resource file to the client if the resource file of the target page is not acquired according to the converted address;
the client comprises: the routing module is used for routing to the target page according to a preset Vue routing file after loading the main page according to the main page resource file;
the proxy server further comprises; a configuration module, configured to configure the proxy server, wherein the process of configuring the proxy server includes:
deploying a home page address of a single-page application client based on an Vue framework in the proxy server; adding a mapping relation between a virtual address and a real address in the proxy server; starting the proxy server;
the conversion module includes:
the first extraction submodule is used for extracting virtual homepage address information from the address of the target page;
the address searching submodule is used for searching real homepage address information corresponding to the virtual homepage address information according to a preset mapping relation between a virtual address and a real address;
and the replacing submodule is used for replacing the virtual homepage address information in the address of the target page with the real homepage address information.
6. The apparatus of claim 5, wherein the obtaining module comprises:
the second extraction submodule is used for extracting homepage address information from the converted address;
and the file acquisition submodule is used for acquiring the resource file corresponding to the homepage address information as a main page resource file corresponding to the target page.
7. The apparatus of claim 5, wherein the client further comprises:
and the recording module is used for recording the address of the target page after the page refreshing request is sent.
8. The apparatus of claim 5, wherein the routing module comprises:
the third extraction submodule is used for acquiring the recorded address of the target page and extracting a routing path after homepage address information from the address of the target page;
the component searching submodule is used for searching the Vue component corresponding to the routing path according to a preset Vue routing file;
and the display sub-module is used for rendering the Vue components and displaying the target page.
9. A page refreshing apparatus, comprising:
one or more processors; and
one or more machine-readable media having instructions stored thereon that, when executed by the one or more processors, cause the apparatus to perform the page refresh method of any of claims 1-4.
10. A computer-readable storage medium storing a computer program for causing a processor to execute the page refresh method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910712651.6A CN110569463B (en) | 2019-08-02 | 2019-08-02 | Page refreshing method and device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910712651.6A CN110569463B (en) | 2019-08-02 | 2019-08-02 | Page refreshing method and device and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110569463A CN110569463A (en) | 2019-12-13 |
| CN110569463B true CN110569463B (en) | 2022-06-14 |
Family
ID=68774527
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910712651.6A Active CN110569463B (en) | 2019-08-02 | 2019-08-02 | Page refreshing method and device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110569463B (en) |
Families Citing this family (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111651703B (en) * | 2020-04-14 | 2023-06-30 | 北京奇艺世纪科技有限公司 | Page jump method and device, electronic equipment and readable storage medium |
| CN111580817B (en) * | 2020-05-11 | 2023-08-15 | 山东汇贸电子口岸有限公司 | Front-end implementation method for visual monitoring resource |
| CN111885424B (en) * | 2020-06-29 | 2022-04-01 | 银盛通信有限公司 | Method for adding uniform parameters to url based on Vue Router |
| CN111813410A (en) * | 2020-07-08 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | Method and device for multi-page combined display of browser data visualization development |
| CN112003788B (en) * | 2020-07-23 | 2021-12-14 | 北京达佳互联信息技术有限公司 | Data request sending method, device, equipment and medium |
| CN112615923B (en) * | 2020-12-21 | 2023-07-28 | 三六零科技集团有限公司 | Single-page application page display control method and device, terminal equipment and server |
| CN113051299A (en) * | 2021-03-03 | 2021-06-29 | 金蝶蝶金云计算有限公司 | Proxy information processing method, proxy information processing device, computer equipment and storage medium |
| CN113590052B (en) * | 2021-09-29 | 2022-01-07 | 深圳市信润富联数字科技有限公司 | Information storage method, device, equipment and storage medium |
| CN114697149B (en) * | 2022-04-01 | 2023-10-24 | 北京字跳网络技术有限公司 | View refreshing method, device, equipment and medium for video conference |
| CN115563428A (en) * | 2022-07-20 | 2023-01-03 | 合肥汉泰网络科技有限公司 | Method, system and computer equipment for rewriting virtual path of browser end |
| CN115292642B (en) * | 2022-07-29 | 2023-10-13 | 深圳市六度人和科技有限公司 | Page display method and device, storage medium and computer equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103399693A (en) * | 2013-07-08 | 2013-11-20 | 北京华胜天成科技股份有限公司 | Method and system for relocating menus after overall refreshment of single page |
| CN106657044A (en) * | 2016-12-12 | 2017-05-10 | 杭州电子科技大学 | Webpage address hopping method for improving security defense of website system |
| CN108491206A (en) * | 2018-04-12 | 2018-09-04 | 江南大学 | A kind of SPA single-pages realization method and system |
| CN110032404A (en) * | 2018-11-29 | 2019-07-19 | 阿里巴巴集团控股有限公司 | A kind of management method and device of refresh tasks |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102185923A (en) * | 2011-05-16 | 2011-09-14 | 广州市动景计算机科技有限公司 | Webpage browsing method for mobile communication equipment terminal |
-
2019
- 2019-08-02 CN CN201910712651.6A patent/CN110569463B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103399693A (en) * | 2013-07-08 | 2013-11-20 | 北京华胜天成科技股份有限公司 | Method and system for relocating menus after overall refreshment of single page |
| CN106657044A (en) * | 2016-12-12 | 2017-05-10 | 杭州电子科技大学 | Webpage address hopping method for improving security defense of website system |
| CN108491206A (en) * | 2018-04-12 | 2018-09-04 | 江南大学 | A kind of SPA single-pages realization method and system |
| CN110032404A (en) * | 2018-11-29 | 2019-07-19 | 阿里巴巴集团控股有限公司 | A kind of management method and device of refresh tasks |
Non-Patent Citations (2)
| Title |
|---|
| Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案;ECMAScripter;《https://blog.csdn.net/fabulous1111/article/details/79933776》;20180413;第1-6页 * |
| vue-router（路由）详细教程;Yin_Xiaobo;《https://blog.csdn.net/wulala_hei/article/details/80488727》;20180528;第1-8页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110569463A (en) | 2019-12-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110569463B (en) | Page refreshing method and device and storage medium | |
| CN109348171B (en) | Video networking monitoring video acquisition method and device | |
| CN110121059B (en) | Monitoring video processing method, device and storage medium | |
| CN110647698B (en) | Page loading method and device, electronic equipment and readable storage medium | |
| CN111092863B (en) | Method, client, server, device and medium for accessing internet website | |
| CN108880851B (en) | Configuration updating method and interaction system | |
| CN110719258B (en) | Server access method and system | |
| CN109286826B (en) | Information display method and device | |
| CN110113564B (en) | Data acquisition method and video networking system | |
| CN110213334B (en) | Method and device for transmitting shared file | |
| CN109768957B (en) | Method and system for processing monitoring data | |
| CN110609818A (en) | Log processing method and device | |
| CN111212255B (en) | Monitoring resource obtaining method and device and computer readable storage medium | |
| CN110392227B (en) | Data processing method, device and storage medium | |
| CN110138729B (en) | Data acquisition method and video networking system | |
| CN109857419B (en) | Method and device for automatically upgrading scheduling system | |
| CN110519554B (en) | Monitoring detection method and device | |
| CN110418169B (en) | Monitoring data carousel method and device | |
| CN108881148B (en) | Data acquisition method and device | |
| CN110557411A (en) | video stream processing method and device based on video network | |
| CN109450995B (en) | Method and system for acquiring server data | |
| CN110324578B (en) | Monitoring video processing method, device and storage medium | |
| CN110958461B (en) | Method and device for detecting connection state of video networking server | |
| CN110830185B (en) | Data transmission method and device | |
| CN110120937B (en) | Resource acquisition method, system, device and computer readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |