Function introduction of Vue + element front end application development framework


In the front, I introduced many ABP series articles “ABP framework use”, which step by step introduced the web services involved in our daily development API service construction, login log and operation audit log, dictionary management module, information maintenance of provinces and cities, organization, user, role, permission, menu and other contents in permission management module, configuration management module, advanced query processing of interface and so on. According to our years of development experience in WinForm field, we have completed the application of system functions in WinForm interface And the use of tools to achieve rapid WinForm interface generation work; while in the step-by-step Vue + element Front end application development article “step by step Vue + element” introduces the front-end solution combining ABP + Vue + element to build BS. The front-end interface realized by Vue + element is beautiful and elegant. Moreover, the web interface with modular assembly of business content is very conducive to the development of large and complex systems and provides great efficiency.

1. Introduction of ABP framework background knowledge

ABPyes ASP.NET Short for boilerplate, ABP is aOpen SourceAnd document friendlyApplication framework. ABP is not only a framework, it also provides a frameworkBest practiceBased onDomain Driven Design (DDD)The architecture model of. I’ve been learning to use ABP framework for some time, I always want to have a comprehensive understanding of the whole context of this framework, and I want to organize its use process into a series, but I haven’t written the beginning of this article. I hope I can have a deeper understanding, and I hope I can understand more thoroughly. I can’t confuse people, and I don’t want to translate the content of the official website with the same pattern on the Internet The English introduction of is also very detailed, so I think it would be better to sort it out according to the actual use process.

It’s amazing to know ABP framework for the first time. It’s basically a synthesizer of. Net domain architecture. It almost includes all kinds of technology applications in our. Net domain. Moreover, it can support. Net framework and. Net core. I’m also very interested in its introduction.

1) Characteristics of ABP framework

Let’s get a general idea of what ABP framework involves.

  • Dependency injectionThis part uses Castle Windsor (dependency injection container) to implement dependency injection, which is also the way we often use IOC to handle;
  • Repository modelEntity Framework, NHibernate, mangodb, memory database and so on have been implemented, and the warehouse mode can quickly call the data interface;
  • Authentication and authorization managementTo verify whether the user logs in or the permission of the interface, you can use the declaration feature to set the calling permission of each interface in a very fine-grained way;
  • Data validationABP automatically judges the non null input parameter object of the interface, and can verify the validity of the attribute according to the application information of the attribute;
  • Audit loggingThat is to record our call records for each interface, as well as the records of the personnel who created, modified and deleted the records;
  • Unit of work modeBy default, all the interfaces of application service layer run in the mode of work unit. Even if they call different storage objects, they are all in the logic of a transaction;
  • exception handlingABP framework provides a complete set of process operation, which can record and transfer the exception conveniently;
  • LoggingWe can make use of log4net to record the routine log, which is convenient for us to track the program processing information and error information;
  • Multilingual / localization supportABP framework is also friendly to multi language processing, providing configuration processing of XML and JSON language information;
  • Auto mappingThis is a very important object isolation concept in ABP. By using automaper to realize the attribute mapping of domain object and dto object, the logical relationship between them can be isolated, but the assignment of attribute information can be easily realized;
  • Dynamic web API layerWith this dynamic processing, application service can be directly published as a web API layer, without the need to manually create a web API controller for each business object, which is very convenient;
  • Ajax proxy processing of dynamic JavaScript, can automatically create JavaScript proxy layer to make it easier to use web API, which is used in the web layer.

In addition to these important features, ABP framework has many special functions or concepts.

  • Multi tenant support (the data of each tenant is isolated automatically, and the business module developer does not need to write the corresponding code when saving and querying the data;
  • Soft deletion support (inheriting the corresponding base class or implementing the corresponding interface will automatically implement soft deletion)
  • System settings access management (system level, tenant level, user level, scope automatic management)
  • Eventbus implements domain events
  • Modules and module dependencies, plug-in module processing and so on

ABP framework is mainly based on the concept of domain driven to build the whole architecture. The concepts of Domain Driven include domain object entities, repository objects, domain services of domain service interface layer, domain events, application services of application service interface, DTOs of data transmission object, etc.

ABP official website: From there, you can view detailed cases and documentation, and download different types of basic frameworks as needed.

ABP GitHub source code address: , you can download the whole basic framework content, as well as the relevant sample case code.

On the basis of ABP framework, we have sorted out and improved the whole permission system, and the rapid development of business system based on it. The architecture diagram of our sorted ABP rapid development framework is shown in the figure below (illustrated with dictionary module as an example)


The above is the framework of the back-end API, which introduces the front-end technology route of Vue + element separated from the front-end. Then the boundary between the front-end and the back-end is very clear, and the front-end can build the front-end application by obtaining the corresponding JSON through the network.

In the front-end processing, it mainly uses the store object in vuex mode to realize the request processing of action and mutation. After obtaining the data, it can update the data in the state. If it’s just the data processing of the current page, you don’t even need to store the state information. Instead, you can get the returned data directly through the API class encapsulated by the front end and update it directly to the interface view.

The relationship among view, store module, API module and web API of Vue + element front-end project is as follows.

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

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 related interfaces, as shown below.


2. Function introduction of front end ABP framework based on Vue + element

1) Login interface

The effect of system login interface is as follows.


We deal with the content of the text in terms of internationalization.


2) Main frame interface

The main frame interface adopts the dynamic generation of menu based on background configuration, with the menu on the left and the specific navigation bar and content area on the top of the right.

The content area of the home page includes some conventional statistical display information and comprehensive display contents of various charts.

Let’s take a look at the effect of the chart. The effect of the histogram is as follows.

The effect of the pie chart is as follows.

The effect of the graph is as follows.

Other types, polar coordinates and scatter patterns

Or a combination of curves and histograms

The top navigation bar provides query, full screen switching, layout size modification, multi language selection menu, avatar and shortcut menu processing.


3) User management interface

User list includes pagination query and list display, as well as adding, editing, viewing user records, or resetting password for specified users.


We put together the general list interface, such as add, edit, view, import and so on. In addition to the list page, other contents are processed in the way of pop-up layer dialog box, as shown in the following interface diagram.

The user editing interface is shown below.

Of course, you can view the user’s own permissions, function points and menus, as shown in the following interface.


4) Organization management

An organization is mainly a hierarchical object relationship, which generally includes but is not limited to the definition of company, Department, working group, etc. an organization includes the relationship between user members and role members, as shown in the following interface.


An organization can modify its name and corresponding parent node, as shown in the following interface.

Members of an organization can add multiple personnel records, among which you can add or delete the organization member list..

Click the [add member] button in the organization member section of the organization list interface to open a dialog box and select to add organization members.


The role list interface in an organization is shown below. You can add or delete the role list.

Click the [add role] button in the role part of the organization list interface to pop up a dialog box and select to add a role.



5) Role management

Role information has no hierarchical relationship and can be displayed in a list.

The role includes permission assignment, role member and maintenance of owning menu. The following is the role editing interface, which includes basic information of role, owning permission, containing member and management of owning menu. For roles, menu should be an interface resource, which can manage the menu of corresponding role users through configuration.

The editing interface is shown below.

The permissions of roles include the permissions that can be used by the system, and you can check the function points required for role settings, as shown in the following interface.


User members, like the user management of organizations, can specify multiple users, which will not be repeated here.

For roles, menu should be an interface resource. You can manage the menu of the corresponding role users through configuration, as shown in the following interface.

After the user logs in to the system, the system dynamically constructs and displays the corresponding list menu and filters the available route list according to the menu items of the current user role.


6) Function management

Strictly speaking, ABP framework does not manage authority function points well. It does not have any tables to store this function set. Instead, it defines authority function points by deriving subclasses of authorization provider

On this basis, I introduce a permission function table to store function points, and then provide a management interface to maintain these function points dynamically. The interface is shown below.


We just saw the content of permissions that can be assigned in the role, which is the information display based on this permission table.

In this way, we can dynamically add or batch add the required function points, and connect them with the whole permission management module to form a complete control system.


In addition, we can also manage the list through the buttons in the tree list on the left. We can add, edit, delete or cascade delete the corresponding node and all its sub nodes.


After the system logs in, the client automatically obtains the corresponding user’s role function point, and then each time we open a new business window, the client will carry out the logic control of the interface permission. If there is no permission, then you can not access the operation. The following is to prohibit the import, export, add, edit and other operation functions of product information. As shown in the following interface, the product interface is dynamically changed After canceling the relevant permissions, some operation functions are prohibited in the interface.


7) Menu management

The development of the main interface of the system 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 side. 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 through the contraction and collapse of the tree list.

In the ABP + Vue + element rapid development framework, the front-end menu of BS and the CS menu are separate. We maintain the menu content in the authority module system of the background and assign it to the corresponding role users. After the user logs in to the system, the menu display is loaded dynamically, and through the menu configuration information, it jumps to the corresponding route for page display processing.

The list interface of menu resource management is as follows


Click the tree list item on the left to display the menu list under the corresponding parent node on the right.

In the list button on the right, you can edit the existing menu. The menu editing interface is as follows.

We can select the menu icon by selecting the icon button. Here is the interface for selecting the menu image.



8) System login log

Login log, which is the record information left by the user when he attempts to log in, including the user’s login user name, ID, IP address, login time, and whether the login is successful or not.

This login log is the record left during the system login attempt, which can be used by the administrator to track and understand the usage of an account, and also to analyze a statistical report according to the login information.

The view details interface is shown below.


9) System audit log

Audit log is used to set a series of operation records under the cross section flow when we access or call an application service layer interface, in which the service interface, parameters, client IP address, access time, and exception information are recorded. These operations are automatically recorded in the ABP system. If we need to shield some service classes or interfaces, this is the case Some will not be recorded in it, otherwise it will be recorded by default.

The details display interface of audit log is as follows.


10) Dictionary management

In the dictionary management interface, the dictionary types are listed on the left, and the dictionary data under the dictionary types are displayed in pages. On the right, the dictionary data of the corresponding dictionary types are displayed in pages. The dictionary management interface is as follows.

The dictionary categories are maintained in the list on the left, and can be added, edited, deleted and other routine operations.

The interface for adding or editing the corresponding dictionary class is as follows.

The interface for batch adding dictionary content is shown below.


11) Product list display

Product list to show a product related content, including the display of product pictures, as well as product information and other content.

At the top of the display interface, we use the interface component of element to define the display effect of a lantern, as shown below.

Another list display interface of product information is shown below.

The editing interface of product information is as follows.

In the detailed description of the product, we use rich text editing. Here, we use the third-party component of TinyMCE to achieve editing processing. The display effect is as follows.

The product information view interface can preview and display the pictures.


12) Icon management

In the front-end application of Vue + element, icon is an essential element to decorate the interface. Therefore, it is very necessary to integrate some common icons. Fortunately, there are many common icons in the element interface component, but the number is not very large. It should be about 300. Therefore, considering expanding more icons, I introduced the Vue awesomecomponent, which makes use of font The built-in icon of awesome realizes the integration of more icons.

The element icon management interface is as follows:

The Vue awesome based icon management is as follows.

The query provides the name for icon query, and limits the number of icons to be displayed at one time. In addition, it provides a custom color option to change the display color of icons.


Recommended Today


catalog How to learn CSS What is CSS History of development quick get start Advantages of CSS Three ways to import CSS Expansion: two ways of writing external style selector Basic selector Hierarchy selector Structure pseudo class selector attribute selectors Beautify web page elements Why beautify web pages Span label: for the text that needs […]