Using code generation tools to quickly generate the front-end interface of Vue + element based on ABP framework


The only constant thing in the world is change. By summing up the law of change, we can deal with it with the law. We can get twice the result with half the effort. When we develop the back-end service code and the front-end interface code, the interface changes according to certain rules. We extract the database information to embrace the changing content according to the changing rules. For example, for the server side, we can obtain the field and relationship information between tables according to the table selected by the user, and generate various code files such as dto and interface class; for the front-end interface, we can also realize the query area, query list and new boundary according to the table information and field information of the database In addition, it integrates the related interface event relations to realize the button action processing of related processing. This essay describes how to use code generation tools to quickly generate the front-end interface of Vue + element based on ABP framework.

1. ABP framework architecture and front end code generation analysis

ABP framework is based on the latest technology direction of. Net core. It is widely used in a series of technical frameworks. It integrates many related development technologies in the field of. Net core. The back-end mainly publishes web API to realize the interaction between data and front-end. Therefore, the front-end can realize the docking of multiple platforms based on Web API. It can be a conventional BS framework, such as Vue + element The front-end route can also be WinForm / WPF front-end framework access. The general architecture of ABP framework is as follows, and the top is the access mode of various front ends of the display layer.

Back end content, I have introduced a lot in the previous essays, and earlier, I also provided fast code generation of ABP framework《Using code generation tools to generate code based on ABP framework》In the front part, the code generation of WinForm is also introduced in the previous essay《The development process of WinForm interface of ABP framework》This essay mainly introduces the rapid generation operation of Vue + element front-end interface of ABP framework.

Similar to WinForm interface generation of ABP framework, before code generation, we need to have a set of mature interface organization, that is, our conventional interface layout processing. Based on these, we use the template engine of code generation tool to write the corresponding template, and then integrate and generate the corresponding code combined with the database information provided by the kernel of code generation tool Folder and file.

The ABP back-end framework was introduced earlier. ABP + swagger UI is responsible for the development and publication of API interface. The following is the management interface of API interface.

The general processing of ABP framework’s back-end interface, such as addition, deletion, modification and query, is consistent in terms of interface naming and parameters. Therefore, it provides us with better encapsulation of API client class and better Abstract mode. We encapsulate the general interface, such as addition, deletion, modification and query, in the base class, and the subclass only needs to have inheritance relationship, except for user-defined interface function Add front-end JS code.

If there are business classes such as dicttype and dictdata, these classes will inherit baseapi and have related interfaces, as shown below.

The view is a combination of Vue and element, which is generally a regular table list, including query criteria and function entry for integrating add, delete, change and query, as shown in the view interface below.

If there is a need for tree list, it is better to integrate the generation and processing interface of tree list and the style area management of split panel.

For the list view interface, we generally integrate the general interfaces such as adding, editing, viewing, importing and exporting together, and can realize the interface entry of various business processing through different pop-up dialog boxes.

Based on the above introduction, we only need to provide two parts, one is the inherited subclass of API class, the other is the content of view interface, which integrates multiple dialog boxes and corresponding button operation entry processing interface. As shown below, it contains API encapsulation class file and Vue + element interface view.


2. Using code generation tools to quickly generate the front-end interface of Vue + element based on ABP framework

With the above introduction, we already know which files need to be generated, so we add a function entry on the code generation tool database2sharp, write the corresponding template code, and then integrate the rules to generate the corresponding files. Here is the introduction of the related functions.

First, we open the code generation tool and expand the table information of the corresponding database, as shown in the following interface.

Then right click on the table or database to display the menu, and select code generation Vue + element interface code of ABP, as shown below.

Then select the corresponding database and table on the dialog box to generate, and execute step by step.

In the final interface, we will select the table to generate code and the corresponding layout, including an interface with ordinary query list and an interface with tree list on the left. We can select two layouts according to our needs.

The generated files include JS files

And the view file in the corresponding directory, with the suffix Vue

We copy the folder and related files in the root directory SRC to vs code, which can be the default path, or we can classify the view files into the directory we like(Here I adjust the path menu / index to security / menu)And adjust the routing file to add the corresponding view entry

The front end will automatically filter the corresponding route according to the list of accessible menus contained by the user, so that our menu entry can access the corresponding route.

Integrate and compile the front-end, start the back-end ABP service, and run to view the front-end interface we just created, as shown below.

The original view details interface is shown below

The generation interface, no matter from the overall layout, as well as the display of the list, and the entry of each function button, has been perfected for us. We generally need to adjust it.

Simplify the query conditions of the interface, and sort out the contents of the list. The adjustment interface is as follows.

The view details interface after adjustment is shown below.

Using the code generation tool to quickly generate the front-end interface of Vue + element based on ABP framework can improve the efficiency of code development and reduce the chance of error. At the same time, it can unify the interface style and practice of the whole set of interfaces, and get twice the result with half the effort.


Recommended Today

Statistics In PostgreSQL

This article is similar to the source reading of an article, a preliminary introduction to the PostgreSQL statistical information module. The reason why we choose PostgreSQL instead of other databases is that PostgreSQL always performs well in various papers when we see some comparison of design estimation. Statistics collected in PG In PostgreSQL, the collected […]