A method and device for constructing front-end code engineering based on low-code applications

Abstract

The application discloses a method and device for constructing a front-end code project based on a low-code application, and the method for generating a front-end code project based on a low-code application in an embodiment comprises the following steps: generating a characterizing description sentence based on a low-code application; initializing a front-end project template to generate a front-end project framework in a target folder; and parsing the characterizing description sentence by using a code generator and filling the front-end project framework according to the parsed content to generate a front-end code project. The embodiment provided by the application can generate a characterizing description sentence based on a low-code platform, parse the characterizing description sentence by using a code generator, and reversely generate a front-end code which is convenient to modify, extend and maintain and can be run according to the parsed content, thereby effectively solving the problem that a front-end application program generated based on a low-code platform is not easy to be secondarily developed, improving the development efficiency, reducing the maintenance difficulty and development cost, and having a wide application prospect.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a method and apparatus for building front-end code engineering based on low-code applications. Background Technology

[0002] With the rapid development of internet technology, especially web technology, which has effectively improved user experience, it has been widely applied across various industries. Among related technologies, the use of low-code platforms for visual web application development has become a mainstream trend. However, applications generated by low-code platforms suffer from several drawbacks: difficulty in complex secondary development, poorly readable code leading to high maintenance costs, and difficulty in debugging and locating anomalies.

[0003] Therefore, how to easily and quickly modify, maintain, and debug applications generated by low-code platforms has become a pressing technical problem in this field. Summary of the Invention

[0004] To address at least one of the aforementioned problems, a first aspect of the present invention provides a method for generating front-end code projects based on low-code applications, comprising:

[0005] Generate characterized description statements based on low-code applications;

[0006] Initialize the front-end project template to generate the front-end project framework in the target folder;

[0007] The code generator parses the characterized description statement and populates the front-end project framework based on the parsed content to generate the front-end code project.

[0008] Furthermore, the initialization of the front-end project template to generate the front-end project framework in the target folder further includes:

[0009] Use the code generation tool to run the pre-set instructions and call the front-end project template to generate the front-end project framework.

[0010] Furthermore, the step of parsing the characterized description statement using a code generator and filling the front-end project framework with the parsed content to generate a front-end code project further includes:

[0011] The name obtained by parsing the characterized description statement is used as the name of the front-end code project;

[0012] The configuration items for the front-end code project are generated based on the configuration content obtained by parsing the characterized description statement;

[0013] The global resources of the front-end code project are generated based on the resource content obtained by parsing the characterized description statement;

[0014] The page view of the front-end code project is generated based on the page content obtained by parsing the characterized description statement.

[0015] Furthermore, the step of generating global resources for the front-end code project based on the resource content obtained by parsing the characterized description statement further includes:

[0016] Download the resources from the resource download address obtained by parsing the characterized description statement and store them in the front-end project framework to generate the resource files of the front-end code project;

[0017] Download the tool from the download address obtained by parsing the characterized description statement and store it in the front-end project framework to generate the tool file for the front-end code project;

[0018] The stylesheet content obtained by parsing the characterized description statement is converted into a stylesheet according to the preset first conversion rule and stored in the front-end project framework to generate the stylesheet file of the front-end code project.

[0019] Furthermore, the step of converting the stylesheet content obtained by parsing the characterized description statement into a stylesheet according to a preset first conversion rule and storing it in the front-end project framework to generate the stylesheet file of the front-end code project further includes:

[0020] The component name obtained by parsing the characterized description statement is used as the class name of the style sheet;

[0021] The key-value pairs obtained by parsing the characterized description statement according to the preset first conversion rule are used to generate a global style file and / or nested style files to form a style table;

[0022] The stylesheet is stored in the front-end project framework to generate the stylesheet file for the front-end code project.

[0023] Furthermore, the step of generating the page view of the front-end code project based on the page content obtained by parsing the characterized description statement further includes:

[0024] Iterate through the page content to generate routes for each page view of the front-end code functionality;

[0025] A single component is generated based on the page content and the pre-set second conversion rule;

[0026] Generate in-page styles based on the page content and the first conversion rule;

[0027] The page view of the front-end code project is generated based on the page content, as well as the routes, single components, and in-page styles, and stored in the front-end project framework to generate the page view file of the front-end code project.

[0028] Furthermore, after parsing the characterized description statement using a code generator and filling the front-end engineering framework with the parsed content to generate a front-end code project, the method further includes:

[0029] The front-end code project is started for verification by running a pre-set script command through the validator.

[0030] Furthermore, the step of parsing the characterized description statement through a code generator and filling the front-end project framework with the parsed content to generate a front-end code project further includes: generating test script files;

[0031] The step of starting the front-end code project for verification by running a pre-set script command through the verifier further includes: running the test script file through the verifier to test the front-end code project and generating a test report.

[0032] A second aspect of the present invention also provides an apparatus for generating front-end code projects based on low-code applications, comprising:

[0033] The characterization description statement generation unit is used to generate characterization description statements based on low-code applications;

[0034] The front-end project framework generation unit is used to initialize the front-end project template to generate the front-end project framework in the target folder;

[0035] The front-end code project generation unit is used to parse the characterized description statement through a code generator and fill the front-end project framework according to the parsed content to generate a front-end code project.

[0036] A third aspect of the present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for generating front-end code engineering based on low-code applications as described in the first aspect of the present invention.

[0037] A fourth aspect of the present invention also 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 generating front-end code engineering based on low-code applications as provided in the first aspect of the present invention.

[0038] The beneficial effects of this invention are as follows:

[0039] This invention addresses existing problems by proposing a method for building front-end code projects based on low-code applications. It utilizes character-based description statements generated by a low-code platform, parses these statements using a code generator, and populates the generated front-end project framework with the parsed content. This process reverse-engineers the character-based description statements to generate easily modifiable, extendable, and maintainable, runnable front-end code. This effectively solves the problems of low-code platform-generated front-end applications being difficult to perform complex secondary development, generating unreadable code leading to high maintenance costs, and being difficult to debug and locate anomalies. It improves development efficiency, reduces maintenance difficulty and development costs, and has broad application prospects. Attached Figure Description

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

[0041] Figure 1 This diagram illustrates a method for generating front-end code projects based on low-code applications, according to an embodiment of the present invention.

[0042] Figure 2 This diagram illustrates the structure of a characterized description statement according to an embodiment of the present invention.

[0043] Figure 3 This diagram illustrates the front-end project code file structure according to an embodiment of the present invention.

[0044] Figure 4 This diagram illustrates a device structure for generating front-end code projects based on low-code applications, according to another embodiment of the present invention.

[0045] Figure 5 A schematic diagram of the structure of a computer device according to another embodiment of the present invention is shown. Detailed Implementation

[0046] To more clearly illustrate the present invention, the following description, in conjunction with preferred embodiments and accompanying drawings, further explains the invention. Similar components in the drawings are indicated by the same reference numerals. Those skilled in the art should understand that the specific description below is illustrative rather than restrictive and should not be construed as limiting the scope of protection of the present invention.

[0047] Existing low-code platforms, in order to enable the development of known, basic, and general applications through a graphical user interface, require developers to abstract and encapsulate the functionalities that the low-code platform needs to implement beforehand. This allows business users and developers to collaborate, with business users using the platform's graphical interface (e.g., drag-and-drop) to build front-end applications, while developers assist business users in implementing individual customized functions with minimal code. While theoretically, this low-code platform-based development model allows different roles to focus on their respective tasks, achieving efficient front-end application development, in actual engineering practice, user needs are complex and ever-changing. On the one hand, simple logic encapsulation is difficult to meet complex business requirements, necessitating developers to create numerous customized components to meet these needs. On the other hand, excessive abstraction and encapsulation significantly increase development and maintenance costs and make it difficult to flexibly and cost-effectively support rapidly changing business requirements.

[0048] To address the aforementioned issues with low-code platforms, most existing research on low-code-based development technologies is based on a forward-thinking approach, employing architectural concepts such as componentization, aspect-oriented programming, and test-driven development. The aim is to improve these issues through better encapsulation or abstraction. However, when faced with complex and ever-changing business requirements, this approach fails to effectively solve the problem of increased complexity brought about by abstraction and encapsulation. Especially when dealing with numerous business scenarios that are low in commonality, large in number, and highly flexible, significant costs are incurred for encapsulation, only to find that there are no actual scenarios requiring reuse. Furthermore, the pursuit of these non-existent reuse scenarios results in the development of complex components, reduced code readability due to complex encapsulation hierarchies, and increased maintenance difficulty and costs.

[0049] In short, while existing low-code platforms can enable the development of known, basic, and general applications through graphical user interfaces, they cannot easily modify, extend, maintain, and upgrade complex and ever-changing business requirements. To address this, the inventors, through extensive research and experimentation, proposed that the reason low-code platforms struggle to support customized application development is that their graphical interface requires code abstraction and encapsulation, resulting in deep code layers and high complexity. Meanwhile, complex and ever-changing business requirements necessitate numerous and rapid changes to business logic, leading to complex, slow, and inefficient encapsulation of business code.

[0050] Based on the above problems and the causes of these problems, such as Figure 1 As shown, one embodiment of the present invention provides a method for generating front-end code projects based on low-code applications, comprising:

[0051] Generate characterized description statements based on low-code applications;

[0052] Initialize the front-end project template to generate the front-end project framework in the target folder;

[0053] The code generator parses the characterized description statement and populates the front-end project framework based on the parsed content to generate the front-end code project.

[0054] In this embodiment, considering that in actual engineering practice, business personnel are familiar with business requirements but lack coding skills, a low-code platform allows them to develop web applications based on known, basic, and general business logic through a graphical user interface. For more complex development requirements or upgrades proposed by users, such as those that cannot be implemented using a low-code platform, the method described in this embodiment for generating front-end code projects based on low-code applications is employed. Specifically, the character-based description statements exported by the low-code platform from the low-code application serve as a bridge. The code generator initializes the front-end project template to generate a front-end project framework in the target folder. Furthermore, by parsing the character-based description statements, the front-end project framework is filled in according to the parsed content to generate a runnable front-end code project. This achieves a fast, accurate, and automatic transformation of existing basic business logic into a concise, directly runnable front-end project that allows for complex secondary development. By leveraging the inherent advantages of character-based description statements—accuracy, conciseness, and programmability—this embodiment directly reads business logic from these statements, effectively avoiding the mismatch between actual code and business requirement documents. Simultaneously, based on a front-end project framework generated using a pre-set front-end project template, the parsed content of the character-based description statements generated by the code generator fills the framework, generating a directly executable front-end project. This means that the basic business logic can be accurately, automatically, and easily transformed into a directly executable front-end code project.

[0055] In a specific example, such as Figure 1 As shown, this example illustrates how to obtain a characterized description statement based on a low-code application and generate a front-end code project by parsing the characterized description statement using a code generator. The specific steps are as follows:

[0056] Step 1: Generate character-based description statements based on low-code applications.

[0057] In this embodiment, low-code applications refer to software engineering development implemented through visual operations such as drag-and-drop on a low-code platform's graphical interface. The character-based description statement is a DSL description statement, which stands for Domain Specific Language (DSL). A DSL is a computer programming language with limited expressiveness specific to a particular domain, often used to focus on a specific domain or problem. This embodiment generates a DSL description statement based on a completed low-code application. The DSL description statement is a description file, for example, describing the basic information, configuration information, page structure, and component structure within a complete application. In other words, the DSL description statement is a string-based page layout.

[0058] like Figure 2 The image shows a specific DSL description statement, which includes the name attribute, config attribute, assets attribute, utils attribute, style attribute, and views attribute.

[0059] The aforementioned DSL description statement accurately and concisely expresses the basic business logic developed on a low-code platform, and the DSL description statement can be parsed by a DSL code generator. This embodiment can directly read the business logic from the DSL statement, effectively avoiding the common problem of mismatch between actual code and documentation in practical engineering. It can accurately, automatically, and easily transform the basic business logic into a directly executable front-end code project.

[0060] Step 2: Initialize the front-end project template to generate the front-end project framework in the target folder.

[0061] In this embodiment, as Figure 3 As shown, the front-end engineering framework refers to a collection of front-end engineering files based on the Vue front-end framework, mainly including API, asset, component, icon, language (lang) file, layout, and other engineering files.

[0062] In an optional embodiment, a code generation tool is used to run preset instructions to invoke the front-end project template and generate a front-end project framework.

[0063] In this example, based on the Vue framework, the code generation tool used is vue-cli. For example, executing the command to create a project, "vue creat app", calls a pre-set front-end project template to generate a front-end project framework. For instance, it generates a project like this in the target folder. Figure 3The front-end project framework shown includes all the code and resource files related to the front-end project, and each file is empty. This embodiment uses Vue's accompanying code generation tool to execute the project creation command, which conveniently, quickly, and automatically generates the basic framework of the front-end project.

[0064] Step 3: Parse the DSL description statement using a code generator and fill in the front-end project framework according to the parsed content to generate the front-end code project.

[0065] In this embodiment, a code generator is used to parse the DSL description statement to obtain the basic business logic of the front-end application, thereby obtaining the specific content of the front-end application and populating it into the various folders of the generated front-end code project to form a runnable front-end code project. Specifically, this includes:

[0066] First, the name obtained from parsing the DSL description statement is used as the name of the front-end code project.

[0067] In this embodiment, as Figure 2 As shown, by parsing the DSL description statement, the name attribute is obtained: the project name "bank-svstem" is generated according to the value of the name attribute, and the project name of the front-end code project's project folder is renamed using this project name.

[0068] In an optional example, the name attribute, as a unique identifier for the entire front-end project, can be further used as a prefix for resource files or for variables, methods, classes, and namespaces during the subsequent generation process, thereby preventing naming conflicts and improving readability.

[0069] Secondly, configuration items for the front-end code project are generated based on the configuration content obtained from parsing the DSL description statement.

[0070] In this embodiment, the configuration items of the front-end code project include several configuration files, such as the package.json file and the vue.config.js file.

[0071] The `package.json` file defines the various modules required by the front-end project to be generated, as well as the project's configuration information (such as name, version, license, and other metadata). The `npm install` command automatically downloads the necessary modules based on this configuration file, obtaining the necessary runtime and development environment for configuring the project.

[0072] The vue.config.js file is used to define global variables for the front-end project to be generated. These global variables are automatically loaded by @vue / cli-service, thereby defining the global base URL and the main directory of the output files.

[0073] In this embodiment, the configuration content is obtained by parsing the DSL description statement through a code generator, and then the configuration content is filled into the corresponding folder according to the Vue framework, thereby generating the configuration items of the front-end code project.

[0074] Next, global resources for the front-end code project are generated based on the resource content obtained from parsing the DSL description statement.

[0075] In this embodiment, the global resources of the front-end code project include resource files, such as images and text files. Specifically, they include:

[0076] First, download the resources obtained from the DSL description statement and store them in the front-end project framework to generate resource files for the front-end code project.

[0077] In this embodiment, resource files, including images, icons, etc., are downloaded according to the assets attribute of the DSL description statement and written to the src / assets folder.

[0078] In an optional example, writing the downloaded resource files to the src / assets folder also includes decompressing the compressed resource files.

[0079] In an optional example, writing the downloaded resource files to the src / assets folder also includes decrypting the encrypted resource files.

[0080] In an optional example, writing the downloaded resource files to the src / assets folder also includes adding watermarks to the image resource files. Writing the downloaded resource files to the src / assets folder also includes batch optimization of the image resource files. In an optional example,

[0081] The process of writing downloaded resource files to the src / assets folder also includes combining image resource files.

[0082] It is worth noting that the above embodiments can be used alone or in combination. Those skilled in the art should select appropriate applications according to actual application needs, with the design principle of resource acquisition and resource management, which will not be elaborated further here.

[0083] Second, download the tool from the tool download address obtained by parsing the DSL description statement and store it in the front-end project framework to generate the tool file for the front-end code project.

[0084] In this embodiment, code snippets or global utility classes are generated or downloaded according to the utils attribute of the DSL description statement and written to the src / utils folder.

[0085] In one optional example, generating code snippets or downloading global utility classes and writing them to the src / utils folder further includes obfuscating the code snippets or utility classes. In another optional example, generating code snippets or downloading global utility classes and writing them to the src / utils folder further includes optimizing the code snippets or utility classes and performing validity checks.

[0086] It is worth noting that the above embodiments can be used individually or in combination. Those skilled in the art should select appropriate applications based on actual application needs, with the design principle of tool acquisition and tool management, which will not be elaborated further here.

[0087] Third, based on the style sheet content obtained by parsing the DSL description statement, it is converted into a style sheet according to the preset first conversion rule and stored in the front-end project framework to generate the style sheet file of the front-end code project.

[0088] In this embodiment, a global style sheet file and an in-page style file are generated according to the style attribute of the DSL description statement and written to the src / styles folder.

[0089] Specifically, the step of converting the stylesheet content obtained by parsing the DSL description statement into a stylesheet according to a preset first conversion rule and storing it in the front-end project framework to generate the stylesheet file of the front-end code project further includes:

[0090] 1. The component name obtained by parsing the DSL description statement is used as the class name of the style sheet;

[0091] In this embodiment, the component name is converted to the stylesheet class name; if there is no component name, the component title or component ID is used as the stylesheet class name. Specifically, for example, the component name "component-name" is converted to the format .component-name{}. It is worth noting that the class name of the stylesheet file in the front-end code project is a unique identifier and cannot be the same as other component or class names.

[0092] 2. Based on the preset first conversion rule, parse the key-value pairs obtained from the DSL description statement to generate a global style file to form a style table, or generate a nested style file to form a style table, or generate a global style file and a nested style file to form a style table.

[0093] In this embodiment, all key-value pairs (key, value) in the DSL description statement are directly output as the target style. That is, a global style file is generated based on the key-value pairs obtained from the DSL description statement to form a style sheet, with each key-value pair ending with a semicolon. It is worth noting that nested styles in the DSL description statement are output as nested SCSS styles.

[0094] 3. Store the stylesheet in the front-end project framework to generate the stylesheet file for the front-end code project.

[0095] In this embodiment, the generated stylesheet is stored in the front-end project framework to further generate the front-end code project.

[0096] Finally, the page view of the front-end code project is generated based on the page content obtained by parsing the DSL description statement.

[0097] In this embodiment, according to the views attribute of the DSL description statement, the corresponding route file and view vue file are generated based on the views content structure and written to the src / router and src / views folders.

[0098] The step of generating the page view of the front-end code project based on the page content obtained by parsing the DSL description statement further includes:

[0099] First, traverse the page content to generate routes for each page view of the front-end code function.

[0100] In this embodiment, all pages under the Views section are traversed to generate a list of route addresses, including component references, titles, permissions, and other metadata. The route title is written according to the page title, and the route title will serve as the program's menu name. The corresponding route address for each page is generated, establishing a mapping between pages and components. Simultaneously, a component reference method is generated, informing the program of the page component file corresponding to the access address. The route file is written to src / router for use by all view switching. Traversing the views attribute of the DSL description statement yields a list of all interfaces involved in the existing basic business logic. Because the views attribute is automatically generated based on the existing project, there will be no omissions, duplications, or naming conflicts, ensuring a clear, complete, and accurate replication of the existing project's basic business logic.

[0101] Furthermore, while ensuring completeness, it can also avoid tedious operations caused by manually configuring view information, and directly realize the automatic generation of the routes of each page view based on the views attribute of the existing DSL description statement.

[0102] Second, generate a single component based on the page content and the pre-set second conversion rules.

[0103] In this embodiment, the second conversion rule specifically includes: converting the component name into the component tag name, directly adding the basic attributes as the component's characteristics to the component, converting it into a standard Vue click event delegate through a special click handling function, such as @click = "onSaveClick(...['a',1])", and recursively writing the elements information to the child elements contained in the current component.

[0104] Third, generate in-page styles based on the page content and the first conversion rule.

[0105] In this embodiment, the conversion rule is the same as the first conversion rule in the global style, and will not be repeated here.

[0106] In an optional example, in-page styles also include style reusability processing, with the following rules: First, detect all components on the current page and identify whether each component is completely duplicated. If so, it is considered the same type of component, and the duplicate styles are merged into a single style class to keep the code concise and maintainable. Second, the style hierarchy of child components is kept consistent with the component hierarchy to achieve style integration and categorization. Third, identify the overlapping parts between component-defined styles and integrated style classes and automatically remove redundant and invalid styles to maintain code safety.

[0107] Fourth, based on the page content, the routes, single components, and in-page styles, generate the page view of the front-end code project and store it in the front-end project framework to generate the page view file of the front-end code project.

[0108] In this embodiment, the code is written to the file according to the module name to which the page belongs, and the page name is used as the name of the code file. For example, the page behavior (action) is injected into the methods function body of the Vue script note, the referenced style sheet information is injected into the style tag, and then the generated single component and page style are merged, so that all the content is written into the front-end code project as a string.

[0109] This completes the process of parsing the DSL description statement using a code generator and filling in the front-end project framework based on the parsed content to generate the front-end code project.

[0110] Considering the completeness and usability of the generated front-end code project, in an optional embodiment, after the code generator parses the characterized description statement and fills the front-end project framework according to the parsed content to generate the front-end code project, the method further includes: starting the front-end code project for verification by running a pre-set script command through a validator.

[0111] The code generation method provided in this embodiment differs from existing code generation technologies. The front-end code project generated in this embodiment is a complete and directly runnable front-end project. Furthermore, this embodiment further executes a verification script through a verifier to test the generated front-end code project, thereby ensuring the reliability of the generated front-end code project.

[0112] In an optional embodiment, the step of parsing the characterized description statement by the code generator and filling the front-end engineering framework with the parsed content to generate the front-end code project further includes: generating test script files.

[0113] In this embodiment, generating the test script file does not require traversing all pages separately; the test script is generated simultaneously during the page traversal process of generating the code.

[0114] In an optional embodiment, the step of starting the front-end code project for verification by running a pre-set script command through the verifier further includes: running the test script file through the verifier to test the front-end code project and generating a test report.

[0115] In this embodiment, the front-end code project generated by this method is installable and runnable. To verify the correctness of the generated front-end code project, a verification process will be automatically executed after its generation, and a verification report will be automatically generated. This allows for simple, quick, and comprehensive basic testing of the generated front-end code project, ensuring the accuracy of the basic logic of each page. Furthermore, by combining custom tags and agreed-upon naming rules, further integration testing can be achieved, significantly improving the quality of the produced code, increasing development efficiency, and reducing development costs.

[0116] Specifically, each page can be generated along with its corresponding unit test script; for example, event response methods can be generated for each page for testing. During verification, these event response methods are run to test the page. Specifically, basic verification test methods can be generated for each UI element of the user interface. For example, a text box element includes length and type attributes; verification test methods can be generated for the maximum length and text type of that text box. In other words, automated tests are further generated for each element and method on the page during the page generation process.

[0117] Specifically, after the code generator parses the DSL description statement, it generates test code by traversing each page and any element within each page, including but not limited to the default value, value range, response event, unit test script, etc. of each element. That is, this embodiment generates unit test code in the process of generating the front-end code project based on the idea of ​​test-driven development.

[0118] Furthermore, by adding custom code blocks related to testing to the DSL description statement, encapsulating commonly used UI components, and adding test-related attributes, more complex and refined automated unit testing can be achieved. For example, to realize test-driven development and transform test cases into executable code, by writing the call to the test script into the build script, automated smoke testing can be achieved, for example, after executing daily builds.

[0119] Considering the numerous sudden and urgent temporary project requirements in actual engineering practice, these requirements are not intended for reuse in other projects or lack general applicability to specific users, making them difficult to encapsulate into generic components. Encapsulating the business logic of these temporary project requirements using the low-code platform requires significant development costs and time. In particular, to enable drag-and-drop functionality, code logic needs abstraction and encapsulation, generating auxiliary code and employing code injection techniques, leading to reduced code readability. Furthermore, when exceptions occur, the exception stack cannot directly display the actually running code, making debugging difficult during integration testing. Even after software deployment, when exceptions occur in the production environment, it is difficult to directly locate the problem through the exception stack. Therefore, the method for generating front-end code projects based on low-code applications disclosed in this invention can directly generate runnable front-end project code, effectively solving the problems existing in the above scenarios.

[0120] In an optional embodiment, the front-end code project generated by the method for generating front-end code projects based on low-code applications allows developers to directly implement the temporary project requirements using conventional development methods. The code does not require excessive abstraction and encapsulation, nor does it need a complex code hierarchy. The code can be run and debugged directly, and the line of code where the exception occurred can be directly located through the exception stack trace. Therefore, the temporary project requirements can be implemented quickly, easily, and intuitively. After the temporary project is completed, if analysis confirms that the temporary project requirements need to be reused in other projects, developers can further encapsulate the code, directly using code logic validated in actual projects for abstraction and encapsulation within the low-code platform, facilitating reuse in subsequent projects.

[0121] In an optional embodiment, the method for generating a front-end code project based on a low-code application further includes: maintaining and managing the front-end code project using a code version control tool.

[0122] In this embodiment, modifications made during the front-end code project generation process are recorded using a code version control tool, so that developers can obtain the business logic of the front-end code project through these records.

[0123] To further enhance the application of low-code platforms, in an optional embodiment, the method for generating front-end code projects based on low-code applications further includes: encapsulating the front-end code projects and adding them to the low-code platform.

[0124] In this embodiment, the generated front-end code project is encapsulated and used as a component in a low-code platform so that it can be reused by other applications.

[0125] Corresponding to the method for generating front-end code projects based on low-code applications provided in the above embodiments, an embodiment of this application also provides an apparatus for generating front-end code projects based on low-code applications using the above-described method. Since the apparatus provided in this application corresponds to the methods provided in the above embodiments, the apparatus provided in this embodiment is also applicable to the previous embodiments, and will not be described in detail in this embodiment.

[0126] like Figure 4 As shown, one embodiment of this application also provides an apparatus for generating front-end code projects based on low-code application DSL using the above-described method for generating front-end code projects based on low-code application DSL, comprising:

[0127] The characterization description statement generation unit is used to generate characterization description statements based on low-code applications;

[0128] The front-end project framework generation unit is used to initialize the front-end project template to generate the front-end project framework in the target folder;

[0129] The front-end code project generation unit is used to parse the characterized description statement through a code generator and fill the front-end project framework according to the parsed content to generate a front-end code project.

[0130] This embodiment utilizes the characterized description statement generation unit to generate characterized description statements based on a low-code platform. The front-end code engineering generation unit then parses these characterized description statements using a code generator and fills them into the front-end engineering framework generated by the front-end engineering framework generation unit. This process reverse-engineers front-end code that is easy to modify, extend, and maintain, and is also executable. This effectively solves the problems of low-code platform-generated front-end applications being difficult to perform complex secondary development, generating code that is difficult to read leading to high maintenance costs, and being difficult to debug and locate when anomalies occur. It can improve development efficiency, reduce maintenance difficulty and development costs, and has broad application prospects.

[0131] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following: generating characterized description statements based on low-code applications; initializing a front-end project template to generate a front-end project framework in a target folder; and parsing the characterized description statements through a code generator and filling the front-end project framework according to the parsed content to generate a front-end code project.

[0132] In practical applications, the computer-readable storage medium can be any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. For example, a computer-readable storage medium can be, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0133] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0134] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0135] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as "C" or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0136] like Figure 5 As shown, another embodiment of the present invention provides a structural schematic diagram of a computer device. Figure 5 The computer device 12 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of the present invention.

[0137] like Figure 5 As shown, the computer device 12 is represented in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, system memory 28, and a bus 18 connecting different system components (including system memory 28 and processing unit 16).

[0138] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. For example, these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0139] Computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0140] System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. Computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (…). Figure 5 Not shown; usually referred to as a "hard drive"). Although Figure 5 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of the present invention.

[0141] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Program modules 42 typically perform the functions and / or methods described in the embodiments of the present invention.

[0142] Computer device 12 can also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), and with one or more devices that enable a user to interact with the computer device 12, and / or with any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed through input / output (I / O) interface 22. Furthermore, computer device 12 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) through network adapter 20. Figure 5 As shown, network adapter 20 communicates with other modules of computer device 12 via bus 18. It should be understood that, although... Figure 5 As not shown, it can be used in conjunction with computer device 12 with other hardware and / or software modules, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0143] Processor unit 16 executes various functional applications and data processing by running programs stored in system memory 28, such as implementing a method for generating front-end code projects based on low-code applications provided in this embodiment of the invention. This invention discloses a method for building front-end code projects based on low-code applications, capable of reverse-engineering front-end code projects from applications generated on low-code platforms, allowing developers to build upon the generated standard front-end code projects.

[0144] Unlike existing technologies that improve code abstraction and encapsulation through forward modification, this invention employs reverse code generation technology. Based on applications already generated on low-code platforms, it uses character-based description statements to reverse-engineer conventional, structurally simple front-end project code, facilitating secondary development by developers to meet complex requirements. Therefore, the method for generating front-end code projects based on low-code applications disclosed in this invention has the following advantages:

[0145] 1. For common, stable, and simple business needs, existing low-code platforms can still be used to implement drag-and-drop operations with less code and a graphical interface, making front-end application development convenient and quick.

[0146] 2. For complex, individual, and temporary requirement changes, front-end code projects are generated based on low-code application characterization description statements, allowing for direct secondary development without complex abstraction and encapsulation. The code structure is concise and easy to maintain, significantly reducing development costs and improving development efficiency.

[0147] 3. Use code version control tools to maintain and manage the generated front-end code project. For newly proposed business requirements that are common, encapsulate the relevant code and add it to the low-code platform for use in subsequent versions.

[0148] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not intended to limit the implementation of the present invention. For those skilled in the art, other variations or modifications can be made based on the above description. It is impossible to exhaustively list all the implementation methods here. All obvious variations or modifications derived from the technical solutions of the present invention are still within the protection scope of the present invention.

Claims

1. A method for generating front-end code projects based on low-code applications, characterized in that, include: The low-code application generates a characterized description statement, which is a software engineering development implemented through visual operation on the graphical interface of the low-code platform. The characterized description statement is a string-based page layout, including basic information, configuration information, page structure, and component structure within the page that describes an application. Initializing a front-end project template to generate a front-end project framework in a target folder further includes: using a code generation tool to run a pre-set instruction to call the front-end project template to generate a front-end project framework, wherein the front-end project framework is a collection of front-end project files based on the Vue front-end framework, including interfaces, resources, components, icons, multi-language files, and layout files; The method further includes: parsing the characterized description statement using a code generator and filling the front-end project framework with the parsed content to generate a front-end code project; using the name obtained from parsing the characterized description statement as the name of the front-end code project; generating configuration items for the front-end code project based on the configuration content obtained from parsing the characterized description statement; generating global resources for the front-end code project based on the resource content obtained from parsing the characterized description statement; and generating page views for the front-end code project based on the page content obtained from parsing the characterized description statement. The step of generating global resources for the front-end code project based on the resource content obtained by parsing the characterized description statement further includes: Download the resources from the resource download address obtained by parsing the characterized description statement and store them in the front-end project framework to generate the resource files of the front-end code project; Download the tool from the download address obtained by parsing the characterized description statement and store it in the front-end project framework to generate the tool file for the front-end code project; The style sheet content obtained by parsing the characterized description statement is converted into a style sheet according to the preset first conversion rule and stored in the front-end project framework to generate the style sheet file of the front-end code project. The step of converting the stylesheet content obtained by parsing the characterized description statement into a stylesheet according to a preset first conversion rule and storing it in the front-end project framework to generate the stylesheet file of the front-end code project further includes: The component name obtained by parsing the characterized description statement is used as the class name of the style sheet; The key-value pairs obtained by parsing the characterized description statement according to the preset first conversion rule are used to generate a global style file and / or nested style files to form a style table; The stylesheet is stored in the front-end project framework to generate the stylesheet file for the front-end code project; The step of generating the page view of the front-end code project based on the page content obtained by parsing the characterized description statement further includes: Iterate through the page content to generate routes for each page view in the front-end code project; A single component is generated based on the page content and the pre-set second conversion rule; Generate in-page styles based on the page content and the first conversion rule; The page view of the front-end code project is generated based on the page content, as well as the routes, single components, and in-page styles, and stored in the front-end project framework to generate the page view file of the front-end code project.

2. The method according to claim 1, characterized in that, After parsing the characterized description statement using a code generator and filling the front-end project framework with the parsed content to generate a front-end code project, the method further includes: The front-end code project is started for verification by running a pre-set script command through the validator.

3. The method according to claim 2, characterized in that, The step of parsing the characterized description statement through a code generator and filling the front-end project framework according to the parsed content to generate a front-end code project further includes: generating test script files; The step of starting the front-end code project for verification by running a pre-set script command through the verifier further includes: running the test script file through the verifier to test the front-end code project and generating a test report.

4. An apparatus for generating front-end code projects based on low-code applications, characterized in that, include: A characterization description statement generation unit is used to generate characterization description statements based on low-code applications. The low-code application is software engineering development implemented through visual operations on the graphical interface of a low-code platform. The characterization description statement is a string-based page layout, including basic information, configuration information, page structure, and component structure within the page that describes an application. A front-end project framework generation unit is used to initialize a front-end project template to generate a front-end project framework in a target folder. The unit further includes: using a code generation tool to run a pre-set instruction to call the front-end project template to generate a front-end project framework. The front-end project framework is a collection of front-end project files based on the Vue front-end framework, including interfaces, resources, components, icons, multi-language files, and layout files. A front-end code project generation unit is used to parse the characterized description statement using a code generator and fill the front-end project framework according to the parsed content to generate a front-end code project. The unit further includes: using the name obtained from parsing the characterized description statement as the name of the front-end code project; generating configuration items for the front-end code project based on the configuration content obtained from parsing the characterized description statement; generating global resources for the front-end code project based on the resource content obtained from parsing the characterized description statement; and generating page views for the front-end code project based on the page content obtained from parsing the characterized description statement. The unit further includes: Download the resources from the resource download address obtained by parsing the characterized description statement and store them in the front-end project framework to generate the resource files of the front-end code project; Download the tool from the download address obtained by parsing the characterized description statement and store it in the front-end project framework to generate the tool file for the front-end code project; The process further includes: using the component name obtained from parsing the characterized description statement as the class name of the style sheet; parsing the key-value pairs obtained from the characterized description statement according to the preset first conversion rule to generate a style sheet; and storing the style sheet in the front-end project framework to generate a style sheet file for the front-end code project. The process involves traversing the page content to generate routes for each page view of the front-end code project; generating single components based on the page content and a pre-set second conversion rule; generating in-page styles based on the page content and the first conversion rule; and generating page views of the front-end code project based on the page content, the routes, single components, and in-page styles, and storing them in the front-end project framework to generate the page view file of the front-end code project.

5. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-3.

6. 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 as described in any one of claims 1-3.

Images