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: