A method and apparatus for rapid webpage generation

Abstract

This invention discloses a method and apparatus for rapidly generating web pages. The method includes: obtaining an original HTML file, wherein the original HTML file is represented using a Document Object Model (DOM) and includes DOM element nodes and text nodes; setting processing logic for the original HTML file, including processing logic for DOM element nodes and processing logic for text nodes. The text node processing logic includes locating the text node to be modified using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The DOM element node processing logic includes setting the display style of the DOM element nodes and binding click events to the DOM element nodes; and generating a web page based on the original HTML file and its processing logic. This invention enables precise control over text nodes and DOM element nodes and improves the efficiency of page generation.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and more specifically, to a method and apparatus for rapidly generating web pages. Background Technology

[0002] In front-end development, we often encounter situations where there are many similar pages, such as back-end management systems. The page layout is basically the same: the top is the query criteria, the middle is the table operation buttons (export, add, etc.), and the bottom is the paginated table display. These pages are not only similar in layout and interaction, but also in internal logic. This involves a lot of repetitive work and reduces work efficiency. In addition, when multiple different people are involved in developing the same similar interface, even minor modifications require professional personnel to rework it.

[0003] To address the aforementioned issues, several template engine-based page generation methods have emerged in the prior art. For example, application CN111522546A discloses a page generation method, related apparatus, and front-end page. This method involves writing corresponding page description data and a frame template for each page, and then automatically synthesizing the page description data and corresponding frame template using a template engine. Application CN103365847A discloses a method and apparatus for generating custom webpage files. It first sets up data interface plugins for the template engine, specifying the template syntax for each plugin. After receiving the static file of the custom webpage, the template engine searches for the template syntax within the static file, calls the corresponding data interface plugin to query data, and then inputs the data and the static page into the template engine (Smarty template engine) to generate the target file. Therefore, all of the above solutions are based on template engines for webpage generation; that is, they all use template engine syntax to write template files and then input data matching the template files to generate the target webpage. These methods have the following technical problems: they require writing template files, different template engines have different syntaxes, and they place high demands on developers, requiring them to master template syntax to write them. The relationship between data and template definitions is very strong. Templates are generally defined based on business needs. Although defining templates can improve efficiency to some extent, if the page changes, the template file needs to be rewritten, and the page generation efficiency is not high.

[0004] In addition, existing technologies include page generation methods based on HTML files, but these methods cannot achieve fine-grained control, such as the inability to modify text styles or the lack of precise control over DOM nodes and elements. Summary of the Invention

[0005] To address the technical problems existing in the prior art, this invention proposes a method and apparatus for rapid webpage generation. It sets up processing logic for text nodes and DOM element nodes respectively, which can achieve precise control of DOM element nodes. For text node style modification, the method of locating the text node to be modified is adopted by node intersection and content matching, and the text style modification method is determined according to the relationship between the parent node of the text node to be modified and the text to be modified.

[0006] To achieve the above objectives, the first aspect of the present invention provides a method for rapidly generating web pages, comprising:

[0007] Obtain the original HTML file, which is represented using the Document Object Model, including DOM element nodes and text nodes;

[0008] The processing logic for the original HTML file is set, including the processing logic for DOM element nodes and the processing logic for text nodes. The processing logic for text nodes includes locating the text node to be modified by using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The processing logic for DOM element nodes includes setting the display style of DOM element nodes and binding click events to DOM element nodes.

[0009] Generate web pages based on the original HTML file and its processing logic.

[0010] In one implementation, the text node processing logic further includes:

[0011] When the text to be modified involves multiple text nodes, the first and last text nodes involved in the text to be modified are separated.

[0012] In one implementation, obtaining the text to be modified includes:

[0013] The text to be modified is obtained using a preset object retrieval method.

[0014] In one implementation, the text node processing logic further includes:

[0015] The region object of the text to be modified is obtained using a preset region object acquisition method.

[0016] In one implementation, the text node to be modified is located using a node intersection and content matching method, including:

[0017] Based on the obtained region object of the text to be modified, find the common ancestor node of all text nodes contained in the region object of the text to be modified, and find all text nodes contained under the common ancestor node;

[0018] Candidate text nodes are selected based on whether the text node to be modified intersects with other text nodes. The target node is then located based on whether the content of the candidate text node matches the beginning of the text to be modified.

[0019] In one implementation, the text style modification method is determined based on the relationship between the parent node of the text node to be modified and the text to be modified, including:

[0020] Determine if the content of the parent node of the text node to be modified is the text to be modified. If it is, modify the style of the parent node of the text node to be modified. Otherwise, wrap the text node to be modified with a Span tag and set the style of the Span tag.

[0021] In one implementation, the processing logic for DOM element nodes further includes: setting the attribute settings and operation logic of DOM element nodes.

[0022] Based on the same inventive concept, a second aspect of the present invention provides a webpage rapid generation apparatus, comprising:

[0023] The HTML file acquisition module is used to obtain the original HTML file, which is represented using the Document Object Model, including DOM element nodes and text nodes.

[0024] The processing logic setting module is used to set the processing logic of the original HTML file. The processing logic includes the processing logic for DOM element nodes and the processing logic for text nodes. The processing logic for text nodes includes locating the text node to be modified by using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The processing logic for DOM element nodes includes setting the display style of DOM element nodes and binding click events to DOM element nodes.

[0025] The webpage generation module is used to generate webpages based on the original HTML file and its processing logic.

[0026] Based on the same inventive concept, a third aspect of the present invention provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, provides a method for rapidly generating web pages as described in the first aspect.

[0027] Based on the same inventive concept, a fourth aspect of the present invention provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method for rapidly generating web pages as described in the first aspect.

[0028] Compared with the prior art, the advantages and beneficial technical effects of the present invention are as follows:

[0029] This invention provides a method for rapidly generating web pages. After obtaining the original HTML file, processing logic for text nodes and DOM element nodes is set separately, allowing for independent control of text nodes and DOM element nodes. For the text node processing logic, node intersection and content matching are used to locate the text node to be modified, thus accurately identifying it. Then, the text style modification method is determined based on the relationship between the parent node of the text node to be modified and the text to be modified, reducing redundant tags caused by style modifications. Furthermore, processing logic for DOM element nodes is also set, including setting the display style of DOM element nodes and binding click events to them, solving the problem in existing technologies where DOM element nodes cannot be controlled independently. Attached Figure Description

[0030] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0031] Figure 1 This is a flowchart of a method for rapidly generating web pages in an embodiment of the present invention;

[0032] Figure 2 This is a detailed flowchart illustrating the processing logic for modifying the style of text nodes in an embodiment of the present invention.

[0033] Figure 3 This is a structural diagram of the webpage rapid generation device in an embodiment of the present invention. Detailed Implementation

[0034] Example 1

[0035] This embodiment provides a method for quickly generating web pages. Please refer to [link / reference]. Figure 1 ,include:

[0036] S1: Obtain the original HTML file, which is represented using the Document Object Model, including DOM element nodes and text nodes.

[0037] Specifically, the original HTML file of this invention can be a general HTML file customized according to page requirements, or it can be other HTML files.

[0038] The Document Object Model (DOM) is an API for representing and interacting with any HTML or XML-based markup language document. It's a document model loaded in the browser that represents a document as a node tree, or DOM tree, where each node represents a part of the document (e.g., an element, a text string, or a comment). Node types include element nodes (such as...). DOM elements include text nodes (text within tags), attribute nodes (such as class), and document nodes (root nodes). This invention primarily focuses on setting the DOM element nodes and text nodes.

[0039] S2: Set the processing logic for the original HTML file. The processing logic includes the processing logic for DOM element nodes and the processing logic for text nodes. The processing logic for text nodes includes locating the text node to be modified by using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The processing logic for DOM element nodes includes setting the display style of DOM element nodes and binding click events to DOM element nodes.

[0040] Specifically, while enabling the designMode property allows for some editing of HTML files, some issues still exist, such as:

[0041] (1) The text modification function is not perfect. Although it can add and delete functions online, it cannot set the text style.

[0042] (2) If the content to be modified involves multiple text nodes, it is impossible to make precise modifications.

[0043] (3) The control over DOM nodes is not precise enough. For example, the editing of nodes is achieved indirectly by selecting text, making it impossible to precisely delete a DOM element or set the style of a DOM node.

[0044] Based on this, this application utilizes the designMode attribute of HTML files to enable the editing properties of HTML files, thereby realizing online visual editing. Specifically, this application sets the processing logic for text nodes and the processing logic for DOM element nodes respectively, which can control text nodes and DOM element nodes separately and realize the modification of text styles.

[0045] The processing logic for text nodes also includes:

[0046] When the text to be modified involves multiple text nodes, the first and last text nodes involved in the text to be modified are separated.

[0047] Specifically, the first and last text nodes can be obtained using the JavaScript methods startContainer and endContainer, which retrieve the first and last text nodes respectively.

[0048] In practice, if the text that the user wants to modify (the text to be modified) involves multiple text nodes, then the text nodes are split. For example, if the text to be modified is "veGeoJSONEx" which involves three text nodes, the first text node is "Interactive", which is then split into two text nodes "Interactive" and "ve" according to the selection range. The last text node obtained is "Explorer", which is then split into two text nodes "Exr" and "plorer" according to the selection range. This allows for more precise control over the selected text.

[0049] The process of obtaining the text to be modified includes:

[0050] The text to be modified is obtained using a preset object retrieval method.

[0051] Specifically, the default method for obtaining objects is the getSelection method.

[0052] The processing logic for text nodes also includes:

[0053] The region object of the text to be modified is obtained using a preset region object acquisition method.

[0054] Specifically, the preset area object is obtained using the Selection.getRangeAt() method. In addition, this invention also returns the string corresponding to the text to be modified through a string method.

[0055] Specifically, the method of locating the text node to be modified is used by node intersection and content matching, including:

[0056] Based on the obtained region object of the text to be modified, find the common ancestor node of all text nodes contained in the region object of the text to be modified, and find all text nodes contained under the common ancestor node;

[0057] Candidate text nodes are selected based on whether the text node to be modified intersects with other text nodes. The target node is then located based on whether the content of the candidate text node matches the beginning of the text to be modified.

[0058] In the specific implementation process, if the common ancestor node is node p, then all text nodes under this common ancestor node are searched, such as A, Interacti, ve, GeoJSON, Exr, and plorer. Then, it is determined whether the nodes intersect. For example, for node A, it is first determined whether A intersects with veGeoJSONEx. If they do not intersect, then the next node Interacti is checked. If they still do not intersect, then ve is checked. If they do intersect, then the content is further checked to see if they match. If ve matches the beginning of "veGeoJSONEx", then ve is selected as the node to be modified. Note that after a successful match, the node to be modified is "GeoJSONEx". This process is repeated to select the text nodes to be modified.

[0059] Specifically, the text style modification method is determined based on the relationship between the parent node of the text node to be modified and the text to be modified, including:

[0060] Determine if the content of the parent node of the text node to be modified is the text to be modified. If it is, modify the style of the parent node of the text node to be modified. Otherwise, wrap the text node to be modified with a Span tag and set the style of the Span tag.

[0061] In practice, if the parent node of the text node to be modified contains only the text to be modified and no other content, the style of the text node to be modified can be modified by directly changing the style of the parent node. Otherwise, the text node to be modified is wrapped in a Span tag, and the style of the text node to be modified is changed by changing the style of the Span tag. In this way, redundant tags generated by adding styles can be avoided as much as possible, thus improving the efficiency of page generation.

[0062] Please see Figure 2 This is a detailed flowchart of the logic for modifying the style of text nodes.

[0063] First, explain the specific functions or meanings of the methods and objects used in the implementation process.

[0064] (1) getSelection: Returns a Selection object that represents the range of text selected by the user or the current position of the cursor.

[0065] (2) Selection.rangeCount: Selection.rangeCount is a read-only property that returns the number of ranges in the selection.

[0066] (3) Selection.toString(): The Selection.toString() method returns the string that the selection object currently represents. For example, the currently selected text.

[0067] (4) Selection.getRangeAt(): Returns a range object containing the contents of the current selection.

[0068] (5) startContainer: The read-only property Range.startContainer returns the Node where the Range begins.

[0069] splitText: The Text.splitText() method can split a Text node into two independent sibling nodes based on a specified offset.

[0070] (6) startOffset: The read-only property Range.startOffset returns a number representing the starting position of the Range in startContainer.

[0071] (7) endContainer: Range.endContainer is a read-only property. It returns the Node at the end of the Range object.

[0072] (8) endOffset: The read-only property Range.endOffset returns a number representing the end position of Range.endContainer in Range.

[0073] (9) createTreeWalker: The creator method Document.createTreeWalker() returns a newly created TreeWalker object.

[0074] (10) range.commonAncestorContainer: Range.commonAncestorContainer is a read-only property that returns the common ancestor node of the target node.

[0075] (11) intersectsNode: The Range.intersectsNode() method returns a boolean value indicating whether a given Node intersects with a Range.

[0076] (10) nodestoProcess stores the content returned by createTreeWalker after filtering. It is an array that stores nodes that meet the conditions (nodes that intersect and nodes that match the content).

[0077] The specific logic for modifying text styles is as follows:

[0078] Get the content currently selected by the user in the iframe;

[0079] If no text is selected, no action will be taken; if text is selected, proceed with the following steps.

[0080] Get the first Range object currently selected by the user;

[0081] Range objects may involve partial selection of text nodes, splitting the preceding and following text nodes into multiple text nodes according to the selection range;

[0082] Iterate through the text nodes under the common ancestor node of all nodes contained in the Range object, filter out the text nodes that intersect with the text range and whose text is within the selected range, and use them as the text nodes to be modified.

[0083] If the attribute value of the text node is the same as the value to be set, no modification is needed;

[0084] If the text content of the parent element of the text node is the text whose style you want to modify, and does not contain any other text, then you can directly modify the style of the parent node. Otherwise, wrap the text node in a span tag and set the style of the span tag.

[0085] In addition to modifying the text style, this invention also sets the processing logic for DOM element nodes, including: setting the attribute settings and operation logic of DOM element nodes.

[0086] The following is a description of the relevant methods and objects in DOM element nodes.

[0087] `custom-style` is a style you define yourself to highlight the selected DOM element node.

[0088] Target: Points to the DOM element that was clicked.

[0089] In the specific implementation process, a preprocessing module, an advanced processing module, and a normal processing module can be set up.

[0090] First, there's the preprocessing module, which defines a custom-style highlighting style class and inputs it into the `<head>` tag of the HTML file. `custom-style` is a style defined in this invention to highlight the selected DOM element node. Next, it binds event handlers to the DOM element node. After execution, it removes the highlighting style of the previously clicked element, saves the currently clicked target, and adds the `custom-style` highlighting style to the current target.

[0091] In addition, you can bind other events to HTML, such as double-click, mouse in, mouse out, etc.

[0092] In other implementations, it also includes: setting the attribute settings and operation logic of DOM element nodes.

[0093] Specifically, you can set the properties of DOM element nodes, including font color, font size, background color, etc.

[0094] By setting up an advanced mode logic processing module, you can perform actions such as deleting, copying, inserting, and adding events to DOM elements.

[0095] In normal mode, the following operations are performed through the normal processing module:

[0096] (1) Remove the highlight style of the target.

[0097] (2) Remove the custom-style style from the head tag.

[0098] (3) Remove the bound click style.

[0099] S3: Generates web pages based on the original HTML file and its processing logic.

[0100] Specifically, web pages can be generated based on the obtained original HTML file and the processing logic of the original HTML file. As shown in the attached figure of the substantive examination reference, it is a schematic diagram of a page generated by the method of the present invention. The first figure shows the operation interface of the text node, and the second figure shows the operation interface of the DOM element node. The top is the operation panel and the bottom is the editing area.

[0101] Overall, the technical benefits of this solution include:

[0102] (1) No template engine is used, no template syntax is required, and existing HTML files or customized HTML files can be used, which lowers the development threshold.

[0103] (2) Supports fine-grained page configuration, allowing control over text nodes and DOM elements to modify text styles.

[0104] (3) Text node segmentation and style modification: The text node to be modified is located by node intersection and content matching, so that the text node to be modified can be accurately located. Then, the text style modification method is determined according to the relationship between the parent node of the text node to be modified and the text to be modified, reducing redundant tags caused by style modification.

[0105] (4) Provides a visual configuration page. The configuration process is user-friendly and simple. No development background is required. Non-R&D personnel can also use it.

[0106] Example 2

[0107] Based on the same inventive concept, this embodiment discloses a rapid webpage generation device. Please refer to [link to relevant documentation]. Figure 3 ,include:

[0108] HTML file acquisition module 101 is used to acquire the original HTML file, wherein the original HTML file is represented using the document object model, including DOM element nodes and text nodes;

[0109] The processing logic setting module 102 is used to set the processing logic of the original HTML file. The processing logic includes the processing logic for DOM element nodes and the processing logic for text nodes. The processing logic for text nodes includes locating the text node to be modified by using node intersection and content matching, and determining the text style modification method according to the relationship between the parent node of the text node to be modified and the text to be modified. The processing logic for DOM element nodes includes setting the display style of DOM element nodes and binding click events to DOM element nodes.

[0110] The webpage generation module 103 is used to generate webpages based on the original HTML file and the processing logic of the original HTML file.

[0111] Since the apparatus in Embodiment 2 of the present invention is the same apparatus used in implementing the method in Embodiment 1, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be repeated here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of this invention.

[0112] Example 3

[0113] Based on the same inventive concept, the present invention also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the method for rapidly generating web pages according to Embodiment 1.

[0114] Since the computer-readable storage medium described in Embodiment 3 of this invention is the same computer-readable storage medium used in implementing the rapid webpage generation method in Embodiment 1 of this invention, those skilled in the art can understand the specific structure and variations of this computer-readable storage medium based on the method described in Embodiment 1 of this invention, and therefore will not be repeated here. All computer-readable storage media used in the method of Embodiment 1 of this invention fall within the scope of protection of this invention.

[0115] Example 4

[0116] Based on the same inventive concept, the present invention also provides a computer device, including a memory 401, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in Embodiment 1.

[0117] Since the computer device described in Embodiment 4 of this invention is the same computer device used to implement the rapid webpage generation method in Embodiment 1 of this invention, those skilled in the art can understand the specific structure and variations of this computer device based on the method described in Embodiment 1 of this invention, and therefore will not be repeated here. All computer devices used in the method of Embodiment 1 of this invention fall within the scope of protection of this invention.

[0118] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0119] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0120] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including both the preferred embodiments and all changes and modifications falling within the scope of the invention. Clearly, those skilled in the art can make various modifications and variations to the embodiments of the invention without departing from the spirit and scope of the invention. Thus, if these modifications and variations of the embodiments of the invention fall within the scope of the claims of the invention and their equivalents, the invention also intends to include these modifications and variations.

Claims

1. A method for rapidly generating web pages, characterized in that, include: Obtain the original HTML file, which is represented using the Document Object Model, including DOM element nodes and text nodes; The processing logic for the original HTML file is set up, including the processing logic for DOM element nodes and the processing logic for text nodes. The text node processing logic includes locating the text node to be modified using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The DOM element node processing logic includes setting the display style of the DOM element nodes and binding click events to the DOM element nodes. The text node processing logic also includes: when the text to be modified involves multiple text nodes, separating the first and last text nodes involved in the text to be modified. Locating the text node to be modified using node intersection and content matching includes: finding the common ancestor node of all text nodes contained in the obtained region object of the text to be modified, and finding all text nodes contained under the common ancestor node; filtering candidate text nodes based on whether the text node to be modified intersects with other text nodes, and locating the target node as the text node to be modified based on whether the content of the candidate text node matches the beginning of the text to be modified. Generate web pages based on the original HTML file and its processing logic.

2. The method for rapidly generating web pages as described in claim 1, characterized in that, The process of obtaining the text to be modified includes: The text to be modified is obtained using a preset object retrieval method.

3. The method for rapidly generating web pages as described in claim 1, characterized in that, The processing logic for text nodes also includes: The region object of the text to be modified is obtained using a preset region object acquisition method.

4. The method for rapidly generating web pages as described in claim 1, characterized in that, The text style modification method is determined based on the relationship between the parent node of the text node to be modified and the text to be modified, including: Determine if the content of the parent node of the text node to be modified is the text to be modified. If it is, modify the style of the parent node of the text node to be modified. Otherwise, wrap the text node to be modified with a Span tag and set the style of the Span tag.

5. The method for rapidly generating web pages as described in claim 1, characterized in that, The processing logic for DOM element nodes also includes: setting the attributes and operation logic of DOM element nodes.

6. A device for rapidly generating web pages, characterized in that, Based on the method described in claim 1, the apparatus includes: The HTML file acquisition module is used to acquire raw HTML files, which are represented using the Document Object Model, including DOM element nodes and text nodes. The processing logic setting module is used to set the processing logic of the original HTML file. The processing logic includes the processing logic for DOM element nodes and the processing logic for text nodes. The processing logic for text nodes includes locating the text node to be modified by using node intersection and content matching, and determining the text style modification method based on the relationship between the parent node of the text node to be modified and the text to be modified. The processing logic for DOM element nodes includes setting the display style of DOM element nodes and binding click events to DOM element nodes. The webpage generation module is used to generate webpages based on the original HTML file and its processing logic.

7. A computer-readable storage medium, characterized in that, It stores a computer program that, when executed by a processor, implements the method for rapidly generating web pages as described in any one of claims 1 to 5.

8. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method for rapidly generating web pages as described in any one of claims 1 to 5.

Images