A page generation and updating method

Abstract

The present invention discloses a page generation and update method, which belongs to the field of Internet technology. This solution first designs a page template file, uses semantic tags as placeholders in the page template file, defines a corresponding HTML code template for each semantic tag, and develops a semantic tag plug-in for a rich text editor; then creates an editing interface based on the page template file, creates a rich text editor for each semantic tag in the template file, and edits the content corresponding to each semantic tag through the rich text editor and its semantic tag plug-in; then monitors the changes in the content of the rich text editor, binds the HTML code that needs to be replaced with the semantic tag, and forms an HTML code snippet list; finally, the template engine generates or updates the page based on the HTML code snippet list. The present invention realizes flexible editing and efficient management of page content through template files and rich text editor plug-ins, significantly improving operational efficiency.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a page generation and updating method. Background Art

[0002] In content-focused pages like e-commerce, news, and blog aggregation, the page layout is typically fixed. The editing and publishing of content for these pages is typically done by operations personnel through the operations platform. However, the following issues arise during content editing and updating:

[0003] 1. High technical threshold: Content editing and updating require operators to have certain basic knowledge of HTML, CSS, etc., which puts high technical requirements on operators and increases the difficulty of their work.

[0004] 2. Inefficiency: Due to the existence of technical barriers, operators often need to spend more time and energy when editing and updating content, which affects work efficiency.

[0005] These issues not only limit the flexibility of operations staff but also reduce the overall efficiency of content editing and publishing. Therefore, a solution that lowers the technical barriers and improves editing and updating efficiency is urgently needed to meet the growing demand for content management and publishing. Summary of the Invention

[0006] The technical problem to be solved by the present invention is: to provide a page generation and updating method in view of the above-mentioned defects of the prior art.

[0007] To achieve the above object, the present invention provides a page generation and updating method, which includes the following steps:

[0008] Step S1, designing a page template file, in which one or more semantic tags are used as placeholders to replace the actual content of the page;

[0009] Step S2: defining an HTML code template for each semantic tag and developing a semantic tag plug-in for a rich text editor; in response to a user's click operation, the semantic tag plug-in for the rich text editor displays the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor;

[0010] Step S3: Create an editing interface based on the page template file, create a rich text editor for each semantic tag in the page template file, and edit the page content corresponding to each semantic tag using the rich text editor and the rich text editor semantic tag plug-in; if the page is updated, obtain the page content of the previous historical version and display the content corresponding to each semantic tag in the corresponding rich text editor;

[0011] Step S4: monitor changes in the content of each rich text editor, obtain the HTML code corresponding to the page content in the rich text editor, bind the HTML code to the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list; if it is an updated page, compare and merge the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, bind the new HTML code to the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list;

[0012] Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

[0013] Preferably, in step S2, the specific method of defining an HTML code template for each semantic tag is: the semantic tag contains a string part, the string part of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string part in the semantic tag.

[0014] Preferably, in step S2, the specific method for developing a rich text editor semantic tag plug-in is: the rich text editor semantic tag plug-in responds to the user's click operation, and displays the corresponding page elements and placeholder content on the page according to the type of each tag in the HTML code template corresponding to the semantic tag and the id and class attribute values.

[0015] Preferably, in step S3, the specific method of creating a rich text editor bound to each semantic tag in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor.

[0016] Preferably, in step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding a processing function of an onchange event or an onblur event.

[0017] Preferably, in step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node contents according to the comparison results to form a new HTML code.

[0018] Preferably, the specific method for converting to the custom JSON format is: taking the root node as a JSON object, its structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the list of child nodes of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node.

[0019] Preferably, the specific method of replacing or merging the node contents according to the comparison result to form a new HTML code includes:

[0020] Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed;

[0021] For nodes whose content has been modified, the modified version will prevail. For newly added child nodes under the nodes in the original DOM tree, the newly added child nodes will be merged with the old nodes in the historical version.

[0022] Preferably, the specific method of replacing or merging the node contents according to the comparison result to form a new HTML code further includes:

[0023] If the componentName field of the root node matches, but the number of mismatched first-level child nodes of the root node exceeds the preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the content in the rich text editor is used as the new HTML code.

[0024] Preferably, before step S3, the method further includes:

[0025] A rich text editor interactive function plug-in has been developed for page interactive functions. The rich text editor interactive function plug-in responds to a user's click operation and inserts a page with interactive functions in the rich text editor in the form of an iframe.

[0026] The present invention has the following beneficial effects: the present invention first designs a page template file, uses semantic tags as placeholders in the page template file to replace the actual content of the page, defines a corresponding HTML code template for each semantic tag, and develops a semantic tag plug-in for the rich text editor; then creates an editing interface based on the page template file, creates a rich text editor for each semantic tag in the template file, and edits the content corresponding to each semantic tag through the rich text editor and its semantic tag plug-in; then monitors the changes in the content of each rich text editor, binds the HTML code that needs to be replaced with the semantic tag, and forms an HTML code snippet list; finally, the template engine generates or updates the page based on the HTML code snippet list. This solution significantly reduces the technical threshold for operations personnel through page templates and rich text editor plug-ins, allowing non-technical personnel to efficiently manage and edit page content, greatly improving operational efficiency, simplifying the editing and management process of page content, and making operations more convenient and efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0028] Figure 1 A schematic diagram of the steps of a page generation and updating method provided by an embodiment of the present invention.

[0029] Figure 2 A schematic diagram of a rich text editor provided by an embodiment of the present invention.

[0030] Figure 3This is a rendering of inserting an interactive accounting module by clicking an accounting plug-in in a rich text editor provided by an embodiment of the present invention.

[0031] Figure 4 A schematic diagram of the HTML code for semantic tags provided by an embodiment of the present invention.

[0032] Figure 5 A schematic diagram of an initial page displayed in a rich text editor through a rich text editor semantic tag plug-in provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0033] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0034] The embodiments of the present invention are described in further detail below in conjunction with the accompanying drawings. It should be understood that the embodiments described herein are only used to illustrate and explain the present invention and are not intended to limit the present invention.

[0035] like Figure 1 As shown, an embodiment of the present invention provides a page generation and updating method, the method comprising the following steps:

[0036] Step S1 : designing a page template file, in which one or more semantic tags are used as placeholders to replace actual page content.

[0037] In an embodiment of the present invention, ESJ (Embedded JavaScript) is used to create an .ejs template file, and <%-%> is used in the .esj template file to define semantic tags. In actual applications, the required page template file is written and designed according to the page interaction effect, and the content contains some semantic tags or special tags for subsequent data replacement and filling, as well as key code scripts, such as: header, navigation bar, bottom, etc. In order to facilitate comparison with the business, business-specific semantic tags are introduced in the template design. The identifier of the semantic tag is a string, and each string uniquely identifies a semantic tag. For example, <%-product-info%> is used to identify the product information part, and <%-product-description%> is used to describe the product details. In addition, it can also be classified and named according to the commonality and relevance of the content to form a tag system with business characteristics. For example, product tags such as <%-product-category->(product category) and <%-product-detail->(product details) are used to organize and manage product information; service tags such as <%-service-introduction->(service introduction) and <%-service-process->(service process) are used to display and explain service content; and user tags such as <%-user-profile->(user profile) and <%-user-activity->(user activity) are used to manage and display user information. Semantic tags can be used to further construct hierarchical page content, or to achieve more complex page hierarchies through nested template files.

[0038] Examples of level labels are as follows:

[0039]

[0040] <%-product-category%>

[0041] <%-product-detail%>

[0042] <%-product-info%>

[0043]

[0044]

[0045] <%-product-description%>

[0046]

[0047] An example of nested tags / templates is as follows:

[0048]

[0049] <%-product-list%>

[0050]

[0051] <%users.forEach(function(user){%>

[0052] <%-include('product.ejs',{user:user});%>

[0053] <%});%>

[0054]

[0055] <%-product-similar%>

[0056]

[0057] Semantic tags simplify the representation of data and clarify the purpose and ownership of each part of the data. They have significant advantages in improving the clarity of content structure, enhancing the expressiveness of semantic information, and accelerating the development process.

[0058] In some embodiments of the present invention, when designing a page template file, CSS, JS and other resources are compressed and optimized, and corresponding static page versions can be generated for different devices. For example, corresponding style files are added to mobile H5 and PC devices to optimize the responsive layout performance.

[0059] In some embodiments of the present invention, page template files are stored in the distributed object storage system minio. This distributed object system enables efficient template storage and access, supports high availability and data redundancy, and ensures system stability and scalability. In other embodiments of the present invention, page template files are stored in GitLab. In practical applications, page template file storage paths can be organized according to business type to achieve efficient and orderly storage.

[0060] Step S2, defining an HTML code template for each of the semantic tags and developing a rich text editor semantic tag plug-in; the rich text editor semantic tag plug-in responds to a user's click operation and displays the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor.

[0061] In an embodiment of the present invention, a BS (Browser / Server) architecture is used to implement page generation and update functions, and operators publish and manage content through a unified operation platform. Operators access the operation platform through a browser and edit page content using a rich text editor. The rich text editor's semantic tag plug-in effectively reduces the technical threshold and editing difficulty. The browser side summarizes the HTML code that ultimately needs to be replaced in the page template file and submits it to the backend server. The server calls the EJS template engine to replace the semantic tags in the page template file with the HTML code submitted by the browser, generating a new static page file or updating the original static page file.

[0062] like Figure 2 As shown, this is the rich text editor interface corresponding to the <%-product-detail%> semantic tag. A large number of rich text editor plug-in icons are integrated above the editing area. Clicking the plug-in icon can quickly insert preset content in the editing area. In an embodiment of the present invention, a corresponding HTML code template is defined for each semantic tag in the page template file, and a rich text editor semantic tag plug-in is developed for each semantic tag. Clicking the rich text editor semantic tag plug-in can display the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor. The operator can insert the corresponding content in the page area according to the placeholder content prompt. By creating a page in this way, the operator can quickly get started without mastering the basic knowledge of HTML and CSS, which effectively improves operational efficiency.

[0063] In some embodiments of the present invention, in addition to the rich text editor semantic tag plug-in, a rich text editor interactive function plug-in is also developed for page interaction functions. The rich text editor interactive function plug-in responds to the user's click operation and inserts a page with interactive functions in the form of an iframe in the rich text editor. Figure 3 The following figure shows the effect of inserting an interactive accounting module by clicking the accounting plug-in in the rich text editor. In actual application, you can insert interactive modules at the corresponding position on the page as needed.

[0064] In an embodiment of the present invention, an HTML code viewing plug-in is designed to facilitate real-time viewing of the HTML code of the content in the rich text editor. Clicking the HTML code viewing plug-in displays the HTML code corresponding to the page content in the rich text editor. This function is typically used by developers to assist operations personnel in debugging page effects. Its specific implementation method is as follows: When the HTML code viewing plug-in is clicked, the display style value of the iframe tag in the rich text editor is read and set to none; then a div tag is added at the same level as the iframe tag, with an ID value of CodeMirror. The HTML source code under the body is split into individual tags, such as keywords, identifiers, operators, etc., and a dictionary mapping is performed using a js syntax structure to assign different colors to different tags. The pre tag is used to display the HTML code of all DOM nodes under the body element in the div tag with an ID value of CodeMirror according to HTML syntax and the assigned colors. When the HTML code viewing plug-in is clicked again, the div tag with an ID value of CodeMirror is hidden, and the original iframe tag in the rich text editor is revealed.

[0065] In addition, plug-ins can be developed for other commonly used functions based on operational needs to improve operational efficiency.

[0066] In the embodiment of the present invention, in step S2, the specific method of defining an HTML code template for each semantic tag is as follows: the semantic tag includes a string portion, the string portion of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string portion in the semantic tag. For example, for the semantic tag <%-product-detail%>, the root node of the corresponding HTML code template is <div id＝’product-detail’>。

[0067] The specific method for developing the semantic tag plug-in of the rich text editor is as follows: in response to the user's click operation, the semantic tag plug-in of the rich text editor displays the corresponding page elements and placeholder content in the page according to the types of each tag and the id and class attribute values in the HTML code template corresponding to the semantic tag.

[0068] As Figure 4 shown is the schematic diagram of the HTML code of product-detail. As Figure 5 shown is the schematic diagram of the initial page displayed in the rich text editor through the semantic tag plug-in of the rich text editor. Figure 5 The page content in Figure 4 corresponds to the HTML code in Figure 5 . The semantic tag plug-in of the rich text editor inserts the corresponding page elements in the rich text editor by parsing the corresponding HTML code, and displays the corresponding placeholder content in the page according to the id and class attribute values of the tags. The mapping relationship between the attribute values of id and class and the placeholder content can be stored in the database in advance, and obtained by the front-end browser from the server when creating the rich text editing page.

[0069] Step S3, create an editing interface according to the page template file, create a rich text editor for each semantic tag in the page template file, and edit the page content corresponding to each semantic tag through the rich text editor and the semantic tag plug-in of the rich text editor; if it is to update the page, obtain the page content of the previous historical version, and display the content corresponding to each semantic tag in the rich text editor corresponding to it;

[0070] When the user creates a new page, they first need to select a page template file. The browser sends a request to the server to obtain the content of the page template file. The server obtains the specific content of the page template file from minio or gitlab according to the page template file name. The browser parses the page template file, creates an editing section, and creates a corresponding rich text editor for each semantic tag.

[0071] In an embodiment of the present invention, in step S3, the specific method of creating a rich text editor for each semantic tag in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor in the memory.

[0072] For newly added pages, operators use the rich text editor semantic tag plug-in to display placeholder content in the rich text editor, and perform operations such as editing text and inserting images according to the prompts of the placeholder content. For updated pages, the browser obtains the page content of the previous historical version based on the page ID, and displays the content corresponding to each semantic tag in the corresponding rich text editor. Operators make modifications based on the page content of the historical version. Whether it is a new page or an updated page, the root node corresponding to the semantic tag will be inserted under the body tag under the iframe of the rich text editor, and the id attribute value of the root node will be set to the string part in the semantic tag.

[0073] Page template files are usually universal and can be used to generate multiple pages. For example, if you create a product details page template, when operators need to generate specific pages for multiple products, they can select the same product details page template and fill in different product information each time to generate the corresponding details pages for different products.

[0074] Step S4, monitor the changes in the content of each rich text editor, and obtain the HTML code corresponding to the page content in the rich text editor, bind the HTML code with the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list; if it is an updated page, compare and merge the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, bind the new HTML code with the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list.

[0075] In the embodiment of the present invention, in step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding a processing function of an onchange event or an onblur event.

[0076] In an embodiment of the present invention, in step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node content according to the comparison result to form a new HTML code. In some embodiments of the present invention, the specific method of converting to a custom JSON format is as follows: the root node is treated as a JSON object, whose structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the list of child nodes of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node. Table 1 is an example of an HTML code snippet and its corresponding JSON object.

[0077] Table 1 Comparison table of HTML code and JSON object

[0078]

[0079]

[0080] In some embodiments of the present invention, the specific method of replacing or merging node contents according to the comparison result to form new HTML code includes:

[0081] Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed.

[0082] For nodes whose content has been modified, the modified content takes precedence. For example, for span tags with the same class attribute value, if the corresponding content is modified, the modified content takes precedence.

[0083] For newly added child nodes under the nodes in the original DOM tree, merge the newly added child nodes with the old nodes in the historical version. For example, in the previous historical version, there are 2 li tags under a ul tag, and in the rich text editor, there are 3 li tags under this ul tag, 2 of which have the same content as in the previous historical version, then the modified version shall prevail. If in the previous historical version, there are 2 li tags under a ul tag, and in the rich text editor, there is only 1 li tag under this ul tag, and the content of this li tag is different from the 2 li tags in the historical version, then merge the two versions to form 3 li tags. It is understandable that the processing strategy for newly added nodes can be adjusted according to actual needs.

[0084] When the number of nodes is large, the consumption of page memory for node comparison through JSON objects is large. In some embodiments of the present invention, if the componentName field of the root node matches, but the number of unmatched first-level child nodes of the root node exceeds a preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the page content in the rich text editor is used as the new HTML code. In the above two cases, it is considered that the content in the rich text editor is brand new, and all the content in the rich text editor is directly used to replace the content of the corresponding semantic tag of the original page. When the number of nodes is large, the above method can effectively reduce the browser page memory consumption.

[0085] Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

[0086] An editing page typically has multiple rich text editors. The browser monitors changes to the content of each rich text editor, collects the HTML code snippets that will eventually be replaced in the template, and forms an HTML code snippet list. In response to the user confirming the modification, the browser submits the contents of the HTML code snippet list to the server. For updated pages, if the content of a rich text editor has not changed, the content corresponding to that rich text editor in the previous historical version is placed in the corresponding position in the HTML code snippet list.

[0087] The server calls the EJS template engine and uses the corresponding HTML code in the HTML code snippet list to replace each semantic tag to generate a new static page or update the original page.

[0088] In some embodiments of the present invention, the static pages generated by the EJS template engine are stored in the distributed object storage system minio. In order to facilitate management and access, the generated static pages will be organized according to certain rules. For example, static pages can be stored in different minio file paths according to date, classification or other logic. The distributed object storage system adopts a high-performance storage engine and algorithm, which can provide excellent performance, support high-concurrency read and write operations, have the characteristics of low latency and high throughput, support horizontal expansion, and can easily add or delete nodes to meet storage needs of different scales. Using a distributed storage architecture to store data in a dispersed manner on multiple nodes can ensure data reliability and availability. The distributed object storage system supports redundant data storage and automatic repair, and can ensure data integrity and accessibility even in the event of node failure. The use of a distributed object storage system can greatly enhance the user experience.

[0089] The automatic publishing process of static pages can be connected with the EJS template engine to display or update static pages in real time on the client, thereby realizing a one-stop and efficient page management process and improving operation and maintenance efficiency.

[0090] The present invention has the following beneficial effects: the present invention first designs a page template file, uses semantic tags as placeholders in the page template file to replace the actual content of the page, defines a corresponding HTML code template for each semantic tag, and develops a semantic tag plug-in for the rich text editor; then creates an editing interface based on the page template file, creates a rich text editor for each semantic tag in the template file, and edits the content corresponding to each semantic tag through the rich text editor and its semantic tag plug-in; then monitors the changes in the content of each rich text editor, binds the HTML code that needs to be replaced with the semantic tag, and forms an HTML code snippet list; finally, the template engine generates or updates the page based on the HTML code snippet list. This solution significantly reduces the technical threshold for operations personnel through page templates and rich text editor plug-ins, allowing non-technical personnel to efficiently manage and edit page content, greatly improving operational efficiency, simplifying the editing and management process of page content, and making operations more convenient and efficient.

[0091] The above is only a specific embodiment of the present invention and cannot be used to limit the scope of the present invention. Equal changes made by ordinary technicians in this technical field based on this creation, as well as changes well known to technicians in this field, should still fall within the scope of the present invention.

Claims

1. A page generation and updating method, characterized in that: The method comprises the following steps: Step S1, designing a page template file, in which one or more semantic tags are used as placeholders to replace the actual content of the page; Step S2: defining an HTML code template for each semantic tag and developing a semantic tag plug-in for a rich text editor; in response to a user's click operation, the semantic tag plug-in for the rich text editor displays the page element layout and placeholder content corresponding to the HTML code template corresponding to the semantic tag in the rich text editor; Step S3: Create an editing interface based on the page template file, create a rich text editor for each semantic tag in the page template file, and edit the page content corresponding to each semantic tag using the rich text editor and the rich text editor semantic tag plug-in; if the page is updated, obtain the page content of the previous historical version and display the content corresponding to each semantic tag in the corresponding rich text editor; Step S4: monitor changes in the content of each rich text editor, obtain the HTML code corresponding to the page content in the rich text editor, bind the HTML code to the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list; if it is an updated page, compare and merge the page content in the rich text editor with the page content of the previous historical version to form a new HTML code, bind the new HTML code to the semantic tag corresponding to the rich text editor, and store it in the HTML code snippet list; Step S5: The template engine uses the content in the HTML code snippet list to generate a new page file or update an existing page file.

2. The page generation and updating method according to claim 1, characterized in that: In step S2, the specific method of defining an HTML code template for each semantic tag is as follows: the semantic tag includes a string part, the string part of each semantic tag is a unique value, and the id attribute value of the root node of the HTML code template is the same as the string part in the semantic tag.

3. The page generation and updating method according to claim 2, characterized in that: In step S2, the specific method for developing a rich text editor semantic tag plug-in is: the rich text editor semantic tag plug-in responds to the user's click operation, and displays the corresponding page elements and placeholder content on the page according to the type of each tag in the HTML code template corresponding to the semantic tag and the id and class attribute values.

4. The page generation and updating method according to claim 3, characterized in that: In step S3, the specific method of creating a rich text editor bound to each semantic tag in the page template file is: inserting an iframe tag in the editing area of ​​the rich text editor, inserting a body tag in the iframe tag, setting the contenteditable attribute of the body tag to true, and recording the correspondence between the iframe and the semantic tag in the rich text editor.

5. The page generation and updating method according to claim 1, characterized in that: In step S4, the specific method of monitoring the change of the content of each rich text editor is: monitoring the change of the content of each rich text editor by binding the processing function of the onchange event or the onblur event.

6. The page generation and updating method according to claim 5, characterized in that: In step S4, the specific method of comparing and merging the page content in the rich text editor with the page content of the previous historical version to form a new HTML code is: converting the HTML code in the page content in the rich text editor and the HTML code in the page content of the previous historical version into a custom JSON format, traversing and comparing the contents of each DOM node in the page in the rich text editor and the page of the previous historical version through the JSON format, replacing or merging the node contents according to the comparison results to form a new HTML code.

7. The page generation and updating method according to claim 6, characterized in that: The specific method for converting to the custom JSON format is: taking the root node as a JSON object, whose structure is {'componentName':,'props':{},'children':[],}, wherein the componentName field corresponds to the id attribute value of the root node, the props field corresponds to the set of other attributes and attribute values ​​of the root node, the children field corresponds to the list of child nodes of the root node, and the structure of each object in children is {'componentName':,'content':{'type':,'value':,'style':{},'class':}}, wherein the componentName field corresponds to the id attribute or class attribute value of the child node, the type field under the content field corresponds to the type of the node, the value field corresponds to the specific content of the node, the style attribute corresponds to the style of the node, and the class field corresponds to the class attribute value of the node.

8. The page generation and updating method according to claim 7, characterized in that: The specific method of replacing or merging the node contents according to the comparison result to form a new HTML code includes: Use the componentName field to locate the root node, traverse each child node under children in turn, and compare whether the content object value of each child node has changed; For nodes whose content has been modified, the modified version will prevail. For newly added child nodes under the nodes in the original DOM tree, the newly added child nodes will be merged with the old nodes in the historical version.

9. The page generation and updating method according to claim 8, characterized in that: The specific method of replacing or merging the node contents according to the comparison result to form a new HTML code also includes: If the componentName field of the root node matches, but the number of mismatched first-level child nodes of the root node exceeds the preset threshold, or the componentName field of the root node does not match, the comparison of subsequent nodes is skipped, and the HTML code corresponding to the content in the rich text editor is used as the new HTML code.

10. The page generation and updating method according to claim 1, characterized in that: Before step S3, the method further includes: A rich text editor interactive function plug-in has been developed for page interactive functions. The rich text editor interactive function plug-in responds to a user's click operation and inserts a page with interactive functions in the rich text editor in the form of an iframe.

Images