Front-end code generation method and device and storage medium

Abstract

The invention discloses a front-end code generation method and device and a storage medium, and relates to the technical field of front-end development. According to the method, by obtaining the pre-configuration data of the to-be-executed project, the project demand can be accurately grasped. According to the method, the attribute information is analyzed, complex project requirements are refined into specific dimension configuration data, then the data are matched with the front-end configuration resource pools of the multiple dimensions, the target codes are rapidly generated, the code obtaining time is greatly shortened, and the tedious work that developers blindly search and write a large number of codes is avoided. Finally, the target front-end codes are generated through combination according to the preset format, repeated development is effectively avoided, developers do not need to write basic codes, more energy can be concentrated on core business logic implementation, the technical problems that in the front-end development process, code writing efficiency is low, errors are prone to occurring, and resource reusability is poor are solved, and the development efficiency is improved. The technical effects of improving the front-end development efficiency, improving the code quality and enhancing the code reusability are achieved.

Description

Technical Field

[0001] This application relates to the field of front - end development technologies, and in particular, to a front - end code generation method, apparatus, and storage medium. Background Art

[0002] With the continuous evolution of front - end technologies, new frameworks, libraries, and tools emerge in an endless stream. The technical knowledge and skills that developers need to master are also increasing, which makes the learning cost and work difficulty of front - end development gradually increase. At the same time, there is a large amount of repetitive work in front - end development, such as form validation and page layout, which further increases the complexity of development. Summary of the Invention

[0003] This application provides a front - end code generation method, apparatus, and storage medium to at least solve the problems of low code writing efficiency, error - prone, and poor resource reusability in the process of front - end development in related technologies.

[0004] This application provides a front - end code generation method, including: obtaining pre - configured data of a project to be executed and a front - end configuration resource pool in multiple dimensions; parsing the attribute information of the pre - configured data to determine the dimension configuration data of the pre - configured data in each dimension; sequentially matching each dimension configuration data with the multiple front - end configuration resource pools to determine the target code corresponding to the dimension configuration data from the multiple front - end configuration resource pools; and merging the target codes corresponding to each dimension configuration data in a preset format to generate the target front - end code of the project to be executed.

[0005] In an optional implementation manner, sequentially matching each dimension configuration data with the multiple front - end configuration resource pools to determine the target code corresponding to the dimension configuration data from the multiple front - end configuration resource pools includes: for any one dimension configuration data, based on the dimension attribute of the dimension configuration data, determining the target front - end configuration resource pool associated with the dimension configuration data from the multiple front - end configuration resource pools; and performing information matching between the dimension configuration data and the target front - end development resource pool, and extracting the target code corresponding to the dimension configuration data from the target front - end development resource pool according to the information matching result.

[0006] In an alternative embodiment, the front-end configuration resource pool includes a framework resource pool, a style resource pool, an interaction resource pool, a template resource pool, and an application programming interface resource pool; the dimension configuration data includes technology stack identification data, style resource data, functional requirement data, and application programming interface metadata; the dimension configuration data is matched with the target front-end development resource pool, and according to the information matching result, the target code corresponding to the dimension configuration data is extracted from the target front-end development resource pool, including: based on the technology stack identification data, extracting the target framework code corresponding to the technology stack identification data from the framework resource pool; based on the style resource data, extracting the target style code corresponding to the style resource data from the style resource pool; based on the functional requirement data, extracting the target template code corresponding to the functional requirement data from the template resource pool; based on the target template code, extracting the target interaction code corresponding to the target template code from the interaction resource pool; based on the application programming interface metadata, extracting the target interface code corresponding to the application programming interface metadata from the application programming interface resource pool; the target code includes the target framework code, the target style code, the target template code, the target interaction code, and the target interface code.

[0007] In an alternative embodiment, based on the technology stack identification data, extracting the target framework code corresponding to the technology stack identification data from the framework resource pool includes: parsing the technology stack identification data to determine the front-end framework type and framework version information corresponding to the technology stack identification data; according to the front-end framework type and framework version information, extracting the corresponding framework adapter from the framework resource pool; according to the framework adapter and the component information and component version information included in the technology stack identification data, extracting the component data corresponding to the technology stack identification data from the pre-established component library; generating the target framework code based on the framework adapter and the component data.

[0008] In an alternative embodiment, based on the style resource data, extracting the target style code corresponding to the style resource data from the style resource pool includes: classifying the style resource data to determine the style attributes included in the style resource data; according to the style attributes, extracting the target style code corresponding to the style attributes from the style resource pool.

[0009] In an alternative embodiment, based on the functional requirement data, extracting the target template code corresponding to the functional requirement data from the template resource pool includes: disassembling the functional requirement data to obtain the functional business attributes corresponding to the functional requirement data; based on the functional business attributes, determining the target template type corresponding to the functional requirement data; according to the target template type, extracting the target template code corresponding to the target template type from the template resource pool.

[0010] In an alternative embodiment, based on the target template code, the target interaction code corresponding to the target template code is extracted from the interaction resource pool, including: analyzing the target template code to determine the interaction attributes corresponding to the target template code; according to the interaction attributes, extracting the encapsulated code blocks corresponding to the interaction attributes from the interaction resource pool; and extracting the target interaction code corresponding to the interaction attributes from the encapsulated code blocks.

[0011] In an alternative embodiment, based on the application programming interface metadata, the target interface code corresponding to the application programming interface metadata is extracted from the application programming interface resource pool, including: parsing the application programming interface metadata to determine the interface parameter information corresponding to the used application programming interface metadata; and according to the interface parameter information, extracting the target interface code corresponding to the interface parameter information from the application programming interface resource pool.

[0012] The present application also provides a front-end code generation device, including: an acquisition module for acquiring the pre-configured data of the project to be executed and the front-end configuration resource pools in multiple dimensions; a determination module for parsing the attribute information of the pre-configured data to determine the dimensional configuration data of the pre-configured data in each dimension; a matching module for sequentially matching each dimensional configuration data with the multiple front-end configuration resource pools to determine the target code corresponding to the dimensional configuration data from the multiple front-end configuration resource pools; and a generation module for merging the target codes corresponding to each dimensional configuration data in a preset format to generate the target front-end code of the project to be executed.

[0013] The present application also provides an electronic device, including: a memory for storing a computer program; and a processor for implementing the steps of any of the above front-end code generation methods when executing the computer program.

[0014] The present application also provides a computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor, implements the steps of any of the above front-end code generation methods.

[0015] The present application also provides a computer program product including a computer program, which, when executed by a processor, implements the steps of any of the above front-end code generation methods.

[0016] With this application, since an association mechanism between pre-configured data and a multi-dimensional front-end configuration resource pool is established, guided by the pre-configured data, specific dimensional configuration data is parsed according to its attributes, and then these data are used to accurately locate the target code in the resource pool, achieving an efficient conversion from project requirements to code acquisition and reducing the randomness and repetition of manual code writing. Therefore, it can solve the technical problems of low development efficiency, high code error rate, and difficult resource reuse in front-end development, achieving the technical effects of improving development efficiency, reducing the code error rate, enhancing code reusability, and thus reducing development costs. Description of the Drawings

[0017] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following will briefly introduce the drawings required for use in the description of the specific embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0018] Figure 1 It is a flowchart of the front-end code generation method provided by the embodiment of the present application;

[0019] Figure 2 It is a flowchart of another front-end code generation method provided by the embodiment of the present application;

[0020] Figure 3 It is a structural block diagram of the front-end code generation device provided by the embodiment of the present application;

[0021] Figure 4 It is a schematic diagram of the hardware structure of the electronic device provided by the embodiment of the present application. Detailed Embodiments

[0022] The following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some embodiments of the present application, rather than all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the protection scope of the present application.

[0023] It should be noted that in the description of the present application, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements but also includes other elements not explicitly listed, or further includes elements inherent to such process, method, article or device. The terms "first", "second", etc. in the present application are used to distinguish similar objects and are not used to describe a specific order or sequence.

[0024] To enable those skilled in the art of the present technology to better understand the solution of this application, the following further detailed description of this application will be given in conjunction with the accompanying drawings and specific implementation manners.

[0025] Combined with the specific application environment architecture or specific hardware architecture on which the execution of the front-end code generation method depends, the specific application environment architecture or specific hardware architecture will be described herein.

[0026] With the continuous evolution of front-end technologies, new frameworks, libraries, and tools emerge in an endless stream, and the technical knowledge and skills that developers need to master are increasing day by day, which makes the learning cost and work difficulty of front-end development continuously increase. Against this background, there are still a large number of repetitive tasks in front-end development, such as form validation, page layout, etc. At the same time, in order to ensure the quality and maintainability of the code, developers must follow unified code specifications and standards. To solve these problems, the front-end code automatic generation method came into being. It encapsulates common code logics and functions into templates or components to achieve code reuse and ensure that the generated code meets the standards, thereby improving development efficiency and code quality.

[0027] Currently, the main technical means for front-end code automatic generation include template engines, artificial intelligence and machine learning algorithms, and low-code platforms. However, these methods still face some challenges, such as the relatively high coupling of the generated code, large consumption of computing resources, poor scalability, insufficient flexibility, and often manual adjustment or rewriting of interface files.

[0028] The embodiments of this application provide a front-end code generation method. Combining the execution process of the front-end code generation method, by obtaining the pre-configured data of the project and multiple front-end configuration resource pools, parsing the pre-configured data and determining the configuration data in each dimension, and then matching the target code in the resource pool, and finally merging and generating the final front-end code in a preset format, it effectively reduces the workload of manually writing and adjusting the code, improves the front-end development efficiency, and ensures the code quality.

[0029] In this embodiment, a front-end code generation method is provided, which can be used in computer devices, such as desktop computers, laptop computers, etc. Figure 1 is a flowchart of the front-end code generation method according to the embodiments of the present invention, as Figure 1 shown, and this process includes the following steps:

[0030] Step S101, obtain the pre-configured data of the project to be executed and the front-end configuration resource pools in multiple dimensions.

[0031] The item to be executed refers to a specific project that requires front-end code generation. For example, it can be a web application, the front-end part of a mobile application, etc. The pre-configured data is the relevant data pre-set for the item to be executed, and this data contains some basic information and configuration requirements for the project in front-end development. Specifically, for the pre-configured data of the item to be executed, if it is stored in a configuration file, such as in JSON, YAML, or XML format, the file reading function of the corresponding programming language can be used to obtain it. If the pre-configured data is stored in a database, a database connection tool can be used for querying. For example, the SQLAlchemy library of a computer programming tool can be used to connect to a MySQL database, write the corresponding SQL query statement, and convert the query result into a suitable data structure to obtain the pre-configured data. Or, it can also be obtained by interacting with the user, designing a command-line interface or a graphical user interface to allow the user to directly input the pre-configured data. Of course, other methods can also be used to obtain the pre-configured data of the item to be executed, and the specific method is not limited.

[0032] The front-end configuration resource pool with multiple dimensions is a collection that stores front-end code snippets or components, and these code snippets or components are classified and organized according to different dimensions. There is a series of code resources under each dimension to meet the needs of different projects. Specifically, for the front-end configuration resource pool with multiple dimensions, if it is stored in the local file system, the data of different dimensions can be stored in different subdirectories under a specific directory, and file system operation functions can be used for traversal and loading. For example, in a computer programming tool, the os module can be used to traverse the directory, read the file content under each subdirectory and store it in the corresponding data structure. If the front-end configuration resource pool is stored on a remote server, a network request library can be used to send requests to obtain it. Of course, other methods can also be used to obtain the front-end configuration resource pool with multiple dimensions, and the specific method is not limited.

[0033] Step S102, parse the attribute information of the pre-configured data to determine the dimension configuration data of the pre-configured data under each dimension.

[0034] Attribute information refers to various characteristics and descriptive information contained in the pre-configured data. Dimensional configuration data is the specific configuration content of the pre-configured data in each dimension determined based on the attribute information of the pre-configured data, which is the refinement and concretization of the pre-configured data in different dimensions. Specifically, the storage format and structure of the pre-configured data can be clarified first. If it is a common format such as JSON, YAML, or XML, the parsing library of the corresponding programming language can be used to convert it into a data structure that is easy to operate. Then, based on the characteristics of the data structure, the attributes related to different dimensions are identified. For example, for a front-end development project, there may be dimensions such as front-end framework, style resources, page templates, etc. For each dimension, the corresponding attribute information is extracted from the parsed data. For example, under the dimension of style resources, attributes such as fonts and icon sets are extracted, and the extracted and processed attribute information is organized into dimensional configuration data for each dimension.

[0035] Step S103: Match each dimensional configuration data with multiple front-end configuration resource pools in sequence, and determine the target code corresponding to the dimensional configuration data from the multiple front-end configuration resource pools.

[0036] The target code is a code snippet or component that is matched from multiple front-end configuration resource pools and corresponds to the dimensional configuration data. Specifically, by analyzing the specific attributes or requirements of the dimensional configuration data, the code snippets in the multiple front-end configuration resource pools that best match these attributes are searched. Each dimensional configuration data contains specific requirements. According to these requirements, the code in each front-end configuration resource pool is compared one by one to determine the code snippet that best meets the requirements.

[0037] Step S104: Merge the target codes corresponding to each dimensional configuration data according to a preset format to generate the target front-end code of the project to be executed.

[0038] The preset format refers to a rule or style followed when generating the final front-end code, which stipulates how the target codes corresponding to each dimensional configuration data should be combined and arranged to ensure that the generated code has a good structure and readability. The target front-end code is the final code generated by merging the target codes corresponding to each dimensional configuration data according to the preset format, and it is the front-end code required for the project to be executed. Specifically, the target code snippets matched from the front-end configuration resource pools are integrated according to certain rules (such as order, structure, or format requirements). During the merging process, the matched target codes are inserted or spliced according to the preset format in a predetermined order and structure to ensure that the generated final front-end code meets the project requirements and guarantees the consistency, maintainability, and executability of the code, thereby generating the complete front-end code of the project to be executed.

[0039] The front-end code generation method provided by the embodiment of the present invention can efficiently generate target front-end code by automatically parsing pre-configured data and intelligently matching it with front-end configuration resource pools in multiple dimensions. Through the combination of dimensional configuration and resource pools, the complexity of manual coding is reduced, and the development efficiency is improved. At the same time, by merging the generated code in a preset format, the unity and standardization of the code are ensured, which helps to improve the maintainability and scalability of the project.

[0040] In this embodiment, a front-end code generation method is provided, which can be used in computer devices such as desktop computers and laptop computers. Figure 2 It is a flowchart of the front-end code generation method according to the embodiment of the present invention, as Figure 2 shown. The process includes the following steps:

[0041] Step S201, obtain the pre-configured data of the project to be executed and front-end configuration resource pools in multiple dimensions. For details, please refer to Figure 1 step S101 of the embodiment shown, which will not be elaborated here.

[0042] Step S202, parse the attribute information of the pre-configured data to determine the dimensional configuration data of the pre-configured data in each dimension. For details, please refer to Figure 1 step S102 of the embodiment shown, which will not be elaborated here.

[0043] Step S203, sequentially match each dimensional configuration data with multiple front-end configuration resource pools to determine the target code corresponding to the dimensional configuration data from the multiple front-end configuration resource pools.

[0044] Specifically, the above step S203 includes:

[0045] Step S2031, for any dimensional configuration data, based on the dimensional attribute of the dimensional configuration data, determine the target front-end configuration resource pool associated with the dimensional configuration data from the multiple front-end configuration resource pools.

[0046] The target front-end configuration resource pool is a collection of resources selected from multiple front-end configuration resource pools and associated with specific dimension configuration data. Specifically, the dimension configuration data is deeply analyzed to accurately extract the representative and key dimension attributes. Dimension attributes are information describing the characteristics of the configuration data in a specific dimension. For example, in front-end development, if the dimension is "framework", the attributes can be "Vue.js" and "version 3.2"; if the dimension is "style", the attributes can be "Material Design style" and "blue theme", etc. Further, the front-end configuration resource pools are classified and managed according to different dimensions, such as the framework resource pool, the style resource pool, etc., to determine the classification methods and organizational structures of multiple front-end configuration resource pools. The extracted dimension attributes are matched with the classification identifiers of each front-end configuration resource pool. If the dimension attributes match the classification identifier of a certain resource pool, then this resource pool can be determined as the target front-end configuration resource pool.

[0047] Step S2032: Match the dimension configuration data with the target front-end development resource pool, and extract the target code corresponding to the dimension configuration data from the target front-end development resource pool according to the information matching result.

[0048] The information matching result is the conclusion obtained after comparing and analyzing the dimension configuration data with the target front-end development resource pool. Specifically, a suitable matching method is selected to match the dimension configuration data with the code in the resource pool, such as keyword matching, rule matching, and similarity matching, etc. Using the selected matching method, the dimension configuration data and the code in the target front-end development resource pool are compared one by one. If the resource pool code fully meets the requirements of the dimension configuration data, it is directly determined as the target code and extracted.

[0049] The front-end code generation method provided by the embodiments of the present invention can accurately select the most relevant target code from multiple resource pools by intelligently matching each dimension configuration data based on its dimension attributes. It not only improves the accuracy and efficiency of code generation, but also ensures the consistency between each dimension configuration data and the code in the resource pool, reduces manual intervention, and improves the degree of automation. At the same time, the information matching method also ensures that the generated target code can meet the specific requirements of the project and optimizes the development process.

[0050] In some alternative embodiments, the front-end configuration resource pool includes a framework resource pool, a style resource pool, an interaction resource pool, a template resource pool, and an application programming interface resource pool; the dimension configuration data includes technology stack identification data, style resource data, functional requirement data, and application programming interface metadata; the above step S2032 includes:

[0051] Step a1, based on the technology stack identification data, extract the target framework code corresponding to the technology stack identification data from the framework resource pool.

[0052] The technology stack identification data is information used to clarify the technology system and tool set adopted by the project to be executed. The framework resource pool is a collection storing various front-end framework codes, which can be classified and stored according to the framework name and version, for example. The target framework code is a set of codes that matches the technology stack identification data and can support the project to run according to the specified technology stack. Specifically, conduct a detailed analysis of the technology stack identification data to clarify the key framework information contained therein. Search for the target framework code in the framework resource pool that exactly matches the parsed key framework information.

[0053] In some alternative embodiments, the above step a1 includes:

[0054] Step a11, parse the technology stack identification data to determine the front-end framework type and framework version information corresponding to the technology stack identification data.

[0055] Parse the technology stack identification data to accurately extract the specific name of the front-end framework selected by the project to be executed (such as React, Vue, etc.) and the corresponding version number. For example, if the technology stack identification data is "React 17.0.2", it can be determined through parsing that the project uses the React framework and the version is 17.0.2.

[0056] Step a12, according to the front-end framework type and framework version information, extract the corresponding framework adapter from the framework resource pool.

[0057] After determining the front-end framework type and version information, find the matching framework adapter in the framework resource pool. The framework adapter is a middleware that can effectively adapt and interact the project with a specific framework, and it is responsible for handling tasks such as the initialization, configuration of the framework, and the connection with other modules. For example, for the React framework, its adapter includes codes such as references to the React core library and settings of the virtual DOM, ensuring that the project can run smoothly in the React environment. According to the parsed front-end framework type and framework version information, such as React 17.0.2, the corresponding React framework adapter can be accurately extracted from the framework resource pool.

[0058] Step a13, according to the framework adapter and the component information and component version information included in the technology stack identification data, extract the component data corresponding to the technology stack identification data from the pre-established component library.

[0059] In addition to the framework adapter, the items to be executed also require specific components to implement various functions. The technology stack identification data contains information about the required components and version information. The pre-established component library is a repository classified and stored according to different frameworks and component types. Specifically, according to the extracted framework adapter and the component information (such as component name, attributes, etc.) and version information in the technology stack identification, component data that is fully compatible with the current technology stack is filtered out from the component library. For example, if the technology stack identification specifies the "Button1.2.0" component, button component data applicable to the current framework (such as React) and with a version of 1.2.0 is searched for in the component library.

[0060] Step a14, generate target framework code based on the framework adapter and component data.

[0061] The framework adapter builds a basic framework running environment for the entire project, while the component data provides specific functional modules for the project. By organically integrating the two, the generated target framework code can meet the basic architecture requirements of the item to be executed under a specific technology stack. For example, combining the React framework adapter and the filtered button component data to generate target framework code that includes button functionality and can run in the React 17.0.2 environment.

[0062] In addition, in some alternative embodiments, the pre-configuration data also includes a predefined project tree structure. Combining the framework adapter, component data, and the project tree structure, basic code for the front-end application that meets the project requirements can be automatically generated. This includes initializing the file system layout of the project, installing necessary dependencies, and integrating selected components, thus laying a solid foundation for quickly building the application.

[0063] In the above alternative embodiments, by parsing the technology stack identification data, the corresponding front-end framework type, version, and related components can be accurately determined, ensuring that the target framework code extracted from the framework resource pool and component library fully meets the project requirements. Through this intelligent extraction process, not only is the accuracy of framework adaptation improved, but also different versions of frameworks and components can be flexibly adapted according to the component information and version information in the technology stack identification data, ensuring code compatibility and scalability, reducing manual intervention, enhancing automation, and significantly improving development efficiency and code quality.

[0064] Step a2, extract target style code corresponding to the style resource data from the style resource pool based on the style resource data.

[0065] The style resource data describes the requirement information of the project to be executed in terms of interface design and visual presentation. The style resource pool is a collection that stores various style resource codes. The target style code is a set of codes that matches the style resource data and can implement the interface style required by the project. Specifically, the style resource data is analyzed in detail to clarify the style requirement information contained therein. Code files or code snippets that match the requirements in the style resource data are screened out from the style resource pool.

[0066] In some alternative embodiments, step a2 includes:

[0067] Step a21, classify the style resource data to determine the style attributes included in the style resource data.

[0068] Analyze the style resource data, classify the style resource data according to functions and types, and clarify the specific UI framework type required for the project to be executed (such as the style characteristics of whether to use frameworks like Bootstrap, Vue, etc.), the selection of icon sets (such as Font Awesome or Material Icons), the specification of font libraries (such as specific fonts in Google Fonts), the unique styles of each component (such as the appearance details of buttons, forms, cards, etc.), and the exclusive styles of specific pages such as the login page (such as the position, size, background, etc. of the login box).

[0069] Step a22, extract the target style code corresponding to the style attributes from the style resource pool according to the style attributes.

[0070] Extract the target style code from the style resource pool according to the determined style attributes. Specifically, the style resource pool is carefully organized and managed, and it classifies, version-controls, and indexes various style resources. Once the style attributes are determined, the management mechanism of these resource pools can be used to find the corresponding codes. For example, if it is determined that a certain version of the Bootstrap framework needs to be used for layout, the corresponding Bootstrap-related CSS code can be found under the UI framework classification of the resource pool; if a specific icon style is required, the corresponding code is extracted from the icon set classification. During the extraction process, the integrity and compatibility of the codes should be ensured, and the associations and dependencies between different style resources should be considered. Finally, the extracted codes are combined to form the target style code that meets the project's style requirements, providing a unified and compliant visual presentation for the project.

[0071] In the above optional implementation, by classifying and parsing the style resource data, the target style code corresponding to the style attributes can be accurately extracted, which not only improves the matching efficiency of the style resources, but also ensures that the generated style code meets the project requirements and design specifications. At the same time, this method reduces the workload of manually writing style code through automatic extraction, ensures the consistency and standardization of the code, improves the development efficiency, and ensures the accuracy and maintainability of the front-end interface design.

[0072] Step a3: Based on the functional requirement data, extract the target template code corresponding to the functional requirement data from the template resource pool.

[0073] The functional requirement data describes the specific functions and business logics that the project to be executed needs to implement. The template resource pool is a collection of template codes for storing various functional modules, which can be classified and stored according to functional types and business scenarios, for example. The target template code is a collection of template codes that matches the functional requirement data and can implement specific functional modules. Specifically, analyze the functional requirement data to clarify the specific functional requirements of each functional module. Search for the target template code in the template resource pool that matches the functional module described in the functional requirement data.

[0074] In some optional implementations, the above step a3 includes:

[0075] Step a31: Decompose the functional requirement data to obtain the functional business attributes corresponding to the functional requirement data.

[0076] The functional requirement data describes various functional characteristics required by the project to be executed. For example, the functional requirement data indicates that "a page with product display, search function, and user login and registration functions is required", which involves multiple functional business attributes such as product list display, search, and registration and login functions. By carefully analyzing and decomposing these data, they are decomposed into independent and recognizable functional business attributes, providing a clear basis for subsequent operations.

[0077] Step a32: Based on the functional business attributes, determine the target template type corresponding to the functional requirement data.

[0078] The template resource pool contains various types of templates that are pre-designed and stored according to different functions and business scenarios. Specifically, the template resource pool can include functional templates (such as login pages, registration pages), specific business resource templates (business information unique to a project), and custom templates (automatically generating pages based on the information and layout to be displayed as required). For example, if the functional business attribute of "user registration and login" is determined, it can be mapped to the login page and registration page template types in the functional templates; if the functional business attribute of "product list display" is determined, it can be mapped to the specific business resource template type. By matching and associating the functional business attributes with the template types in the template resource pool, the appropriate target template type can be accurately found.

[0079] Step a33, according to the target template type, extract the target template code corresponding to the target template type from the template resource pool.

[0080] Once the target template type is determined, the mechanism of a preset function (such as the loadTemplate function) can be used to find the corresponding target template code in the template resource pool. For example, if the target template type is the login page template, then the HTML, CSS, and compiled code snippets of the login page can be extracted from the template resource pool, and these codes constitute the basic structure for implementing the login function.

[0081] In the above optional implementation, through the decomposition and analysis of the functional requirement data, the target template code that matches the business requirements can be accurately extracted. By determining the functional business attributes and precisely matching the template types in the template resource pool, it is ensured that the template code can accurately reflect the functional requirements of the project. This automated extraction process greatly improves the development efficiency, reduces the workload of manually writing template code, and at the same time enhances the consistency, maintainability, and compliance with business requirements of the template code, ensuring the efficiency and standardization of project development.

[0082] Step a4, based on the target template code, extract the target interaction code corresponding to the target template code from the interaction resource pool.

[0083] The interaction resource pool is a collection that centrally stores various user interaction behavior code modules in a front-end project. The target interaction code is a code module that matches the target template code and can provide the required interaction functions for the target template. Specifically, the target template code is analyzed in detail to clarify the interaction requirement information contained therein. According to the determined interaction requirements, search for the matching code module in the interaction resource pool.

[0084] In some optional implementations, the above step a4 includes:

[0085] Step a41: Analyze the target template code to determine the interaction attributes corresponding to the target template code.

[0086] The target template code defines the basic structure and layout of the page. By analyzing the target template code, the parts that require user interaction can be identified. For example, if there is a button element in the target template code, the corresponding interaction attribute is the click event; if there is a form element, its interaction attributes may include form validation, etc. Through this kind of analysis, interaction requirements such as button clicks, text box input validation, and page scroll loading can be sorted out, and the interaction attributes closely related to the target template code can be determined.

[0087] Step a42: Extract the encapsulated code blocks corresponding to the interaction attributes from the interaction resource pool according to the interaction attributes.

[0088] The interaction resource pool is classified and encapsulated according to different interaction behaviors, covering various types such as basic event handling, form validation, and advanced interactions. The interaction resource pool provides a unified call interface for each project, enabling it to conveniently call the operations of the corresponding modules in the interaction resource pool. Specifically, when the interaction attributes are clear, the corresponding modules can be quickly located in the interaction resource pool. For example, if the interaction attribute is a click event, the encapsulated code blocks containing the click event handling logic can be found. These code blocks contain pre-written functions for handling click operations, variable definitions, etc. They are the basic units for implementing interaction functions, improving the code reusability and development efficiency.

[0089] Step a43: Extract the target interaction code corresponding to the interaction attributes from the encapsulated code blocks.

[0090] According to the specific requirements of the interaction attributes, extract the corresponding part of the interaction logic code from the encapsulated code blocks to ensure that the extracted code can implement the functions matching the interaction attributes.

[0091] In the above optional implementation manners, through the analysis of the target template code, the interaction attributes related to the template can be accurately identified, and the corresponding interaction code can be extracted from the interaction resource pool. This method ensures a high degree of fit between the interaction code and the target template through automated analysis and matching, improving the efficiency of front-end development and the consistency of the interaction experience. At the same time, by extracting the encapsulated code blocks and generating the target interaction code according to the interaction attributes, not only the code reusability and modularity are improved, but also the complexity of manual writing is reduced, ensuring the standardization and maintainability of the interaction functions.

[0092] Step a5: Extract the target interface code corresponding to the application programming interface metadata from the application programming interface resource pool based on the application programming interface metadata.

[0093] Application Programming Interface (API) metadata is a collection of information that describes the key features and usage rules of an API. The API resource pool is a place for centralized storage and management of API-related code and resources. The target interface code is the code that can interact with a specific API, extracted from the API resource pool based on the API metadata. Specifically, by deeply analyzing the API metadata, extracting the key interface information from it, and based on the parsed key interface information, searching for the matching target interface code in the API resource pool.

[0094] In some alternative embodiments, step a5 includes:

[0095] Step a51, parse the API metadata to determine the interface parameter information corresponding to the used API metadata.

[0096] API metadata carries the key information of the backend interface, including the interface name, method type, request parameters, and response format, etc. Specifically, by parsing this metadata, it is possible to determine details such as the specific way of interface call (GET, POST, etc.), the details of the parameters to be passed to the backend (parameter name, data type, whether it is required, etc.), and the expected response data structure. For example, if the API metadata indicates that the interface name is "getUserInfo", the method type is "GET", the request parameters include "userID" (integer type), and the response format is JSON, then the key interface parameter information for this interface call is determined, providing a basis for subsequent extraction of the target interface code.

[0097] Step a52, extract the target interface code corresponding to the interface parameter information from the API resource pool according to the interface parameter information.

[0098] The API resource pool is organized and stored according to different interface types and parameter requirements. Specifically, when the interface parameter information is clear, it is possible to find the corresponding code template or module in the API resource pool. For example, for the above "getUserInfo" interface, there will be a corresponding GET request template in the API resource pool, which contains code logics such as constructing the request URL, setting the request headers, and processing the response data. According to the interface parameter information, customize and extract this template, such as correctly embedding the "userID" parameter into the request URL, and finally obtain the target interface code that can accurately call the backend interface and process the response, realizing the data interaction function between the front end and the backend.

[0099] Among them, the target code includes target framework code, target style code, target template code, target interaction code, and target interface code.

[0100] In the above optional implementation, by parsing the application programming interface metadata, the target interface code that matches it can be accurately extracted. By automatically parsing the interface parameter information and extracting the corresponding interface code from the API resource pool according to these parameters, not only the development efficiency is improved, the error risk of manually writing code is reduced, but also the accuracy and consistency of the interface are ensured. Therefore, this method can improve the code reusability and modularity, simplify the integration process with external systems or services, and ensure the maintainability and extensibility of the interface.

[0101] Step S204: Merge the target codes corresponding to the configuration data of each dimension according to a preset format to generate the target front-end code of the project to be executed.

[0102] The target codes corresponding to the configuration data of each dimension have been respectively extracted and generated from different resource pools in the above steps. These target codes cover multiple dimensions such as the framework level, style level, functional template level, interaction behavior level, and interface access level. The preset format is determined based on the overall architecture design and requirements of the project to be executed, and it stipulates the combination method and order of different types of target codes in the final project. For example, it is required to first introduce the framework code as the basis, then add the style code on this basis to achieve the visual effect, then embed the template code into it to build the page structure, then add dynamic behavior to the page through the interaction code, and finally use the interface code to implement data communication with the backend. By following such a preset format, the scattered target codes are integrated into an organic whole to generate the complete target front-end code of the project to be executed that can meet the project requirements, ensuring that the project can operate normally in terms of function, vision, and interaction, and has good maintainability and extensibility.

[0103] In some optional implementation manners, the pre-configured data further includes a predefined project tree structure, and the target front-end code is generated according to the project tree structure by integrating the target codes to be loaded from each resource pool.

[0104] The front-end code generation method provided by the embodiments of the present invention can accurately match configuration data in different dimensions by subdividing the front-end configuration resource pool into multiple specific resource pools, ensuring that the target code extracted from multiple resource pools better meets the project requirements. By performing one-by-one matching based on dimension data such as technology stack, style, functional requirements, interaction, and application programming interface, comprehensive and high-quality target code can be generated, including framework code, style code, template code, interaction code, and interface code, ensuring the comprehensiveness, accuracy, and consistency of the code, greatly improving the development efficiency, reducing the complexity of manual coding, and at the same time ensuring the standardization and maintainability of the code.

[0105] In addition, intelligent optimization matching rules can be introduced to further improve the quality and efficiency of code generation. Specifically, a large amount of high-quality historical data is collected, including historical pre-configuration data, dimension configuration data, and the finally generated target code. Historical pre-configuration data is various information input at the start of the project, covering basic functional requirements of the project, technology stack preferences, design style requirements, etc. After the data is prepared, a suitable machine learning algorithm is selected to train the model to learn the best matching pattern between different dimension configuration data and the front-end configuration resource pool. For example, supervised learning algorithms such as decision tree, random forest, and support vector machine are selected. The decision tree algorithm divides the data to form a decision tree structure, and quickly determines the most likely matching resource pool and code based on different dimension attributes. For example, according to the framework name and version in the technology stack identification data, branch judgments are made in the decision tree to find the corresponding framework resource pool and code. The random forest is an ensemble model composed of multiple decision trees, which improves the accuracy and stability of prediction by integrating the results of multiple decision trees. The support vector machine distinguishes different categories of data by finding the optimal hyperplane, thereby realizing the prediction of the target code. Deep learning algorithms such as the multi-layer perceptron (MLP) can also be used to process complex data patterns. The MLP has multiple hidden layers and can automatically learn complex features and patterns in the data. During the training process, the preprocessed data set is divided into a training set and a test set. Usually, the training set accounts for 70%-80%, and the test set accounts for 20%-30%. The training set is used to train the model, and the model will continuously adjust its own parameters to minimize the error between the prediction result and the actual result. After training, the test set is used to evaluate the model. Common evaluation metrics include accuracy, recall rate, F1 value, etc. If the performance of the model is not ideal, it can be optimized by adjusting the model parameters, increasing the training data, selecting a more suitable algorithm, etc.

[0106] For the code in the front - end configuration resource pool, deep - learning algorithms are used for classification and clustering to discover potential associations and patterns among the codes. Code feature extraction is a key step, including syntactic features and semantic features. Syntactic features analyze the syntactic structure of the code and extract information such as keywords, statement types, function calls, etc. Convolutional neural networks (CNNs) can be used for code classification. The code is represented as a two - dimensional matrix (such as the character matrix of the code) and input into the CNN model. The CNN automatically extracts local features of the code through convolutional layers and pooling layers and combines them into a more advanced feature representation to achieve code classification, such as classifying the code into framework code, style code, template code, etc. Autoencoders are unsupervised learning models that can be used for code clustering. The code is input into the autoencoder, and the model attempts to reconstruct the input code while extracting the latent features of the code in the intermediate layer. By performing clustering analysis on these latent features (such as using the K - Means algorithm), similar codes are grouped into one category to discover potential associations and patterns among the codes.

[0107] When new pre - configured data is input, after pre - processing, it is input into the trained machine - learning model. The model will predict the most likely matching front - end configuration resource pool and target code according to the learned matching patterns. For example, according to the new technology stack identification data, the most suitable framework code and adapter are recommended from the framework resource pool; according to the style resource data, the most matching style code is filtered out from the style resource pool.

[0108] The front - end code generation method provided by the embodiments of the present invention can significantly improve the accuracy and efficiency of front - end code generation by intelligently optimizing the matching rules and using machine - learning and deep - learning algorithms to analyze and process historical data. At the same time, considering the potential correlation of the code, it provides a more comprehensive matching result, bringing higher quality and better user experience to front - end development.

[0109] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by means of software plus a necessary general - purpose hardware platform. Of course, it can also be implemented by hardware, but in many cases, the former is a better implementation method.

[0110] An embodiment of the present application also provides a front - end code generation device, as Figure 3 shown, including:

[0111] An acquisition module 301, configured to acquire pre - configured data of a project to be executed and front - end configuration resource pools in multiple dimensions;

[0112] A determination module 302, configured to parse the attribute information of the pre - configured data and determine the dimension configuration data of the pre - configured data in each dimension;

[0113] A matching module 303, configured to sequentially match each dimension configuration data with multiple front-end configuration resource pools, and determine a target code corresponding to the dimension configuration data from the multiple front-end configuration resource pools;

[0114] A generating module 304, configured to merge the target codes corresponding to each dimension configuration data according to a preset format, and generate a target front-end code of a to-be-executed project.

[0115] In some alternative embodiments, the matching module 303 includes:

[0116] A determining sub-module, configured to, for any dimension configuration data, determine a target front-end configuration resource pool associated with the dimension configuration data from the multiple front-end configuration resource pools based on the dimension attribute of the dimension configuration data;

[0117] A matching sub-module, configured to perform information matching between the dimension configuration data and the target front-end development resource pool, and extract a target code corresponding to the dimension configuration data from the target front-end development resource pool according to the information matching result.

[0118] In some alternative embodiments, the matching sub-module includes:

[0119] A first extraction unit, configured to extract a target framework code corresponding to the technology stack identification data from a framework resource pool based on the technology stack identification data;

[0120] A second extraction unit, configured to extract a target style code corresponding to the style resource data from a style resource pool based on the style resource data;

[0121] A third extraction unit, configured to extract a target template code corresponding to the functional requirement data from a template resource pool based on the functional requirement data;

[0122] A fourth extraction unit, configured to extract a target interaction code corresponding to the target template code from an interaction resource pool based on the target template code;

[0123] A fifth extraction unit, configured to extract a target interface code corresponding to the application programming interface metadata from an application programming interface resource pool based on the application programming interface metadata; the target code includes the target framework code, the target style code, the target template code, the target interaction code, and the target interface code.

[0124] In some alternative embodiments, the first extraction unit includes:

[0125] A first determination unit, configured to parse the technology stack identification data, and determine a front-end framework type and framework version information corresponding to the technology stack identification data;

[0126] A framework extraction unit, configured to extract a corresponding framework adapter from a framework resource pool according to the front-end framework type and framework version information;

[0127] A component extraction unit, configured to extract component data corresponding to the technology stack identification data from a pre-established component library according to the component information and component version information included in the framework adapter and the technology stack identification data;

[0128] A generation unit, configured to generate target framework code based on the framework adapter and the component data.

[0129] In some alternative embodiments, the second extraction unit includes:

[0130] A second determination unit, configured to classify the style resource data and determine the style attributes included in the style resource data;

[0131] A style extraction unit, configured to extract target style code corresponding to the style attributes from a style resource pool according to the style attributes.

[0132] In some alternative embodiments, the third extraction unit includes:

[0133] A disassembling unit, configured to disassemble the functional requirement data to obtain functional business attributes corresponding to the functional requirement data;

[0134] A third determination unit, configured to determine a target template type corresponding to the functional requirement data based on the functional business attributes;

[0135] A template extraction unit, configured to extract target template code corresponding to the target template type from a template resource pool according to the target template type.

[0136] In some alternative embodiments, the fourth extraction unit includes:

[0137] A fourth determination unit, configured to analyze the target template code and determine interaction attributes corresponding to the target template code;

[0138] An encapsulation code block extraction unit, configured to extract an encapsulation code block corresponding to the interaction attributes from an interaction resource pool according to the interaction attributes;

[0139] An interaction code extraction unit, configured to extract target interaction code corresponding to the interaction attributes from the encapsulation code block.

[0140] In some alternative embodiments, the fifth extraction unit includes:

[0141] A fifth determination unit, configured to parse application programming interface metadata and determine interface parameter information corresponding to the used application programming interface metadata;

[0142] An interface code extraction unit, configured to extract a target interface code corresponding to the interface parameter information from an application programming interface resource pool according to the interface parameter information.

[0143] For the description of the features in the embodiments corresponding to the front-end code generation device, reference may be made to the relevant descriptions of the embodiments corresponding to the front-end code generation method, which will not be elaborated here one by one.

[0144] The front-end code generation device in this embodiment is presented in the form of functional units. Here, the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and a memory that execute one or more software or fixed programs, and / or other devices that can provide the above functions.

[0145] The front-end code generation device provided by the embodiments of the present invention can efficiently generate target front-end code by automatically parsing pre-configured data and performing intelligent matching in combination with a front-end configuration resource pool in multiple dimensions. Through the combination of dimensional configuration and resource pool, the complexity of manual coding is reduced and the development efficiency is improved. At the same time, by merging the generated code in a preset format, the unity and standardization of the code are ensured, which helps to improve the maintainability and scalability of the project.

[0146] The embodiments of the present application further provide an electronic device, as Figure 4 shown, including a processor 10 and a memory 20. A computer program is stored in the memory 20, and the processor 10 is configured to run the computer program to execute the steps in any of the above embodiments of the front-end code generation method.

[0147] The embodiments of the present application further provide a computer-readable storage medium, in which a computer program is stored. The computer program is configured to execute the steps in any of the above embodiments of the front-end code generation method when running.

[0148] In an exemplary embodiment, the above computer-readable storage medium may include, but is not limited to: USB flash drives, read-only memories (ROM), random access memories (RAM), mobile hard disks, magnetic disks, or optical discs and other media that can store computer programs.

[0149] The embodiments of the present application further provide a computer program product. The above computer program product includes a computer program, and when the computer program is executed by a processor, it implements the steps in any of the above embodiments of the front-end code generation method.

[0150] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium storing a computer program, and when the computer program is executed by a processor, the steps in any of the above-described front-end code generation method embodiments are implemented.

[0151] Those skilled in the art can further realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. To clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described according to functions in the above description. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present application.

[0152] The above has introduced in detail a front-end code generation method, apparatus, and storage medium provided by the present application. Specific examples are used herein to elaborate on the principle and implementation manner of the present application. The description of the above embodiments is only used to help understand the method and its core idea of the present application. It should be noted that for those of ordinary skill in the art in the technical field, without departing from the principle of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the protection scope of the claims of the present application.

Claims

1. A front-end code generation method, characterized in that: include: Obtain pre-configured data for the project to be executed and front-end configuration resource pools in multiple dimensions; Parsing the attribute information of the pre-configuration data to determine the dimension configuration data of the pre-configuration data in each dimension; Matching each of the dimension configuration data with the plurality of the front-end configuration resource pools in sequence, and determining a target code corresponding to the dimension configuration data from the plurality of the front-end configuration resource pools; The target codes corresponding to the dimensional configuration data are merged according to a preset format to generate the target front-end code of the project to be executed.

2. The front-end code generation method according to claim 1, characterized in that: The step of sequentially matching each of the dimension configuration data with the plurality of front-end configuration resource pools, and determining a target code corresponding to the dimension configuration data from the plurality of front-end configuration resource pools, comprises: For any one of the dimension configuration data, based on the dimension attribute of the dimension configuration data, determining a target front-end configuration resource pool associated with the dimension configuration data from the plurality of front-end configuration resource pools; The dimension configuration data is matched with the target front-end development resource pool, and according to the information matching result, the target code corresponding to the dimension configuration data is extracted from the target front-end development resource pool.

3. The front-end code generation method according to claim 2, characterized in that: The front-end configuration resource pool includes a framework resource pool, a style resource pool, an interaction resource pool, a template resource pool, and an application programming interface resource pool; the dimension configuration data includes technology stack identification data, style resource data, functional requirement data, and application programming interface metadata; the dimension configuration data is matched with the target front-end development resource pool, and according to the information matching result, the target code corresponding to the dimension configuration data is extracted from the target front-end development resource pool, including: Based on the technology stack identification data, extracting a target framework code corresponding to the technology stack identification data from the framework resource pool; Based on the style resource data, extracting a target style code corresponding to the style resource data from the style resource pool; Based on the functional requirement data, extracting a target template code corresponding to the functional requirement data from the template resource pool; Based on the target template code, extracting a target interaction code corresponding to the target template code from the interaction resource pool; Based on the application programming interface metadata, extracting a target interface code corresponding to the application programming interface metadata from the application programming interface resource pool; The target code includes the target framework code, the target style code, the target template code, the target interaction code and the target interface code.

4. The front-end code generation method according to claim 3, characterized in that: The step of extracting a target framework code corresponding to the technology stack identification data from the framework resource pool based on the technology stack identification data includes: Parsing the technology stack identification data to determine the front-end framework type and framework version information corresponding to the technology stack identification data; According to the front-end framework type and framework version information, extract the corresponding framework adapter from the framework resource pool; According to the framework adapter and the component information and component version information included in the technology stack identification data, extracting component data corresponding to the technology stack identification data from a pre-established component library; The target framework code is generated based on the framework adapter and the component data.

5. The front-end code generation method according to claim 3, characterized in that: The step of extracting a target style code corresponding to the style resource data from the style resource pool based on the style resource data includes: Classifying the style resource data and determining style attributes included in the style resource data; According to the style attribute, the target style code corresponding to the style attribute is extracted from the style resource pool.

6. The front-end code generation method according to claim 3, characterized in that: The step of extracting a target template code corresponding to the functional requirement data from the template resource pool based on the functional requirement data includes: Decomposing the functional requirement data to obtain functional business attributes corresponding to the functional requirement data; Based on the functional business attributes, determining a target template type corresponding to the functional requirement data; According to the target template type, the target template code corresponding to the target template type is extracted from the template resource pool.

7. The front-end code generation method according to claim 3 or 6, characterized in that: The step of extracting a target interaction code corresponding to the target template code from the interaction resource pool based on the target template code includes: Analyzing the target template code to determine an interactive attribute corresponding to the target template code; According to the interaction attribute, extracting a packaged code block corresponding to the interaction attribute from the interaction resource pool; The target interaction code corresponding to the interaction attribute is extracted from the encapsulation code block.

8. The front-end code generation method according to claim 3, characterized in that: The step of extracting a target interface code corresponding to the application programming interface metadata from the application programming interface resource pool based on the application programming interface metadata comprises: Parsing the application programming interface metadata to determine interface parameter information corresponding to the application programming interface metadata used; According to the interface parameter information, the target interface code corresponding to the interface parameter information is extracted from the application programming interface resource pool.

9. A front-end code generation device, characterized in that: include: The acquisition module is used to obtain the pre-configured data of the project to be executed and the front-end configuration resource pool of multiple dimensions; A determination module, configured to parse the attribute information of the pre-configuration data and determine the dimension configuration data of the pre-configuration data in each dimension; A matching module, used to sequentially match each dimension configuration data with the plurality of front-end configuration resource pools, and determine a target code corresponding to the dimension configuration data from the plurality of front-end configuration resource pools; A generation module is used to merge the target codes corresponding to the various dimension configuration data according to a preset format to generate the target front-end code of the project to be executed.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program, when executed by a processor, implements the steps of the front-end code generation method according to any one of claims 1 to 8.

Images