A code generation method, apparatus, device, and medium

Abstract

The present application relates to the technical field of computers, and in particular to a code generation method and device, equipment and medium. It can be applied to the medical scene of health management and the financial scene of electronic transaction, detects whether the current running environment meets the code generation preset condition, if not, automatically repairs the current running environment, so that the repaired running environment meets the code generation preset condition, through the way of automatically detecting and repairing the running environment, without manual troubleshooting of the environment dependency, version conflict and other problems by the developer, the running environment meeting the code generation requirement can be quickly obtained, the preparation time of the front-end code generation is reduced, the code generation failure caused by the environment incompatibility is avoided, and the development efficiency is effectively improved. At the same time, optimization processing is added to the generated basic front-end code, the code structure is further standardized, the maintainability and running performance of the finally generated code are improved, and thus the generation quality of the code is improved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a code generation method, apparatus, device, and medium. Background Technology

[0002] In financial and healthcare settings, with the rapid iteration of front-end engineering technologies, interface development is trending towards standardization, automation, and intelligence. Traditional manual coding methods are no longer sufficient to meet the ever-increasing business demands and the fast-paced market. Design-to-code tools, as a core technology in the field of intelligent front-end development, can automate the conversion of interface designs into front-end code. However, existing design-to-code tools typically operate in a black-box execution mode during code generation, resulting in low-quality generated code. Therefore, improving code quality during the code generation process is a pressing issue that needs to be addressed. Summary of the Invention

[0003] This invention provides a code generation method, apparatus, device, and medium to solve the problem of low code quality during the code generation process.

[0004] Firstly, a code generation method is provided, the code generation method comprising: Obtain the design resources corresponding to the page to be developed, wherein the design resources include at least the page description file of the page to be developed; The current running environment is obtained, and it is checked whether the current running environment meets the preset conditions for code generation. If the current running environment does not meet the preset conditions for code generation, the current running environment is automatically repaired so that the repaired running environment meets the preset conditions for code generation. Based on the repaired operating environment, the basic front-end code corresponding to the page to be developed is generated according to the page description file; The basic front-end code is optimized to obtain the optimized front-end code.

[0005] Secondly, a code generation apparatus is provided, the code generation apparatus comprising: The acquisition module is used to acquire the design resources corresponding to the page to be developed, wherein the design resources include at least the page description file of the page to be developed; The repair module is used to obtain the current running environment, detect whether the current running environment meets the preset conditions for code generation, and if the current running environment does not meet the preset conditions for code generation, automatically repair the current running environment so that the repaired running environment meets the preset conditions for code generation. The generation module is used to generate the basic front-end code corresponding to the page to be developed based on the page description file, according to the repaired runtime environment. The optimization module is used to optimize the basic front-end code to obtain optimized front-end code.

[0006] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described code generation method.

[0007] Fourthly, a computer-readable storage medium is provided, which stores a computer program that, when executed by a processor, implements the steps of the above-described code generation method.

[0008] In this application, the system detects whether the current runtime environment meets the preset conditions for code generation. If the current runtime environment does not meet the preset conditions, it automatically repairs the current runtime environment to ensure that the repaired runtime environment meets the preset conditions for code generation. By automatically detecting and repairing the runtime environment, developers do not need to manually check for environment dependencies, version conflicts, and other issues. This allows for the rapid acquisition of a runtime environment that meets the code generation requirements, reducing the preparation time for front-end code generation and avoiding code generation failures due to environment incompatibility, thus effectively improving development efficiency. Furthermore, an optimization process is added to the generated basic front-end code, which further standardizes the code structure, simplifies redundant code, and improves the maintainability and performance of the final generated code, thereby improving the quality of the generated code. Attached Figure Description

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

[0010] Figure 1 This is a schematic diagram of an application environment for a code generation method according to an embodiment of the present invention; Figure 2 This is a flowchart illustrating a code generation method provided in an embodiment of the present invention; Figure 3 yes Figure 2 A flowchart illustrating a specific implementation of step S22; Figure 4 yes Figure 2 Another flowchart illustrating a specific implementation of step S22; Figure 5 yes Figure 2 A flowchart illustrating a specific implementation of step S23; Figure 6 yes Figure 5 A schematic diagram of a specific implementation method for step S52; Figure 7 yes Figure 2 A flowchart illustrating a specific implementation method following step S24; Figure 8 yes Figure 2 Another flowchart of a specific implementation method following step S24; Figure 9 This is a schematic diagram of the structure of a code generation device in one embodiment of the present invention; Figure 10 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention. Detailed Implementation

[0011] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0012] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or collections thereof.

[0013] It should also be understood that the term “and / or” as used in this specification and the appended claims refers to any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0014] As used in this specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if [described condition or event] is detected" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once [described condition or event] is detected," or "in response to detection of [described condition or event]."

[0015] Furthermore, in the description of this invention and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0016] In this specification, the terms "one embodiment" or "some embodiments," etc., mean that one or more embodiments of the invention include the specific features, structures, or characteristics described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0017] It should be understood that the sequence number of each step in the following embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0018] To illustrate the technical solution of the present invention, specific embodiments are described below.

[0019] The code generation method provided in one embodiment of the present invention can be applied to, for example... Figure 1 In this application environment, the client communicates with the server via a network. The user inputs the design resources corresponding to the page to be developed on the client. The server retrieves these design resources, which include at least the page description file for the page to be developed. It then retrieves the current runtime environment and checks whether it meets the preset conditions for code generation. If the current runtime environment does not meet the preset conditions, it automatically repairs the environment to ensure it does. Based on the repaired runtime environment, it generates the basic front-end code corresponding to the page to be developed according to the page description file. Finally, it optimizes the basic front-end code to obtain the optimized front-end code. The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a standalone server or a server cluster consisting of multiple servers. The invention will be described in detail below through specific embodiments.

[0020] Please see Figure 2 , Figure 2 This is a flowchart illustrating a code generation method provided in an embodiment of the present invention, which includes the following steps.

[0021] S21: Obtain the design resources corresponding to the page to be developed. The design resources shall include at least the page description file of the page to be developed.

[0022] In step S21, design resources refer to the set of original design data uploaded by the user through the client, used to drive the automatic generation of front-end code. The page description file of the converted page is transformed into a structured and standardized data format, which records the overall information of the page, hierarchical nesting relationships, visual element types, coordinate dimensions, style attributes, and reusable component information, etc. This page description file can adopt JSON, XML, or other structured data formats.

[0023] In this embodiment, the user uploads the design resources corresponding to the page to be developed through the client's front-end interactive interface. The design resources include at least the page description file of the page to be developed. The page description file includes structured data such as overall page information, hierarchical nesting relationships, visual element types, coordinate dimensions, style attributes, and reusable component information.

[0024] The page description file for the page to be developed can be a page description file for different industry scenarios, such as the business interface of medical and health management, or the interface of financial electronic transactions. For example, in the health management scenario, a patient information registration page needs to be developed, and the corresponding page description file is the page description file for the patient information registration page. The overall page information includes basic configuration information such as page width, background color, and global font; the hierarchical nesting relationship describes the parent-child containment relationship and layout structure of various UI components on the page, such as the patient information form located in the main area of ​​the page, with nested child elements such as name input boxes, gender radio buttons, and birth date selectors; the visual element type identifies the component category of each UI (User Interface) node, such as text labels, input boxes, drop-down selectors, and submit buttons; the coordinate dimensions record the absolute or relative position of each element on the page and its width and height attributes; the style attributes cover visual performance parameters such as font size, color, rounded corners, shadows, and margins; the reusable component information marks the modular components that appear repeatedly on the page, such as patient list cards and medical record summary panels, facilitating component abstraction and reuse during subsequent code generation.

[0025] In electronic trading scenarios, users need to develop a trading order page, and the corresponding page description file is the page description file for the trading order page. The overall page information includes basic configuration information such as page width, theme color, and global font; the hierarchical nesting relationship describes the parent-child containment relationship and layout structure of various UI components on the trading order page, such as the trading panel located in the main area of ​​the page, which contains child elements such as stock code input boxes, order price input boxes, order quantity input boxes, and buy / sell buttons; the visual element type identifies the component category of each UI node, such as stock code input boxes, order price input boxes, order quantity input boxes, buy buttons, and sell buttons; the coordinate dimensions record the absolute or relative position of each element on the page and its width and height attributes; style attributes cover visual performance parameters such as font size, color, border, shadow, and margin; reusable component information marks modular components that appear repeatedly on the page, such as the transaction confirmation pop-up, facilitating component abstraction and reuse during subsequent code generation.

[0026] In this embodiment, after obtaining the design resources corresponding to the page to be developed, the completeness, validity, and rationality of the page description file can be verified to determine these aspects. When verifying the completeness of the page description file, the system checks whether the format is compliant, whether the file is complete, and whether there are any corrupted or empty files. When verifying the validity of the page description file, the system verifies whether the values ​​of each field conform to preset type constraints and business rules. When verifying the rationality of the page description file, the system checks whether the nesting hierarchy of each UI component is logically sound, whether there is any overlap or overflow in coordinate dimensions, and whether the visual element types match the business semantics.

[0027] In this embodiment, user-uploaded design resources are obtained to reconstruct the design details of the page to be developed based on standardized structured information, providing a unified and accurate data input source for subsequent automated code generation.

[0028] S22: Obtain the current runtime environment and check whether the current runtime environment meets the preset conditions for code generation. If the current runtime environment does not meet the preset conditions for code generation, automatically repair the current runtime environment so that the repaired runtime environment meets the preset conditions for code generation.

[0029] In step S22, the current runtime environment is the system environment upon which the code generation tool depends. The preset conditions for code generation are that the runtime environment is compatible with the environment version of the code generation tool, and all dependent packages are in a state of normal invocation. Repairing the current runtime environment involves targeted handling of detected non-compliance issues.

[0030] In this embodiment, the current runtime environment is obtained, and it is checked whether the current runtime environment meets the preset conditions for code generation. These preset conditions are those used when generating code based on the D2C (Design to Code) tool. To check whether the current runtime environment meets these conditions, a comprehensive overall detection method can be used. For example, a preset code generation test script can be executed directly in the current runtime environment. If the test script runs normally and outputs valid test code, the current runtime environment is determined to meet the preset conditions for code generation. If the test script encounters errors, interrupts, or outputs abnormal results, the environment is directly determined not to meet the conditions. The code generation test script is a pre-configured minimum verification scenario for the entire code generation tool process, covering three core verification stages: dependency version checking, core component invocation, and output file generation. This allows for a one-time confirmation of environment compatibility and availability. Compared to checking dependencies one by one, this method is more efficient and avoids the problem of single dependency checks being successful but combined invocation errors, thus meeting the needs of automated environment verification.

[0031] If the current runtime environment does not meet the preset conditions for code generation, it will be automatically repaired to ensure that the repaired runtime environment meets the preset conditions. The repair process can use a pre-stored backup runtime environment, loading standard version parameters and dependency configurations adapted for code generation. In other words, it switches the current runtime environment to a pre-verified stable state through snapshot rollback or containerized image replacement.

[0032] In this embodiment, by configuring automated detection and one-click repair of the environment, abnormal environmental issues during the code generation process can be identified in advance, avoiding interruptions in the generation task due to dependency incompatibility, missing components, or other issues. This significantly improves the startup efficiency of the code generation task, while ensuring the stability of the code generation process and reducing the interference of environmental factors on the final code generation result.

[0033] Among them, such as Figure 3 As shown, step S22, which involves detecting whether the current runtime environment meets the preset conditions for code generation, includes: S31: Obtain the current environment version number and current dependency package list of the current running environment, as well as the preset environment version number and preset dependency package list that meet the preset conditions for code generation; S32: Detect whether the current environment version number is consistent with the preset environment version number, and whether the current dependency package list is consistent with the preset dependency package list, and obtain the detection results; S33: If the detection results include that the current environment version number is inconsistent with the preset environment version number or that the current dependency package list is inconsistent with the preset dependency package list, then it is determined that the current running environment does not meet the preset conditions for code generation.

[0034] In this embodiment, before executing the code generation task, a precise matching detection is performed on the current runtime environment, specifically including dual detection dimensions: environment version verification and dependency package list verification. The system automatically reads the actual configuration information of the current server-side runtime environment to obtain the current environment version number, i.e., the Node runtime version number. Simultaneously, it traverses the local project dependency directory to obtain the current dependency package list for the current runtime environment. This list contains complete dependency information such as the package names, specific version numbers, and installation status of various parsing plugins, style conversion tools, and code compilation dependencies. A preset environment version number and a preset dependency package list that meet the preset conditions for code generation are obtained. The system checks whether the current environment version number and the preset environment version number are consistent, and whether the current dependency package list is consistent with the preset dependency package list, to obtain the detection results. If the detection results show that the current environment version number and the preset environment version number are inconsistent, or that the current dependency package list is inconsistent with the preset dependency package list, then it is determined that the current runtime environment does not meet the preset conditions for code generation. For example, if a difference is detected between the current environment version number and the preset environment version number, including cases where the version is too low, too high, or incompatible, or if the current dependency package list contains inconsistencies such as missing dependencies, mismatched dependency versions, redundant or abnormal dependencies, or corrupted dependencies, then the current runtime environment is immediately determined to not meet the preset code generation conditions, indicating an environment adaptation anomaly that cannot support subsequent standardized and high-precision code generation. The current runtime environment is only considered to meet the preset code generation conditions if the environment version number perfectly matches the preset environment version number and all current dependency package lists are completely identical to the preset dependency package lists.

[0035] In this embodiment, through precise bidirectional verification of version and dependency list, the reasons for environment non-compliance can be accurately located, effectively avoiding problems such as code conversion failure, code errors, and style restoration deviation caused by environment version incompatibility and dependency configuration disorder, thus ensuring the stability and accuracy of the D2C code generation process.

[0036] Among them, such as Figure 4 As shown, in step S22, if the current runtime environment does not meet the preset conditions for code generation, the current runtime environment is automatically repaired, including: S41: Determine the detection results when the current runtime environment does not meet the preset conditions for code generation. The detection results shall include at least one of the following: the current environment version number is inconsistent with the preset environment version number, and the current dependency package list is inconsistent with the preset dependency package list. S42: If the detection result shows that the current environment version number is inconsistent with the preset environment version number, the version management tool will be automatically called to download and install the environment version corresponding to the preset environment version number, and switch to the appropriate runtime environment. S43: If the detection results show that the current dependency package list is inconsistent with the preset dependency package list, then non-compliant dependency packages are identified based on the current dependency package list and the preset dependency package list, and the non-compliant dependency packages are corrected.

[0037] In this embodiment, the detection results when the current runtime environment does not meet the preset conditions for code generation are determined. The detection results include at least one of the following: the current environment version number is inconsistent with the preset environment version number, or the current dependency package list is inconsistent with the preset dependency package list. For both types of detection results, a differentiated fully automated repair strategy is used to complete environment adaptation optimization. If the detection result includes an inconsistency between the current environment version number and the preset environment version number, the built-in version management tool will be automatically invoked to download and install the environment version corresponding to the preset environment version number. After the environment version installation is completed, environment switching and configuration initialization are automatically performed. The corresponding official adaptation installation package is matched according to the preset environment version number, and the download, decompression, installation, and registration deployment operations are automatically completed. After installation, the system's global environment variables are automatically updated, and the runtime environment is switched to the adapted runtime environment, i.e., to the standard runtime environment corresponding to the preset version, ensuring that the overall runtime environment version fully meets the code generation standard requirements. For example, if the current environment version is node v16.14.2, and the default environment version is node22.12.0, the system will automatically download and install node22.12.0, and then seamlessly switch to node22.12.0 and reload the configuration.

[0038] If the detection results show discrepancies between the current dependency package list and the preset dependency package list, the system will automatically compare the differences between the two lists to accurately filter, categorize, and identify various non-compliant dependency packages, including missing dependencies, outdated version dependencies, outdated version dependencies, redundant and conflicting dependencies, and broken or invalid dependencies. Targeted correction operations will be performed for different types of non-compliant dependency packages. For example, missing dependencies will be automatically downloaded and installed, incompatible version dependencies will be upgraded or downgraded for adaptation, and redundant, conflicting, broken, or invalid abnormal dependencies will be automatically uninstalled and cleaned up. After all dependency correction operations are completed, the project dependency environment will be automatically reconstructed and the latest dependency configuration will be cached.

[0039] It should be noted that after the repair is completed, the current runtime environment version number and dependency package list will be checked again until the current environment version number and the current dependency package list fully match the preset standards. This will ensure that the final repaired runtime environment fully meets the preset conditions for D2C code generation, and guarantee the stable and accurate execution of subsequent pipeline steps such as design draft parsing, code generation, and style optimization.

[0040] In this embodiment, the compliance of the runtime environment is automatically verified by pre-setting the environment version number and the pre-setting dependency package list. When a mismatch occurs, the system automatically completes the correction and adaptation, eliminating the need for developers to manually check the environment configuration. This effectively avoids problems such as errors in the D2C code generation process and abnormal generation results caused by non-compliant environment configuration, greatly improving the stability and reliability of the code generation process, reducing the environment configuration cost for developers, and ensuring the delivery efficiency of the design resource to code conversion stage.

[0041] S23: Based on the repaired runtime environment, generate the basic front-end code corresponding to the page to be developed according to the page description file.

[0042] In step S23, the repaired runtime environment meets the preset conditions for code generation, and the basic front-end code is executable code that conforms to standard syntax specifications and framework constraints.

[0043] In this embodiment, when generating the basic front-end code corresponding to the page to be developed based on the page description file, the structured semantic information in the page description file is parsed to extract key elements such as overall page information, hierarchical nesting relationships, visual element types, coordinate dimensions, style attributes, and reusable component information. The repaired standardized runtime environment has complete parsing dependencies and adapted runtime versions, and can stably read and parse the structured data in the page description file.

[0044] The DOM (Document Object Model) tree structure is constructed based on the hierarchical nesting relationship, and the visual element types and coordinate dimensions are mapped to the corresponding DOM nodes. Style properties are injected synchronously into the corresponding CSS (Cascading Style Sheets) rules, and reusable component information is mapped to standard component library call instructions. Finally, basic front-end code with clear semantics, reasonable structure, accurate styles, and standardized component reuse is generated.

[0045] The process involves a comprehensive, structured analysis of the page description file. First, it reads the overall page information, including layout mode, size specifications, global theme parameters, adaptation rules, and basic architecture, providing top-level layout constraints for the overall page code construction. Next, it traverses and analyzes the standardized hierarchical nesting relationships within the page description file, accurately identifying parent-child relationships, stacking order, area inclusion logic, and parallel arrangement rules at each level, thus forming a complete page hierarchy architecture. Simultaneously, it extracts the type identifiers of all visual elements on the page, accurately distinguishing different UI element categories such as text, images, buttons, forms, and pop-ups. It also collects precise quantitative data such as coordinates, dimensions, margins, and positioning parameters for each visual element, ensuring complete alignment between element layout and design drafts. Finally, it extracts the complete style attributes corresponding to each visual element, covering visual style data such as color parameters, font specifications, rounded corners, shadow effects, background styles, and transparency parameters, forming a structured set of style parameters. Identify the generic and custom component tags marked in the page description file, extract reusable component information such as component type, attribute parameters, default styles, extended configurations and call identifiers, and complete the full-coverage extraction of key elements of the entire page.

[0046] After extracting multi-dimensional elements, a standardized DOM tree structure is built from top to bottom according to the structured element information and hierarchical nesting relationships. Different types of visual elements and their corresponding coordinates are accurately mapped to various DOM nodes, restoring the true layout architecture of the page. Simultaneously, various style attributes are matched one by one to the corresponding DOM nodes to generate standardized CSS style rules, achieving accurate replication of the visual style of the design draft. For the identified reusable component information, their parameter configurations are mapped to import instructions and calling statements for standard component libraries, enabling the templated reuse of general components and avoiding repetitive coding. Finally, the DOM structure code, CSS style code, and component calling code are integrated to complete code hierarchy streamlining, format standardization, semantic optimization, and redundancy removal, generating basic front-end code.

[0047] It should be noted that during the generation of basic front-end code, the page description file is monitored to determine whether it has been modified. If the page description file has been modified, the modified page description file is obtained, and the latest version of the basic front-end code is generated based on the modified page description file to ensure that the generated result is strictly consistent with the latest design intent.

[0048] It should be noted that when generating the basic front-end code based on the page description file, the D2C tool is used to drive the generation of the basic front-end code.

[0049] In this embodiment, under the premise that the runtime environment meets the preset requirements for code generation, basic front-end code is generated from the page description file, which can stably output code results that conform to development specifications, thus improving the efficiency and standardization of front-end code generation. At the same time, by monitoring and updating the page description file in real time, it is ensured that the design intent can be accurately implemented at the code level.

[0050] Among them, such as Figure 5 As shown, step S23, which involves generating the basic front-end code corresponding to the page to be developed based on the page description file, includes: S51: Extract the actual keywords, actual business types, and actual business rules for each component to be developed from the page description file; S52: Obtain the preset general component library and general component code template library, and determine the first component to be developed that successfully matches the general components in the general component library and the second component to be developed that fails to match, based on the actual keywords, actual business type and actual business rules; S53: For the first component to be developed, call the corresponding code template in the code template library as the first basic front-end code of the first component to be developed; S54: For the second component to be developed, generate the second basic front-end code based on the description text of the second component to be developed in the page description file; S55: Integrate the first basic front-end code and the second basic front-end code to obtain the basic front-end code corresponding to the page description file.

[0051] In this embodiment, when extracting the actual keywords, actual business types, and actual business rules of each component to be developed in the page description file, a natural language processing model can be used to perform semantic recognition and information extraction on the text content in the page description file. Combined with a preset tagging system, the feature information corresponding to different components to be developed is split and extracted, ensuring that the core attribute information of each component to be developed is accurately separated and organized, providing a clear and accurate information foundation for subsequent steps of matching general components. Specifically, when extracting actual keywords, the natural language processing model is used to perform word segmentation, stop word filtering, and keyword weight calculation on the text data such as text descriptions, attribute annotations, and function annotations of each component to be developed in the page description file. Modifiers without actual semantic function, invalid characters, and general auxiliary words are removed, while core words that can accurately represent the functional attributes, visual features, interaction methods, and business uses of the components to be developed are retained. For different types of components to be developed, such as functional components, display components, and form components, exclusive core keywords are extracted in a differentiated manner. For example, business interaction keywords are extracted for input, selection, and submission form components; visual structure keywords are extracted for pop-up, card, and carousel display components; and business behavior keywords are extracted for functional operation components. This generates an accurate, standardized, and dimensionally consistent set of actual keywords for each component to be developed, objectively reflecting the core characteristics of each component.

[0052] Based on a natural language processing model, the system performs in-depth analysis of the business semantic content contained in the page description file, including business scenario descriptions, functional descriptions of components to be developed, interaction constraint text, and data flow annotations. Relying on a pre-defined front-end business type classification tag library, including standardized business tags such as form entry, data display, pop-up prompts, search and filtering, and operation interaction, and combining the application scenarios, functional positioning, and service targets of the components to be developed, the system accurately categorizes each component by business type, determines the specific business scenario to which the component belongs, and clarifies the actual business attributes of the component. Based on the determined business type, the system further extracts the corresponding actual business rules for the components to be developed, including core business constraints such as data validation rules, interaction trigger rules, state switching rules, permission display rules, and linkage response rules. Through semantic relationship extraction technology, the system identifies logical constraints, conditional restrictions, linkage relationships, and data specifications in the text, extracting business constraint content such as mandatory field validation, input format restrictions, click trigger conditions, display / hidden control logic, cross-component linkage mechanisms, and exception prompt rules for the components to be developed.

[0053] It should be noted that the natural language processing model can be the BERT model based on the Transformer architecture, or other models; this embodiment does not limit it.

[0054] The process involves acquiring a pre-defined general component library and a code template library for general components. Based on actual keywords, actual business types, and actual business rules, it identifies the first component to be developed that successfully matches a general component in the general component library, and the second component that fails to match. Specifically, determining whether a component matches a general component in the library involves first comparing the semantic similarity between the actual keywords and the pre-defined keywords of each general component in the library. If the semantic similarity is greater than a pre-defined threshold, the actual keywords are considered to match. After a successful keyword match, the process compares the actual business type with the pre-defined business type of the general component. If they match, it compares the actual business rules with the pre-defined rules of the general component. If the actual business rules match the pre-defined rules of the general component, the component to be developed is considered to match the corresponding general component in the library. If any dimension is inconsistent, the match is considered to have failed. This process is repeated for each component to be developed, identifying the first component to be developed that successfully matches a general component in the library and the second component that fails to match.

[0055] It should be noted that the preset general component library and general component code template library contain multiple general components and their corresponding code templates.

[0056] For the first component to be developed, the corresponding code template from the code template library is used as the first basic front-end code for the first component to be developed. For the second component to be developed, the second basic front-end code is generated based on the description text of the second component to be developed in the page description file. When generating the second basic front-end code, a large language model can be used to perform semantic parsing and structured modeling on the description text, extracting its UI structure, interactive behavior, and data binding relationships. Based on the extracted structured elements and combined with front-end framework specifications, the second basic front-end code is automatically generated. The large language model is a generative pre-trained language model that has been fine-tuned specifically for front-end development professional corpus and D2C design conversion scenarios. The model training corpus includes scenario-based data from multiple standardized front-end development documents, mainstream front-end framework coding specifications, and UI component development cases. In actual operation, the large language model first receives the description text corresponding to the second component to be developed, performs full-domain parsing, and identifies the component UI structure information, interactive behavior logic, and front-end and back-end data binding relationships contained in the text. The UI structure information includes the node nesting structure, layout arrangement, element composition units, size adaptation rules, and visual style parameters of the second component to be developed. Interactive behaviors include various user operation logics such as component click triggers, hover responses, swipe switching, input validation, and pop-up linkage; data binding relationships include the component's data rendering source, field mapping rules, data display mechanism, parameter passing method, and data update linkage constraints. After completing structured modeling, the large language model combines the coding syntax specifications, engineering development standards, and component encapsulation guidelines of mainstream front-end frameworks to perform code mapping and logic compilation on structured feature data, automatically writing DOM structure code, CSS style code, interactive event code, and data binding code adapted to the current project architecture. Simultaneously, the model can automatically adapt to coding conventions based on the actual business scenario of the component, generating a second base front-end code.

[0057] It should be noted that the network structure of a large language model can include an input layer, an embedding layer, multiple stacked Transformer decoding modules, and an output prediction layer. When training the large language model, training samples and their corresponding labels are obtained. The training samples and labels are the interface description text and corresponding runnable front-end code from the publicly available project source code, respectively. The large language model is trained under supervision using the training samples. The loss function during training can be the cross-entropy loss function. Training stops when the loss function is less than a preset threshold.

[0058] The first and second basic front-end codes are integrated to obtain the basic front-end code corresponding to the page description file. During integration, the first and second basic front-end codes are sequentially concatenated and layered according to the original nesting, page layout, and component arrangement logic of the page description file. Based on the original page topology, with the page root node as the top-level reference, the first and second basic front-end codes are embedded into the corresponding DOM tree node positions according to the hierarchical rules of top-down, outside-in, and parent-to-child relationships, thus obtaining the corresponding basic front-end code.

[0059] In this embodiment, by distinguishing between successfully matched general components and unmatched custom components in the page description file, generating corresponding basic front-end code for each component, and then integrating them, the mature code templates of general components can be used to reduce repetitive development work and improve the overall efficiency of code generation.

[0060] Among them, such as Figure 6 As shown, in step S52, that is, based on the actual keywords, actual business type, and actual business rules, the first component to be developed that successfully matches the general components in the general component library and the second component to be developed that fails to match are determined, including: S61: For any component to be developed, perform feature encoding on the actual keywords to obtain keyword encoding features, perform feature encoding on the actual business types to obtain type encoding features, and perform feature encoding on the actual business rules to obtain rule encoding features; S62: The keyword coding features, type coding features and rule coding features are fused to obtain the actual fused features; S63: Obtain the general fusion features of each general component in the general component library, calculate the similarity value between the actual fusion feature and each general fusion feature. If the similarity value is greater than the preset similarity threshold, the corresponding component to be developed is determined as the first component to be developed. If the similarity value is not greater than the preset similarity threshold, the corresponding component to be developed is determined as the second component to be developed.

[0061] In this embodiment, for any component to be developed, the actual keywords are feature-encoded to obtain keyword-encoded features, the actual business types are feature-encoded to obtain type-encoded features, and the actual business rules are feature-encoded to obtain rule-encoded features. Different encoding methods can adapt to different types of feature data. When feature-encoding actual keywords, word embedding encoding can be used to transform discrete text keywords into low-dimensional continuous numerical vectors, preserving the semantic association information of the keywords. When feature-encoding actual business types, one-hot encoding can be used to quickly obtain structurally regular classification features. When feature-encoding actual business rules, the rule can be broken down into multiple parts: conditions, execution logic, and output results, and then serialized and encoded to fully preserve the logical information of the business rule. For example, the rule for displaying a user list on a page can be broken down into receiving pagination query parameters, filtering data that meets the conditions from the user data table, and returning a user list with pagination information. Encoding these three parts sequentially can fully preserve the logical sequence of the rule.

[0062] The keyword encoding features, type encoding features, and rule encoding features are fused to obtain the actual fused features. Specifically, during feature fusion, the keyword encoding features, type encoding features, and rule encoding features can be concatenated and fused to obtain the actual fused features.

[0063] The common fusion features of each common component in the common component library are obtained. The similarity value between the actual fusion feature and each common fusion feature is calculated. If the similarity value is greater than a preset similarity threshold, the corresponding component to be developed is identified as the first component to be developed; if the similarity value is not greater than the preset similarity threshold, the corresponding component to be developed is identified as the second component to be developed. The similarity value between the actual fusion feature and each common fusion feature can be calculated using the cosine formula. The preset similarity threshold is determined based on actual needs. For example, the preset similarity threshold can be set to 0.85, or it can be set to other values; this embodiment does not impose specific limitations.

[0064] In this embodiment, by breaking down the requirements into three dimensions—keywords, component types, and business rules—features are extracted and fused, and then the similarity is calculated with the fused features of existing components in the general component library, development tasks that can directly reuse general components can be quickly screened, reducing the amount of repetitive development work and improving the overall efficiency of code generation.

[0065] S24: Optimize the basic front-end code to obtain the optimized front-end code.

[0066] In step S24, optimization refers to optimizing the basic front-end code to address issues such as code redundancy, messy styles, non-standard structure, insufficient adaptability, and redundant interaction logic.

[0067] In this embodiment, when optimizing the basic front-end code, redundant code cleanup, semantic variable reconstruction, and code structure regularization can be completed automatically based on built-in static code analysis rules and front-end engineering optimization strategies. For example, a full-domain static scan analysis is performed on the basic front-end code, accurately traversing the global CSS stylesheets, inline style rules, and JavaScript script content, verifying each type of CSS class name, style rule, and JavaScript variable, and identifying idle code resources that are not called by DOM nodes, do not participate in page rendering, and do not execute interactive logic. A fully automatic batch deletion and cleanup operation is performed to completely remove redundant code left over from the code generation process. After deleting redundant code, the existing retained variables, function identifiers, and style class names are semantically redefined. For meaningless names, random names, and other non-standard names in the basic front-end code, unified renaming is completed according to the front-end semantic naming specification, replacing vague custom variables and style class names with semantically precise standardized names.

[0068] It should be noted that this can also be done simultaneously with style standardization and integration, DOM structure optimization, and multi-platform compatibility adaptation. A unified global CSS style writing standard is implemented to ensure consistent and well-organized style code. The DOM tree nesting structure is streamlined and optimized, improving page rendering logic. For multi-terminal adaptation scenarios, weakly compatible syntax in the code is rewritten in a standardized manner to ensure stable operation across multiple terminals and browsers.

[0069] In this embodiment, the basic front-end code is optimized to improve the quality of the generated code. Based on preset rules, the entire code is automatically optimized and sorted out, which greatly reduces the code maintenance cost for subsequent developers and improves the efficiency of collaborative development.

[0070] Among them, such as Figure 7 As shown, after step S24, that is, after optimizing the basic front-end code to obtain the optimized front-end code, the following steps are also included: S71: Based on the page requirements file, extract the interaction logic information of the corresponding page; based on the interface file, extract the interface information of the corresponding page. S72: Inject the interaction logic information and interface information into the optimized front-end code to generate basic front-end code containing the interaction logic.

[0071] In this embodiment, the design resources also include page requirements files and interface files. The page requirements file is a standardized business requirements document matching the currently developed page. It fully records the overall page interaction flow, component triggering logic, user operation behavior, and other interaction logic information, serving as the core basis for defining the page's human-computer interaction behavior and page flow rules. The interface file is a standardized interface configuration file agreed upon by the front-end and back-end, uniformly defining standardized interface information such as the request path, request method, and request parameters of the back-end interfaces required by the current page.

[0072] In this embodiment, the interaction logic information of the corresponding page is extracted based on the page requirements file. Through structured parsing and semantic matching, the interaction rule descriptions in the page requirements file are traversed, and the global page interaction rules and the independent interaction logic of each component are extracted one by one. This includes basic trigger interactions such as component click, hover, focus, and defocus; form interactions such as form input validation, content clearing, and form reset; and scenario-based interaction logic such as pop-up opening, closing, and hierarchical linkage. Based on the interface file, all backend interface information required for current page rendering, data operations, and business submissions is extracted.

[0073] Interaction logic and API information are injected into the optimized front-end code, generating basic front-end code containing interaction logic. During the injection process, according to preset code layering specifications, interaction logic information is attached to the corresponding interaction logic layer of the code, and API information is configured to the data request layer. This ensures that the code structure conforms to the general architecture specifications of front-end development and avoids maintenance difficulties caused by mixed logic.

[0074] In this embodiment, by extracting interaction logic information and interface information and injecting optimized front-end code in layers, it is possible to ensure that the generated code structure is clear and standardized, improve the integrity of the code, and eliminate the need for developers to manually write corresponding logic one by one according to the interface documentation and interaction requirements. This can significantly shorten the development cycle of the front-end page and improve the overall quality and standardization of the front-end code.

[0075] Among them, such as Figure 8 As shown, after step S24, that is, after optimizing the basic front-end code to obtain the optimized front-end code, the following steps are also included: S81: Extracts the real-time native style framework from the optimized front-end code; S82: Obtain the preset style framework mapping library, and based on the style framework mapping library, determine the standard native style framework corresponding to the real-time native style framework. S83: Based on the style framework mapping library, determine the target style framework corresponding to the standard native style framework and the conversion rules for converting the real-time native style framework into the target style framework; S84: Based on the transformation rules, the real-time native style framework is converted into the target style framework to obtain the transformed front-end code.

[0076] In this embodiment, a full-domain structured scan and style architecture parsing are performed on the optimized front-end code to extract the complete real-time native style framework. This extraction is achieved by constructing an abstract syntax tree to perform deep code analysis, identifying and extracting all style rules, class names, variables, selectors, and style declarations defined in the code, thus obtaining the real-time native style framework. This real-time native style framework is the native style framework actually used by the current code.

[0077] For example, the real-time native style framework is the CSS style framework. A preset style framework mapping library is retrieved, and based on this library, the standard native style framework corresponding to the real-time native style framework is determined. For instance, if the standard native style framework is the CSS style framework, then the target style framework corresponding to the CSS style framework is determined to be the Tailwind CSS atomic style framework based on the style framework mapping library. The preset style framework mapping library contains multiple standard native style frameworks, multiple target style frameworks, and conversion relationships between the corresponding standard native style frameworks and their corresponding target style frameworks.

[0078] Based on the style framework mapping library, when determining the standard native style framework corresponding to the real-time native style framework, the features of the real-time native style framework can be extracted. The features of the real-time native style framework are then matched and compared with the features of each standard native style framework stored in the style framework mapping library. The standard native style framework that successfully matches is taken as the standard native style framework corresponding to the real-time native style framework.

[0079] Based on the style framework mapping library, the target style framework corresponding to the standard native style framework and the conversion rules for converting the real-time native style framework to the target style framework are determined. Specifically, when determining the target style framework corresponding to the standard native style framework, a target style framework with a mapping relationship to the standard native style framework can be found in the style framework mapping library according to a pre-established mapping relationship. The conversion rules corresponding to this mapping relationship are then determined as the conversion rules for converting the real-time native style framework to the target style framework. These conversion rules are a set of rules that map each style attribute in the real-time native style framework to the corresponding functional attributes in the target style framework.

[0080] Based on conversion rules, the real-time native style framework is converted into a target style framework to obtain the converted front-end code. Specifically, the conversion can be performed by mapping each element in the real-time native style framework according to the conversion rules. First, the structural attributes of each element are converted to the format required by the target style framework according to the rules. Then, the converted elements are concatenated according to the layout rules of the target style framework, ultimately generating executable front-end code that conforms to the target framework specifications. Alternatively, a preset toolchain can be used, taking the real-time native style framework as input, to automatically execute the entire process of feature extraction, framework matching, rule mapping, and code generation, ultimately outputting executable front-end code that conforms to the target framework specifications, thus obtaining the converted front-end code. This embodiment is not limited to this approach.

[0081] In this application, the system detects whether the current runtime environment meets the preset conditions for code generation. If the current runtime environment does not meet the preset conditions, it automatically repairs the runtime environment to ensure that the repaired runtime environment meets the preset conditions. By automatically detecting and repairing the runtime environment, developers do not need to manually troubleshoot environment dependencies, version conflicts, and other issues. This allows for the rapid acquisition of a runtime environment that meets the code generation requirements, reducing the preparation time for front-end code generation and avoiding code generation failures due to environment incompatibility, thus effectively improving development efficiency. Furthermore, an optimization process is added to the generated basic front-end code, which further standardizes the code structure, simplifies redundant code, and improves the maintainability and performance of the final generated code, thereby enhancing the quality of the generated code.

[0082] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0083] In one embodiment, a code generation apparatus is provided, which corresponds one-to-one with the code generation methods described in the above embodiments. For example... Figure 9 As shown, the code generation device 90 includes an acquisition module 91, a repair module 92, a generation module 93, and an optimization module 94.

[0084] The acquisition module 91 is used to acquire the design resources corresponding to the page to be developed. The design resources include at least the page description file of the page to be developed.

[0085] Repair module 92 is used to obtain the current running environment and detect whether the current running environment meets the preset conditions for code generation. If the current running environment does not meet the preset conditions for code generation, it will automatically repair the current running environment so that the repaired running environment meets the preset conditions for code generation.

[0086] Module 93 is used to generate the basic front-end code corresponding to the page to be developed based on the page description file, using the repaired runtime environment.

[0087] Optimization module 94 is used to optimize the basic front-end code to obtain optimized front-end code.

[0088] Optionally, the repair module 92 includes: The detection unit is used to obtain the current environment version number and the current dependency package list of the current running environment, as well as the preset environment version number and preset dependency package list that meet the preset conditions for code generation.

[0089] The judgment unit is used to detect whether the current environment version number is consistent with the preset environment version number, and whether the current dependency package list is consistent with the preset dependency package list, and obtain the detection result.

[0090] The first determining unit is used to determine that the current running environment does not meet the preset conditions for code generation if the detection result includes a discrepancy between the current environment version number and the preset environment version number or a discrepancy between the current dependency package list and the preset dependency package list.

[0091] Optionally, the repair module 92 also includes: The second determining unit is used to determine the detection result when the current running environment does not meet the preset conditions for code generation. The detection result includes at least one of the following: the current environment version number is inconsistent with the preset environment version number, and the current dependency package list is inconsistent with the preset dependency package list. The download unit is used to automatically call the version management tool to download and install the environment version corresponding to the preset environment version number if the detection result shows that the current environment version number is inconsistent with the preset environment version number, and then switch to the appropriate runtime environment.

[0092] The correction unit is used to determine non-compliant dependency packages and correct them if the detection results include a current dependency package list that is inconsistent with the preset dependency package list.

[0093] Optionally, the generation module 93 includes: The first extraction unit is used to extract the actual keywords, actual business types, and actual business rules of each component to be developed from the page description file.

[0094] The matching unit is used to obtain a preset general component library and a general component code template library. Based on the actual keywords, actual business type, and actual business rules, it determines the first component to be developed that successfully matches the general components in the general component library and the second component to be developed that fails to match.

[0095] The calling unit is used to call the corresponding code template in the code template library as the first basic front-end code for the first component to be developed.

[0096] The generation unit is used to generate second basic front-end code for the second component to be developed, based on the description text of the second component to be developed in the page description file.

[0097] The integration unit is used to integrate the first basic front-end code and the second basic front-end code to obtain the basic front-end code corresponding to the page description file.

[0098] Optionally, the matching unit includes: The encoding subunit is used to perform feature encoding on actual keywords for any component to be developed, to obtain keyword encoding features, to perform feature encoding on actual business types, to obtain type encoding features, and to perform feature encoding on actual business rules, to obtain rule encoding features.

[0099] The fusion subunit is used to fuse keyword coding features, type coding features, and rule coding features to obtain the actual fused features.

[0100] The calculation subunit is used to obtain the general fusion features of each general component in the general component library, calculate the similarity value between the actual fusion feature and each general fusion feature, and if the similarity value is greater than the preset similarity threshold, the corresponding component to be developed is determined as the first component to be developed. If the similarity value is not greater than the preset similarity threshold, the corresponding component to be developed is determined as the second component to be developed.

[0101] Optionally, the code generation device 90 further includes: The second extraction unit is used to extract the interaction logic information of the corresponding page based on the page requirement file, and to extract the interface information of the corresponding page based on the interface file.

[0102] The injection unit is used to inject interaction logic information and interface information into the optimized front-end code, generating basic front-end code containing interaction logic.

[0103] Optionally, the code generation device 90 further includes: The third extraction unit is used to extract the real-time native style framework from the optimized front-end code.

[0104] The acquisition unit is used to acquire a preset style framework mapping library and, based on the style framework mapping library, determine the standard native style framework corresponding to the real-time native style framework.

[0105] The third determining unit is used to determine the target style framework corresponding to the standard native style framework and the conversion rules for converting the real-time native style framework into the target style framework, based on the style framework mapping library.

[0106] The transformation unit is used to transform the real-time native style framework into the target style framework based on transformation rules, thereby obtaining the transformed front-end code.

[0107] It should be noted that the information interaction and execution process between the above-mentioned units are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0108] Figure 10 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Figure 10 As shown, the computer device of this embodiment includes: at least one processor ( Figure 10 Only one is shown in the diagram), a memory, and a computer program stored in the memory and executable on at least one processor, wherein the processor executes the computer program to implement the steps in any of the above-described code generation method embodiments.

[0109] This computer device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 10 The examples of computer devices are merely examples and do not constitute a limitation on computer devices. Computer devices may include more or fewer components than shown in the illustration, or combinations of certain components, or different components, such as network interfaces, displays, and input devices.

[0110] The processor referred to can be a CPU, but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0111] Memory includes readable storage media, internal memory, etc., wherein internal memory can be the RAM of a computer device, providing an environment for the operation of the operating system and computer-readable instructions stored in the readable storage media. The readable storage media can be the hard drive of a computer device, or in other embodiments, it can be an external storage device of the computer device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, memory can include both internal storage units and external storage devices of a computer device. Memory is used to store the operating system, applications, bootloader, data, and other programs, such as program code for computer programs. Memory can also be used to temporarily store data that has been output or will be output.

[0112] Those skilled in the art will understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this invention. The specific working process of the units and modules in the above device can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here. If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present invention can implement all or part of the processes in the methods of the above embodiments by instructing related hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the above method embodiments. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. A computer-readable medium can include at least: any entity or device capable of carrying computer program code, a recording medium, a computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0113] The present invention can implement all or part of the processes in the above embodiments of the method, or it can be accomplished by a computer program product. When the computer program product is run on a computer device, the computer device executes the steps in the above method embodiments.

[0114] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0115] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software 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 implementations should not be considered beyond the scope of this invention.

[0116] In the embodiments provided by this invention, it should be understood that the disclosed apparatus / computer devices and methods can be implemented in other ways. For example, the apparatus / computer device embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0117] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0118] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

[0119] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A code generation method, characterized in that, The code generation method includes: Obtain the design resources corresponding to the page to be developed, wherein the design resources include at least the page description file of the page to be developed; The current running environment is obtained, and it is checked whether the current running environment meets the preset conditions for code generation. If the current running environment does not meet the preset conditions for code generation, the current running environment is automatically repaired so that the repaired running environment meets the preset conditions for code generation. Based on the repaired operating environment, the basic front-end code corresponding to the page to be developed is generated according to the page description file; The basic front-end code is optimized to obtain the optimized front-end code.

2. The code generation method as described in claim 1, characterized in that, The step of detecting whether the current running environment meets the preset conditions for code generation includes: Obtain the current environment version number and current dependency package list of the current running environment, as well as the preset environment version number and preset dependency package list that meet the preset conditions for code generation; The system checks whether the current environment version number is consistent with the preset environment version number, and whether the current dependency package list is consistent with the preset dependency package list, and obtains the detection results. If the detection result includes a discrepancy between the current environment version number and the preset environment version number, or a discrepancy between the current dependency package list and the preset dependency package list, then it is determined that the current running environment does not meet the preset conditions for code generation.

3. The code generation method as described in claim 2, characterized in that, If the current runtime environment does not meet the preset conditions for code generation, the current runtime environment will be automatically repaired, including: The detection result when the current running environment does not meet the preset conditions for code generation is determined. The detection result includes at least one of the following: the current environment version number is inconsistent with the preset environment version number, and the current dependency package list is inconsistent with the preset dependency package list. If the detection result indicates that the current environment version number is inconsistent with the preset environment version number, then the version management tool will be automatically invoked to download and install the environment version corresponding to the preset environment version number, and the system will be switched to the appropriate operating environment. If the detection result shows that the current dependency package list is inconsistent with the preset dependency package list, then non-compliant dependency packages are identified based on the current dependency package list and the preset dependency package list, and the non-compliant dependency packages are corrected.

4. The code generation method as described in claim 1, characterized in that, The step of generating the basic front-end code corresponding to the page to be developed based on the page description file includes: Extract the actual keywords, actual business types, and actual business rules for each component to be developed from the page description file; Obtain a preset general component library and a code template library for the general components. Based on the actual keywords, the actual business type, and the actual business rules, determine the first component to be developed that successfully matches the general components in the general component library and the second component to be developed that fails to match. For the first component to be developed, the corresponding code template in the code template library is called as the first basic front-end code of the first component to be developed; For the second component to be developed, second basic front-end code is generated based on the description text of the second component to be developed in the page description file; By integrating the first basic front-end code and the second basic front-end code, the basic front-end code corresponding to the page description file is obtained.

5. The code generation method as described in claim 4, characterized in that, The step of determining the first component to be developed that successfully matches the general components in the general component library and the second component to be developed that fails to match, based on the actual keywords, the actual business type, and the actual business rules, includes: For any component to be developed, feature encoding is performed on the actual keywords to obtain keyword encoding features, feature encoding is performed on the actual business type to obtain type encoding features, and feature encoding is performed on the actual business rules to obtain rule encoding features; The keyword encoding features, the type encoding features, and the rule encoding features are fused together to obtain the actual fused features; Obtain the general fusion feature of each general component in the general component library, calculate the similarity value between the actual fusion feature and each general fusion feature, and if the similarity value is greater than a preset similarity threshold, then the corresponding component to be developed is determined as the first component to be developed; if the similarity value is not greater than the preset similarity threshold, then the corresponding component to be developed is determined as the second component to be developed.

6. The code generation method as described in claim 1, characterized in that, The design resources also include page requirements files and interface files; After optimizing the basic front-end code to obtain the optimized front-end code, the process further includes: Based on the page requirement file, extract the interaction logic information of the corresponding page; based on the interface file, extract the interface information of the corresponding page. The interaction logic information and the interface information are injected into the optimized front-end code to generate basic front-end code containing the interaction logic.

7. The code generation method as described in claim 1, characterized in that, After optimizing the basic front-end code to obtain the optimized front-end code, the process further includes: Extract the real-time native style framework from the optimized front-end code; Obtain a preset style framework mapping library, and based on the style framework mapping library, determine the standard native style framework corresponding to the real-time native style framework; Based on the style framework mapping library, a target style framework corresponding to the standard native style framework and a conversion rule for converting the real-time native style framework into the target style framework are determined. Based on the conversion rules, the real-time native style framework is converted into the target style framework to obtain the converted front-end code.

8. A code generation device, characterized in that, The code generation device includes: The acquisition module is used to acquire the design resources corresponding to the page to be developed, wherein the design resources include at least the page description file of the page to be developed; The repair module is used to obtain the current running environment, detect whether the current running environment meets the preset conditions for code generation, and if the current running environment does not meet the preset conditions for code generation, automatically repair the current running environment so that the repaired running environment meets the preset conditions for code generation. The generation module is used to generate the basic front-end code corresponding to the page to be developed based on the page description file, according to the repaired runtime environment. The optimization module is used to optimize the basic front-end code to obtain optimized front-end code.

9. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the code generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the code generation method as described in any one of claims 1 to 7.

Images