A method for implementing low-code canvas based on JSON data structure

Abstract

The present invention discloses a method for implementing a low-code canvas based on a JSON data structure, defining the structure of the canvas JSON data; obtaining the components corresponding to the JSON data, and rendering the components in the canvas according to the JSON data; binding the interactive events of the components in the canvas; defining the code corresponding to the above operations as the canvas rendering logic, packaging the canvas rendering logic into a rendering package and uploading it to a remote service, and packaging the shared resources of the canvas and the base into a shared package; mounting the shared package, and then writing the rendering package in the form of an iframe document stream to complete the base integrated canvas. The present invention splits the low-code canvas into independent implementations of the canvas and the base, and independently maintains it, which has the effect of fully isolating the user's custom styles and data in the low-code platform, isolating the user operations in the iframe, and greatly improving the security of the low-code platform operation.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for implementing a low-code canvas based on a JSON data structure. Background Art

[0002] A low-code platform is an application development method that aims to reduce the development time and complexity of applications and enable more people to participate in application development without the need for in-depth coding knowledge. Low-code platforms usually provide visual development tools and components, allowing developers to build applications through drag and drop, configuration, and a small amount of coding, with a visual development environment. Generally speaking, a front-end low-code designer platform mainly consists of a component library, canvas, property configuration, and data management to visually drag the user's page. The component library is the smallest logical unit of low-code platform operation. The canvas is the real-time rendering of the user's dragged components, the property configuration is the real-time configuration of the components, and the data is the implementation of the logical interaction of each component in the low-code platform.

[0003] The canvas is an indispensable part of the low-code platform, because it carries the core function of low-code visual interaction, and needs to display the user's page and visual configuration in real time, that is, what you see is what you get. After a page is implemented in the canvas, it is displayed as a separate page on the rendering end. Therefore, when users design pages on the design side, they need a suitable canvas implementation method to isolate some of the data, styles, and components injected by users from the design side platform, because it is very likely that some user-defined components or styles will affect the design side that hosts the canvas. At the same time, it is necessary to ensure that the effect seen by users on the canvas is consistent with the actual rendered page to avoid gaps between the design and the online page.

[0004] The patent number is CN202310283610.6, and the patent name is "Web front-end low-code platform construction method, device and computer equipment for rendering as a canvas through Canvas." The development cost of Canvas is very high, the difficulty of getting started is also relatively high, and the scenarios are also very limited. For example, components developed by VUE and React, which are commonly used in the front end, will have great parsing and rendering problems when rendering. The first is the problem of inconsistent rendering. There is a big difference between Canvas rendering and browser-provided rendering, which leads to the inability of low-code integrators to quickly reuse some components of the current project, and the reusability is very poor. At the same time, the global variables and styles within the styles and components cannot be isolated, and there is a high probability of component injection pollution, such as timers. Summary of the invention

[0005] In response to the above technical problems, the present invention provides a method for implementing a low-code canvas based on a JSON data structure, which splits the low-code canvas into a canvas and a base for independent implementation and maintenance. It has the effect of comprehensively isolating the user's custom styles and data in the low-code platform, isolating user operations in an iframe, and greatly improving the security of the low-code platform operation.

[0006] To achieve the above purpose, the technical solution adopted by the present invention is as follows:

[0007] A method for implementing a low-code canvas based on a JSON data structure, comprising:

[0008] Step 1. Define the structure of the canvas JSON data;

[0009] Step 2: Get the component corresponding to the JSON data and render the component in the canvas according to the JSON data;

[0010] Step 3: Bind the interaction events of components in the canvas;

[0011] Step 4: Define the code corresponding to the operations in Steps 1 to 3 as canvas rendering logic, package the canvas rendering logic into a rendering package and upload it to the remote service, and package the shared resources of the canvas and the base into a shared package;

[0012] Step 5. Mount the shared package, and then write the rendering package through the iframe document stream to complete the base integration canvas.

[0013] Furthermore, the structure of the JSON data includes multiple JSON nodes, each JSON node corresponds to a component information, the structure of the JSON node includes a node type, a unique identifier and attributes, and the attributes include style, class style, state data and child nodes.

[0014] Furthermore, the child node is an array, and the structure of the child node is the same as the structure of the JSON node.

[0015] Further, step 2 includes: step 21, iterating the JSON data; step 22, obtaining a component corresponding to a node type of a currently iterated JSON node for rendering; step 23, repeating step 22 until component rendering of all JSON nodes in the JSON data is completed.

[0016] Further, step 22 includes: step 221, obtain the component corresponding to the node type of the currently iterated JSON node; step 222, obtain the id of the component, the id of the component is the unique identifier of the corresponding component in the JSON node, traverse the JSON data according to the id of the component to find the JSON node of the corresponding component, and inject the attributes of the JSON node into the html structure of the component; step 223, determine whether the currently iterated JSON node has child nodes, if so, obtain the child component corresponding to the node type of the child node, obtain the id of the child component, the id of the child component is the unique identifier of the corresponding child component in the child node, traverse the JSON data according to the id of the subcomponent to find the child node of the corresponding subcomponent, and inject the attributes of the child node into the html structure of the component; step 224, bind a low-code identifier to the component, and inject the low-code identifier into the html structure of the component.

[0017] Furthermore, injecting the style in the attribute of the JSON node into the HTML structure of the component includes: creating a tag, the id of the tag is the unique identifier of the current JSON node, the content of the tag is the class style of the current JSON node, and inserting the tag into the head of the webpage.

[0018] Furthermore, step 3 includes: step 31, capturing the click event in the canvas and obtaining the click element of the click event; step 32, traversing upward through the parent element of the click element to find the component, and if the html structure of the component has a low-code identifier, identifying it as a platform component; step 33, obtaining the component type and id of the platform component, and traversing the JSON data of the canvas according to the id of the platform component to find the corresponding JSON node; step 34, integrating the canvas mounting method.

[0019] Furthermore, in step 5, mounting the shared package includes the following steps: step a, the base introduces the shared package and mounts the shared package on the window of the canvas iframe; step b, mounting the method on the window to obtain the components that need to interact; step c, configuring the properties of the base.

[0020] Furthermore, in step 5, writing the rendering package by means of the iframe document stream includes the following steps: step A, opening the document stream of the iframe; step B, loading the resource address of the rendering package in the document stream; step C, uploading the resource address of the rendering package; step D, closing the document stream.

[0021] Furthermore, it also includes: building a component library for maintaining components, the components in the component library are maintained with Map data, the key of the Map data is the node type of the JSON node in the JSON data, and the value is the component corresponding to the current node type.

[0022] Compared with the prior art, the present invention has the following beneficial effects:

[0023] In the base part, the present invention proposes a passive iframe integrated canvas to solve the cross-domain and data sharing problems during iframe canvas integration. The base can directly operate the window and document flow objects in the iframe, which is convenient for quickly injecting arbitrary data for communication and interaction, fundamentally isolating the pollution of custom data to the low-code platform, and realizing seamless communication between the low-code platform and the iframe, greatly improving the platform's ease of use, stability and security.

[0024] In the canvas part, the present invention renders the page by parsing JSON data, and proposes to package and maintain the canvas rendering logic separately, and exclude the shared resources of the canvas and the base, and then inject them when the base is integrated, so as to reduce the packaging volume of the canvas and speed up the loading speed of the canvas. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 The present invention is a flow chart of the method. DETAILED DESCRIPTION

[0026] Terminology explanation:

[0027] VUE: A progressive JavaScript framework for creating user interfaces.

[0028] React: A JavaScript library for building user interfaces.

[0029] JSON data: is a lightweight data exchange format.

[0030] iframe: The full name is inline frame.

[0031] Map data: a typical dictionary type data structure.

[0032] Html structure: Hypertext Markup Language.

[0033] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0034] like Figure 1 As shown, the present invention provides a method for implementing a low-code canvas based on a JSON data structure, including:

[0035] Step 1. Define the structure of the canvas JSON data;

[0036] Step 2: Get the component corresponding to the JSON data and render the component in the canvas according to the JSON data;

[0037] Step 3: Bind the interaction events of components in the canvas;

[0038] Step 4: Define the code corresponding to the operations in Steps 1 to 3 as canvas rendering logic. The canvas packages the canvas rendering logic into a rendering package and uploads it to the remote service. The base packages the shared resources of the canvas and the base into a shared package.

[0039] Step 5. Mount the shared package, and then write the rendering package through the iframe document stream to complete the base integration canvas.

[0040] The present invention divides the entire low-code platform into two parts, the base and the canvas, implements the two parts separately, and then integrates them together according to the present invention to form a complete low-code platform. The base is mainly responsible for obtaining drag components, property configuration, data management, etc., and is responsible for the generation of canvas JSON data. The canvas is responsible for parsing JSON data, loading corresponding components for rendering, including the structure, style, data, etc. of the components. At the same time, in the low-code platform, the canvas also needs to provide corresponding interactive events for the base to use, such as click events, drag events, mouse hover events, etc., to respond to user visualization operations. The present invention implements the base and the canvas separately, and integrates the canvas into the base, so that the user's custom page data and style will not affect the entire low-code platform, thereby decoupling. At the same time, the base and the canvas reuse the common library to reduce the volume of canvas code packaging.

[0041] Taking JSON data storage page data as an example, first define the page structure JSON data, mainly to record the structural information of the components in the canvas. Of course, it can also be page data of any data structure. The present invention preferably implements JSON data.

[0042] In a specific embodiment, the structure of JSON data includes multiple JSON nodes, each JSON node corresponds to a component information, and the structure of the JSON node includes node type, unique identifier and attributes, and the attributes include style, class style, state data and child nodes. The node type is also the component type, which identifies what component is used to render the JSON node, such as type: "Image". The unique identifier of each component is unique and is a generated random string, such as id: "Page_ad42f". The attribute props is the specific information contained in the component, and the attributes of different components are also inconsistent. For example, for the image component, there must be attributes such as image address and image size. At the same time, each component has a style attribute style, which is the CSS style information of the component. The attribute props also includes state data, and different components need to have corresponding state data to be rendered correctly. In addition, the attributes also include child nodes children, also known as child elements. The child nodes are arrays. The child node structure is the same as the structure of the current JSON node, including node type, unique identifier and attributes. Its attributes also include style, class style, state data and next child node.

[0043] Components are mainly used as the smallest editable unit of a page, the smallest element that users operate in the low-code platform, and each component implements different functions according to its own purpose. Multiple components can be combined to realize the user's page. The JSON data defined in step 1 cannot be directly rendered on the page. You need to find the corresponding component by defining the node type of the JSON data before rendering.

[0044] In a specific embodiment, the rendering operation of step 2 includes: step 21, iterating the JSON data; step 22, obtaining the component corresponding to the node type of the currently iterated JSON node for rendering; step 23, repeating step 22 until the component rendering of all JSON nodes in the JSON data is completed.

[0045] In a specific embodiment, step 22 includes: step 221, obtain the component corresponding to the node type of the currently iterated JSON node; step 222, obtain the id of the component, the id of the component is the unique identifier of the corresponding component in the JSON node, traverse the JSON data according to the id of the component to find the JSON node of the corresponding component, and inject the attributes of the JSON node into the html structure of the component; step 223, determine whether the currently iterated JSON node has child nodes, if so, obtain the sub-component corresponding to the node type of the child node, obtain the id of the sub-component, the id of the sub-component is the unique identifier of the corresponding sub-component in the child node, traverse the JSON data according to the id of the sub-component to find the child node of the corresponding sub-component, and inject the attributes of the child node into the html structure of the component; step 224, bind a low-code identifier to the component, and inject the low-code identifier into the html structure of the component.

[0046] Among them, the style is mounted in the browser when the component is rendered, and the style is cleared when the component is uninstalled. Because in the low-code scenario, the style of the component supports user customization, and the probability is very high, that is, user-defined style processing. The present invention injects the user-defined style into the web page in full through the tag to make the style effective. When the component is uninstalled (such as the built-in uninstall event of the react framework), the style tag is removed from the browser, so as not to affect the style of other components. Specifically, injecting the style in the attributes of the JSON node into the html structure of the component includes: creating a tag, the id of the tag is the unique identifier of the current JSON node, the content of the tag is the class style of the current JSON node, and the tag is inserted into the head of the web page. Further, when the component is uninstalled, the tag can be deleted. The low-code identifier is used to identify that the current component is a low-code component, so that when you click to select in the canvas, you can identify the selected component, and the platform can display different configurations according to the currently selected component.

[0047] In a specific embodiment, the present invention also includes building a component library for maintaining components. The components in the component library are maintained with Map data. The key of the Map data is the node type of the JSON node in the JSON data, and the value is the component corresponding to the current node type. Through the component library, the component can be easily and quickly obtained according to the node type of the JSON node for subsequent rendering.

[0048] After the page corresponding to the JSON data is rendered in the canvas, the canvas needs to respond to the user's visual interactive behavior and interact with the base. The visual interaction mainly includes interactive events such as click, right-click, suspension, right-click, delete, etc. The main difficulty in binding the interactive events of components in the canvas is how to identify the components of the low-code platform from any HTML elements that trigger events.

[0049] In a specific embodiment, taking a click event as an example, step 3 specifically includes the following operations: step 31, capture the click event in the canvas, and obtain the click element of the click event; step 32, traverse the parent element upward through the click element to find the component, and if the html structure of the component has a low-code identifier, identify it as a platform component; step 33, obtain the component type and id of the platform component, and traverse the JSON data of the canvas according to the id of the platform component to find the corresponding JSON node; step 34, integrate the method of canvas mounting. In this way, the entire canvas has the function of parsing JSON data and rendering the page through components, and the canvas provides the event interaction interface required by the base.

[0050] The code involved in steps 1 to 3 is the code of the canvas area, which is defined as the canvas rendering logic, the canvas rendering logic is packaged, and then the base integrates the canvas. When traditionally integrated through iframe, it is necessary to deploy a canvas service to be responsible for loading the code in the canvas area, which will greatly waste server resources. If the service of the low-code platform and the canvas service are in different domains, the browser's homology policy will be triggered, and the data interaction between the canvas and the base will not be realized, and resources cannot be shared. The present invention uses a passive iframe, and only needs to upload the code of the canvas area to the server, that is, the upload resource is loaded by means of an iframe document stream. At this time, the browser will not set the iframe source, and there is no need to deploy service resources, nor will it cause various cross-domain problems caused by inconsistent sources. This is because the data operated by the user needs to be isolated on the design side, and the page designed by the user is also a separate page, including style sheets, custom scripts, etc. In order to isolate these custom information, the entire canvas is rendered in an iframe manner, and the user's custom data information is rendered, thereby not affecting the entire low-code application, while reducing maintenance costs.

[0051] Since iframe integration is used, the code of the canvas area needs to be packaged as a separate resource. At the same time, in order to reduce the package size, the shared resources of the base and the canvas need to be processed during packaging. The canvas does not package these shared resources. The shared resources mainly include React framework source code, React Dom framework source code and other source codes. The shared resources are packaged by the base. When the base integrates the canvas, the shared resources are mounted on the iframe window, and the canvas is obtained through the window. Preferably, the packaging can be packaged using tools such as Webpack and VIte, and it can be packaged into a single-page project, such as the index.min.js file. The index.min.js file contains all the logic of canvas rendering and event interaction rendering for integration with the low-code platform.

[0052] The base integrates the canvas by means of an iframe document stream. In a specific embodiment, mounting a shared package includes the following steps: step a, the base introduces the shared package and mounts the shared package on the window of the canvas iframe; step b, mounting the method onClickNode on the window to obtain the components that need to interact; step c, configuring the properties of the base. In a specific embodiment, writing a rendering package by means of a passive iframe document stream includes the following steps: step A, opening the document stream of the iframe; step B, loading the resource address of the rendering package in the document stream; step C, uploading the resource address of the rendering package; step D, closing the document stream.

[0053] Finally, it should be noted that the above embodiments are only preferred embodiments of the present invention to illustrate the technical solutions of the present invention, rather than limiting them, and certainly not limiting the patent scope of the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions recorded in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention. In other words, any changes or modifications made to the main design concept and spirit of the present invention that have no substantive significance, and the technical problems they solve are still consistent with the present invention, should be included in the protection scope of the present invention. In addition, the direct or indirect application of the technical solutions of the present invention in other related technical fields is also included in the patent protection scope of the present invention.

Claims

1. A method for implementing a low-code canvas based on a JSON data structure, characterized in that: include: Step 1. Define the structure of the canvas JSON data; Step 2: Get the component corresponding to the JSON data and render the component in the canvas according to the JSON data; Step 3: Bind the interaction events of components in the canvas; Step 4: Define the code corresponding to the operations in Steps 1 to 3 as canvas rendering logic, package the canvas rendering logic into a rendering package and upload it to the remote service, and package the shared resources of the canvas and the base into a shared package; Step 5. Mount the shared package, and then write the rendering package through the iframe document stream to complete the base integration canvas; In step 5, mounting the shared package includes the following steps: step a, the base introduces the shared package, and mounts the shared package on the window of the canvas iframe; step b, mounting the method on the window to obtain the components that need to interact; step c, configuring the properties of the base; In step 5, writing the rendering package by means of the iframe document stream includes the following steps: step A, opening the document stream of the iframe; step B, loading the resource address of the rendering package in the document stream; step C, uploading the resource address of the rendering package; step D, closing the document stream.

2. According to a method for implementing a low-code canvas based on a JSON data structure according to claim 1, it is characterized in that: The structure of JSON data includes multiple JSON nodes, each JSON node corresponds to a component information, and the structure of the JSON node includes node type, unique identifier and attributes, and the attributes include style, class style, status data and child nodes.

3. According to claim 2, a method for implementing a low-code canvas based on a JSON data structure is characterized in that: The subnode is an array, and the structure of the subnode is the same as that of the JSON node.

4. According to claim 2, a method for implementing a low-code canvas based on a JSON data structure is characterized in that: Step 2 includes: step 21, iterating the JSON data; step 22, obtaining a component corresponding to a node type of a currently iterated JSON node for rendering; step 23, repeating step 22 until component rendering of all JSON nodes in the JSON data is completed.

5. According to claim 4, a method for implementing a low-code canvas based on a JSON data structure is characterized in that: Step 22 includes: Step 221, obtain the component corresponding to the node type of the currently iterated JSON node; Step 222, obtain the id of the component, the id of the component is the unique identifier of the corresponding component in the JSON node, traverse the JSON data according to the id of the component to find the JSON node of the corresponding component, and inject the attributes of the JSON node into the html structure of the component; Step 223, determine whether the currently iterated JSON node has child nodes, if so, obtain the sub-component corresponding to the node type of the child node, obtain the id of the sub-component, the id of the sub-component is the unique identifier of the corresponding sub-component in the child node, traverse the JSON data according to the id of the sub-component to find the child node of the corresponding sub-component, and inject the attributes of the child node into the html structure of the component; Step 224, bind a low-code identifier to the component, and inject the low-code identifier into the html structure of the component.

6. A method for implementing a low-code canvas based on a JSON data structure according to claim 5, characterized in that: Injecting the style in the attributes of the JSON node into the HTML structure of the component includes: creating a tag, the id of the tag is the unique identifier of the current JSON node, the content of the tag is the class style of the current JSON node, and inserting the tag into the head of the web page.

7. According to claim 5, a method for implementing a low-code canvas based on a JSON data structure is characterized in that: Step 3 includes: Step 31, capture the click event in the canvas and obtain the click element of the click event; Step 32, traverse the parent element upward through the click element to find the component. If the html structure of the component has a low-code identifier, identify it as a platform component; Step 33, obtain the component type and id of the platform component, and traverse the JSON data of the canvas according to the id of the platform component to find the corresponding JSON node; Step 34, integrate the canvas mounting method.

8. According to claim 2, a method for implementing a low-code canvas based on a JSON data structure is characterized in that: Also includes: Build a component library for maintaining components. The components in the component library are maintained with Map data. The key of the Map data is the node type of the JSON node in the JSON data, and the value is the component corresponding to the current node type.

Images