Front-end code generation method, device, computer equipment, storage medium and product

Abstract

The present application relates to a front-end code generation method, device, computer equipment, storage medium and product. It relates to the field of computer technology and can be used in the field of financial technology or other related fields. The method includes: obtaining keywords of components to be developed from the requirements document of the UI interface, matching the keywords of the components to be developed with the keywords of the preset components in the preset general component library, and obtaining components to be developed that fail to match; for components to be developed that fail to match, determining the target business rules corresponding to the components to be developed that fail to match from the business rule database, and generating a first code snippet according to the target business rules; for components to be developed that fail to match, determining the target business activities corresponding to the components to be developed that fail to match from the business activity database, and generating a second code snippet according to the target business activities; generating a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet, which can improve the efficiency of page development.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end code generation method, apparatus, computer equipment, storage medium and computer program product. Background Art

[0002] With the rapid development of the software industry and the growing demand, how R&D personnel can quickly develop software products has become the primary problem they face, where a software product includes multiple front-end pages.

[0003] In traditional technology, R&D personnel use front-end code generation tools to parse the UI interface design drawings of the front-end page designed by the designer to obtain the static visual code of the front-end page; then, they communicate with the product manager and designer to confirm the business logic corresponding to the front-end page, and based on the confirmed business logic, complete the development of the business logic of the front-end page on the basis of the static visual code of the front-end page, thereby completing the development of the front-end page; the same operation can complete the complete development of the software product.

[0004] However, the existing front-end page development process is slow and inefficient. Summary of the invention

[0005] Based on this, it is necessary to provide a front-end code generation method, device, computer equipment, computer-readable storage medium and computer program product that can improve the efficiency of front-end page development in response to the above technical problems.

[0006] In a first aspect, the present application provides a front-end code generation method. The method comprises:

[0007] Obtain keywords of the components to be developed from the requirements document of the UI interface, match the keywords of the components to be developed with the keywords of the preset components in the preset general component library, and obtain the components to be developed that fail to match;

[0008] For the component to be developed that fails to match, determine the target business rule corresponding to the component to be developed that fails to match from the business rule database, and generate a first code snippet according to the target business rule;

[0009] For the component to be developed that fails to match, determine the target business activity corresponding to the component to be developed that fails to match from the business activity database, and generate a second code snippet according to the target business activity;

[0010] A front-end code corresponding to the UI interface is generated according to the first code snippet and the second code snippet.

[0011] In one embodiment, matching the keywords of the component to be developed with the keywords of the preset components in the preset general component library to obtain the component to be developed that fails to match includes:

[0012] Matching the keywords of the component to be developed with the keywords of each preset component in the preset general component library respectively to obtain a first matching degree corresponding to each preset component;

[0013] When the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, and an instruction is obtained for characterizing that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirements document, determining that the component to be developed is a component to be developed that fails to match;

[0014] When the first matching degree corresponding to the preset component is less than the preset matching degree threshold, the component to be developed is determined to be a component to be developed that fails to match.

[0015] In one embodiment, for a component to be developed that fails to match, a target business rule corresponding to the component to be developed that fails to match is determined from a business rule database, and a first code snippet is generated according to the target business rule, including:

[0016] For the components to be developed that failed to match, determining multiple candidate business rules corresponding to the components to be developed that failed to match from the business rule database;

[0017] Matching the keywords of the component to be developed that failed to match with multiple candidate business rules respectively, and obtaining a second matching degree corresponding to each candidate business rule;

[0018] The candidate business rule corresponding to the maximum matching degree among the second matching degrees corresponding to the candidate business rules is used as the target business rule corresponding to the component to be developed that fails to match, and a first code snippet is generated according to the target business rule.

[0019] In one embodiment, generating a first code snippet according to a target business rule includes:

[0020] According to the target business rule, determining a first target method corresponding to the target business rule from a preset general method library;

[0021] A first code snippet is generated according to the target business rule and the first target method.

[0022] In one embodiment, for the component to be developed that fails to match, a target business activity corresponding to the component to be developed that fails to match is determined from a business activity database, and a second code snippet is generated according to the target business activity, including:

[0023] For the components to be developed that failed to match, determining multiple candidate business activities corresponding to the components to be developed that failed to match from the business activity database;

[0024] Matching the keywords of the components to be developed that failed to match with each candidate business activity respectively, and obtaining a third matching degree corresponding to each candidate business activity;

[0025] The candidate business activity corresponding to the maximum matching degree among the third matching degrees corresponding to the candidate business activities is used as the target business activity corresponding to the component to be developed that failed to match, and a second code snippet is generated according to the target business activity.

[0026] In one embodiment, generating a second code snippet according to a target business activity includes:

[0027] According to the target business activity, determining a plurality of candidate business tasks corresponding to the target business activity from a business activity database;

[0028] Match the keywords of the component to be developed with each candidate business task respectively, and determine the target business task from multiple candidate business tasks;

[0029] According to the target business task, determining a plurality of candidate business steps corresponding to the target business task from a business activity database;

[0030] Match the keywords of the component to be developed with each candidate business step respectively, and determine the target business step from multiple candidate business steps;

[0031] A second code snippet is generated according to the target business step.

[0032] In one embodiment, generating a second code snippet according to a target business step includes:

[0033] According to the target business step, determine the target interface corresponding to the target business step from the backend interface database;

[0034] According to the target interface, determining a second target method corresponding to the target interface from a preset general method library;

[0035] A second code snippet is generated according to the target interface and the second target method.

[0036] In one embodiment, the keywords of the component to be developed are matched with the keywords of each preset component in the preset general component library to obtain the first matching degree corresponding to each preset component, including:

[0037] For each preset component, multiple keywords of the component to be developed are matched with the keywords of the preset component respectively, so as to obtain the matching degree between each keyword of the component to be developed and the preset component respectively;

[0038] According to the matching degree of each keyword of the component to be developed and the preset component, and the preset weight of each keyword, the first matching degree between the component to be developed and the preset component is calculated.

[0039] In a second aspect, the present application also provides a front-end code generation device. The device comprises:

[0040] The acquisition module is used to obtain the keywords of the components to be developed from the requirements document of the UI interface, match the keywords of the components to be developed with the keywords of the preset components in the preset general component library, and obtain the components to be developed that fail to match;

[0041] A first generating module is used to determine, for the component to be developed that fails to match, a target business rule corresponding to the component to be developed that fails to match from a business rule database, and generate a first code snippet according to the target business rule;

[0042] A second generating module is used to determine, for the component to be developed that fails to match, a target business activity corresponding to the component to be developed that fails to match from a business activity database, and generate a second code snippet according to the target business activity;

[0043] The third generating module is used to generate a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet.

[0044] In a third aspect, the present application further provides a computer device, which includes a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of any one of the methods in the first aspect when executing the computer program.

[0045] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the steps of any one of the methods in the first aspect are implemented.

[0046] In a fifth aspect, the present application further provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of any one of the methods in the first aspect are implemented.

[0047] The above-mentioned front-end code generation method, device, computer equipment, storage medium and computer program product obtain keywords of the components to be developed from the requirements document of the UI interface, match the keywords of the components to be developed with the keywords of the preset components in the preset general component library, and obtain the components to be developed that fail to match; for the components to be developed that fail to match, determine the target business rules corresponding to the components to be developed that fail to match from the business rule database, and generate a first code fragment according to the target business rules; for the components to be developed that fail to match, determine the target business activities corresponding to the components to be developed that fail to match from the business activity database, and generate a second code fragment according to the target business activity; finally, generate a front-end code corresponding to the UI interface according to the first code fragment and the second code fragment. That is to say, the front-end code generation method in the embodiment of the present application can not only obtain the static logic code corresponding to the component to be developed according to the requirement document of the UI interface, but also obtain the back-end interaction logic code corresponding to the component to be developed, so that the generated front-end code of the UI interface already includes the required business logic, and thus, the R&D personnel no longer need to confirm the business logic of the page with the product manager or designer during the development of the front-end page based on the generated front-end code in this embodiment, thereby reducing communication costs, and reducing the workload rereading rate of the R&D personnel, saving labor R&D costs, and improving the R&D process of the front-end page, thereby improving the R&D efficiency of the front-end page. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 An application environment diagram of a front-end code generation method in an embodiment;

[0049] Figure 2 A schematic diagram of a process of generating a front-end code in an embodiment;

[0050] Figure 3 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0051] Figure 4 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0052] Figure 5 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0053] Figure 6 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0054] Figure 7 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0055] Figure 8 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0056] Fig. 9 A schematic diagram of a complete process of a front-end code generation method in one embodiment;

[0057] Fig.10 It is a structural block diagram of a front-end code generation device in one embodiment. DETAILED DESCRIPTION

[0058] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0059] With the rapid development of the software industry and the growing demand, how to quickly develop has become the primary problem faced by R&D personnel. Today's front-end development process is generally that the product manager provides the requirements document, the designer produces the UI design drawings, and the front-end R&D personnel develop the page based on the requirements document and UI design drawings. At present, the industry already has tools that generate front-end code based on UI design drawings, such as imgCook, but these tools only generate static visual code (such as html, css), and do not contain business logic code. Therefore, during the R&D process, R&D personnel still need to confirm the business logic with the UI designer and product manager to complete the overall R&D of the business page, which undoubtedly delays the R&D process and reduces R&D efficiency. In addition, most page displays are similar, the workload of front-end R&D personnel is repeated, and the R&D efficiency is low.

[0060] In order to solve the above problems, the present invention aims to provide a front-end code generation method that combines the front-end code generation tool and the business architecture, adopts a graphical interface, can be operated by business personnel or product managers, automatically generates code associated with the business logic, and provides it to front-end R&D personnel. On the one hand, it can shorten the process of R&D personnel confirming requirements and reduce the cost of demand communication; on the other hand, it can also reduce the workload duplication rate of R&D personnel, save labor R&D costs, and realize rapid function development.

[0061] Specifically, by inputting UI design drawings and requirement descriptions, visual codes and processing logic code snippets are intelligently generated, saving labor R&D costs, reducing requirements for R&D personnel, and improving the efficiency of requirement R&D. Among them, the D2C tool mainly outputs corresponding code snippets based on the UI design drawings, but it is easy to miss some content, such as interaction logic and data service logic, only through visual content. Therefore, the present invention combines the business architecture, adds the association relationship between UI components and business logic codes on top of the existing association relationship between UI components and front-end code snippets, supplements the missing content in the D2C tool, improves the accuracy of the visual code, and generates specific business logic codes according to the requirement description to form a more complete code snippet.

[0062] Through this front-end code generation method, the present invention can greatly shorten the time for R&D personnel to confirm requirements, reduce the cost of demand communication, save labor R&D costs, avoid repeated development of similar functions, realize rapid function development, and improve R&D efficiency for front-end developers.

[0063] The front-end code generation method provided in the embodiment of the present application can be applied to a computer device. The computer device can be a terminal or a server. In the case where the computer device is a terminal, the internal structure diagram of the computer device is as follows: Figure 1 As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a front-end code generation method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a key, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0064] Those skilled in the art will understand that Figure 1 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0065] Optionally, the terminal may be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, IoT devices and portable wearable devices. IoT devices may be smart speakers, smart TVs, smart air conditioners, smart car-mounted devices, etc. Portable wearable devices may be smart watches, smart bracelets, head-mounted devices, etc.

[0066] In one embodiment, Figure 2 As shown, a front-end code generation method is provided, which is applied to Figure 1 The computer device in the example is used to illustrate, including the following steps:

[0067] Step 201, obtaining keywords of components to be developed from the requirement document of the UI interface, matching the keywords of the components to be developed with keywords of preset components in a preset general component library, and obtaining components to be developed that fail to match.

[0068] Among them, the universal components in the preset universal component library can be a complete functional code block formed by visual code and corresponding processing logic to realize independent functions, such as a search bar component. The change frequency of universal components in the universal component library is generally relatively low. Based on the existing code blocks, professional and technical personnel can extract universal components and set detailed functional descriptions and configuration information for them to construct the preset universal component library, wherein the functional description of each universal component can be used as a keyword for each universal component; in addition, the preset universal component library can be stored in a computer device, or in other devices that are connected to the computer device for communication, or in the cloud, etc., and the embodiments of the present application do not limit this.

[0069] Optionally, the system framework for constructing the preset universal component library may include: a code file upload module, a text input module and an association storage module; wherein the code file upload module may be used to receive code files manually uploaded by users, or automatically generate code files based on the functional requirements of components uploaded by users, etc.; if the upload is successful, the corresponding attachment id may be returned, that is, after successfully receiving the code file, the corresponding id may be set for the code file; if the upload is unsuccessful, the user may be reminded that "upload failed, please upload again". The text input module may be used to receive the text content manually typed by the user for the code file, and display it correctly to the user, and the user may also randomly modify the typed content. The association storage module may be used to receive the id of the code file output by the code file upload module and the text content corresponding to the code file output by the text input module, and establish an association between the two and store them in a database; in this way, the preset universal component library is constructed.

[0070] When a user needs to generate front-end code corresponding to a front-end page, he can enter the requirement document of the UI interface corresponding to the front-end page. After obtaining the requirement document of the UI interface, the computer device can use a keyword extraction algorithm to split the requirement description in the requirement document into multiple keywords. The multiple keywords can correspond to at least one component to be developed. Optionally, the user can directly enter the requirement document or enter at least one requirement description corresponding to the UI interface. The computer device generates the requirement document for the UI interface based on the at least one requirement description.

[0071] Then, after obtaining the keywords corresponding to at least one component to be developed, the computer device can match the keywords of each component to be developed with the keywords of each general component in the above-mentioned preset general component library for each component to be developed, and determine whether there is a general component corresponding to the component to be developed in the preset general component library; if it is determined that there is a candidate general component corresponding to the component to be developed in the preset general component library, then the code block corresponding to the candidate general component can be obtained and the candidate general component can be rendered and displayed. When the user determines that the candidate general component meets the design requirements of the UI interface, the candidate general component can be determined as a target component of the UI interface. On the other hand, if it is determined that there is no candidate general component corresponding to the component to be developed in the preset general component library, then the component to be developed can be determined as a component to be developed that failed to match.

[0072] Step 202: for the component to be developed that fails to match, determine the target business rule corresponding to the component to be developed that fails to match from the business rule database, and generate a first code snippet according to the target business rule.

[0073] The business rule database may include a business rule list corresponding to multiple components, and a business rule list includes multiple business rules. Business rules are used to represent the control logic of components. A business rule and a component can form a component that complies with specific rules. For example, a selection box component and a business rule that supports fuzzy search can form a selection box that supports fuzzy search. Optionally, the business rule database can be constructed based on the existing business architecture process model, the business rules describe the control logic of the system, including but not limited to the data types supported by the component (such as the component can only support the input of numbers, or can support numbers, letters and characters), the word limit of the component (such as the input word count ≤ 200 words) and other control logic.

[0074] Specifically, for each component to be developed that fails to match, the target business rule corresponding to the component to be developed that fails to match can be determined from the business rule database, and then, after determining the target business rule corresponding to the component to be developed that fails to match, the first code snippet corresponding to the component to be developed that fails to match can be generated according to the target business rule. Optionally, a list of business rules corresponding to the component to be developed that fails to match can be first determined from the business rule database, and then the target business rule corresponding to the component to be developed that fails to match can be determined from the business rule list; optionally, the business rule with the highest matching degree can be determined from the business rule list according to the keywords of the component to be developed that fails to match, as the target business rule corresponding to the component to be developed that fails to match.

[0075] Optionally, after determining the target business rule, a component to be developed having the target business rule can be obtained; the computer device can generate a first code snippet corresponding to the component to be developed based on the code snippet corresponding to the target business rule, and the first code snippet can be rendered to obtain the component to be developed having the target business rule.

[0076] Step 203: for the component to be developed that fails to match, determine the target business activity corresponding to the component to be developed that fails to match from the business activity database, and generate a second code snippet according to the target business activity.

[0077] The business activity database includes business activity lists corresponding to multiple components, one business activity list includes at least one business activity, and the business activity is used to represent the data interaction logic between the component and the backend. Optionally, the business activity lists corresponding to different components can be determined based on the docking of the existing business architecture process model and IT architecture, and then the business activity database can be constructed.

[0078] Specifically, for each component to be developed that fails to match, the target business activity corresponding to the component to be developed that fails to match can also be determined from the business activity database, and then, after the target business activity corresponding to the component to be developed that fails to match is determined, a second code snippet corresponding to the component to be developed that fails to match can be generated based on the target business activity. Optionally, a list of business activities corresponding to the component to be developed that fails to match can be first determined from the business activity database, and then the target business activity corresponding to the component to be developed that fails to match can be determined from the business activity list; optionally, based on the keywords of the component to be developed that fails to match, the business activity with the highest matching degree can be determined from the business activity list as the target business activity corresponding to the component to be developed that fails to match.

[0079] Optionally, after determining the target business activity, the computer device can generate a second code snippet corresponding to the component to be developed based on the code snippet corresponding to the target business activity. After rendering, the second code snippet can obtain the component to be developed that can interact with the backend and obtain backend data.

[0080] Step 204: Generate a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet.

[0081] For each component to be developed that fails to match, after obtaining the first code snippet and the second code snippet corresponding to the component to be developed that fails to match, the first code snippet and the second code snippet can be fused to obtain the target code snippet corresponding to the component to be developed that fails to match; then, the computer device can generate a front-end code corresponding to the UI interface based on the target code snippets corresponding to each component to be developed that fails to match, and / or the code snippets of each target component that successfully matches.

[0082] That is to say, if all components required for the UI interface are successfully matched from the preset general component library according to the requirement document of the UI interface, then the front-end code corresponding to the UI interface can be generated according to the code snippets of each successfully matched target component. If some components required for the UI interface are successfully matched from the preset general component library according to the requirement document of the UI interface, and for the other part of the components that fail to match, the target code snippets corresponding to the components to be developed that fail to match are obtained through the above steps, then the front-end code corresponding to the UI interface can be generated according to the code snippets of the target components that successfully match and the target code snippets corresponding to the components to be developed that fail to match. If no components required for the UI interface are matched from the preset general component library according to the requirement document of the UI interface, for the components to be developed that fail to match, the target code snippets corresponding to the components to be developed that fail to match are obtained through the above steps, then the front-end code corresponding to the UI interface can be generated according to the target code snippets corresponding to the components to be developed that fail to match.

[0083] In the above-mentioned front-end code generation method, keywords of the components to be developed are obtained from the requirements document of the UI interface, and the keywords of the components to be developed are matched with the keywords of the preset components in the preset general component library to obtain the components to be developed that fail to match; for the components to be developed that fail to match, the target business rules corresponding to the components to be developed that fail to match are determined from the business rule database, and a first code snippet is generated according to the target business rules; for the components to be developed that fail to match, the target business activities corresponding to the components to be developed that fail to match are determined from the business activity database, and a second code snippet is generated according to the target business activity; finally, the front-end code corresponding to the UI interface is generated according to the first code snippet and the second code snippet. That is to say, the front-end code generation method in the embodiment of the present application can not only obtain the static logic code corresponding to the component to be developed according to the requirement document of the UI interface, but also obtain the back-end interaction logic code corresponding to the component to be developed, so that the generated front-end code of the UI interface already includes the required business logic, and thus, the R&D personnel no longer need to confirm the business logic of the page with the product manager or designer during the development of the front-end page based on the generated front-end code in this embodiment, thereby reducing communication costs, and reducing the workload rereading rate of the R&D personnel, saving labor R&D costs, and improving the R&D process of the front-end page, thereby improving the R&D efficiency of the front-end page.

[0084] Figure 3 This embodiment relates to an optional implementation process in which a computer device matches the keywords of a component to be developed with the keywords of a preset component in a preset general component library to obtain a component to be developed that fails to match. Based on the above embodiment, Figure 3 As shown, the above step 201 includes:

[0085] Step 301 : Match the keywords of the component to be developed with the keywords of each preset component in the preset general component library respectively to obtain a first matching degree corresponding to each preset component.

[0086] Among them, the keyword of the component to be developed may include at least one, and the keyword of the preset component may also include at least one.

[0087] Optionally, when calculating the first matching degree between the component to be developed and the preset component, the matching degree between each keyword of the component to be developed and each keyword of the preset component can be calculated respectively, and then the first matching degree between the component to be developed and the preset component can be determined according to the sum of each matching degree; or at least one keyword of the component to be developed can be formed into a first keyword vector, at least one keyword of the preset component can be formed into a second keyword vector, and the matching degree between the first keyword vector and the second keyword vector can be calculated, so as to obtain the first matching degree between the component to be developed and the preset component.

[0088] Optionally, for each preset component, multiple keywords of the component to be developed can be matched with the keywords of the preset component respectively to obtain the matching degree of each keyword of the component to be developed and the preset component respectively; that is, the matching degree between a keyword of the component to be developed and at least one keyword of the preset component can be calculated to obtain the matching degree between a keyword of the component to be developed and the preset component; then, the first matching degree between the component to be developed and the preset component can be calculated based on the matching degree of each keyword of the component to be developed and the preset component respectively, and the preset weights of each keyword of the component to be developed.

[0089] Optionally, the preset weights of the keywords of the component to be developed can be determined by using the existing TextRank algorithm, wherein the TextRank algorithm extracts words from the matching text (the UI interface requirement document) itself, and calculates the weights of candidate keywords using the relationship between local words, and sorts them, and further marks them in the original matching text to generate the final keywords, the results of which may include multiple keywords or keyword groups, etc. The candidate keyword weight calculation formula is shown in formula (1).

[0090]

[0091] Among them, WS(V i ) represents the weight of sentence i, and the sum on the right represents the contribution of each adjacent sentence to the sentence. In a single document, it can be roughly considered that all sentences are adjacent, and there is no need to generate and extract multiple windows like multiple documents. Only a single document window is required. ji Represents the similarity between two sentences, WS(V j ) represents the weight of sentence j in the last iteration, d is the damping coefficient, which is generally 0.85, In(V i ) indicates V i The collection of nodes, Out(V j ) indicates V j A collection of nodes.

[0092] According to the above formula, the preset weights corresponding to the keywords of the component to be developed can be determined. Then, according to the matching degree between the keywords of the component to be developed and the preset components, and the preset weights of the keywords of the component to be developed, the first matching degree between the component to be developed and the preset components can be calculated, as shown in formula (2).

[0093]

[0094] Among them, MD represents the first matching degree between the component to be developed and the preset component, MV represents the keyword set of the component to be developed, and WS (V i ) indicates the keyword V i The preset weight of D(V i ) indicates the keyword V i The degree of match with the preset component. If the number of matched keywords is the same, the higher the weight of the matched keyword, the higher the match; if the weight of the matched keywords is the same, the more matched keywords, the higher the match; the higher the match, the stronger the correlation between the component to be developed and the preset component.

[0095] Step 302, when the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, and an instruction is obtained to characterize that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirement document, determine that the component to be developed is a component to be developed that has failed to match.

[0096] Optionally, after determining the first degree of match between the component to be developed and each preset component in the preset general component library, the computer device can filter out preset components whose first degree of match is greater than or equal to the preset degree of match according to a preset matching threshold, and render these preset components to the display interface so that the user can confirm whether these preset components meet the actual requirements of the UI interface. If the user determines that the general component function corresponding to the preset component meets the functional requirements of the component to be developed in the requirements document, then it can be determined that the match is successful, and the computer device can determine the preset component determined by the user to meet the functional requirements of the component to be developed in the requirements document as a target component of the UI interface.

[0097] If the user determines that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirements document, then the component to be developed can be determined as a component to be developed that failed to match, and the component to be developed that failed to match can be further edited to obtain a component that meets the user's needs.

[0098] Step 303: When the first matching degree corresponding to the preset component is less than the preset matching degree threshold, the component to be developed is determined to be a component to be developed that fails to match.

[0099] On the other hand, if the first matching degree corresponding to the preset component is less than the preset matching degree threshold, the component to be developed can be directly determined as a component to be developed that fails to match.

[0100] Optionally, in this case, the computer device can determine whether the user has uploaded the UI design drawing corresponding to the UI interface. If it has been uploaded, the existing front-end code generation tool (such as the imgcook plug-in in the existing sketch) can be used to parse the UI design drawing to obtain multiple components; then, the computer device can also determine the component corresponding to the keyword from the multiple components as the component to be developed based on the keyword corresponding to the component to be developed that failed to match.

[0101] If the user has not uploaded the UI design drawing corresponding to the UI interface, a prompt message may be output to prompt the user to upload the UI design drawing; for example, a prompt window may be popped up in the form of a page pop-up window, and the prompt content of the prompt window may be "Please upload the UI drawing". Furthermore, the computer device may receive the UI design drawing uploaded by the user, and parse the UI design drawing to obtain multiple components, and may determine the component corresponding to the keyword from the multiple components as the component to be developed based on the keyword corresponding to the component to be developed that failed to match. Optionally, the computer device may also render all the parsed multiple components into a display interface for the user to view and perform related processing operations.

[0102] In this embodiment, the keywords of the component to be developed are matched with the keywords of each preset component in the preset general component library respectively to obtain the first matching degree corresponding to each preset component; when the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, and the user determines that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirement document, the component to be developed is determined to be a component to be developed that has failed to match; when the first matching degree corresponding to the preset component is less than the preset matching degree threshold, the component to be developed is determined to be a component to be developed that has failed to match; the recognition accuracy of the component to be developed can be improved, the matching degree between the component to be developed and the user's development requirements can be improved, and the user experience can be improved.

[0103] Figure 4 : is a flow chart of a front-end code generation method in another embodiment. This embodiment relates to an optional implementation process in which a computer device determines a target business rule corresponding to a component to be developed that fails to match from a business rule database, and generates a first code snippet according to the target business rule. Based on the above embodiment, Figure 4 As shown, the above step 202 includes:

[0104] Step 401 : for the component to be developed that fails to match, multiple candidate business rules corresponding to the component to be developed that fails to match are determined from a business rule database.

[0105] The business rule database includes business rule lists corresponding to multiple components, and each business rule list includes multiple business rules.

[0106] Step 402 : Match the keywords of the component to be developed that failed to match with multiple candidate business rules respectively to obtain a second matching degree corresponding to each candidate business rule.

[0107] Optionally, the method for calculating the second matching degree between the component to be developed that fails to match and each candidate business rule can refer to the method for calculating the first matching degree between the component to be developed and the preset component in the above step 301, and the relevant content will not be described here.

[0108] Step 403 : taking the candidate business rule corresponding to the maximum matching degree among the second matching degrees corresponding to the candidate business rules as the target business rule corresponding to the component to be developed that fails to match, and generating a first code snippet according to the target business rule.

[0109] In this embodiment, for the component to be developed that failed to match, multiple candidate business rules corresponding to the component to be developed that failed to match are determined from the business rule database, and the keywords of the component to be developed that failed to match are matched with the multiple candidate business rules respectively to obtain the second matching degree corresponding to each candidate business rule; then, the candidate business rule corresponding to the maximum matching degree among the second matching degrees corresponding to each candidate business rule is used as the target business rule corresponding to the component to be developed that failed to match, and a first code snippet is generated according to the target business rule; the matching degree of the first code snippet can be improved, and the accuracy of the static logic code can be improved.

[0110] In an optional embodiment of the present application, after the above-mentioned step 403, the method may also include: rendering the generated first code snippet to a display interface to display the component to be developed with the target business rule, so that the user can determine whether it meets the development requirements; if the user determines that the component to be developed with the target business rule does not meet the development requirements, the user can also customize the static logic of the component to be developed.

[0111] Optionally, in the above step 402, the computer device can obtain the second matching degree corresponding to the component to be developed that failed to match and each candidate business rule. Then, the computer device can sort the candidate business rules according to the second matching degree from high to low in descending order, and output the sorted candidate business rules to the display interface for display; for example: each candidate business rule can be sorted according to the second matching degree and displayed on the left side of the display interface, so that the user can select the required business rule based on the sorted list; then, the computer device can generate a new first code snippet corresponding to the component to be developed according to the business rule selected by the user.

[0112] In this embodiment, the computer device can output and display each candidate business rule corresponding to the component to be developed according to the second matching degree, and generate a new first code snippet corresponding to the component to be developed according to the business rules selected by the user, which greatly improves the interactivity, flexibility and scalability of front-end code generation, improves the user experience, and can also improve the convenience and operability of subsequent code maintenance.

[0113] Figure 5 2 is a flow chart of a front-end code generation method in another embodiment. This embodiment relates to an optional implementation process of a computer device generating a first code fragment according to a target business rule. Based on the above embodiment, Figure 5 As shown, the above step 403 includes:

[0114] Step 501: According to the target business rule, determine a first target method corresponding to the target business rule from a preset general method library.

[0115] Among them, the general methods in the preset general method library can be some commonly used logic processing code segments of general components or general modules, such as anti-shake functions, interface interaction functions, etc. The change frequency of the general methods in the general method library is generally relatively low. Based on the existing code blocks, professional and technical personnel can extract general methods and set detailed functional descriptions and configuration information for them to construct the preset general method library. In addition, the preset general method library can be stored in a computer device, or in other devices that are connected to the computer device for communication, or in the cloud, etc., and the embodiments of the present application do not limit this.

[0116] Optionally, the system framework and construction process for constructing the preset general method library can refer to the system framework and construction process for constructing the preset general component library in the above step 201, so as to obtain a preset general method library that includes the association relationship between the code files of multiple general methods and their functional descriptions, which will not be repeated here.

[0117] Specifically, the computer device can match the rule content of the target business rule with the functional description information of each method in the preset general method library to obtain at least one first target method corresponding to the target business rule; optionally, the computer device can, based on the matching degree between the target business rule and each method, select a method with a matching degree greater than or equal to a preset threshold as the first target method.

[0118] Step 502: Generate a first code snippet according to the target business rule and the first target method.

[0119] Optionally, after determining the first target method corresponding to the target business rule, the computer device can obtain the code segment corresponding to the first target method from the preset general method library, and then generate the first code segment according to the code segment corresponding to the first target method. Optionally, in the case where the first target method includes multiple code segments, the code segments corresponding to the first target methods can be merged or spliced ​​to generate the first code segment. Optionally, the computer device can also associate the first code segment with the target business rule and store the association relationship for subsequent search and use, so as to improve the efficiency of generating code segments.

[0120] In this embodiment, according to the target business rule, the first target method corresponding to the target business rule is determined from the preset general method library, and the first code snippet is generated according to the target business rule and the first target method; thereby, there is no need to pre-set a fixed code snippet for each target business rule, which can reduce the workload of R&D personnel, reduce the storage capacity of computer equipment, and improve the work efficiency of computer equipment. In addition, different first code snippets corresponding to business rules can be flexibly generated to improve development flexibility.

[0121] Figure 6 : is a flow chart of a front-end code generation method in another embodiment. This embodiment relates to an optional implementation process in which a computer device determines a target business activity corresponding to a component to be developed that fails to match from a business activity database, and generates a second code snippet according to the target business activity. Based on the above embodiment, Figure 6 As shown, the above step 203 includes:

[0122] Step 601 : for the component to be developed that fails to match, multiple candidate business activities corresponding to the component to be developed that fails to match are determined from a business activity database.

[0123] The business activity database includes business activity lists corresponding to multiple components, each business activity list corresponding to a component includes at least one business activity, and each business activity has corresponding relevant functional description information for matching with the component.

[0124] Optionally, based on the above-mentioned business activity database, for the components to be developed that failed to match, multiple candidate business activities corresponding to the components to be developed that failed to match can be determined from the business activity database, that is, a list of business activities corresponding to the components to be developed that failed to match is determined, and each business activity in the business activity list is a candidate business activity.

[0125] Step 602 : Match the keywords of the component to be developed that failed to match with each candidate business activity respectively, and obtain a third matching degree corresponding to each candidate business activity.

[0126] Optionally, the keywords of the component to be developed that failed to match can be matched with the functional description information of each candidate business activity to obtain a third matching degree corresponding to the component to be developed that failed to match and each candidate business activity respectively; wherein, the calculation method of the third matching degree can refer to the calculation method of the first matching degree between the component to be developed and the preset component in the above step 301, which will not be repeated here.

[0127] Step 603: The candidate business activity corresponding to the maximum matching degree among the third matching degrees corresponding to the candidate business activities is used as the target business activity corresponding to the component to be developed that failed to match, and a second code snippet is generated according to the target business activity.

[0128] In this embodiment, for the component to be developed that failed to match, multiple candidate business activities corresponding to the component to be developed that failed to match are determined from the business activity database; the keywords of the component to be developed that failed to match are matched with each candidate business activity respectively to obtain the third matching degree corresponding to each candidate business activity; the candidate business activity corresponding to the maximum matching degree among the third matching degrees corresponding to each candidate business activity is used as the target business activity corresponding to the component to be developed that failed to match, and a second code snippet is generated according to the target business activity; the matching degree of the second code snippet can be improved, and the accuracy of the interactive logic code can be improved.

[0129] Figure 7 FIG. 1 is a flow chart of a front-end code generation method in another embodiment. This embodiment relates to an optional implementation process of a computer device generating a second code fragment according to a target business activity. Based on the above embodiment, Figure 7 As shown, the above step 603 includes:

[0130] Step 701 : According to a target business activity, a plurality of candidate business tasks corresponding to the target business activity are determined from a business activity database.

[0131] Among them, the business activity database includes a business activity list corresponding to at least one component, and the business activity list corresponding to each component includes at least one business activity; optionally, each business activity can correspond to a business task list, and the business task list can include at least one business task; then, each business task can also correspond to a business step list, and the business step list can include at least one business step; it should be noted that business activities, business tasks and business steps can be the division of business logic corresponding to a component to reflect different levels, which is used to subdivide the business logic, and the business steps are detailed manifestations of the business processing flow. In addition, in the business activity database, each business activity, each business task and each business step has corresponding relevant functional description information for matching with the component.

[0132] Optionally, after determining the target business activity corresponding to the component to be developed that failed to match, the computer device can further determine a business task list corresponding to the target business activity based on the business activity database, and use each business task in the business task list as multiple candidate business tasks corresponding to the target business activity.

[0133] Step 702 : Match the keywords of the component to be developed with each candidate business task respectively, and determine the target business task from the multiple candidate business tasks.

[0134] Optionally, the keywords of the component to be developed can be matched with the functional description information of each candidate business task to obtain a fourth matching degree corresponding to the component to be developed and each candidate business task; wherein, the calculation method of the fourth matching degree can refer to the calculation method of the first matching degree between the component to be developed and the preset component in the above step 301, which will not be repeated here.

[0135] Optionally, the computer device may use the candidate business task corresponding to the maximum matching degree among the fourth matching degrees corresponding to the candidate business tasks as the target business task corresponding to the component to be developed that failed to match.

[0136] Step 703: According to the target business task, a plurality of candidate business steps corresponding to the target business task are determined from the business activity database.

[0137] Furthermore, the computer device may also determine a business step list corresponding to the target business task according to the business activity database, and use each business step in the business step list as a plurality of candidate business steps corresponding to the target business task.

[0138] Step 704 : Match the keywords of the component to be developed with each candidate business step respectively, and determine the target business step from the multiple candidate business steps.

[0139] Optionally, the keywords of the component to be developed can be matched with the functional description information of each candidate business step to obtain the fifth matching degree corresponding to the component to be developed and each candidate business step respectively; wherein, the calculation method of the fifth matching degree can refer to the calculation method of the first matching degree between the component to be developed and the preset component in the above step 301, which will not be repeated here.

[0140] Optionally, the computer device may use the candidate business step corresponding to the maximum matching degree among the fifth matching degrees corresponding to the candidate business steps as the target business step corresponding to the component to be developed that has failed to match.

[0141] Step 705: Generate a second code snippet according to the target business step.

[0142] In this embodiment, according to the target business activity, multiple candidate business tasks corresponding to the target business activity are determined from the business activity database; the keywords of the component to be developed are matched with each candidate business task respectively, and the target business task is determined from the multiple candidate business tasks; according to the target business task, multiple candidate business steps corresponding to the target business task are determined from the business activity database; the keywords of the component to be developed are matched with each candidate business step respectively, and the target business step is determined from the multiple candidate business steps; a second code snippet is generated according to the target business step; through layer-by-layer matching, the target business step corresponding to the component to be developed that failed to match is finally obtained, and the second code snippet corresponding to the component to be developed that failed to match is generated, which can greatly improve the matching degree of the second code snippet and improve the accuracy of the interactive logic code.

[0143] In an optional embodiment of the present application, based on the above Figure 6 and Figure 7 In the illustrated embodiment, the method may further include: rendering the generated second code snippet to a display interface to obtain a component to be developed with interactive logic, so that a user can determine whether it meets development requirements; if the user determines that the component to be developed with interactive logic does not meet development requirements, the user may also customize the interactive logic of the component to be developed.

[0144] Optionally, in the above step 602, the computer device can obtain the third matching degree corresponding to the component to be developed that failed to match and each candidate business activity. Then, the computer device can sort the candidate business activities according to the third matching degree from high to low in descending order, and output the sorted candidate business activities to the display interface for display; for example: each candidate business activity can be displayed on the right side of the display interface in order of the third matching degree, so that the user can select the required business activity based on the sorted list.

[0145] Furthermore, the computer device can determine, from the business activity database, a plurality of candidate business tasks corresponding to the business activity selected by the user, based on the business activity selected by the user, and match the keywords of the component to be developed with the functional description information of these candidate business tasks to obtain a fourth degree of matching corresponding to the component to be developed and these candidate business tasks respectively; then, the computer device can sort the plurality of candidate business tasks corresponding to the business activity selected by the user in descending order based on the fourth degree of matching, and output them on the right side of the display interface, where the plurality of candidate business tasks sorted in descending order can be displayed as a subordinate list of the business activity selected by the user.

[0146] At this point, the user can select a business task from a plurality of candidate business tasks corresponding to the business activity selected by the user.

[0147] Similarly, the computer device can determine, from the business activity database, multiple candidate business steps corresponding to the business task selected by the user, and match the keywords of the component to be developed with the functional description information of these candidate business steps to obtain the fifth degree of matching corresponding to the component to be developed and these candidate business steps respectively; then, the computer device can sort the multiple candidate business steps corresponding to the business task selected by the user in descending order according to the fifth degree of matching, and output them on the right side of the display interface, where the multiple candidate business steps sorted in descending order can be displayed as a subordinate list of the business task selected by the user.

[0148] At this point, the user can select a business step from a plurality of candidate business steps corresponding to the business task selected by the user.

[0149] Finally, the computer device may generate a second code snippet according to the business step selected by the user.

[0150] In this embodiment, the computer device can output and display each candidate business activity corresponding to the component to be developed according to the third degree of matching, redetermine the candidate business tasks according to the business activities selected by the user, and can output and display these candidate business tasks according to the fourth degree of matching, so that the user can customize the selection of the desired business tasks; then, redetermine the candidate business steps according to the business tasks selected by the user, and can output and display these candidate business steps according to the fifth degree of matching, so that the user can customize the selection of the desired business steps; finally, generate a new second code snippet according to the business steps customized by the user, which greatly improves the interactivity, flexibility and scalability of the front-end code generation, improves the user experience, and can also improve the convenience and operability of the later code maintenance.

[0151] Figure 8FIG. 1 is a flow chart of a front-end code generation method in another embodiment. This embodiment relates to an optional implementation process of a computer device generating a second code fragment according to a target business step. Based on the above embodiment, Figure 8 As shown, the above step 705 includes:

[0152] Step 801: According to the target business step, determine the target interface corresponding to the target business step from the backend interface database.

[0153] The backend interface database includes backend interfaces corresponding to multiple business steps. Business steps can correspond to ACS (Application Controller Service) in IT architecture. ACS corresponds to a backend interface service. The backend interface service needs to call the backend interface. One ACS can correspond to at least one backend interface. In actual applications, one business step can correspond to multiple ACS, that is, one business step can correspond to multiple different backend interfaces. Multiple business steps can also correspond to one ACS, that is, multiple business steps can correspond to at least one identical backend interface. Optionally, the backend interface database can be pre-built based on the existing business architecture process model and IT architecture, so as to obtain the interaction logic with the backend.

[0154] Step 802: According to the target interface, determine a second target method corresponding to the target interface from a preset general method library.

[0155] The preset general method library may be the preset general method library in step 501 above.

[0156] Optionally, the interface information of the target interface can be matched with the functional description information of each method in the preset general method library to obtain at least one second target method corresponding to the target interface; optionally, the computer device can use the method with a matching degree greater than or equal to a preset threshold as the second target method based on the matching degree between the target interface and each method. Optionally, the interface information of the target interface includes but is not limited to the Chinese name of the interface, the English name of the interface, the definition of the interface, etc.

[0157] Step 803: Generate a second code snippet according to the target interface and the second target method.

[0158] Optionally, after determining the second target method corresponding to the target interface, the computer device can obtain the code segment corresponding to the second target method from the preset general method library, and then generate the second code segment according to the code segment corresponding to the second target method. Optionally, in the case where the second target method includes multiple code segments, the code segments corresponding to the second target methods can be fused or spliced ​​to generate the second code segment. Optionally, the computer device can also associate the second code segment with the target interface and store the association relationship for subsequent search and use, so as to improve the efficiency of generating code segments.

[0159] In this embodiment, according to the target business step, the target interface corresponding to the target business step is determined from the back-end interface database; according to the target interface, the second target method corresponding to the target interface is determined from the preset general method library; according to the target interface and the second target method, a second code fragment is generated; thereby, there is no need to pre-set a fixed code fragment for each target interface, which can reduce the workload of R&D personnel, reduce the storage capacity of computer equipment, and improve the working efficiency of computer equipment. In addition, different second code fragments corresponding to the target interface can be flexibly generated to improve development flexibility.

[0160] In an optional embodiment of the present application, a complete flow chart of a front-end code generation method is provided, such as Fig. 9 As shown; including the following steps:

[0161] Step 901: The user types a description of the UI interface requirements in a text box.

[0162] Step 902: According to a preset keyword extraction algorithm, the requirement description is split into corresponding keywords, and weights are set for the keywords.

[0163] Step 903: Receive the keywords generated in step 902, and accurately match the component function description field in the preset general component library.

[0164] Step 904: Determine whether there is a corresponding component. If a corresponding general component is matched, go to step 905; if not, go to step 906.

[0165] Step 905: The page displays the components generated by the code block, and the user determines whether it meets the requirements. If it does, the code can be directly exported. If it does not, the user can continue editing, that is, jump to step 910.

[0166] Step 906: Determine whether the user has uploaded the UI design drawing, if so, go to step 909. If not, go to step 907.

[0167] Step 907: A pop-up window pops up on the page, prompting the user to "Please upload a UI diagram".

[0168] Step 908: The user uploads the UI design drawing.

[0169] Step 909: Based on the imgcook plug-in in the existing sketch, the design manuscript is parsed into initial components (which may also be initial control elements) and rendered in the middle of the page.

[0170] Step 910: For each initial component, the user clicks an initial component.

[0171] Step 911: Based on the business rule database, all business rules associated with the initial component clicked by the user are obtained and assigned to the rule list. Keyword matching is performed based on all candidate keywords split in step 902 and the rule description field in each rule in the rule list, and the matching degree is calculated respectively. The matching degrees are sorted and displayed on the left side of the page, and the rule with the highest matching degree is processed in step 912.

[0172] Step 912: Add the rule with the highest matching degree to the initial component, determine the component corresponding to the rule with the highest matching degree, and return the corresponding code snippet.

[0173] Step 913: According to the rule description field in the rule with the highest matching coefficient, the corresponding method is matched in the preset general method library. If the corresponding method is found, the code snippet is returned as the logic processing involved in the component.

[0174] Step 914: The code segment corresponding to the initial component, the code segment of the component corresponding to the rule with the highest matching coefficient, and the code segment of the method corresponding to the rule with the highest matching coefficient are concatenated and displayed to the user.

[0175] Step 915: If the user feels that it meets his requirements, he clicks OK to generate a component that meets the logical requirements.

[0176] If the user feels that the current code does not meet his requirements, the user can select one of the rules from the rule list on the left side of the page and go to step 912 to add the rule selected by the user to the initial component.

[0177] Step 916: For the initial component selected by the user, obtain all business activities corresponding to the initial component from the business activity database and assign them to the business activity list. Perform keyword matching based on the keywords split out in step 902 and the activity name field of each activity in the business activity list, calculate the matching coefficient, and display them on the right side of the page in order of the matching coefficient.

[0178] Step 917: Based on the business activity list with matching degree obtained in step 916, determine the business activity with the highest matching degree, automatically obtain its associated business tasks, and assign the business task list. Based on the keywords separated in step 902 and the task name field in each task in the business task list, perform keyword matching, calculate the matching coefficient, and display them on the right side of the page in order of matching degree.

[0179] Step 918: According to the business task list with matching degree obtained in step 917, determine the business task with the highest matching degree, automatically obtain the business steps associated with it, and assign the business step list. According to the keywords separated in step 902 and each step in the business step list, perform keyword matching, calculate the matching degree system, and display them on the right side of the page in order of matching degree; among them, the business step with the highest matching degree is processed in step 919.

[0180] Step 919: Match the corresponding backend interface in the above-mentioned backend interface database, add interaction events for the initial component, extract interaction methods (methods for calling backend interfaces) from the preset general method library, and thus splice and generate interaction codes between the initial component and the backend.

[0181] Step 920: If the user feels that it meets his requirements, click OK; if the user feels that the current code does not meet his requirements, the user can select business activities, business tasks, and business steps in sequence, finally determine a business step, and go to step 919.

[0182] Step 921: If the user determines the component that meets the logic requirements in step 915 and determines the component with backend interaction logic in step 920, the generated code is automatically exported as the code of the initial component selected by the user.

[0183] Based on the same steps as above, the user can select other components that need to be edited, edit them, generate the code corresponding to each component, and finally, based on the code of each component determined by the user, generate the front-end code of the UI interface.

[0184] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0185] Based on the same inventive concept, the embodiment of the present application also provides a front-end code generation device for implementing the front-end code generation method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more front-end code generation device embodiments provided below can refer to the limitations of the front-end code generation method above, and will not be repeated here.

[0186] In one embodiment, Fig.10 As shown, a front-end code generation device is provided, including: an acquisition module 1001, a first generation module 1002, a second generation module 1003 and a third generation module 1004, wherein:

[0187] The acquisition module 1001 is used to acquire keywords of the components to be developed from the requirement document of the UI interface, match the keywords of the components to be developed with keywords of preset components in the preset general component library, and acquire the components to be developed that fail to match.

[0188] The first generating module 1002 is used to determine, for the component to be developed that fails to match, a target business rule corresponding to the component to be developed that fails to match from a business rule database, and generate a first code snippet according to the target business rule.

[0189] The second generating module 1003 is used to determine, for the component to be developed that fails to match, a target business activity corresponding to the component to be developed that fails to match from the business activity database, and generate a second code snippet according to the target business activity.

[0190] The third generating module 1004 is used to generate a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet.

[0191] In one embodiment, the acquisition module 1001 includes an acquisition unit, a first determination unit and a second determination unit; wherein the acquisition unit is used to match the keywords of the component to be developed with the keywords of each preset component in the preset general component library respectively to obtain the first matching degree corresponding to each preset component; the first determination unit is used to determine that the component to be developed is a component to be developed that has failed to match when the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold and an instruction is obtained to characterize that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirement document; the second determination unit is used to determine that the component to be developed is a component to be developed that has failed to match when the first matching degree corresponding to the preset component is less than the preset matching degree threshold.

[0192] In one embodiment, the first generation module 1002 includes a third determination unit, a second acquisition unit and a first generation unit; wherein the third determination unit is used to determine, for the component to be developed that failed to match, multiple candidate business rules corresponding to the component to be developed that failed to match from the business rule database; the second acquisition unit is used to match the keywords of the component to be developed that failed to match with the multiple candidate business rules respectively, to obtain the second matching degree corresponding to each candidate business rule; the first generation unit is used to use the candidate business rule corresponding to the maximum matching degree among the second matching degrees corresponding to each candidate business rule as the target business rule corresponding to the component to be developed that failed to match, and generate a first code snippet according to the target business rule.

[0193] In one of the embodiments, the first generating unit is specifically configured to determine, according to the target business rule, a first target method corresponding to the target business rule from a preset general method library; and to generate a first code snippet according to the target business rule and the first target method.

[0194] In one embodiment, the third generation module 1004 includes a fourth determination unit, a third acquisition unit and a second generation unit; wherein the fourth determination unit is used to determine, for the component to be developed that failed to match, multiple candidate business activities corresponding to the component to be developed that failed to match from the business activity database; the third acquisition unit is used to match the keywords of the component to be developed that failed to match with each candidate business activity respectively, to obtain a third matching degree corresponding to each candidate business activity; the second generation unit is used to use the candidate business activity corresponding to the maximum matching degree among the third matching degrees corresponding to each candidate business activity as the target business activity corresponding to the component to be developed that failed to match, and generate a second code snippet based on the target business activity.

[0195] In one of the embodiments, the second generation unit is specifically used to determine, based on the target business activity, multiple candidate business tasks corresponding to the target business activity from a business activity database, respectively match the keywords of the component to be developed with each candidate business task, and determine the target business task from the multiple candidate business tasks; then, based on the target business task, determine, from the business activity database, multiple candidate business steps corresponding to the target business task, respectively match the keywords of the component to be developed with each candidate business step, and determine the target business step from the multiple candidate business steps; and then, generate a second code snippet based on the target business step.

[0196] In one of the embodiments, the second generation unit is specifically used to determine, based on the target business step, a target interface corresponding to the target business step from a backend interface database; based on the target interface, determine, from a preset general method library, a second target method corresponding to the target interface; and generate a second code snippet based on the target interface and the second target method.

[0197] In one of the embodiments, the acquisition unit is specifically used to match multiple keywords of the component to be developed with the keywords of the preset component for each preset component, and obtain the matching degree between each keyword of the component to be developed and the preset component; according to the matching degree between each keyword of the component to be developed and the preset component, and the preset weight of each keyword, calculate the first matching degree between the component to be developed and the preset component.

[0198] Each module in the above-mentioned front-end code generation device can be implemented in whole or in part by software, hardware and a combination thereof. Each of the above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to each of the above modules.

[0199] In one embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the steps of the front-end code generation method in the above-mentioned embodiments are implemented.

[0200] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the front-end code generation method in the above-mentioned embodiments are implemented.

[0201] In one embodiment, a computer program product is provided, including a computer program, which implements the steps of the front-end code generation method in the above-mentioned embodiments when executed by a processor.

[0202] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0203] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0204] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0205] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A front-end code generation method, characterized in that: The method comprises: Obtain keywords of the components to be developed from the requirements document of the UI interface, match the keywords of the components to be developed with keywords of preset components in the preset general component library, and obtain the components to be developed that fail to match; For the component to be developed that fails to match, according to the keyword of the component to be developed that fails to match, determine the target business rule corresponding to the component to be developed that fails to match from the business rule database, and generate a first code snippet according to the target business rule; For the component to be developed that failed to match, according to the keyword of the component to be developed that failed to match, determine the target business activity corresponding to the component to be developed that failed to match from the business activity database, and generate a second code snippet according to the target business activity; Generate a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet; The target business rule is used to represent the control logic of the component to be developed that fails to match, and the target business activity is used to represent the data interaction logic between the component to be developed that fails to match and the backend.

2. The method according to claim 1, characterized in that The step of matching the keywords of the component to be developed with the keywords of the preset components in the preset general component library to obtain the component to be developed that fails to match includes: Matching the keywords of the component to be developed with the keywords of each preset component in the preset general component library respectively, to obtain a first matching degree corresponding to each preset component; If the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, and an instruction is obtained for characterizing that the general component function corresponding to the preset component does not meet the functional requirements of the component to be developed in the requirement document, then the component to be developed is determined to be a component to be developed that fails to match; If the first matching degree corresponding to the preset component is less than the preset matching degree threshold, the component to be developed is determined to be a component to be developed that fails to match.

3. The method according to claim 1, characterized in that The step of determining, for the component to be developed that fails to match, a target business rule corresponding to the component to be developed that fails to match from a business rule database, and generating a first code snippet according to the target business rule includes: For the component to be developed that fails to match, determining a plurality of candidate business rules corresponding to the component to be developed that fails to match from a business rule database; Matching the keywords of the component to be developed that failed to match with the multiple candidate business rules respectively, to obtain a second matching degree corresponding to each of the candidate business rules; The candidate business rule corresponding to the maximum matching degree among the second matching degrees corresponding to the candidate business rules is used as the target business rule corresponding to the component to be developed that fails to match, and a first code snippet is generated according to the target business rule.

4. The method according to claim 3, characterized in that The step of generating a first code snippet according to the target business rule comprises: According to the target business rule, determining a first target method corresponding to the target business rule from a preset general method library; The first code snippet is generated according to the target business rule and the first target method.

5. The method according to claim 1, characterized in that The step of determining, for the component to be developed that fails to match, a target business activity corresponding to the component to be developed that fails to match from a business activity database, and generating a second code snippet according to the target business activity includes: For the component to be developed that fails to match, determining a plurality of candidate business activities corresponding to the component to be developed that fails to match from a business activity database; Matching the keywords of the component to be developed that failed to match with each of the candidate business activities respectively, to obtain a third matching degree corresponding to each of the candidate business activities; The candidate business activity corresponding to the maximum matching degree among the third matching degrees corresponding to the candidate business activities is used as the target business activity corresponding to the component to be developed that failed to match, and a second code snippet is generated according to the target business activity.

6. The method according to claim 5, characterized in that The generating a second code snippet according to the target business activity comprises: According to the target business activity, determining a plurality of candidate business tasks corresponding to the target business activity from a business activity database; Matching the keywords of the component to be developed with each of the candidate business tasks respectively, and determining a target business task from the multiple candidate business tasks; According to the target business task, determining a plurality of candidate business steps corresponding to the target business task from a business activity database; Matching the keywords of the component to be developed with each of the candidate business steps respectively, and determining a target business step from the multiple candidate business steps; The second code snippet is generated according to the target business step.

7. The method according to claim 6, characterized in that The generating the second code snippet according to the target business step includes: According to the target business step, determining a target interface corresponding to the target business step from a backend interface database; According to the target interface, determining a second target method corresponding to the target interface from a preset general method library; The second code snippet is generated according to the target interface and the second target method.

8. The method according to claim 2, characterized in that: The step of matching the keywords of the component to be developed with the keywords of each preset component in the preset general component library to obtain a first matching degree corresponding to each preset component includes: For each of the preset components, multiple keywords of the component to be developed are matched with the keywords of the preset component respectively, to obtain the matching degree between each keyword of the component to be developed and the preset component respectively; According to the matching degree of each keyword of the component to be developed and the preset component, and the preset weight of each keyword, a first matching degree between the component to be developed and the preset component is calculated.

9. A front-end code generation device, characterized in that: The device comprises: An acquisition module is used to acquire keywords of components to be developed from the requirements document of the UI interface, match the keywords of the components to be developed with keywords of preset components in a preset general component library, and acquire components to be developed that fail to match; A first generating module is used to determine, for the component to be developed that fails to match, a target business rule corresponding to the component to be developed that fails to match from a business rule database according to a keyword of the component to be developed that fails to match, and generate a first code snippet according to the target business rule; A second generating module is used to determine, for the component to be developed that fails to match, a target business activity corresponding to the component to be developed that fails to match from a business activity database according to a keyword of the component to be developed that fails to match, and generate a second code snippet according to the target business activity; A third generating module, configured to generate a front-end code corresponding to the UI interface according to the first code snippet and the second code snippet; The target business rule is used to represent the control logic of the component to be developed that fails to match, and the target business activity is used to represent the data interaction logic between the component to be developed that fails to match and the backend.

10. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 8 are implemented.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

12. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images