Step by step Vue + element front-end application development (19) — integration of back-end query interface and Vue front-end

Time:2021-10-24

In the series of articles on the front-end application development of Vue + element step by step, the processing and implementation of various functions of the system are introduced earlier. This essay introduces the integration of front-end and back-end development from a main line. Let’s make a complete introduction from the processing of query interface at the back-end of ABP framework, the encapsulation of front-end API interface call, and the whole calling process of front-end element interface.

We introduced earlier that the interface of Vue + element front-end is to call the API interface service published by the ABP framework of the back-end. The API interface service publishes the corresponding interface information through swagger for our front-end development and use, providing very good convenience; When we use the front-end framework of Vue + element, we also need to encapsulate a simple abstract base class for the call of the back-end interface API, so that conventional interfaces such as addition, deletion, modification and query can be used by inheriting the base class without cumbersome and repeated code; In addition, in the process of obtaining data through the page, Vue + element can pass in the corresponding API parameter conditions, such as paging information and query condition information, so as to basically meet a conventional operation of querying and obtaining data list, and the obtained data can be bound to the table control of the interface.

1. Back end interface implementation of ABP framework

I sorted out an architecture graph according to the relationship between projects, as shown below.

In the figure above, the orange part is the classes or interfaces we add to each layer. The serial numbers on the layers are the contents we need to deal with step by step. Let’s interpret the contents of each class or interface one by one.

The ABP framework backend project solution view is shown below.

 

Swagger is integrated in web.host, and ABP + swagger is responsible for the release and display management of API interface. The following is the management interface of API interface.

Further check the API interface description of getall. We can see the corresponding condition parameters, as shown below.

These are processed as query conditions to obtain the corresponding condition information for the back end, so as to filter the returned data records.

Then our front-end interface also needs to construct the query interface according to these parameters. We can process it through some conditions, where maxresultcount and skipcount are parameters for paging positioning.

In the application service layer interface class, rewriting createfilteredquery can set the query rules of getall, and rewriting applysorting can specify the sorting order of the list.

Or the processing of the menu module is as follows.

Subclasses are generally used to rewrite these functions, because the base class processing functions have integrated their respective call logic and condition functions such as condition processing, paging and sorting.

The following is the getall function implementation of the base class crudappservice.

 

 

2. Encapsulation of front-end framework API class of Vue + element

The front-end and back-end separated Vue + element is introduced as the front-end technical route, so the front-end and back-end boundaries are very clear. The front-end can build the front-end application by obtaining the corresponding JSON through the network.

Generally speaking, our page module may involve the store module to store the corresponding status information, or it may directly access the API module to call and display the data. In the process of page development, in most cases, the store module is not required to interact. Generally, it is only necessary to store the corresponding page data in the global data state to enable the processing of the store module.

Through webproxy proxy processing, we can easily realize cross domain processing in the front end. Different paths can call different domain name and address APIs, and finally convert them to local API calls, which is cross domain processing.

 

The front end encapsulates the classes of the front end JS end according to the interface of the ABP back end. The concept of ES6 class is introduced to realize the unified encapsulation of the business base class interface and simplify the code.

The permission module involves user management, organization management, role management, menu management, function management, audit log, login log and other business classes. If these classes inherit baseapi, they will have relevant interfaces, as shown below.

The baseapi of JS class has a conventional add, delete, modify and query interface, as shown below.

 

3. Page query and data display of Vue + element’s front-end framework

The main frame interface is dynamically generated based on the menu configured in the background. The menu is on the left and the specific navigation bar and content area are on the top of the right.

The development of the system main interface is basically a standard interface. The system menu is placed on the left side of the system and the list display content is placed in the middle area on the right. However, when there are many system menus, the menu needs to be divided into several levels. A custom menu component list is placed on the left side of the system menu, so that many menu functions can be placed by shrinking and folding the tree list.

In the rapid development framework of ABP + Vue + element, the front-end menu of BS and the menu of CS are separated respectively. We maintain the menu content in the background permission module system and assign it to users with corresponding roles. After users log in to the system, they dynamically load the menu display, and jump to the corresponding route for page display through the menu configuration information.

The list interface of menu resource management is as follows:

The user list includes pagination query and list display, and you can use buttons to add, edit, view user records, or reset passwords for specified users.

 

For example, for the menu management list, a form is defined at the front end for query processing, which can be queried according to the display name and creation time, as shown in the following code.

 

Earlier, we introduced the encapsulation class of front-end API call, as shown in the following structure.

 

Then we need to introduce the corresponding menu API class into the front-end page, which can be referenced as follows.

 

We defined the data attribute in the JS of the page module, including the list used to carry the data list and pageinfo, as shown in the following code.

 

According to the conditions entered on the page and the paging information stored in data, we can request data on the server side according to the conditions.

 

The above conditions are constructed, and then according to the conditions, directly call the menuapi class for processing to obtain the list.

 

In order to facilitate readers’ understanding, I list the links of the previous essays for reference:

Step by step Vue + element front end application development (1) — Preparation of development environment

Step by step Vue + element front end application development (2) — use of API, store and view in vuex

Step by step Vue + element front end application development (3) — association processing of dynamic menu and routing

Step by step Vue + element front-end application development (4) — processing of obtaining back-end data and product information pages

Step by step Vue + element front-end application development (5) — table list page query, list display and field escape processing

Step by step Vue + element front end application development (6) — use of conventional element interface components

Step by step Vue + element front end application development (7) — introduce some conventional JS processing functions

Step by step Vue + element front end application development (8) — use of tree list component

Step by step Vue + element front end application development (9) — processing of interface language internationalization

Step by step Vue + element front-end application development (10) — handling various chart displays based on Vue eckards 

Step by step Vue + element front end application development (11) — maintenance and use of icons

Step by step Vue + element front end application development (12) — front end login processing integrating ABP framework

Step by step Vue + element front-end application development (13) — encapsulation of front-end API interface

Step by step Vue + element front-end application development (14) — realize front-end interface display according to ABP back-end interface

Step by step Vue + element front end application development (15) — processing of user management module

Step by step Vue + element front end application development (16) — processing of organization and role management module 

Step by step Vue + element front end application development (17) — menu management

Step by step Vue + element front end application development (18) — function point management and permission control  

Step by step Vue + element front-end application development (19) — integration of back-end query interface and Vue front-end