Low-code form generation system and method based on code compiling

Abstract

The invention discloses a low-code form generation system and method based on code compiling. The system comprises a visualization module, an intermediate representation generation module, a code compiling module, a storage and management module and an export and deployment module. The method comprises the following steps: S1, a user drags a required component to a canvas area through a visualization module, and performs attribute configuration to generate a structured form description file; s2, receiving a structured form description file, and converting the structured form description file into an intermediate representation irrelevant to a front-end framework; s3, generating an executable js code in combination with the intermediate representation and a predefined code template; and S4, packaging the generated executable js code file, and providing the executable js code file to a user for downloading and deploying. According to the method, a non-professional user can quickly build a form interface through simple dragging, meanwhile, source codes which are high in quality, high in readability and easy to maintain can be output for professional developers, and advanced customized development is supported.

Description

Technical Field

[0001] This invention relates to the field of software development technology, specifically to a low-code form generation system and method based on code compilation. Background Technology

[0002] In traditional software development, forms serve as crucial interfaces for user interaction and information collection. Their development requires front-end engineers to write extensive amounts of HTML, CSS, and JavaScript code. This process is typically tedious, repetitive, time-consuming, and error-prone, especially when form requirements change frequently, resulting in extremely high maintenance costs.

[0003] To improve development efficiency, low-code / no-code (LCNC) development platforms have emerged. Most existing low-code form generation tools employ one of the following two methods: 1. Purely Visual Configuration: Users generate forms by dragging and dropping components and setting properties. The platform parses this configuration data (usually in JSON format) at runtime and dynamically renders the form interface. While this method is simple and intuitive, it suffers from performance bottlenecks (requiring runtime parsing), poor flexibility (difficult to implement highly customized and complex interactive logic), and difficulty in integrating with professional development processes (such as version control, code review, and continuous integration).

[0004] 2. Code Template Generation: A fixed code template is generated based on the user's selection. Code generated in this way is often redundant and structurally rigid. When the user needs to make adjustments, they either have to regenerate and overwrite the original code, or manually modify the generated code. The latter is very difficult for non-developers and can easily disrupt the template's consistency. Summary of the Invention

[0005] To address the aforementioned issues, this invention provides a low-code form generation system based on code compilation, comprising a visualization module, an intermediate representation generation module, a code compilation module, a storage and management module, and an export and deployment module; The visualization module is used to drag and drop components and configure their attributes to generate a structured form description file; The intermediate representation generation module is used to convert the structured form description file into an intermediate representation; The code compilation module is used to generate executable JavaScript code based on intermediate representations and predefined code templates; The storage and management module is used to store and manage code templates for different front-end frameworks or different UIs; The export and deployment module is used to package and download the generated executable JS code for deployment.

[0006] Furthermore, the attribute configuration in the visualization module specifically includes: field name, label, validation rules, data binding, and style; the components specifically include: input box, drop-down selector, date picker, and table.

[0007] The low-code form generation method based on code compilation includes the following steps: S1. Users drag and drop the required components to the canvas area through the visualization module and configure the attributes to generate a structured form description file; S2. Receive the structured form description file and convert it into an intermediate representation that is independent of the front-end framework; S3. Combine intermediate representations and predefined code templates to generate executable JavaScript code; S4. Package the generated executable JS code file and provide it to users for download and deployment.

[0008] Furthermore, step S1 specifically includes the following sub-steps: S11. Users can drag and drop the required components to the canvas area through the visual module to complete the form layout; S12. Configure the detailed properties of each component on the canvas to generate a structured form description file.

[0009] Furthermore, step S2 specifically involves: abstracting the UI structure, logic, and data model in the structured form description file to generate corresponding function fragments.

[0010] Furthermore, step S3 specifically includes the following sub-steps: S31. The intermediate representation is used to generate the corresponding lifecycle functions of the Vue component through data structures using compilation technology; S32. Combine Vue components with function fragments in the intermediate representation to generate JavaScript code; S33. Load and execute the JavaScript code in the browser to render the loading screen.

[0011] Furthermore, the lifecycle functions of the Vue component specifically include: template, watch, computed, and methods; The compilation techniques specifically include: syntax analysis, number conversion, and code optimization.

[0012] This invention provides a low-code form generation system and method based on code compilation, which has the following beneficial effects: 1. Balancing low barriers to entry and high flexibility: Non-developers can quickly build forms visually, while developers can obtain clean and extensible source code without having to perform restricted secondary development in the platform's black-box environment.

[0013] 2. High performance: The final code that runs is the compiled native code, rather than the JSON configuration that needs to be parsed at runtime, which eliminates performance loss and provides a user experience that is no different from writing the code by hand.

[0014] 3. High maintainability: The generated code has a good structure and clear comments, which facilitates subsequent reading, modification and refactoring, and is perfectly adapted to modern software engineering.

[0015] 4. Technology stack friendly: By changing the code template, it can support the output of code for multiple mainstream front-end frameworks such as Vue, avoiding the risk of platform lock-in.

[0016] 5. Improve overall development efficiency: Free developers from repetitive tasks, allowing them to focus on more complex business logic and shortening the development, testing, and maintenance cycle. Attached Figure Description

[0017] 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 only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the structures shown in these drawings without creative effort.

[0018] Figure 1 The method flowchart provided by the present invention. Detailed Implementation

[0019] It should be understood that the specific embodiments described herein are for illustrative purposes only and are not intended to limit the scope of the invention.

[0020] The following detailed description of the implementation method of the present invention is in conjunction with the accompanying drawings. The description is only a partial embodiment and not all embodiments. For clarity, representations and descriptions unrelated to the present invention are omitted in the drawings and description.

[0021] To provide a clearer understanding of the technical features, objectives, and beneficial effects of this invention, the technical solutions of this invention are selected and described in detail below. Obviously, the described embodiments are only a portion of the embodiments of this invention, not all of them, and should not be construed as limiting the scope of implementation of this invention. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the protection scope of this invention.

[0022] This invention provides a low-code form generation system based on code compilation, including a visualization module, an intermediate representation generation module, a code compilation module, a storage and management module, and an export and deployment module.

[0023] The visualization module allows users to drag and drop components, configure their properties, and generate structured form description files. It provides a visual designer interface with a rich set of pre-built form UI components (such as input boxes, dropdown selectors, date pickers, tables, etc.). All configuration operations generate a structured form description file (such as JSON Schema or a custom DSL).

[0024] The intermediate representation generation module converts structured form description files into an intermediate representation. This intermediate representation abstracts the form's UI structure, logic, and data model, laying the foundation for subsequent code compilation. It adds logical expressions to traditional JSON configuration, enhancing the configuration file's description of the logical flow. For example, functions can be configured as JSON data through the interface, and then the intermediate representation (IR) generation stage generates function fragments from the JSON data, thus improving compiler speed while maintaining configuration flexibility. This intermediate representation is more readable by professionals, and reduces compiler overhead in code generation.

[0025] The code compilation module is used to generate executable JavaScript code based on an intermediate representation and predefined code templates. This module receives the intermediate representation and combines it with predefined, extensible code templates (such as Vue framework templates). Through compilation techniques (including but not limited to syntax analysis, tree transformation, and code optimization), it generates corresponding Vue component lifecycle functions such as `template`, `watch`, `computed`, and `methods` from the intermediate representation using agreed-upon data structures. Simultaneously, it generates user-defined logic code from the intermediate representation's function code snippets, resulting in highly readable, maintainable JavaScript code that can be directly executed and rendered in the browser.

[0026] The generated code is not simply glued together, but rather component code that conforms to best practices, has a clear structure, and includes complete responsive data binding and validation logic.

[0027] The storage and management module is used to store and manage code templates for different front-end frameworks or UIs. It packages the generated source code files (or multiple files) and provides them to users for download or direct export to a specified code repository. Professional developers can directly perform secondary development based on this generated code. It supports downloading the generated code as a code project, structured like a normal handwritten code project. This code project can be opened in an IDE just like handwritten code and can be seamlessly integrated into existing engineering development workflows (using tools such as Git, Webpack, Vite, and npm).

[0028] The Export and Deploy module is used to package and download the generated executable JavaScript code for deployment.

[0029] The attribute configuration in the visualization module specifically includes: field name, label, validation rules, data binding, and style; the components specifically include: input box, drop-down selector, date picker, and table.

[0030] Low-code form generation methods based on code compilation, such as Figure 1 As shown, the specific steps include: S1. Users drag and drop the required components to the canvas area through the visualization module and configure the attributes to generate a structured form description file; S2. Receive the structured form description file and convert it into an intermediate representation that is independent of the front-end framework; S3. Combine intermediate representations and predefined code templates to generate executable JavaScript code; S4. Package the generated executable JS code file and provide it to users for download and deployment.

[0031] Step S1 specifically includes the following sub-steps: S11. Users can drag and drop the required components to the canvas area through the visual module to complete the form layout; S12. Configure the detailed properties of each component on the canvas to generate a structured form description file.

[0032] Step S2 specifically involves abstracting the UI structure, logic, and data model from the structured form description file to generate corresponding function fragments.

[0033] Step S3 specifically includes the following sub-steps: S31. Through compilation techniques (syntax analysis, number conversion, code optimization), the intermediate representation is used to generate the corresponding lifecycle functions (template, watch, computed, methods, etc.) of the Vue component through data structures. S32. Combine Vue components with function fragments in the intermediate representation to generate JavaScript code; S33. Load and execute the JavaScript code in the browser to render the loading screen.

[0034] Example: The user opens the visualization module and drags an Input component and a Select component from the left component panel of the visualization module onto the canvas.

[0035] Select the Input component, and in the properties panel on the right, set its label to "Username", field to username, and add a "Required" validation rule.

[0036] Select the Select component, set its label to "City", field to "city", and configure the option data in the format [{label: 'Beijing', value: 'bj'}, ...].

[0037] When the user clicks the "Generate" button, the system generates a JSON Schema description file for the current configuration.

[0038] The code compilation module reads the JSON file, converts it into an intermediate representation syntax tree, and calls the corresponding code template based on the target framework selected by the user.

[0039] The code compilation module traverses the syntax tree, maps nodes to code snippets in the template, and intelligently generates reactive data (ref or reactive), validation logic (such as using async-validator or Vuelidate), template structure, etc., and finally combines them into a complete Vue Single-File Component (.vue) file.

[0040] The system provides a link to download the .vue file. Developers can then add it to their projects and import, use, and further customize it like a regular component.

[0041] This invention "compiles" high-level, declarative visual configurations into low-level, imperative source code, rather than simply interpreting or generating template code. This is similar to the process of compiling a high-level programming language into JavaScript, improving development efficiency while ensuring the quality and performance of the output.

[0042] 1. Balancing low barriers to entry and high flexibility: Non-developers can quickly build forms visually, while developers can obtain clean and extensible source code without having to perform restricted secondary development in the platform's black-box environment.

[0043] 2. High performance: The final code that runs is the compiled native code, rather than the JSON configuration that needs to be parsed at runtime, which eliminates performance loss and provides a user experience that is no different from writing the code by hand.

[0044] 3. High maintainability: The generated code has a good structure and clear comments, which facilitates subsequent reading, modification and refactoring, and is perfectly adapted to modern software engineering.

[0045] 4. Technology stack friendly: By changing the code template, it can support the output of code for multiple mainstream front-end frameworks such as Vue, avoiding the risk of platform lock-in.

[0046] 5. Improve overall development efficiency: Free developers from repetitive tasks, allowing them to focus on more complex business logic and shortening the development, testing, and maintenance cycle.

[0047] The above description is merely a preferred embodiment of the present invention. It should be understood that the present invention is not limited to the forms disclosed herein and should not be construed as excluding other embodiments. It can be used in various other combinations, modifications, and environments, and can be altered within the scope of the concept described herein through the above teachings or related technologies or knowledge. Modifications and variations made by those skilled in the art that do not depart from the spirit and scope of the present invention should be within the protection scope of the appended claims.

Claims

1. A low-code form generation system based on code compilation, characterized in that, It includes a visualization module, an intermediate representation generation module, a code compilation module, a storage and management module, and an export and deployment module; The visualization module is used to drag and drop components and configure their attributes to generate a structured form description file; The intermediate representation generation module is used to convert the structured form description file into an intermediate representation; The code compilation module is used to generate executable JavaScript code based on intermediate representations and predefined code templates; The storage and management module is used to store and manage code templates for different front-end frameworks or different UIs; The export and deployment module is used to package and download the generated executable JS code for deployment.

2. The low-code form generation system based on code compilation according to claim 1, characterized in that, The attribute configuration in the visualization module specifically includes: field name, label, validation rules, data binding, and style; The components specifically include: an input box, a drop-down selector, a date selector, and a table.

3. A low-code form generation method based on code compilation, based on the low-code form generation system based on code compilation as described in claim 1 or 2, characterized in that, Specifically, the following steps are included: S1. Users drag and drop the required components to the canvas area through the visualization module and configure the attributes to generate a structured form description file; S2. Receive the structured form description file and convert it into an intermediate representation that is independent of the front-end framework; S3. Combine intermediate representations and predefined code templates to generate executable JavaScript code; S4. Package the generated executable JS code file and provide it to users for download and deployment.

4. The low-code form generation method based on code compilation according to claim 3, characterized in that, Step S1 specifically includes the following sub-steps: S11. Users can drag and drop the required components to the canvas area through the visual module to complete the form layout; S12. Configure the detailed properties of each component on the canvas to generate a structured form description file.

5. The low-code form generation method based on code compilation according to claim 3, characterized in that, The S2 step specifically involves: abstracting the UI structure, logic, and data model in the structured form description file to generate corresponding function fragments.

6. The low-code form generation method based on code compilation according to claim 5, characterized in that, Step S3 specifically includes the following sub-steps: S31. The intermediate representation is used to generate the corresponding lifecycle functions of the Vue component through data structures using compilation technology; S32. Combine Vue components with function fragments in the intermediate representation to generate JavaScript code; S33. Load and execute the JavaScript code in the browser to render the loading screen.

7. The low-code form generation method based on code compilation according to claim 6, characterized in that, The lifecycle functions of the Vue component specifically include: template, watch, computed, and methods; The compilation techniques specifically include: syntax analysis, number conversion, and code optimization.

Images