CN113656028B

CN113656028B - UI component code generation method, device and equipment, and CRUD page generation method, device and equipment

Info

Publication number: CN113656028B
Application number: CN202110920849.0A
Authority: CN
Inventors: 陈少毅; 郑启光
Original assignee: Guangzhou Huya Technology Co Ltd
Current assignee: Guangzhou Huya Technology Co Ltd
Priority date: 2021-08-11
Filing date: 2021-08-11
Publication date: 2023-11-14
Anticipated expiration: 2041-08-11
Also published as: CN113656028A

Abstract

The embodiment of the invention discloses a method, a device and equipment for generating UI component codes and CRUD pages. The method comprises the following steps: acquiring interface information of an API corresponding to the UI component, initiating a local interface request according to the interface information, and acquiring response data corresponding to the local interface request; generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data; analyzing data and original configuration information corresponding to a target UI model according to the API interface, and generating a UI configuration tree; and analyzing data according to the interface code template, the logic code template and the API corresponding to the UI configuration tree, and generating a UI component code. The technical scheme of the embodiment of the invention can generate the dynamic code containing the logic relationship, thereby reducing the threshold of front-end development and improving the research and development efficiency.

Description

UI component code generation method, device and equipment, and CRUD page generation method, device and equipment

Technical Field

The embodiment of the invention relates to the technical field of computers, in particular to a method, a device and equipment for generating UI component codes and CRUD pages.

Background

In project development, front-end systems often need to communicate with back-end services. For example, the front-end system may obtain data filled in by the user through an application program interface (Application Programming Interface, API) and submit the data to the back-end service through the API interface. Thus, in project development, front-end developers are required to write a large amount of code to enable communication with the back-end services.

In the prior art, codes are usually generated by manually writing or by configuring data or visual draft data. However, the manual writing method requires a lot of manpower and requires a developer to have a high level of skill. By means of the configuration data or the visual manuscript data, codes of static pages can be generated only, dynamic codes of the static pages can be used only by supplementing the dynamic codes in a manual mode when the static pages are communicated with the back-end service, and therefore the static pages are inconvenient to develop and have low efficiency.

Disclosure of Invention

The embodiment of the invention provides a method, a device and equipment for generating UI component codes and CRUD pages, which can generate dynamic codes containing logic relations according to analysis of API interfaces, thereby reducing the threshold of front-end development and improving the research and development efficiency.

In a first aspect, an embodiment of the present invention provides a method for generating UI component code, including:

acquiring interface information of an API corresponding to a UI component, initiating a local interface request according to the interface information, and acquiring response data corresponding to the local interface request;

generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data;

according to the API interface analysis data and the original configuration information corresponding to the target UI model, a UI configuration tree is generated;

and generating the UI component code according to the interface code template, the logic code template and the API analysis data corresponding to the UI configuration tree.

In a second aspect, an embodiment of the present invention further provides a method for generating a CRUD page, including:

by adopting the UI component code generation method provided by any embodiment of the invention, user interface UI component codes corresponding to the target application program interface API related by the CRUD page are generated;

determining parameter corresponding relations among all target API interfaces, constructing association relations among UI component codes corresponding to all target API interfaces according to the parameter corresponding relations, and generating CRUD page codes;

And generating the CRUD page according to the CRUD page code.

In a third aspect, an embodiment of the present invention further provides a UI component code generating device, including:

the response data acquisition module is used for acquiring interface information of an API corresponding to the UI component, initiating a local interface request according to the interface information and acquiring response data corresponding to the local interface request;

the target UI model determining module is used for generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data;

the UI configuration tree generation module is used for generating a UI configuration tree according to the API interface analysis data and the original configuration information corresponding to the target UI model;

and the UI component code generating module is used for generating the UI component code according to the interface code template, the logic code template and the API analysis data corresponding to the UI configuration tree.

In a fourth aspect, an embodiment of the present invention further provides a CRUD page generating device, including:

the UI component code generating module is used for generating a user interface UI component code corresponding to a target application program interface API related to the CRUD page by adopting the UI component code generating method provided by any embodiment of the invention;

The CRUD page code generation module is used for determining parameter corresponding relations among all target API interfaces, constructing association relations among UI component codes corresponding to all target API interfaces according to the parameter corresponding relations, and generating CRUD page codes;

and the CRUD page generation module is used for generating the CRUD page according to the CRUD page code.

In a fifth aspect, an embodiment of the present invention further provides a computer device, including:

one or more processors; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the UI component code generation method of any embodiment of the present invention or to perform the CRUD page generation method of any embodiment of the present invention.

In a sixth aspect, an embodiment of the present invention further provides a computer readable storage medium, on which a computer program is stored, where the program when executed by a computer implements the method for generating UI component code provided in any embodiment of the present invention, or performs the method for generating CRUD pages provided in any embodiment of the present invention.

According to the technical scheme, the response data corresponding to the local interface request is obtained by obtaining the interface information of the API corresponding to the UI component and initiating the local interface request according to the interface information; generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data; analyzing data and original configuration information corresponding to a target UI model according to the API interface, and generating a UI configuration tree; and analyzing data according to the interface code template, the logic code template and the API corresponding to the UI configuration tree, and generating a UI component code. According to the technical scheme provided by the embodiment of the invention, the dynamic codes containing the logic relationship can be generated through analyzing the API interface, so that the threshold of front-end development is reduced, and the research and development efficiency is improved.

Drawings

FIG. 1 is a flowchart of a UI component code generation method according to an embodiment of the invention;

FIG. 2a is a flow chart of a UI component code generation method in a second embodiment of the invention;

FIG. 2b is a flowchart of yet another method for generating UI component code according to a second embodiment of the invention;

FIG. 3 is a flowchart of a CRUD page generating method in a third embodiment of the present invention;

Fig. 4 is a schematic structural diagram of a UI component code generating device in the fourth embodiment of the invention;

fig. 5 is a schematic structural diagram of a CRUD page generating device in a fifth embodiment of the present invention;

fig. 6 is a schematic structural diagram of a computer device according to a sixth embodiment of the present invention.

Detailed Description

The invention is described in further detail below with reference to the drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting thereof. It should be further noted that, for convenience of description, only some, but not all of the structures related to the present invention are shown in the drawings.

It should be further noted that, for convenience of description, only some, but not all of the matters related to the present invention are shown in the accompanying drawings. Before discussing exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although a flowchart depicts operations (or steps) as a sequential process, many of the operations can be performed in parallel, concurrently, or at the same time. Furthermore, the order of the operations may be rearranged. The process may be terminated when its operations are completed, but may have additional steps not included in the figures. The processes may correspond to methods, functions, procedures, subroutines, and the like.

Example 1

Fig. 1 is a flowchart of a UI component code generation method according to an embodiment of the present invention, where the embodiment is applicable to a case of quickly generating a corresponding front end component code according to analysis of API interface information. The method may be performed by UI component code generation means, which may be implemented in software and/or hardware, and which may generally be integrated in a computer device (e.g., various intelligent terminals or servers, etc.). As shown in fig. 1, the method includes:

step 110, obtaining interface information of an API corresponding to the UI component, and initiating a local interface request according to the interface information to obtain response data corresponding to the local interface request.

The User Interface (UI) may be a man-machine interaction Interface of software. Specifically, in the embodiment of the invention, the UI refers to interface design in the front-end system. The UI component may be a view element in the user interface. The API interface is some predefined protocol interface, such as the hypertext transfer protocol (Hyper Text Transfer Protocol, HTTP). The front-end system typically communicates with the back-end service through an associated API interface, for example, to obtain data for presentation or to submit user data. The UI component may be implemented through a call of an API interface. Therefore, the UI component may have a certain correspondence with the API interface, which is also the basis for the front-end developer to perform interface design.

In the embodiment of the invention, the interface information of the API interface is information required for calling the API interface. For example, the interface information of the API interface may include an interface address, an interface parameter, and the like. When the UI component code is generated, an API interface simulation request can be performed, namely a local interface request can be initiated according to interface information, and corresponding response data can be determined. For example, the response data may be obtained by initiating an HTTP request of the interface through a local Node (a running environment) service according to the interface address and the interface parameters. The response data may include data content, data type, etc. of the specific response.

And 120, generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with the API interface in a preset UI model set according to the API interface analysis data.

The API interface analysis data may be all information data of the API interface, for example, the API interface analysis data may include interface information and response data. Specifically, the API interface analysis data may include an interface address, an interface request method, a request parameter type, request data, a response parameter type, response data, and the like.

In the embodiment of the present invention, the preset UI model may be a model in a UI component library. Specifically, the preset UI model set may include some common models exposed through an API interface. For example, the set of pre-set UI models may include one or more of a form model, a popup model, and a menu model.

In this step, there may be a variety of ways to determine that the target UI model matches the API interface. For example, the matching may be performed with the API interface analysis data according to the interface features of the UI model, and if the matching is successful, the UI model is determined to be the target UI model corresponding to the API interface analysis data. Specifically, one or more of an interface request method, a request parameter type, quantity information or format information of the request data, a response parameter type, quantity information or format information of the response data and the like in the API interface analysis data can be matched with interface features of the UI model. When the interface characteristics of the API interface analysis data and the UI model are successfully matched, the UI model can be determined to be a target UI model of the API interface corresponding to the API interface analysis data.

And 130, generating a UI configuration tree according to the API analysis data and the original configuration information corresponding to the target UI model.

Among the set of UI models set in advance, each UI model may have preset original configuration information. Different UI models have different corresponding original configuration information. The UI configuration tree may be a concrete representation of the API interface analysis data and the original configuration information of the target UI model. For example, the UI configuration tree may record the type of the UI model, original configuration information of the UI model, data information generated from analyzing specific data in the data according to the API interface, and the like. When the data types (request parameter types or response parameter types) in the analysis data of the API interface are different, the item items of the generated UI model tree are different. In the embodiment of the invention, the item of the generated UI model tree can be determined according to the determined data type in the API analysis data. For example, when the data type in the API interface analysis data is the request parameter type, the item of the UI model tree may be an entry result. For another example, when the data type in the API interface analysis data is the response parameter type, the item of the UI model tree may be the response result.

And 140, analyzing data according to the interface code template, the logic code template and the API corresponding to the UI configuration tree, and generating a UI component code.

The UI model has an original code template, and can comprise an original interface code template and a logic code template. The original code templates of the UI model corresponding to the UI configuration tree may be adjusted according to configuration information in the UI configuration tree. For example, the original code template may be modified to generate an interface code template and a logic code template corresponding to the UI configuration tree.

In the embodiment of the invention, the UI configuration tree corresponds to the API interface, namely, the UI component can be generated only through the calling of the API interface. Therefore, the interface code template and the logic code template corresponding to the UI configuration tree need to be added with API interface analysis data to generate UI component codes.

Specifically, the UI component code generated in the embodiment of the invention is generated based on data information analysis of the API interface, and the UI component code not only includes the interface code, but also includes a specific logic code when the API interface is called, so that the UI component code is a dynamic code. The dynamic UI component code can meet the actual requirements of the service, so that in the actual service, the back end can independently generate a front end system matched with the back end service without depending on front end developers. Compared with static codes generated in the prior art, the dynamic UI component codes can be supplemented without a front-end developer, so that the threshold of front-end development is reduced, and the development efficiency is improved.

According to the technical scheme, the response data corresponding to the local interface request is obtained by obtaining the interface information of the API corresponding to the UI component and initiating the local interface request according to the interface information; generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data; analyzing data and original configuration information corresponding to a target UI model according to the API interface, and generating a UI configuration tree; and analyzing data according to the interface code template, the logic code template and the API corresponding to the UI configuration tree, and generating a UI component code. The technical scheme of the embodiment of the invention solves the problem of rapid generation of the front-end component codes, and can generate the dynamic codes containing the logic relationship according to the analysis of the API interface information, thereby reducing the threshold of front-end development and improving the research and development efficiency.

Example two

Fig. 2a is a flowchart of a UI component code generating method according to a second embodiment of the present invention, which is based on the above embodiment, and in this embodiment, a manner of determining, from API interface analysis data in a preset UI model set, a target UI model matching with an API interface is further refined. The features of generating the UI configuration tree are further refined by analyzing the data and the original configuration information corresponding to the target UI model according to the API interface. And the way of generating the UI component codes is further refined according to the interface code templates, the logic code templates and the API interface analysis data corresponding to the UI configuration tree.

Specifically, in an optional implementation manner of the embodiment of the present invention, generating a UI configuration tree according to API interface analysis data and original configuration information corresponding to a target UI model includes: according to the API interface analysis data and original configuration information corresponding to the target UI model, an information item list is generated; determining configuration information corresponding to the UI configuration tree in response to a selection operation of the user on the information item list; and generating a UI configuration tree according to the configuration information.

In an optional implementation manner of the embodiment of the present invention, generating a UI component code according to an interface code template, a logic code template and API interface analysis data corresponding to a UI configuration tree includes: updating parameter information in an interface code template corresponding to the UI configuration tree according to configuration information corresponding to the UI configuration tree, and generating a target interface code; according to the API interface analysis data, updating interface calling logic information in a logic code template corresponding to the UI configuration tree to generate a target logic code; and generating UI component codes according to the target interface codes and the target logic codes.

As shown in fig. 2a, the method of the present embodiment may include:

step 210, obtaining interface information of an API corresponding to the UI component, and initiating a local interface request according to the interface information, and obtaining response data corresponding to the local interface request.

And 220, generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with the API interface in a preset UI model set according to the API interface analysis data.

In an alternative implementation of the embodiment of the present invention, the UI model set is a set formed by one or more of a form model, a popup model, and a menu model.

In an optional implementation manner of the embodiment of the present invention, determining, according to the API interface analysis data, a target UI model matching with the API interface in a preset UI model set includes: when the API analysis data is determined to be request type data and the API analysis data contains paging information, determining a form model as a target UI model matched with an API in a preset UI model set; when the API analysis data is determined to be request type data and does not contain paging information, determining a form model and a menu model as a target UI model matched with an API in a preset UI model set; when the API analysis data is determined to be the submitting type data and the API analysis data is single identification type data, determining a popup model as a target UI model matched with the API in a preset UI model set; when the API analysis data are determined to be the submitting type data and the API analysis data are determined to be a plurality of submitting data, determining the form model as a target UI model matched with the API in a preset UI model set; when the API interface analysis data is determined to be the submitting type data and the API interface analysis data is single non-identifying type data, determining the form model and the popup model as target UI models matched with the API interface in a preset UI model set.

Specifically, the interface features of the tabular model may include making a data request through the interface, returning a plurality of pieces of response data, and the response data having paging information. The page information is unique information of the form model. The interface features provided by the menu model may include making data requests, returning one or more data, etc. through the interface. Interface features that the popup model has may include submitting data through the interface, submitting a parameter with an identification type, etc. Wherein, the specific information of the popup model when the type is identified. The identification type may be identification number (Identity document, ID) information of the parameter. The form model may have interface features that may include submitting data, submitting one or more data, etc., through the interface.

When the API interface analyzes that the data type in the data is request type data, that is, requests for data to be returned through the API interface, it may be determined that the target UI model may be a form model or a menu model. When the response data corresponding to the request type data includes paging information, the target UI model may be determined to be a form model. And when the response data corresponding to the request type data does not include paging information, it may be determined that the target UI model may be a form model or a menu model.

When the API interface analyzes that the data type in the data is the submission type data, that is, the data is submitted through the API interface in response to the operation of the user inputting the data, it may be determined that the target UI model may be a form model or a popup model. When the submitted type data is single identification type data, such as deleting data corresponding to a certain identification, the target UI model can be determined to be a popup model. When the submission type data is a plurality of data, the target UI model may be determined to be a form model. When the submission type data is single non-identification type data, the target UI model may be determined to be a form model or a popup model.

In order to improve accuracy of determining the target UI model, in an optional implementation manner of the embodiment of the present invention, after determining, in a preset UI model set according to the API interface analysis data, a target UI model matching with the API interface, the method further includes: when the number of the models in the determined target UI model is greater than 1, generating a UI model confirmation list according to the target UI model; and updating the target UI model in response to a confirmation operation of the user on the single model in the UI model confirmation list.

Wherein the UI model confirmation list may include the currently determined target UI model having the number of models greater than 1, i.e., at least 2 UI models may be included in the UI model confirmation list. For example, UI model validation list

A confirmation list of the form model and the menu model; alternatively, the UI model validation list may be a form model

Validation list of model and popup models. The UI model confirmation list can be displayed for a user through a display interface of the electronic equipment, and the user can perform model confirmation operation on the display interface. For example, the user may determine, by clicking or touching, on the display interface that a certain UI model in the UI model confirmation list is the target UI model.

According to the technical scheme provided by the embodiment of the invention, the single target UI model can be accurately determined by responding to the model confirmation operation of the user, and the single target UI model corresponds to the API interface for analysis at present, so that accurate UI component codes can be generated.

And 230, generating an information item list according to the API analysis data and the original configuration information corresponding to the target UI model.

The information item list may be a specific presentation of the API interface analysis data and the original configuration information corresponding to the target UI model. The list of information items may be presence selectable. For example, one or more items of information in the information item list may be selected by clicking or touching.

Specifically, the information item list may display the API interface analysis data and the original configuration information corresponding to the target UI model according to the type of the target UI model. For example, the target UI model is a form model, and a corresponding form may be generated according to the original configuration information of the form model, and the API interface analysis data is used as parameters and filled in the items of the form.

Step 240, in response to the user selecting operation on the information item list, determining configuration information corresponding to the UI configuration tree.

Wherein the user may select information in the list of information items that the user wishes to generate. Specifically, all the information in the default information item list may be selected, the user may cancel the information that is not desired to be generated by canceling the hooking operation, and the remaining information that is not canceled may be used as configuration information corresponding to the UI configuration tree. For example, the user may cancel one or more items in the form, and determine the remaining items to the configuration information corresponding to the UI configuration tree.

And 250, generating a UI configuration tree according to the configuration information.

The embodiment of the invention can confirm the secondary parameters of the UI model through a user. For example, a table model needs to identify paging information associated with table data; for another example, the form model needs to identify a list of parameters that are used to generate the form item; for another example, which parameters in the interface represent results, which parameters represent project names, etc. After the secondary parameters are confirmed, a UI configuration tree is generated according to the configuration information, the configuration information can be interfered, the generated UI configuration tree is more in line with an actual service scene, the format correctness of the UI configuration tree is improved, and the accuracy of the subsequent UI component code generation is further improved.

And 260, generating a preview effect diagram of the UI interface according to the UI configuration tree.

The preview effect diagram is an editable effect diagram. The preview effect graph can be a UI effect graph generated by performing front-end rendering according to the type of the UI model and the configuration information of the UI configuration tree. The preview effect diagram is set to be an editable effect diagram, visual adjustment of the user based on the effect diagram can be facilitated, and the final UI configuration tree is ensured to be matched with service requirements.

Step 270, obtaining editing information for the preview effect graph, and updating the UI configuration tree according to the editing information.

The editing information may be information generated by modifying the preview effect map by the user. For example, the editing information may be title modification information of a form item or title modification information of a form column, or the like. By updating the UI configuration tree through editing information, default parameter information in the UI configuration tree can be modified into specific parameters corresponding to the service, so that the content correctness of the UI configuration tree is improved, and the accuracy of subsequent UI component code generation is further improved.

And 280, updating parameter information in an interface code template corresponding to the UI configuration tree according to the configuration information corresponding to the UI configuration tree, and generating a target interface code.

Wherein, the step can be to update specific parameters in the configuration information corresponding to the UI configuration tree to an original interface code template of the UI model. Specifically, the step may specifically generate configuration information in the corresponding UI configuration tree according to a predefined conversion rule of each UI model, and may generate a code for interface presentation of the UI component, that is, a target interface code.

The target interface code may be understood as static code of the UI component code. For example, the object interface code may be a code of a form, and may specifically include information such as row and column data, a title, and a form request interface of the form in the UI interface.

And 290, updating interface calling logic information in a logic code template corresponding to the UI configuration tree according to the API interface analysis data, and generating a target logic code.

Wherein, this step may be to generate a basic code, i.e. an original logical code template, based on a basic logical interaction template (interface call logical information) predefined by the UI model. The API interface analysis data comprises information such as an interface address, a request method, request parameters, response data and the like when the interface is mobilized, and can be updated into a basic logic interaction template predefined by the UI model to generate a target logic code.

In particular, logical code may be understood as dynamic code, which is associated with the invocation of an API interface. For example, operations on the UI model may be included in the logic code. For example, deletion or editing of a single piece of data in a table; as another example, a data deletion or editing action of a table; for another example, a pop-up window may appear after a button click.

Step 2100, generating UI component code according to the target interface code and the target logic code.

Wherein the target interface code and the target logic code may be combined to generate the UI component code. The UI component code comprises view (interface) related code and view operation logic code, is dynamic code and can perform real business operation. For example, the UI code of the generated form may include the interface code at the time of presentation of the form, as well as the logical code of the form submit button. In the specific application, the form can be displayed according to the generated UI component code, the user can edit the form and the like, and the form can be submitted, namely, the UI component code is complete, and specific business processing can be performed.

According to the technical scheme, the response data corresponding to the local interface request is obtained by obtaining the interface information of the API corresponding to the UI component and initiating the local interface request according to the interface information; generating API interface analysis data according to the interface information and the response data, and determining a target UI model matched with an API interface in a preset UI model set according to the API interface analysis data; according to the API interface analysis data and original configuration information corresponding to the target UI model, an information item list is generated; determining configuration information corresponding to the UI configuration tree in response to a selection operation of the user on the information item list; generating a UI configuration tree according to the configuration information; generating a preview effect diagram of the UI interface according to the UI configuration tree; acquiring editing information aiming at the preview effect graph, and updating the UI configuration tree according to the editing information; updating parameter information in an interface code template corresponding to the UI configuration tree according to configuration information corresponding to the UI configuration tree, and generating a target interface code; according to the API interface analysis data, updating interface calling logic information in a logic code template corresponding to the UI configuration tree to generate a target logic code; according to the target interface code and the target logic code, the UI component code is generated, the problem of rapid generation of the front-end component code is solved, and according to analysis of API interface information, a dynamic code containing a logic relationship can be generated, so that the threshold of front-end development is reduced, and the research and development efficiency is improved; and the accuracy of code generation can be improved through a visual interface, so that the generated code is more suitable for real service requirements.

Fig. 2b is a flowchart of still another UI component code generating method according to the second embodiment of the invention. As shown in fig. 2b, the specific generation process of the UI component code may be: the API interface is identified and data analyzed. For example, the API interface includes an interface address and an interface parameter, and the interface recognition stage may initiate a local interface request through the interface address and the interface parameter, and obtain response data of the interface. The data analysis stage can sequentially perform specific analysis on the request method, the interface parameters (such as various parameter types and data) and the interface response data (such as various response data and types) of the API interface, and generate API interface analysis data. The analysis data can be matched with built-in UI models (forms, popups, menus and the like) according to the API, a target UI model which can be generated by the API is identified, and the target UI model is confirmed by a user. After the user confirms the UI model, the user may perform parameter secondary confirmation on the configuration information (API interface analysis data and original configuration information of the target UI model) again, thereby generating a UI configuration tree. The corresponding preview effect map can be generated by performing front-end simulation on the UI model tree. The preview effect diagram can provide partial data for the user to edit secondarily, and the UI configuration tree can be updated according to editing information of the user on the preview effect diagram. According to the updated UI configuration tree, configuration information of the UI configuration tree can be converted into UI component codes, and the UI component codes specifically comprise target interface codes and target logic codes. According to the process, dynamic codes containing logical relations can be generated according to analysis of API interface information, so that the threshold of front-end development is reduced, and the research and development efficiency is improved; and the accuracy of code generation can be improved through a visual interface, so that the generated code is more suitable for real service requirements.

Example III

Fig. 3 is a flowchart of a CRUD page generation method according to a third embodiment of the present invention, where the implementation flow of the CRUD page generation method is specifically defined in this embodiment, and the CRUD page generation method is added based on the above embodiment. As shown in fig. 3, the method of the present embodiment may include:

step 310, generating the UI component code corresponding to the target application program interface API related to the CRUD page by adopting the UI component code generating method provided by any embodiment of the present invention.

Wherein, adding, deleting and modifying (Create Retrieve Update Delete, CRUD) can be the common operation of the middle-back end on certain data in a business scene. The CRUD page involves four API interfaces, namely an add interface, a delete interface, an update interface, and a retrieve interface. In the embodiment of the invention, the corresponding UI component codes can be respectively generated by adopting a UI component code generation method according to the specific API interface related to the CRUD interface.

Step 320, determining parameter corresponding relations between all target API interfaces, and constructing association relations between UI component codes corresponding to all target API interfaces according to the parameter corresponding relations to generate CRUD page codes.

The generated UI component code may be built into a code corresponding to the CRUD interface according to a specific configuration of the CRUD interface. The specific configuration of the CRUD interface may be generated according to the parameter correspondence between API interfaces. The parameter corresponding relation between the API interfaces can be determined through specific calling relation between the API interfaces or using relation of the API interface data in specific business. According to the parameter corresponding relation between the API interfaces, the corresponding UI component codes can be associated, so that the logical relation of the UI component codes is realized, and the corresponding codes of the CRUD interfaces are built.

And 330, generating a CRUD page according to the CRUD page code.

Wherein, the CRUD page can be generated by performing page rendering according to the CRUD page code. The method for generating the CRUD page can greatly reduce the repeatability of front-end developers, namely, the front-end developers do not need to generate UI component codes and carry out code association repeatedly, so that the development efficiency can be improved, and the front-end developers are released from conventional service requests.

In an optional implementation manner of the embodiment of the present invention, determining a parameter correspondence between each target API interface includes: according to the response data of the current target API interface, carrying out data matching with the interface information of each remaining target API interface; and determining the parameter corresponding relation between the target response data successfully matched with the data and the target interface information.

And performing data matching with the interface information of each remaining target API interface according to the response data of the current target API interface, namely determining whether the response data of the current target API interface is the request parameter required by the remaining target API interface. For example, the current target API interface may be read data, and the remaining target API interfaces have associated API interfaces for updating or editing the read data, so that it may be determined that the response data of the current target API interface has a parameter correspondence with the request parameters of the associated API interface, so that the current target API interface may be associated with the associated API interface.

In a specific application of the step, the determined parameter correspondence may be submitted to the user for confirmation. For example, a parameter correspondence confirmation list may be generated according to parameter correspondence between API interfaces; and updating the parameter corresponding relation in response to the adjustment operation of the parameter corresponding relation confirmation list by the user. The corresponding relation of the generated parameters can be determined to be reliable, and the correct association relation between UI component codes is ensured, so that the generated CRUD page is ensured to meet the expectations.

According to the technical scheme provided by the embodiment of the invention, the UI component code corresponding to the target application program interface API related to the CRUD page is generated by adopting the UI component code generation method provided by any embodiment of the invention; determining parameter corresponding relations among all target API interfaces, constructing association relations among UI component codes corresponding to all target API interfaces according to the parameter corresponding relations, and generating CRUD page codes; according to the CRUD page code, a CRUD page is generated, the problem that the CRUD page is built according to the front-end component code is solved, the threshold of front-end development can be reduced, personnel unfamiliar with front-end development can build a conventional CRUD page, the back-end development does not depend on front-end development personnel, a matched front-end system can be independently built, and therefore development efficiency is improved.

Example IV

Fig. 4 is a schematic structural diagram of a UI component code generating device in the fourth embodiment of the invention. As shown in fig. 4, the UI component code generating device includes: in response to the data acquisition module 410, the target UI model determination module 420, the UI configuration tree generation module 430, and the UI component code generation module 440. Wherein:

a response data obtaining module 410, configured to obtain interface information of an API corresponding to the UI component, initiate a local interface request according to the interface information, and obtain response data corresponding to the local interface request;

the target UI model determining module 420 is configured to generate API interface analysis data according to the interface information and the response data, and determine a target UI model matched with the API interface according to the API interface analysis data in a preset UI model set;

the UI configuration tree generating module 430 is configured to generate a UI configuration tree according to the API interface analysis data and the original configuration information corresponding to the target UI model;

the UI component code generating module 440 is configured to generate UI component codes according to the interface code templates, the logic code templates, and the API analysis data corresponding to the UI configuration tree.

Optionally, the UI model set is a set formed by one or more of a form model, a popup model, and a menu model;

The target UI model determination module 420 includes:

a first target UI model determining unit configured to determine, when it is determined that the API interface analysis data is request type data and the API interface analysis data includes paging information, a table model as a target UI model that matches the API interface in a UI model set in advance;

a second target UI model determining unit, configured to determine, when it is determined that the API interface analysis data is request type data and the API interface analysis data does not include paging information, a table model and a menu model as a target UI model that matches the API interface in a UI model set in advance;

a third target UI model determining unit, configured to determine, when it is determined that the API interface analysis data is submission type data and the API interface analysis data is single identification type data, a popup model as a target UI model that matches the API interface in a preset UI model set;

a fourth target UI model determining unit configured to determine, when it is determined that the API interface analysis data is submission type data and the API interface analysis data is a plurality of submission data, a form model as a target UI model that matches the API interface in a UI model set in advance;

And the fifth target UI model determining unit is used for determining the form model and the popup model as target UI models matched with the API interface in a preset UI model set when the API interface analysis data are determined to be the submitting type data and the API interface analysis data are determined to be single non-identifying type data.

Optionally, the device further includes:

the UI model confirmation list generation module is used for generating a UI model confirmation list according to the target UI model when the number of the models in the determined target UI model is greater than 1 after the target UI model matched with the API interface is determined in a preset UI model set according to the API interface analysis data;

and the target UI model updating module is used for updating the target UI model in response to the confirmation operation of the user on the single model in the UI model confirmation list.

Optionally, the UI configuration tree generation module 430 includes:

the information item list generating unit is used for generating an information item list according to the API analysis data and the original configuration information corresponding to the target UI model;

a configuration information determining unit for determining configuration information corresponding to the UI configuration tree in response to a user selection operation of the information item list;

And the UI configuration tree generating unit is used for generating a UI configuration tree according to the configuration information.

Optionally, the device further includes:

the preview effect diagram generating module is used for generating a preview effect diagram of the UI interface according to the UI configuration tree before generating the UI component code according to the interface code template, the logic code template and the API interface analysis data corresponding to the UI configuration tree, wherein the preview effect diagram is an editable effect diagram;

and the UI configuration tree updating module is used for acquiring editing information aiming at the preview effect graph and updating the UI configuration tree according to the editing information.

Optionally, the UI component code generation module 440 includes:

the target interface code generating unit is used for updating parameter information in an interface code template corresponding to the UI configuration tree according to the configuration information corresponding to the UI configuration tree to generate a target interface code;

the target logic code generating unit is used for updating interface calling logic information in a logic code template corresponding to the UI configuration tree according to the API interface analysis data to generate a target logic code;

and the UI component code generating unit is used for generating the UI component code according to the target interface code and the target logic code.

The UI component code generating device provided by the embodiment of the invention can execute the UI component code generating method provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the executing method.

Example five

Fig. 5 is a schematic structural diagram of a CRUD page generating device in a fifth embodiment of the present invention. As shown in fig. 5, the CRUD page generating apparatus includes: a UI component code generation module 510, a CRUD page code generation module 520, and a CRUD page generation module 530. Wherein:

the UI component code generating module 510 is configured to generate a user interface UI component code corresponding to a target API interface related to a CRUD page by using the UI component code generating method provided by any embodiment of the present invention;

the CRUD page code generating module 520 is configured to determine a parameter correspondence between each target API interface, and construct an association between UI component codes corresponding to each target API interface according to the parameter correspondence, to generate a CRUD page code;

and a CRUD page generation module 530, configured to generate a CRUD page according to the CRUD page code.

Optionally, CRUD page code generation module 520 includes:

the data matching unit is used for carrying out data matching with the interface information of each remaining target API interface according to the response data of the current target API interface;

and the parameter corresponding relation determining unit is used for determining the parameter corresponding relation between the target response data successfully matched with the data and the target interface information.

The CRUD page generating device provided by the embodiment of the invention can execute the CRUD page generating method provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the executing method.

Example six

Fig. 6 is a schematic structural diagram of a computer device according to a sixth embodiment of the present invention, and as shown in fig. 6, the computer device includes a processor 60, a memory 61, an input device 62 and an output device 63; the number of processors 60 in the computer device may be one or more, one processor 60 being taken as an example in fig. 6; the processor 60, the memory 61, the input means 62 and the output means 63 in the computer device may be connected by a bus or by other means, in fig. 6 by way of example.

The memory 61 is used as a computer readable storage medium for storing software programs, computer executable programs, and modules, such as program instructions/modules corresponding to the UI component code generation method or the CRUD page generation method in the embodiment of the present invention (e.g., the response data acquisition module 410, the target UI model determination module 420, the UI configuration tree generation module 430, and the UI component code generation module 440 shown in fig. 4, or the UI component code generation module 510, the CRUD page code generation module 520, and the CRUD page generation module 530 shown in fig. 5). The processor 60 executes various functional applications of the computer device and data processing, that is, implements the above-described UI component code generation method or CRUD page generation method, by executing software programs, instructions, and modules stored in the memory 61:

Acquiring interface information of an API (application program interface) corresponding to a UI (user interface) component, initiating a local interface request according to the interface information, and acquiring response data corresponding to the local interface request;

Or,

by adopting the UI component code generation method provided by any embodiment of the invention, user interface UI component codes corresponding to the target API interfaces related to the CRUD pages are generated;

and generating the CRUD page according to the CRUD page code.

The memory 61 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, at least one application program required for functions; the storage data area may store data created according to the use of the terminal, etc. In addition, the memory 61 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some examples, memory 61 may further comprise memory remotely located relative to processor 60, which may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The input device 62 is operable to receive input numeric or character information and to generate key signal inputs related to user settings and function control of the computer device. The output 63 may comprise a display device such as a display screen.

Example seven

The seventh embodiment of the invention also discloses a computer storage medium, on which a computer program is stored, which when executed by a processor, implements the above-mentioned UI component code generation method or CRUD page generation method:

Or,

and generating the CRUD page according to the CRUD page code.

The computer storage media of embodiments of the invention may take the form of any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium may be, for example, but not limited to: an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

The computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations of the present invention may be written in one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).

Note that the above is only a preferred embodiment of the present invention and the technical principle applied. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, while the invention has been described in connection with the above embodiments, the invention is not limited to the embodiments, but may be embodied in many other equivalent forms without departing from the spirit or scope of the invention, which is set forth in the following claims.

Claims

1. A UI component code generation method, comprising:

acquiring interface information of an Application Program Interface (API) corresponding to a User Interface (UI) component, initiating a local interface request according to the interface information, and acquiring response data corresponding to the local interface request;

Generating the UI component code according to an interface code template, a logic code template and the API interface analysis data corresponding to the UI configuration tree;

wherein generating a UI configuration tree according to the API interface analysis data and original configuration information corresponding to the target UI model includes:

according to the API interface analysis data and the original configuration information corresponding to the target UI model, an information item list is generated;

determining configuration information corresponding to the UI configuration tree in response to a user selection operation on the information item list;

and generating the UI configuration tree according to the configuration information.

2. The method of claim 1, wherein the set of UI models is a set of one or more of a form model, a popup model, and a menu model;

determining a target UI model matched with an API according to the API analysis data in a preset UI model set, wherein the target UI model comprises the following steps:

when the API analysis data is determined to be request type data and contains paging information, determining a form model as a target UI model matched with an API in a preset UI model set;

When the API analysis data is determined to be request type data and does not contain paging information, determining a form model and a menu model as a target UI model matched with an API in a preset UI model set;

when the API analysis data are determined to be the submitting type data and the API analysis data are single identification type data, determining a popup model as a target UI model matched with an API in a preset UI model set;

when the API analysis data are determined to be the submitting type data and the API analysis data are a plurality of submitting data, determining a form model as a target UI model matched with an API in a preset UI model set;

and when the API analysis data is determined to be the submitting type data and the API analysis data is single non-identification type data, determining the form model and the popup model as target UI models matched with the API in a preset UI model set.

3. The method of claim 2, further comprising, after determining a target UI model matching an API interface from the API interface analyzing data in a set of UI models set in advance:

When the number of the models in the determined target UI model is greater than 1, generating a UI model confirmation list according to the target UI model;

and updating the target UI model in response to a user confirming operation on a single model in the UI model confirming list.

4. The method of claim 1, further comprising, prior to generating the UI component code based on the interface code templates, logic code templates, and the API interface analysis data corresponding to the UI configuration tree:

generating a preview effect diagram of the UI interface according to the UI configuration tree, wherein the preview effect diagram is an editable effect diagram;

and acquiring editing information aiming at the preview effect graph, and updating the UI configuration tree according to the editing information.

5. The method of claim 1, wherein generating the UI component code according to the interface code template, the logic code template, and the API interface analysis data corresponding to the UI configuration tree comprises:

updating parameter information in an interface code template corresponding to the UI configuration tree according to the configuration information corresponding to the UI configuration tree, and generating a target interface code;

updating interface calling logic information in a logic code template corresponding to the UI configuration tree according to the API interface analysis data to generate a target logic code;

And generating the UI component code according to the target interface code and the target logic code.

6. The method for generating the CRUD page is characterized by comprising the following steps:

generating User Interface (UI) component codes corresponding to target Application Program Interface (API) related by adding, deleting and checking CRUD pages by adopting a UI component code generation method as claimed in any one of claims 1 to 5;

and generating the CRUD page according to the CRUD page code.

7. The method of claim 6, wherein determining parameter correspondence between target API interfaces comprises:

according to the response data of the current target API interface, carrying out data matching with the interface information of each remaining target API interface;

and determining the parameter corresponding relation between the target response data successfully matched with the data and the target interface information.

8. A UI component code generation device, comprising:

the response data acquisition module is used for acquiring interface information of an application program interface API corresponding to the user interface UI component, initiating a local interface request according to the interface information and acquiring response data corresponding to the local interface request;

the UI component code generating module is used for generating the UI component code according to the interface code template, the logic code template and the API interface analysis data corresponding to the UI configuration tree;

wherein, the UI configuration tree generation module comprises:

the information item list generation unit is used for generating an information item list according to the API analysis data and the original configuration information corresponding to the target UI model;

a configuration information determining unit, configured to determine configuration information corresponding to the UI configuration tree in response to a user selection operation on the information item list;

and the UI configuration tree generating unit is used for generating the UI configuration tree according to the configuration information.

9. A CRUD page generating device, comprising:

A UI component code generating module, configured to generate a user interface UI component code corresponding to a target application program interface API related to the adding, deleting and checking CRUD page by adopting the UI component code generating method according to any one of claims 1 to 5;

10. A computer device, comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the UI component code generation method of any one of claims 1-5 or to perform the CRUD page generation method of any one of claims 6-7.

11. A non-transitory computer-readable storage medium storing computer instructions for causing the computer to perform the UI component code generation method according to any one of claims 1-5 or to perform the CRUD page generation method according to any one of claims 6-7.