CN106201459B - A kind of method and system of rapid build special topic landing page - Google Patents

Abstract

The invention discloses a kind of method and system of rapid build special topic landing page, it is related to landing page constructing technology field.This method comprises: the initialization operation page；It obtains history and lands page data, if obtaining successfully, displaying history lands the page of page in operation pages and the container module and assembly module of load history landing page show blank page if obtaining not successfully in operation pages in the page of displaying；Then, container module and assembly module needed for loading this building in the page of current presentation, in per the page when the user clicks when container module or component module, the processing event of corresponding module is triggered, render the editable attribute status of clicked part and saves the data after rendered operation；The preview page of the landing page currently constructed is generated according to the data of preservation.Energy rapid build of the present invention goes out special activities landing page, not only reduces manpower and material resources cost, and building is high-efficient, landing page is high-quality.

Description

A method and system for quickly building a special landing page

technical field

The invention relates to the technical field of landing page construction, in particular to a method and system for quickly constructing a special landing page.

Background technique

Nowadays, in order to promote the company's business, some large companies usually hold some promotion or preferential activities for related products. When holding these related activities, someone needs to be responsible for making the relevant special event pages to cooperate with the landing of the activities on the web, that is, to make the landing pages of the special events. A landing page refers to a specific marketing activity with a clear theme sent by the publisher in other places when the visitor sees it—attractive discount information published through email, social media or advertisements, etc., and is linked to the designated website after clicking the first page of . In other words, landing pages provide visitors with a "hyper-targeted" experience: by presenting a specific page, pointing them to a clear path to continue to deepen their relationship with the site.

At present, when making the landing page of a special event, the designers of the event design department usually design the specific plan of the event for the product, and then submit the specific plan of the event to a dedicated network technology designer to design a special special event landing page.

However, in actual operation, because two different departments (sometimes even more departments) are involved and there are many personnel in each department, this will directly lead to an increase in communication costs; in addition, the modification of each small technical solution will also cause The increase of one or more communication costs will seriously affect the construction efficiency of the landing page, and once there is a deviation in the communication process, it will directly affect the quality of the final landing page, wasting a lot of manpower and material resources.

Contents of the invention

The purpose of the present invention is to overcome the shortcomings of the above-mentioned background technology and provide a method and system for quickly constructing a special landing page, so that event designers can quickly build a special event landing page without relying on web page designers, not only Reduce the cost of manpower and material resources, and the construction efficiency is high, and the quality of the landing page is good.

In order to achieve the above purpose, the present invention provides a method for quickly building a special landing page, including the following steps:

A. After entering the operation page according to the URL information of the operation page input by the user, initialize the operation page and go to step B;

B. Obtain the historical landing page data according to the URL information of the operation page input by the user. The historical landing page data includes the page data of the historical landing page and the container module and component module information loaded by the historical landing page. The container module is used to accommodate components module and layout the page, and the component module is used to complete a certain page function; if the acquisition is successful, go to step C; if the acquisition is not successful, display a blank page in the operation page, and go to step D;

C. Analyze the page data in the historical landing page data, and display the page of the historical landing page in the operation page according to the page data; analyze the information of the container module and component module loaded in the historical landing page data, and according to the loaded container module and component module information, load the container module and component module of the historical landing page on the displayed page, and go to step D;

D. On the currently displayed page, load the container modules and component modules required for this build, and go to step E;

E. Whenever the user clicks on the container module or component module in the currently displayed page, the processing event of the corresponding module is triggered, and the editable attribute status of the clicked part is rendered. The editable attribute status includes copywriting, width and height, and color; the current Save the data after each rendering operation on the displayed page, and turn to step F;

F. Generate a preview page of the currently constructed landing page according to the data saved in step E, and end.

On the basis of the above technical solution, in step B, according to the operation page URL information input by the user, the historical landing page data is obtained, which specifically includes the following operations: use JavaScript script to query the historical landing page information in the operation page URL information input by the user Page ID, if the page ID is not queried, it means that the relevant landing page has not been built before, and the acquisition is unsuccessful; if the page ID is queried, it means that the relevant landing page has been built before, then continue to use JavaScript scripts to get The page data of the historical landing page corresponding to the page ID and the information of the container module and component module loaded by the historical landing page.

On the basis of the above technical solution, the page functions described in step B include head navigation functions, player functions, button functions, Weibo sharing functions, and lottery draw functions.

On the basis of the above technical solution, in step D, when loading the container modules and component modules required for this construction, it can be loaded by loading a preset collection package, which is used to pre-install The designed related container modules and component modules are combined and packaged.

On the basis of the above technical solution, Step F specifically includes the following operations: Step F1: According to the data saved in Step E, generate a landing page page information file in JSON format, the landing page page information file includes the pages of the currently constructed landing page information, go to step F2; step F2: use node.js to parse the landing page information file in JSON format, obtain the corresponding logic code string and export the page code of the landing page, go to step F3; step F3: export the After the page code of the landing page is base64 encoded, it is sent to PHP that provides web page routing for analysis; through the preview interface of PHP, jump to the preview address, and use the page code parsed and restored by PHP in the preview address to generate the currently constructed landing page preview page.

At the same time, the present invention also provides a system for rapidly constructing a special landing page, including an operation page initialization unit, a historical landing page data acquisition unit, a historical landing page data processing unit, a landing page construction unit, and a preview page generation unit;

The operation page initialization unit is used to: initialize the operation page after entering the operation page according to the operation page URL information input by the user; send an acquisition signal to the historical landing page data acquisition unit;

The historical landing page data acquisition unit is used to: after receiving the acquisition signal, acquire historical landing page data according to the operation page URL information input by the user, and the historical landing page data includes the page data of the historical landing page and the loaded container of the historical landing page module, component module information, the container module is used to accommodate the component module and layout the page, the component module is used to complete a certain page function; if the acquisition is successful, send a processing signal to the historical landing page data processing unit; if If the acquisition is unsuccessful, a blank page is displayed on the operation page, and a construction signal is sent to the landing page construction unit;

The historical landing page data processing unit is used for: after receiving the processing signal, analyze the page data in the historical landing page data, display the page of the historical landing page in the operation page according to the page data; analyze the historical landing page data and load According to the loaded container and component information, load the container module and component module of the historical landing page in the displayed page, and send a construction signal to the landing page construction unit;

The landing page construction unit is used to: after receiving the construction signal, load the container module and component module required for this construction in the currently displayed page; whenever the user clicks on the container module or component module in the currently displayed page , the processing event of the corresponding module is triggered, and the editable attribute status of the clicked part is rendered. The editable attribute status includes text, width and height, and color; the data of the currently displayed page after each rendering operation is saved, and sent to the preview page The generating unit sends a preview signal;

The preview page generation unit is configured to generate a preview page of the currently constructed landing page according to the data saved by the landing page construction unit after receiving the preview signal.

On the basis of the above technical solution, the process of obtaining historical landing page data by the historical landing page data acquisition unit according to the operation page URL information input by the user is as follows: using JavaScript script to query the historical landing page in the operation page URL information input by the user If the page ID is not queried, it means that the relevant landing page has not been constructed before, and the acquisition is unsuccessful; The page data of the historical landing page corresponding to the above page ID and the information of the container module and component module loaded by the historical landing page.

On the basis of the above technical solution, the page functions include a head navigation function, a player function, a button function, a microblog sharing function, and a lottery drawing function.

On the basis of the above technical solution, when the landing page construction unit loads the container modules and component modules required for this construction, it can be loaded by loading a preset collection package, and the preset collection package is used for Combine and package the designed related container modules and component modules in advance.

On the basis of the above technical solution, the process of the preview page generation unit generating the preview page of the currently constructed landing page is: according to the data saved by the landing page construction unit, a landing page page information file in JSON format is generated, and the landing page page The information file contains the page information of the currently constructed landing page; use node.js to parse the landing page information file in JSON format, obtain the corresponding logic code string and export the page code of the landing page; After base64 encoding, send it to PHP that provides web page routing for analysis; through the preview interface of PHP, jump to the preview address, and use the page code parsed and restored by PHP in the preview address to generate the preview page of the currently built landing page.

The beneficial effects of the present invention are:

In the present invention, after the operation page is initialized, the historical landing page data constructed by the user will be actively obtained. If the acquisition is successful, it indicates that the relevant landing page has been constructed before, and the page of the historical landing page will be displayed on the operation page, and in the Load the container module and component module of the historical landing page on the displayed page; if the acquisition is unsuccessful, it means that the relevant landing page has not been built before, and only a blank page will be displayed on the operation page; Load the container module and component module required for this build in the currently displayed page, and then whenever the user clicks on the container module or component module in the currently displayed page, trigger the processing event of the corresponding module, and render the clickable part Edit the attribute status, and save the data after each rendering operation on the currently displayed page; finally, generate a preview page of the currently constructed landing page based on the saved data.

Compared with the prior art, the present invention enables event designers to quickly build landing pages for special events without relying on web page designers, which not only reduces the large amount of manpower and material costs that companies invest in making landing pages for special events, Moreover, the construction efficiency of the landing page is effectively improved, the repeated communication process of multiple departments and personnel is avoided, and the construction quality of the landing page is guaranteed.

Description of drawings

Fig. 1 is a flow chart of a method for quickly constructing a special landing page in an embodiment of the present invention;

Fig. 2 is a structural block diagram of a system for quickly building a special landing page in an embodiment of the present invention.

Detailed ways

The present invention will be further described in detail below in conjunction with the accompanying drawings and specific embodiments.

Referring to Figure 1, the embodiment of the present invention provides a method for quickly building a special landing page, including the following steps:

Step S1: After entering the operation page according to the URL information of the operation page input by the user, initialize the HTML (HyperText Markup Language) structure, CSS (Cascading Style Sheets, Cascading Style Sheets) and JavaScript scripts related to the operation page, and transfer to Step S2.

Step S2: Obtain historical landing page data according to the URL information of the operation page input by the user. The historical landing page data includes the page data of the historical landing page (that is, the landing page constructed last time) and the container module loaded by the historical landing page, The information of the component module; if the acquisition is successful, it means that the relevant landing page has been built before and has historical landing page data, and then go to step S3; if the acquisition is unsuccessful, it means that the relevant landing page has not been built before, and there is no historical landing page data, then in A blank page is displayed on the operation page, and then go to step S5.

In actual operation, in step S2, the historical landing page data is obtained according to the URL information of the operation page input by the user, specifically including the following operations: using the initialized JavaScript script, querying the page ID of the historical landing page in the URL information of the operation page input by the user ( It is understandable that this ID is generated when the user creates the landing page), if the page ID is not queried, it means that the relevant landing page has not been built before, and the acquisition is unsuccessful; if the page ID is queried, it means that the previous After constructing relevant landing pages, continue to use JavaScript scripts to obtain the page data of the historical landing pages corresponding to the page ID and the information of the container modules and component modules loaded by the historical landing pages.

In addition, it can be understood that the container module is used for accommodating component modules and laying out pages. Specifically, the container module uses a transparent rectangle drawn in the page by HTML and CSS to distinguish component modules (functional blocks) in the page. The component module is the smallest unit of page function, and one component module only completes one page function, and the page function blocks include header navigation, player, button, Weibo sharing, lottery drawing and so on. Each container module has a container slot, and when the component module is loaded, by adding the component module in the container slot, the relevant code parts of HTML, CSS and JavaScript written in the component module are automatically loaded. Theoretically, the container module can accommodate component modules, as well as container modules, but in order to reduce complexity, we do not recommend container modules to accommodate container modules, that is, there is only one component module in each container slot.

Step S3: Analyze the page data in the historical landing page data, display the page of the historical landing page on the operation page according to the page data, and turn to step S4.

Step S4: Analyze the information of containers and components loaded in the historical landing page data, and load the containers and components of the historical landing page on the displayed page according to the information of the loaded containers and components (that is, load the historical landing page built last time , the loaded container and components), go to step S5.

Step S5: On the currently displayed page, load the container module and component module required for this build, and go to step S6.

It can be understood that, for the convenience of the operator, all the required container modules and component modules can be added (loaded) to the page at one time. When the present invention loads the container modules and component modules required for this construction, it can be loaded The pre-set package is used to combine and package the designed related container modules and component modules in advance. When in use, just load the collection package directly, making the construction process fast and convenient.

Step S6: Whenever the user clicks on the container module or component module in the currently displayed page, the processing event of the corresponding module is triggered, and the editable attribute status of the clicked part is rendered. The editable attribute status includes copywriting, width and height, color, etc.; Save the data after each rendering operation on the currently displayed page, and turn to step S7.

Step S7: Generate a preview page of the currently constructed landing page according to the data saved in step S6, and end.

In actual operation, step S7 specifically includes the following operations:

Step S701: According to the data saved in step S6, generate a landing page page information file (such as pageinfo.json file) in JSON (JavaScript Object Notation, a lightweight data exchange format based on JavaScript programming language), the landing page The page information file contains the page information of the currently constructed landing page, such as the title, page background, which interfaces are needed, which container modules and component modules are available, etc., and then go to step S702;

Step S702: use node.js (a JavaScript operating environment) to parse the landing page page information file in JSON format, obtain the corresponding logic code string, and export the page code of the landing page, and turn to step 703;

When parsing, it will first parse the pageInfo page information field in the pageinfo.json file. This field stores the data fields that need to be provided by PHP in the page, such as $SYS and $ROOM, which are used for page logic. Then parse the package field and component field in the data separately, get the corresponding logical part from the local through fs.readFileSync, and then splice it into a complete logical code string, and finally merge them together to export the code of the page;

Step S703: base64-encode the page code of the exported landing page (one of the most common encoding methods for transmitting 8Bit byte codes on the Internet), and send it to PHP (Hypertext Preprocessor, hypertext preprocessing) that provides web page routing browser) for analysis; through the preview interface provided by PHP, jump to the preview address, and use the page code parsed and restored by PHP in the preview address to generate the preview page of the currently constructed landing page.

As shown in Figure 2, the embodiment of the present invention also provides a system for quickly building a special landing page, including an operation page initialization unit, a historical landing page data acquisition unit, a historical landing page data processing unit, a landing page construction unit, and a preview page generation unit unit;

The operation page initialization unit is used to: initialize the operation page after entering the operation page according to the URL information of the operation page input by the user; send an acquisition signal to the historical landing page data acquisition unit;

The historical landing page data acquisition unit is used to obtain the historical landing page data according to the URL information of the operation page input by the user after receiving the acquisition signal. The historical landing page data includes the page data of the historical landing page and the loaded container modules of the historical landing page, The information of the component module, the container module is used to accommodate the component module and layout the page, the component module is used to complete a certain page function; if the acquisition is successful, send a processing signal to the historical landing page data processing unit; if the acquisition is not If successful, a blank page is displayed on the operation page, and a construction signal is sent to the landing page construction unit;

The historical landing page data processing unit is used to: analyze the page data in the historical landing page data after receiving the processing signal, display the page of the historical landing page in the operation page according to the page data; analyze the container loaded in the historical landing page data , component information, according to the loaded container and component information, load the container module and component module of the historical landing page in the displayed page, and send a construction signal to the landing page construction unit;

The landing page construction unit is used to: after receiving the construction signal, load the container modules and component modules required for this construction in the currently displayed page; whenever the user clicks on the container module or component module in the currently displayed page, Trigger the processing event of the corresponding module, and render the editable attribute status of the clicked part. The editable attribute status includes text, width, height, and color; save the data after each rendering operation on the currently displayed page, and send it to the preview page generation unit send a preview signal;

The preview page generation unit is used for: after receiving the preview signal, generate a preview page of the currently constructed landing page according to the data saved by the landing page construction unit.

It should be noted that: when the system provided by the above-mentioned embodiment is in operation, the division of the above-mentioned functional modules is only used as an example for illustration. The internal structure is divided into different functional modules to complete all or part of the functions described above.

The present invention is not limited to the above-mentioned embodiments. For those of ordinary skill in the art, without departing from the principle of the present invention, some improvements and modifications can also be made, and these improvements and modifications are also considered protection of the present invention. within range.

The content not described in detail in this specification belongs to the prior art known to those skilled in the art.

Claims (10)

1. A method for quickly building a special landing page, characterized in that the method comprises the following steps: A. After entering the operation page according to the URL information of the operation page input by the user, initialize the operation page and go to step B; B. Obtain the historical landing page data according to the URL information of the operation page input by the user. The historical landing page data includes the page data of the historical landing page and the container module and component module information loaded by the historical landing page. The container module is used to accommodate components module and layout the page, and the component module is used to complete a certain page function; if the acquisition is successful, go to step C; if the acquisition is not successful, display a blank page in the operation page, and go to step D; C. Analyze the page data in the historical landing page data, and display the page of the historical landing page in the operation page according to the page data; analyze the information of the container module and component module loaded in the historical landing page data, and according to the loaded container module and component module information, load the container module and component module of the historical landing page on the displayed page, and go to step D; D. On the currently displayed page, load the container modules and component modules required for this build, and go to step E; E. Whenever the user clicks on the container module or component module in the currently displayed page, the processing event of the corresponding module is triggered, and the editable attribute status of the clicked part is rendered. The editable attribute status includes copywriting, width and height, and color; the current Save the data after each rendering operation on the displayed page, and turn to step F; F. Generate a preview page of the currently constructed landing page according to the data saved in step E, and end. 2. The method for rapidly constructing a special landing page as claimed in claim 1, characterized in that: in step B, the acquisition of historical landing page data according to the URL information of the operation page input by the user specifically includes the following operations: using JavaScript scripts, in Query the page ID of the historical landing page in the operation page URL information entered by the user. If the page ID is not found, it means that the relevant landing page has not been built before, and the acquisition is unsuccessful; if the page ID is found, it means that it has been built before. For the relevant landing pages, continue to use the JavaScript script to obtain the page data of the historical landing pages corresponding to the page ID and the information of the container modules and component modules loaded by the historical landing pages. 3. The method for quickly building a special landing page according to claim 1, wherein the page functions in step B include head navigation, player, button, Weibo sharing, and lottery drawing. 4. The method for quickly building a special landing page as claimed in claim 1, characterized in that: in step D, when loading the container modules and component modules required for this construction, it can be carried out by loading a preset collection package Loading, the preset assembly package is used to combine and package the designed related container modules and component modules in advance. 5. The method for quickly building a special landing page as claimed in claim 1, wherein step F specifically includes the following operations: Step F1: According to the data saved in step E, generate a landing page page information file in JSON format, the landing page page information file contains the page information of the currently constructed landing page, and go to step F2; Step F2: Use node.js to parse the landing page information file in JSON format, obtain the corresponding logic code string and export the page code of the landing page, and then go to step F3; Step F3: base64-encode the exported page code of the landing page, and send it to PHP that provides web page routing for analysis; through the preview interface of PHP, jump to the preview address, and use the page code parsed and restored by PHP in the preview address Generates a preview page of the currently built landing page. 6. A system for quickly building a special landing page, characterized in that the system includes an operation page initialization unit, a historical landing page data acquisition unit, a historical landing page data processing unit, a landing page construction unit, and a preview page generation unit; The operation page initialization unit is used to: initialize the operation page after entering the operation page according to the operation page URL information input by the user; send an acquisition signal to the historical landing page data acquisition unit; The historical landing page data acquisition unit is used to: after receiving the acquisition signal, acquire historical landing page data according to the operation page URL information input by the user, and the historical landing page data includes the page data of the historical landing page and the loaded container of the historical landing page module, component module information, the container module is used to accommodate the component module and layout the page, the component module is used to complete a certain page function; if the acquisition is successful, send a processing signal to the historical landing page data processing unit; if If the acquisition is unsuccessful, a blank page is displayed on the operation page, and a construction signal is sent to the landing page construction unit; The historical landing page data processing unit is used for: after receiving the processing signal, analyze the page data in the historical landing page data, display the page of the historical landing page in the operation page according to the page data; analyze the historical landing page data and load According to the loaded container and component information, load the container module and component module of the historical landing page in the displayed page, and send a construction signal to the landing page construction unit; The landing page construction unit is used to: after receiving the construction signal, load the container module and component module required for this construction in the currently displayed page; whenever the user clicks on the container module or component module in the currently displayed page , the processing event of the corresponding module is triggered, and the editable attribute status of the clicked part is rendered. The editable attribute status includes text, width and height, and color; the data of the currently displayed page after each rendering operation is saved, and sent to the preview page The generating unit sends a preview signal; The preview page generation unit is configured to generate a preview page of the currently constructed landing page according to the data saved by the landing page construction unit after receiving the preview signal. 7. The system for quickly building a special landing page as claimed in claim 6, wherein the process of obtaining historical landing page data by the historical landing page data acquisition unit according to the operation page URL information input by the user is: using JavaScript scripts, Query the page ID of the historical landing page in the URL information of the operation page input by the user. If the page ID is not found, it means that the relevant landing page has not been built before, and the acquisition is unsuccessful; if the page ID is found, it means that it was built before After passing the relevant landing page, continue to use the JavaScript script to obtain the page data of the historical landing page corresponding to the page ID and the information of the container module and component module loaded by the historical landing page. 8. The system for quickly building a special landing page according to claim 6, wherein the page functions include a head navigation function, a player function, a button function, a microblog sharing function, and a lottery drawing function. 9. The system for quickly constructing thematic landing pages as claimed in claim 6, characterized in that: when the landing page construction unit loads the container modules and component modules required for this construction, it can load the preset collection package The pre-set package is used to combine and package the designed related container modules and component modules in advance. 10. The system for rapidly constructing a special landing page as claimed in claim 6, wherein the process of generating the preview page of the currently constructed landing page by the preview page generation unit is: according to the data stored by the landing page construction unit, generate The landing page page information file in JSON format, which contains the page information of the currently constructed landing page; use node.js to parse the landing page page information file in JSON format, obtain the corresponding logic code string and export the landing page The page code of the exported landing page is base64-encoded and sent to PHP that provides web page routing for analysis; through the preview interface of PHP, jump to the preview address, and use PHP to parse and restore the page in the preview address The code generates a preview page of the currently built landing page.