CN113987321A

CN113987321A - Page implementation method and device based on React frame, electronic equipment and storage medium

Info

Publication number: CN113987321A
Application number: CN202111265057.0A
Authority: CN
Inventors: 付利霞
Original assignee: Beijing Jindi Technology Co Ltd
Current assignee: Beijing Jindi Technology Co Ltd
Priority date: 2021-10-28
Filing date: 2021-10-28
Publication date: 2022-01-28

Abstract

The invention provides a page implementation method, a page implementation device, electronic equipment and a storage medium based on a React frame, wherein the method comprises the following steps: acquiring first page rendering information, extracting first TDK information in the first page rendering information, and packaging by using a preset component packaging tool according to the first TDK information to obtain a TDK updating component; updating second TDK information in the target page based on the TDK updating component; wherein the first TDK information and the second TDK information include any one or more of title element information, description element information, and keyword element information. The method, the device, the electronic equipment and the storage medium for realizing the page based on the React frame can show the latest TDK information when a server side renders the page, can also show the latest TDK information when a client side renders the page, and meet the requirement of search engine optimization.

Description

Page implementation method and device based on React frame, electronic equipment and storage medium

Technical Field

The invention relates to the technical field of computer application, in particular to a page implementation method and device based on a React frame, electronic equipment and a storage medium.

Background

When a user accesses the internet, the user often needs to use a search engine as a window for acquiring pages. In order to have a higher rank in the Search Engine, the TDK (Title, Description, Keywords) information of the displayed page must meet the requirements of SEO (Search Engine Optimization, chinese translation).

In the React framework, the prior art typically uses a hellemt component, providing server-side rendering, client-side rendering, or isomorphic rendering. However, for a single-page application, for example, when link (link) jumps to another page, the display page in the client may not show the latest TDK information, so that the requirement of the SEO of the website cannot be met, and thus the display page is directly removed or ranked back in the search engine, and further cannot be searched.

Disclosure of Invention

The present invention is directed to solving at least one of the problems of the prior art. Therefore, the invention provides a page implementation method, a page implementation device, electronic equipment and a storage medium based on a read frame, which can show the latest TDK information when a server side renders a page, can also show the latest TDK information when a client side renders a page, and meet the requirement of search engine optimization.

According to an aspect of the embodiments of the present invention, a method for implementing a page based on a read frame is provided, including:

acquiring first page rendering information, extracting first TDK information in the first page rendering information, and packaging by using a preset component packaging tool according to the first TDK information to obtain a TDK updating component;

updating second TDK information in a target page based on the TDK updating component;

wherein the first TDK information and the second TDK information include any one or more of title element information, description element information, and keyword element information.

Optionally, the TDK update component includes: any one or more of a title element information update component, a description element information update component, and a keyword element information update component.

Optionally, the updating the second TDK information in the target page based on the TDK updating component includes:

modifying second TDK information in a target page based on the TDK updating component;

and/or adding and/or deleting the second TDK information in the target page based on the TDK updating component.

acquiring second TDK information in the target page before updating;

comparing second TDK information before updating with first TDK information in the TDK updating component based on the TDK updating component to obtain a comparison result;

and updating second TDK information in the target page according to the comparison result.

Optionally, the obtaining the first page rendering information, and the extracting the first TDK information in the first page rendering information includes:

acquiring first page rendering information;

constructing a first Dom tree based on the first page rendering information;

and extracting first TDK information in the first Dom tree.

acquiring second page rendering information of the target page before updating;

constructing a second Dom tree based on the second page rendering information;

extracting second TDK information in the second Dom tree;

determining a difference part between second TDK information in the second Dom tree and first TDK information in the first Dom tree through a Diff algorithm to obtain a comparison result;

According to another aspect of the embodiments of the present invention, there is provided a page implementation apparatus based on a read frame, including:

the rendering information acquisition module is used for acquiring first page rendering information;

the TDK information extraction module is used for extracting first TDK information in the first page rendering information;

the TDK information packaging module is used for packaging by using a preset component packaging tool according to the first TDK information to obtain a TDK updating component;

the TDK updating module is used for updating second TDK information in the target page based on the TDK updating component;

According to still another aspect of an embodiment of the present invention, there is provided an electronic apparatus including: a processor and a memory; wherein the content of the first and second substances,

the memory to store the processor-executable instructions;

the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method according to any of the above embodiments of the present invention.

According to yet another aspect of the embodiments of the present invention, there is provided a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program is configured to execute the method according to any of the above-mentioned embodiments of the present invention.

According to a further aspect of embodiments of the present invention, there is provided a computer program comprising computer readable code, characterized in that when the computer readable code is run on a device, a processor in the device performs the method according to any of the above embodiments of the present invention.

The page implementation method, the page implementation device, the electronic equipment and the storage medium based on the record frame, provided by the embodiment of the invention, have the following beneficial effects:

and updating the TDK information of the display page after the link jump by using a TDK updating component packaged in the client, so that the latest TDK information of the display page is dynamically displayed based on single-page application realized by a read frame, and the TDK information of the webpage page is ensured to meet the requirement of optimization of a search engine so as to ensure the ranking of the webpage in the search engine.

Additional aspects and advantages of the invention will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the invention.

Drawings

The above and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:

fig. 1 is a schematic diagram illustrating a step of a page implementation method based on a fact frame according to an embodiment of the present invention;

FIG. 2 is a detailed step diagram of step S200 in FIG. 1;

fig. 3 is a schematic diagram illustrating another step of the read frame-based page implementation method according to the embodiment of the present invention;

FIG. 4 is a schematic structural block diagram of a page implementation apparatus based on a React frame according to an embodiment of the present invention;

fig. 5 is a structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the accompanying drawings are illustrative only for the purpose of explaining the present invention, and are not to be construed as limiting the present invention.

In the description of the present invention, unless otherwise explicitly limited, terms such as arrangement, installation, connection and the like should be understood in a broad sense, and those skilled in the art can reasonably determine the specific meanings of the above terms in the present invention in combination with the specific contents of the technical solutions.

In the present invention, the rendering manner includes: three modes of server rendering, client rendering and isomorphic rendering are adopted. The rendering mode of the server side refers to that the server side inquires corresponding rendering data in a database according to a request sent by the client side; the server completes the splicing of the rendering data and the page template to generate a rendering result; and the client renders the page according to the rendering result. The client rendering mode refers to that the server returns a blank page according to a request sent by the client; after receiving the blank page, the client sends a data request to the server; the server side inquires corresponding rendering data in a database according to the data request; after the client receives the rendering data, the client completes the splicing of the rendering data and the page template (namely, a blank page) to generate a rendering result, thereby completing the rendering of the page. The isomorphic rendering mode is a mode combining server rendering and client rendering, and refers to a mode that a server queries corresponding rendering data in a database according to a request sent by a client; the server completes the splicing of the rendering data and the page template to generate a rendering result; the client renders a home page according to the rendering result; and the subsequent page rendering is completed by the client.

In the development process of a web page front end, in order to ensure that the search engine optimization of a web page meets requirements, displaying of TDK information is a necessary link, wherein T represents a Title (Title) element in a header of a page of a website, D represents a Description (Description) element in the header of the page of the website, and K represents a keyword (keywords) element in the header of the page of the website.

The read develops a single page, and the characteristics of the read are that when a user opens a website page of a client or a refreshed website page of the client for the first time, the display page obtained by the three rendering modes can show the latest TDK information, but when the user jumps to other pages from the website page of the client opened for the first time or the website page of the refreshed client through link, the TDK information shown in the page based on the read frame is the TDK information shown in the website page of the client opened for the first time or the website page of the refreshed client instead of the latest TDK information obtained by rendering through a server because the read display page is generated by front-end route rendering of the client.

Due to the characteristics of the fact frame, the display page after the jump generated by the front-end route rendering of the client cannot show the latest TDK information, so that the page after the jump through the link cannot meet the requirement of the optimization of a search engine and is removed or sequenced backwards, and the page after the rendering cannot be searched.

In order to solve the above problem, the present invention proposes a solution, specifically as follows.

Exemplary method

Referring to fig. 1, an embodiment of the present invention provides a page implementation method based on a read frame, including the following steps:

step S100: acquiring first page rendering information, extracting first TDK information in the first page rendering information, and packaging by using a preset component packaging tool according to the first TDK information to obtain a TDK updating component;

when a user jumps to other pages through a link, a client sends a request to a server, the server sends corresponding first page rendering information to the client according to the request, the client extracts first TDK information in the first page rendering information after acquiring the first page rendering information sent by the server, and a TDK updating component is obtained by packaging through a preset component packaging tool according to the first TDK information.

It should be understood that, a person skilled in the art may select a method in the prior art to implement that the client obtains the first page rendering information and extracts the first TDK information in the first page rendering information, which is not limited herein.

The first page rendering information refers to a file storing first TDK information to be used when a page is rendered, and a common file is a json file and is used for storing the first TDK information to be displayed. The form can provide different first TDK information for different pages, and the subsequent updating process is convenient. And the first TDK information is the latest TDK information required to be used when rendering the page.

The first TDK information includes any one or more of title element information, description element information, and keyword element information, and a person skilled in the art may select the first TDK information according to a requirement of an actual SEO, for example, when the first TDK information only includes the title element information and the description element information and can meet the requirement of the SEO, the first TDK information may only select the first TDK information and include the title element information and the description element information, which is not limited herein. Preferably, in order to be able to accurately determine whether each page meets the requirements of the SEO, the first TDK information includes header element information, description element information, and keyword element information.

Optionally, the preset component packaging tool is a JavaScript component packaging tool. Specifically, the obtained first TDK information is packaged by the JavaScript component packaging tool to obtain the TDK update component.

Wherein, the TDK updates the subassembly and includes: any one or more of a title element information update component, a description element information update component, and a keyword element information update component. It should be understood that the TDK update component should have a one-to-one correspondence with the first TDK information. For example: the first TDK information includes title element information, description element information, and keyword element information, and the TDK updating component should also include a title element information updating component, a description element information updating component, and a keyword element information updating component corresponding to the first TDK information. The rest can be analogized, and the description is omitted here.

Step S200: and updating the second TDK information in the target page based on the TDK updating component.

Based on the TDK updating component, updating the second TDK information in the target page may specifically be updating the second TDK information in the target page by modifying an API of the document through the TDK updating component.

Wherein the second TDK information includes any one or more of title element information, description element information, and keyword element information. It should be noted that the kind of element information included in the first TDK information should be the same as that of the element information included in the second TDK information, so as to ensure that the TDK update component can find the corresponding element information to be modified in the target page.

Optionally, when a requirement of an SEO changes, the updating the second TDK information in the target page based on the TDK updating component includes:

and/or adding or deleting the second TDK information in the target page based on the TDK updating component.

For example, when the requirement of the SEO is changed, if the TDK updating component encapsulates a title element information updating component, a description element information updating component, and a keyword element information updating component according to the requirement of the new SEO, and the second TDK information before updating only includes the title element information updating component and the description element information updating component, then the TDK updating component needs to add corresponding keyword element information in the second TDK information; similarly, if the TDK update component encapsulates a title element information update component and a keyword element information update component according to the requirement of the new SEO, and the second TDK information before update includes the title element information update component, the description element information update component and the description element information update component, then, the TDK update component is required to delete the corresponding keyword element information in the second TDK information. In addition, the TDK update component may update the second TDK information, and add or delete the second TDK information, and so on, which is not described herein again. It should be noted that the updating in the embodiment of the present invention includes modifying, adding, and/or deleting, and is not limited herein.

In an alternative embodiment of the present invention, as shown in fig. 2, step S200 specifically includes:

step S201: acquiring second TDK information in the target page before updating;

step S202: comparing second TDK information before updating with first TDK information in the TDK updating component based on the TDK updating component to obtain a comparison result;

step S203: and updating second TDK information in the target page according to the comparison result.

It should be understood that, in this alternative embodiment, a person skilled in the art may select a method in the prior art to obtain the second TDK information in the target page before updating, which is not limited herein.

In this optional embodiment, step S202 and step S203 are specifically: determining the difference between the second TDK information and the first TDK information by using a Diff algorithm to obtain a comparison result; and updating the second TDK information in the target page according to the comparison result.

In another optional implementation manner of the present invention, the obtaining the first page rendering information and extracting the first TDK information in the first page rendering information includes:

acquiring first page rendering information;

constructing a first Dom tree based on the first page rendering information;

and extracting first TDK information in the first Dom tree.

In this optional implementation, the updating the second TDK information in the target page based on the TDK updating component includes:

acquiring second page rendering information of the target page before updating;

constructing a second Dom tree based on the second page rendering information;

extracting second TDK information in the second Dom tree;

This alternative embodiment will be described in detail below in order to make it more clearly understood by those skilled in the art. As shown in fig. 3, the obtaining the first page rendering information and extracting the first TDK information in the first page rendering information may specifically include:

step A100: the method comprises the steps that a client side obtains first page rendering information from a server side, and first TDK information in the first page rendering information is extracted; based on the first page rendering information, a render function is transferred to construct a first Dom tree; extracting first TDK information in the first Dom tree;

step A200: acquiring second page rendering information of the target page before updating; judging whether the states/prop are changed or not based on the second page rendering information; when the state/prop is changed, calling the render function to construct a second Dom tree; extracting second TDK information in the second Dom tree;

step A300: determining a difference part between second TDK information in the second Dom tree and first TDK information in the first Dom tree through a Diff algorithm to obtain a comparison result;

step A400: and updating second TDK information in the second Dom tree according to the comparison result.

The first Dom tree can also be called a real Dom tree, and the change of the first Dom tree can realize the change of the page; the second Dom tree, which may also be referred to as a virtual Dom tree, itself serves primarily to contrast differences from the first Dom tree, thereby facilitating subsequent rendering update processes.

In fact, in the fact that two Dom trees only compare nodes in the same layer, if a node is found to be absent, the node and its child nodes are completely deleted and are not used for further comparison. Thus, the comparison of the entire Dom tree can be completed only by traversing the tree once.

For nodes on the same layer, the fact increases or decreases a Key in the traversal of the array, and if the nodes are completely the same (same type and same attribute) and only have different positions, the fact only needs to consider the position transformation of the nodes on the same layer, does not need to destroy and recreate the nodes, and improves the operation performance.

In the embodiment, the second Dom tree is directly modified, so that the modification of the whole Dom tree is avoided, and the overall performance is improved.

In the embodiments of the invention, the TDK information of the display page after the link jump can be updated by using the TDK updating component packaged in the client, so that the latest TD K information of the display page is dynamically displayed based on the single-page application realized by the React frame, thereby ensuring that the TDK information of the webpage meets the optimization requirement of a search engine and further ensuring the ranking of the webpage in the search engine.

Exemplary devices

Another embodiment of the present invention provides a page implementation apparatus based on a read frame, as shown in fig. 4, the apparatus 20 includes: a rendering information obtaining module 201, a TDK information extracting module 202, a TDK information packaging module 203, and a TDK updating module 204. A rendering information obtaining module 201, configured to obtain first page rendering information; a TDK information extraction module 202, configured to extract first TDK information in the first page rendering information; the TDK information packaging module 203 is configured to package the first TDK information by using a preset component packaging tool to obtain a TDK update component; a TDK update module 204, configured to update second TDK information in the target page based on the TDK update component; wherein the first TDK information and the second TDK information include any one or more of title element information, description element information, and keyword element information.

Optionally, the TDK updating module 204 is further configured to modify second TDK information in the target page based on the TDK updating component; and/or adding and/or deleting the second TDK information in the target page based on the TDK updating component.

Optionally, the TDK updating module 204 is specifically configured to:

acquiring second TDK information in the target page before updating;

Optionally, the TDK updating module 204 is further specifically configured to:

acquiring first page rendering information;

constructing a first Dom tree based on the first page rendering information;

and extracting first TDK information in the first Dom tree.

Optionally, the TDK update module 204 is further configured to:

acquiring second page rendering information of the target page before updating;

constructing a second Dom tree based on the second page rendering information;

extracting second TDK information in the second Dom tree;

The read frame-based page implementation device provided by the embodiment of the invention corresponds to the read frame-based page implementation method provided by the invention, and other descriptions can refer to the description of the read frame-based page implementation method provided by the invention, and are not repeated herein.

Exemplary electronic device

Fig. 5 is a structural diagram of an electronic device according to an embodiment of the present invention. The electronic device may be either or both of the first device and the second device, or a stand-alone device separate from them, which stand-alone device may communicate with the first device and the second device to receive the acquired input signals therefrom. FIG. 5 illustrates a block diagram of an electronic device in accordance with an embodiment of the present invention. As shown in fig. 5, the electronic device 50 includes one or more processors 51 and a memory 52.

The processor 51 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.

The memory 52 may include one or more computer program products that may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. The volatile memory may include, for example, Random Access Memory (RAM), cache memory (cache), and/or the like. The non-volatile memory may include, for example, Read Only Memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium and executed by the processor 51 to implement the method for information mining of historical change records of the software program of the various embodiments of the present disclosure described above and/or other desired functions. In one example, the electronic device may further include: an input device 53 and an output device 54, which are interconnected by a bus system and/or other form of connection mechanism (not shown).

The input device 53 may also include, for example, a keyboard, a mouse, and the like.

The output device 54 can output various information to the outside. The output devices 54 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, among others.

Of course, for simplicity, only some of the components of the electronic device relevant to the present disclosure are shown in fig. 5, omitting components such as buses, input/output interfaces, and the like. In addition, the electronic device may include any other suitable components, depending on the particular application.

Exemplary computer program product and computer-readable storage Medium

In addition to the above-described methods and apparatus, embodiments of the present disclosure may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps in the method of information mining of historical change records according to various embodiments of the present disclosure described in the "exemplary methods" section above of this specification.

The computer program product may write program code for carrying out operations for embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.

Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform steps in a method of information mining of historical change records according to various embodiments of the present disclosure described in the "exemplary methods" section above in this specification.

The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The foregoing describes the general principles of the present disclosure in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present disclosure are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present disclosure. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the disclosure is not intended to be limited to the specific details so described.

In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The block diagrams of devices, apparatuses, systems referred to in this disclosure are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. The words "or" and "as used herein mean, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".

The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.

It is also noted that in the devices, apparatuses, and methods of the present disclosure, each component or step can be decomposed and/or recombined. These decompositions and/or recombinations are to be considered equivalents of the present disclosure. The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the disclosure to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.

Claims

1. A page implementation method based on an React frame is characterized by comprising the following steps:

2. The reach frame based page implementation method of claim 1, wherein the TDK update component comprises: any one or more of a title element information update component, a description element information update component, and a keyword element information update component.

3. The reach frame based page implementation method of claim 1, wherein the updating second TDK information in a target page based on the TDK update component comprises:

4. The reach frame based page implementation method of claim 1, wherein the updating second TDK information in a target page based on the TDK update component comprises:

acquiring second TDK information in the target page before updating;

5. The reach frame-based page implementation method according to claim 1, wherein the obtaining first page rendering information, and the extracting first TDK information in the first page rendering information includes:

acquiring first page rendering information;

constructing a first Dom tree based on the first page rendering information;

and extracting first TDK information in the first Dom tree.

6. The reach frame based page implementation method of claim 5, wherein the updating second TDK information in a target page based on the TDK update component comprises:

acquiring second page rendering information of the target page before updating;

constructing a second Dom tree based on the second page rendering information;

extracting second TDK information in the second Dom tree;

7. A page implementation device based on a React frame is characterized by comprising:

8. An electronic device, comprising: a processor and a memory; wherein the content of the first and second substances,

the memory to store the processor-executable instructions;

the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method of any one of claims 1-6.

9. A computer-readable storage medium, characterized in that it stores a computer program for performing the method of any of the preceding claims 1-6.

10. A computer program comprising computer readable code, characterized in that when the computer readable code is run on a device, a processor in the device executes instructions for implementing the method of any of claims 1-6.