Conversion method and system for importing HTML (Hypertext Markup Language) into low-code platform

Abstract

The invention discloses a conversion method and system for importing an HTML (Hypertext Markup Language) into a low-code platform, the conversion system comprises an HTML analysis module, a component mapping module, a style adjusting module and a component rendering module, and the conversion method comprises the following steps: firstly, the HTML analysis module obtains HTML text label content, performs semantic understanding and structural analysis on an HTML page, and performs component mapping on the HTML text label content; the method comprises the following steps: automatically analyzing a complex HTML tag and a nesting relationship thereof into AST in a JSON form; the component mapping module maps the ST node into a material component supported by a low-code platform, records corresponding attribute configuration information, and converts the material component into JSON Schema of a visual component in a low-code designer; then, a style adjustment module extracts CSS styles in the HTML, merges and optimizes the CSS styles, and writes the CSS styles into CSS attributes of a JSON Schema object of a low-code page; and finally, a component rendering module dynamically renders the JSON Schema into a visual component on a low-code designer. According to the method, the low-code page design efficiency can be improved, repeated operation is reduced, and the overall development efficiency is improved.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and particularly relates to a conversion method and system for importing HTML into a low-code platform. Background Art

[0002] In a low-code design platform, the rendering of a page mainly depends on two core concepts: material components and page JSON Schema. Through their collaborative work, the abstract design requirements (i.e., the prototype interface provided by designers) are transformed into a specific page presentation.

[0003] Material components are the most basic building blocks in a low-code platform. By dragging and dropping components, a dynamic page with data interactivity can be quickly built. Each material component corresponds to a specific function or UI (User Interface) element, such as buttons, forms, charts, tables, etc. These components are highly encapsulated and optimized. Developers only need to select the required components and drag and drop them in the low-code designer for configuration to complete complex interactive experiences. The page of the low-code designer is as Figure 1-2 shown, consisting of three parts. The left area is the material component list area, the middle is the design area, and the right is the component property setting area. Components can be dragged from the material area to the design area, and the corresponding components can be selected in the design area for configuration item property configuration. In the component property configuration area, the properties, styles, events, bound data, etc. of the components can be set.

[0004] JSON Schema is a data format used to describe data structures and constraints. In a low-code platform, it is used to define the page layout, the relationships between components, and the data flow rules. Through JSON Schema, the page life cycle and the composition elements of the page (such as the positions, properties, and interaction logics of material components) can be clearly described and passed to the rendering engine for page generation. The collaboration between JSON Schema and material components realizes the automatic mapping from design to code: JSON Schema guides the rendering engine to dynamically load and arrange material components by describing the component positions, styles, and interaction rules. Among them, the rendering engine will dynamically load the corresponding material components according to the description in JSON Schema and generate the final page according to the specified layout and configuration.

[0005] Based on the combination of material components and JSON Schema, the low-code platform can achieve efficient and flexible page rendering, effectively reducing the technical threshold and improving development efficiency. However, in the actual application process, it is found that there is a bottleneck in the efficiency of converting the prototype interface provided by designers into the orchestration of low-code designer components. That is, designers will clearly mark the setting formats (such as font, color, and font size, etc.) of each component on the prototype interface. After the prototype interface is delivered to the development team or low-code orchestration personnel, the development team or low-code orchestration personnel need to perform cumbersome manual coding design on the position, style, and attributes of each component. This process is not only time-consuming and laborious, but may also cause the prototype interface to not match the actual production interface due to misalignment in manual coding design, thus affecting development efficiency and user experience. Summary of the Invention

[0006] The purpose of the present invention is to provide a conversion method and system for importing HTML into a low-code platform, which can improve the efficiency of low-code design pages, reduce repetitive operations, and improve the overall development efficiency.

[0007] To achieve the above object, the present invention provides a conversion method for importing HTML into a low-code platform, including the following steps: S1. HTML parsing: Obtain the content of HTML text tags, perform semantic understanding and structural parsing on the HTML page, and automatically parse complex HTML tags and their nested relationships into a JSON-formatted AST. S2. Component mapping: Based on predefined component mapping rules, map the AST nodes produced in step S1 to material components supported by the low-code platform, record the corresponding attribute configuration information, and convert it into the JSON Schema of visual components in the low-code designer. S3. Style adjustment: Extract the CSS styles in HTML, perform merging and optimization on the CSS styles, and then write them into the CSS attributes of the JSON Schema object of the low-code page. S4. Dynamic rendering: Based on the React.createElement method, dynamically render the JSON Schema into visual components on the low-code designer.

[0008] Further, in the JSON AST of step S1, each HTML tag is parsed into a JSON object containing the node type node, tag name tag, attribute object attr, and child nodes children.

[0009] Further, in step S1, the generation of the JSON AST parses the HTML string through DOMParser and recursively traverses the DOM nodes to produce a tree structure containing the properties of node, tag, attr, and children.

[0010] Further, step S2 specifically includes the following steps: S2.1. Read the low-code asset package, which is a JSON collection of all material components in the low-code designer; S2.2. By looping through the tag values of the AST node's tag names, match the material components in the low-code asset package that support the corresponding HTML tags, and map the attr values of the AST node to the property configuration items of the material components, that is, the configure / props item.

[0011] Further, in step S2, the common properties corresponding to the low-code asset package include: componentId: Unique ID; Icon: Icon; Categorys: Categories, including "Popular Components", "General Components"; Configure: Configuration items, including the properties of the component itself and the settable parameters; configure / props: Property configuration items, including "id", "style", "class"; Title: The displayed name, including "Title", "Text", "Link"; Tags: The corresponding HTML tags, including h1, h2, h3, p, span, div; Version: Version number; componentName: React component tag, including Typography.Title; Package: Component source library, including antd.

[0012] Further, in step S4, dynamically rendering the JSON Schema into a visual component on the low-code designer specifically includes the following steps: S4.1. Parse the JSON Schema and extract componentName, props, and children; S4.2. Map componentName to the actual React component; S4.3. Process props, including styles, events, data, and other properties; S4.4. Recursively process children to generate sub-components, and recursively process the sub-components. The processing steps are the same as steps S4.1 - S4.2; S4.5. Create a React component instance using React.createElement; S4.6. Render the generated React element into the DOM.

[0013] Furthermore, in step S3, use the PostCSS plugin to perform merging, compression, and comment removal optimization on the CSS styles, and then write them into the CSS attributes of the JSON Schema object of the low-code page.

[0014] Furthermore, in step S1, there is an HTML conversion button in the low-code designer interface. Clicking the HTML conversion button pops up an HTML conversion interface to obtain the HTML text label content. There are three ways to obtain it. The first way is to select a local HTML page file through the file selection button; the second way is to obtain the HTML source code by filling in the online HTML page address; the third way is to first copy the HTML code and then paste it into the input box to obtain it.

[0015] This application also provides a conversion system for importing HTML into a low-code platform, including the following modules: HTML parsing module: used to perform semantic understanding and structural analysis on the HTML page, and automatically parse complex HTML tags and their nested relationships into a JSON-formatted AST; Component mapping module: used to map AST nodes to material components supported by the low-code platform and record the corresponding attribute configuration information; Style adjustment module: used to merge and optimize CSS styles, and write the optimized CSS styles into the CSS attributes of the JSON Schema object of the low-code page; Component rendering module: used to dynamically render the JSON Schema into visual components on the low-code designer.

[0016] After adopting the above solution, the beneficial effects of the present invention are as follows: 1. Through HTML semantic parsing and AST conversion technology, the layout structure, style attributes, and interactive elements of the original design can be accurately identified, eliminating problems such as style misalignment and component mapping errors caused by manual arrangement, and improving the consistency between the pages generated by the low-code platform and the design drafts.

[0017] 2. This application uses a component mapping rule engine to quickly automatically match HTML pages to low-code components. Compared with the traditional method of manual dragging and arranging, which takes one or two days, the method of this application only takes a few minutes to complete the arrangement, greatly improving the efficiency of converting prototype designs into visual components.

[0018] 3. Automatically identify which material components should be used for the components designed for the prototype interface, reducing the threshold for using low-code and the design requirements. Description of the Drawings

[0019] Figure 1 It is a framework diagram of the low-code designer page; Figure 2 It is a schematic diagram of the low-code designer page; Figure 3 It is a framework diagram of the conversion system of the present invention; Figure 4 It is a flowchart of the method of the present invention. Detailed Description of the Invention

[0020] The present invention will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0021] As Figure 4 shown, the present invention provides a conversion method for importing HTML into a low-code platform, including the following steps: S1. HTML parsing: On the low-code designer interface, obtain the HTML text tag content. An HTML conversion button can be set on the low-code designer interface. By clicking the HTML conversion button, an HTML conversion interface can be popped up. On this interface, the HTML text tag content can be obtained in three ways. The first way is to select a local HTML page file through the select file button; the second way is to obtain the HTML source code by filling in the online HTML page address; the third way is to first copy the HTML code and then paste it in the input box to obtain it.

[0022] After obtaining the HTML text tag content, perform semantic understanding and structural parsing on the HTML page, and automatically parse the complex HTML tags and their nested relationships into a JSON-formatted AST (Abstract Syntax Tree). The AST is a tree-like JSON structure generated by parsing HTML, representing the semantics and nested relationships of the HTML document. Among them, the JSON attributes corresponding to each HTML tag are: node: Node type (such as root, element, text, where root refers to the root node of the AST, element represents an element node, and text represents a text node); tag: HTML tag name (such as "div", "h1", "p", "style"); attr: Attribute object of the HTML element (common attributes are id, class); children: Nested child nodes or text nodes.

[0023] The process of parsing HTML elements that generate JSON attributes can be represented by source code as follows: {"node":"element","tag":"h1","attr":{},"children":[{"node":"text","text":"I am the title"}]} In addition to the JSON attributes corresponding to HTML tags, the AST also extracts the CSS styles in HTML. CSS (Cascading Style Sheets) is a language used to describe the styles of web page elements (such as colors, fonts, layouts, etc.). Its core role is to control the visual presentation of HTML elements, including but not limited to: layout (such as position, margin, float), appearance (such as color, font, background), and responsive design (adapting to different device sizes). The process of extracting CSS styles can be represented by source code as follows: {"node":"element","tag":"style","attr":{"type":"text / css"},"children":[{"node":"text","text":"body,html {padding: 0;margin: 0;}.text_k8e4nalo {font-size: 14px;color: #666;}.div_k8e4nalp {padding: 12px;background: #f2f2f2; border: 1px solid #ddd;}"}]} Specifically, the generation of JSON AST parses the HTML string through DOMParser and recursively traverses the DOM nodes to generate a tree structure containing node, tag, attr, and children attributes. Among them, DOMParser is a JavaScript interface provided by the browser, mainly used to parse text-based HTML or XML strings into an operable DOM document object model (Document Object Model). It allows developers to dynamically convert string-formatted markup languages into structured documents recognizable by the browser, providing core support for dynamic content processing in front-end development. The process of automatically parsing HTML tags and their nesting relationships into a JSON-formatted AST can be represented by source code as follows: function htmlToJson(htmlString) { const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text / html'); function nodeToJson(node) { if (node.nodeType === Node.TEXT_NODE) { / / Filter out whitespace text nodes if (node.textContent.trim() === '') return null; return { node: 'text', text: node.textContent }; } else if (node.nodeType === Node.ELEMENT_NODE) { const attrObj = {}; / / Convert all attributes to an object for (let attr of node.attributes) { attrObj[attr.name] = attr.value; } const children = []; for (let child of node.childNodes) { const childJson = nodeToJson(child); if (childJson!== null) { children.push(childJson); } } return { node: 'element', tag: node.tagName.toLowerCase(), attr: attrObj, children: children }; } return null; / / Ignore other types of nodes } / / Parse the first child node of the body (e.g., <h2>) const firstElement = doc.body.firstChild; return nodeToJson(firstElement); } S2. Component Mapping: Based on predefined component mapping rules, map the AST nodes produced in step S1 to material components supported by the low-code platform, record the corresponding property configuration information, and convert it into the JSON Schema of the visual components in the low-code designer. Specifically, it includes the following steps: S2.1. Read the low-code asset package. The low-code asset package is a JSON collection of all material components in the low-code designer. The common properties corresponding to the low-code asset package are as follows: componentId: Unique ID; Icon: Icon; Categorys: Classification, such as "Popular Components", "Regular Components"; Configure: Configuration items, including the properties of the component itself and the settable parameters; configure / props: Property configuration items, such as "id", "style", "class"; Title: Displayed name, such as "Title", "Text", "Link"; Tags: Corresponding HTML tags, such as h1, h2, h3, p, span, div; Version: Version number; componentName: React component label, such as Typography.Title; Package: Component source library, such as antd.

[0024] The process of reading the low-code asset package can be represented by the source code as follows:

[0025] S2.2. By traversing the tag values of the AST nodes in a loop, match the material components in the low-code asset package that support the corresponding HTML tags. If the tag of the AST node is h1, match the title component in the low-code components whose tags contain h1; and map the attribute attr value of the AST node to the attribute configuration item of the material component, that is, the configure / props item, and further convert it into the JSON Schema of the visual component in the low-code designer. Thus, the component mapping rule is: by traversing the tag values of the AST nodes, match the material components defined in the low-code asset package that support the corresponding HTML tags, and the configuration item (configure / props item) of the material component contains the fields corresponding to the HTML tag attribute attr value.

[0026] S3. Style adjustment: Based on the CSS styles extracted from the JSON AST in step S1, perform merging and optimization on the CSS styles. Specifically, the PostCSS plugin can be used to perform merging, compression, and comment removal on the CSS styles, and then write the merged and optimized CSS styles into the CSS attribute of the JSON Schema object of the low-code page. Among them, the PostCSS plugin is a series of JavaScript-based tool modules used to extend the processing ability of PostCSS for CSS. They transform, optimize, or enhance CSS code by operating on the abstract syntax tree (AST).

[0027] S4. Dynamic rendering: Based on the React.createElement method, dynamically render the JSON Schema into the visual components on the low-code designer, which specifically includes the following steps: S4.1. Parse the JSON Schema and extract componentName, props, and children; S4.2. Map componentName to the actual React component; S4.3. Process props, including styles, events, data, and other attributes; S4.4. Recursively process children to generate child components. The child components are the child nodes contained in the children field of the parent component in the JSON Schema, and then recursively process the child components. The processing steps are the same as steps S4.1 - S4.2; S4.5. Use React.createElement to create a React component instance; S4.6. Render the generated React element into the DOM.

[0028] The process of rendering a JSON schema object into a design interface can be represented by source code as follows: function createComponentTree(componentTree, materialComponents) { return componentTree.map(node =>{ Const matchedComponent=materialComponents.find(component=>component.componentName==node.componentName); const props = {...node.configure.props,...matchedComponent.configure.props}; if (node.children&&node.children.length>0) { props.children = createComponentTree(node.children,materialComponents); } return React.createElement(node.componentName, props); }); } As Figure 3 shown, the present application also provides a conversion system for importing HTML into a low-code platform, including the following modules: HTML parsing module: used to perform semantic understanding and structural analysis on an HTML page, and automatically parse complex HTML tags and their nested relationships into a JSON-formatted AST; Component mapping module: used to map AST nodes to material components supported by the low-code platform, record the corresponding property configuration information, and convert it into a JSON Schema of visual components in the low-code designer; Style adjustment module: used to merge and optimize CSS styles, and write the optimized CSS styles into the CSS properties of the JSON Schema object of the low-code page; Component rendering module: used to dynamically render the JSON Schema into visual components on the low-code designer, implemented using the React.createElement method.

[0029] The following is a specific example to further illustrate the practical application of this application: Assume that the original design is a simple HTML page file, and its source code is: <!DOCTYPE html> <meta charset="utf-8"> <style type="text / css">body,html {padding: 0;margin: 0;}.text_k8e4nalo {font-size: 14px;color: #666;}.div_k8e4nalp {padding: 12px;background: #f2f2f2;border: 1px solid #ddd;}< / style> <h1>Hello< / h1> World According to the invention of this application, the conversion system performs the following operations: S1. Parse the HTML content into a JSON object, i.e., AST in JSON format. The source code is: { "node": "root", "children": [ { "node": "element", "tag": "div", "attr": { "id": "app" }, "children": [ { "node": "element", "tag": "h1", "attr": {}, "children": [ { "node": "text", "text": "Hello" } ] }, { "node": "element", "tag": "p", "attr": {}, "children": [ { "node": "text", "text": "World" } } }, { "node": "element", "tag": "style", "attr": { "type": "text / css" }, "children": { "node": "text", "text": "\nbody,\nhtml {\npadding: 0;\nmargin: 0;\n}\n\n.text_k8e4nalo {\nfont-size: 14px;\ncolor: #666;\n}\n\n.div_k8e4nalp {\npadding:12px;\nbackground: #f2f2f2;\nborder: 1px solid #ddd;\n}\n" } } } S2. Convert the JSON object into a component JSON Schema. The source code is as follows: [{ "id": "node_k8bnubvz", "state": { "hello": { "type": "JSExpression", "value": "\"Hello World\"" } }, "componentName": "BlockComponent", "children": { "children": { "id": "node_ocl9cku8455", ​​​"componentName": "Typography.Title", "title": "Title", "props": { "level": "1", "children": "Hello", "style": { "marginTop": "12px" }, "tag": "h1", "class": "", } }, { "id": "node_ocl9mio96k2", "componentName": "Typography.Text", "title": "Text", "props": { "children": "World", "underline": false, "strong": false, "code": false, "style": { "marginTop": "12px" }, "tag": "p", "class": "" } } } , "propTypes": { "display": "inline", } , }] S3. Add the extracted CSS styles to the page JSON Schema. The source code is as follows: { ​"css": "body, html {\npadding: 0;\nmargin: 0;\n}\n.text_k8e4nalo {\nfont-size: 14px;\ncolor: #666;\n}\n\n.div_k8e4nalp {\npadding: 12px;\nbackground: #f2f2f2;\nborder: 1px solid #ddd;\n}", "title": "Page Title", "version": "1.0.0", "componentsTree": [{ "id": "node_k8bnubvz", "state": { "hello": { "type": "JSExpression", "value": "\"Hello World\"" } }, "componentName": "BlockComponent", "children": { "children": { "id": "node_ocl9cku8455", "componentName": "Typography.Title", "title": "Title", "props": { "level": "1", "children": "Hello", "style": { "marginTop": "12px" }, "tag": "h1", "class": "", } }, { "id": "node_ocl9mio96k2", "componentName": "Typography.Text", "title": "Main Text", "props": { "children": "World", "underline": false, "strong": false, "code": false, "style": { "marginTop": "12px" }, "tag": "p", "class": "" } } } , "propTypes": { "display": "inline", } , }], "i18n": { "zh-CN": { "i!8n-jwg27yo4": "Terminal 2" }, "en-US": { "i18n-jwg27yo4": "Terminal 2" } } } S4. Convert the rendered page JSON Schema into a low-code visual component. The source code is as follows: / / Div material component example class DivComponent extends PureComponent { static displayName = BlockComponent; static version = '0.0.0'; render() { ​return createElement('div',this.props, this.props.children); } } It can be seen from this embodiment that the present application can efficiently convert an abstract original design description into an executable React component, greatly simplifying the development process and reducing the need for manual intervention.

[0030] The above are only the preferred embodiments of the present invention and do not limit the design of this case. Any equivalent changes made according to the key design of this case shall fall within the protection scope of this case.< / h2>

Claims

1. A conversion method for importing HTML into a low-code platform, characterized in that, It includes the following steps: S1. HTML Parsing: Obtain the content of HTML text tags, perform semantic understanding and structural parsing on the HTML page, and automatically parse complex HTML tags and their nested relationships into a JSON-formatted AST; S2. Component Mapping: Based on predefined component mapping rules, map the AST nodes produced in step S1 to material components supported by the low-code platform, record the corresponding attribute configuration information, and convert it into the JSON Schema of visual components in the low-code designer; S3. Style Adjustment: Extract the CSS styles in HTML, perform merging and optimization on the CSS styles, and write them into the CSS attributes of the JSON Schema object of the low-code page; S4. Dynamic Rendering: Based on the React.createElement method, dynamically render the JSON Schema into visual components on the low-code designer.

2. The conversion method for importing HTML into a low-code platform according to claim 1, characterized in that: In the JSON AST of step S1, each HTML tag is parsed into a JSON object containing the node type node, tag name tag, attribute object attr, and child nodes children.

3. The conversion method for importing HTML into a low-code platform according to claim 2, characterized in that: In step S1, the generation of the JSON AST parses the HTML string through DOMParser and recursively traverses the DOM nodes to generate a tree structure containing the properties of node, tag, attr, and children.

4. A conversion method for importing HTML into a low-code platform according to claim 2 or 3, characterized in that: The specific steps of step S2 include the following steps: S2.

1. Read the low-code asset package, which is a JSON collection of all material components in the low-code designer; S2.

2. By looping through the tag values of the AST nodes, match the material components in the low-code asset package that support the corresponding HTML tags, and map the attr values of the AST nodes to the attribute configuration items of the material components, that is, the configure / props item.

5. The conversion method for importing HTML into a low-code platform according to claim 4, wherein: In step S2, the common attributes corresponding to the low-code asset package include: componentId: Unique ID; Icon: Icon; Categorys: Categories, including "Popular Components" and "Regular Components"; Configure: Configuration items, including the properties of the component itself and the settable parameters; configure / props: Attribute configuration items, including "id", "style", "class"; Title: The displayed name, including "Title", "Text", "Link"; Tags: The corresponding HTML tags, including h1, h2, h3, p, span, div; Version: Version number; componentName: React component label, including Typography.Title; Package: Component source library, including antd.

6. The conversion method for importing HTML into a low-code platform according to claim 2, characterized in that: In step S4, dynamically rendering the JSON Schema into visual components on the low-code designer specifically includes the following steps: S4.

1. Parse the JSON Schema, extract the componentName, props, and children; S4.

2. Map the componentName to the actual React component; S4.

3. Process the props, including styles, events, data, and other attributes; S4.

4. Recursively process the children to generate child components. The recursive processing steps for child components are the same as those in steps S4.1 - S4.2; S4.

5. Create a React component instance using React.createElement; S4.

6. Render the generated React element into the DOM.

7. A conversion method for importing HTML into a low-code platform as claimed in claim 1, characterized in that: In step S3, use the PostCSS plugin to perform merge, compression, and comment removal optimization on the CSS styles, and then write them into the CSS properties of the JSON Schema object of the low-code page.

8. A conversion method for importing HTML into a low-code platform as described in claim 1, characterized in that: In step S1, there is an HTML conversion button in the low-code designer interface. Clicking the HTML conversion button pops up an HTML conversion interface to obtain the HTML text label content. There are three ways to obtain it. The first way is to select a local HTML page file through the file selection button; the second way is to obtain the HTML source code by filling in the online HTML page address; the third way is to first copy the HTML code and then paste it in the input box to obtain it.

9. A conversion system for importing HTML into a low-code platform, which is applied to a conversion method for importing HTML into a low-code platform according to any one of claims 1-8, characterized in that, It includes the following modules: HTML Parsing Module: Used to perform semantic understanding and structural analysis on the HTML page, and automatically parse the complex HTML tags and their nesting relationships into a JSON-formatted AST; Component Mapping Module: Used to map AST nodes to material components supported by the low-code platform and record the corresponding attribute configuration information; Style Adjustment Module: Used to merge and optimize CSS styles and write the optimized CSS styles into the CSS properties of the JSON Schema object of the low-code page; Component Rendering Module: Used to dynamically render the JSON Schema into a visual component on the low-code designer.

Images