YoYoCms.AbpProjectTemplate

Demo website

Let’s talk about this project first. Just like the title, it is a framework developed based on VUE+.NET. It is also the ABP framework that group members have been clamoring for for a vue version. Let’s take a look at the homepage first:

It’s quite cool. I’ll provide you with a demo account.

Demo address: http://vue.yoyocms.com/ Account: demo Password: bb123456 Of course, you can also register an account yourself for verification.

introduce

First, for students who don’t know the ABP framework, let’s explain what the ABP framework is:

ABP is the abbreviation of "ASP.NET Boilerplate Project (ASP.NET Boilerplate Project)". ASP.NET Boilerplate is a new starting point for developing modern WEB applications using best practices and popular technologies. It aims to become a universal WEB application framework and project template. Framework ABP is an application framework based on the latest ASP.NET CORE, ASP.NET MVC and Web API technologies. And using popular frameworks and libraries, it provides easy-to-use common functions such as authorization, dependency injection, validation, exception handling, localization, logging, caching, etc. Architecture ABP implements multi-layer architecture (domain layer, application layer, infrastructure layer and presentation layer), as well as domain-driven design (entities, repositories, domain services, application services, DTO, etc.). Good infrastructure is also implemented and provided to implement best practices such as dependency injection. Template ABP easily creates startup templates for your projects. It includes the most commonly used frameworks and libraries by default. Also allows you to choose single page (Angularjs) or multi-page architecture, EntityFramework or NHibernate as ORM. Visit the official website to learn more.

structure

The structure of the project selected this time is:

• .net framework 4.6
• VUE + VUEX + VUE-ROUTER is a front-end and back-end separation technology, but the separation is not very pure. Because of the design of ABP, if you want to purely separate the front-end and front-end, it will be a bit troublesome when doing authorization, so the token method is not used. Authorize.

In the previous article [ABP Framework] Interception Usage of Dynamic Web Api, it was explained how to use token for authorization verification. Currently, the cookie method is still used for verification. But it does not affect the front-end and back-end development methods. Take a look at the login page:

Function realization

• Login Register
• Multi-language switching
• Message management
• Tenant management (multi-tenant)
• role management
• Session
• Authorization (rights management)
• Settings management
• Multi-language management
• Audit log
• Dynamic WebApi and other functions, I hope you can experience it yourself.

If your .NET skills are not solid or you want to improve them, ABP is the best learning framework.

Front-end technology stack description:

####Framework used by the front end 1.vue
2.vuex
3.vue-router
4.jquery

UI library

1.element-ui
2.waves
3.bootstrap
4.BSBADMIN

Project structure

• build script built by webpack
• config webpack build configuration
• Files after dist build
• src source code directory
  • assets global resource files
  • common public style public method
    • language language pack (temporarily unused)
    • utils tool class
  • components global components
  • filters filters
  • mixins store various styles of sass
  • router routing configuration
  • service interface request layer
  • storevuex
  • vendor stores third-party libraries
  • views view file
  • vuePlugin custom vue plug-in
• static static files, the compiled directory remains unchanged

The following are the original words of the front-end staff. Thank you Huixin666 for taking the time to improve the interface of vue.

Development steps

Before development, we assume that you have a basic skill base in es6 , sass , vue , vue-router , and vuex .
It is recommended to read the advice of You Yuxi

Install front-end dependencies

Enter the Assets directory in Web项目

 $ npm i

Run the project

Remember to start the background first

 $ npm run dev

webpack will use express to start a web server with port 8986

deploy

 $ npm run build

This command will compile all files into the dist directory, refer to the project structure diagram above

1.Add page

• First go to src/views to create a module directory.
  For example, I currently added a directory called administration , which contains all system management pages. Each module may also contain components and assets directories, which means that the components and resources in it only belong to the current module.
• Next, add an Index.vue as the parent routing page to control all pages under this module.
  Need to pay attention to the role of keep-alive
• Then add the page you need, such as User.vue
  If you need to get data, please add a method named fetchData in methods . In this method, you need to call abp.view.setContentLoading(false) after getting the data to close the loading mask layer of the content area. (You can refer to User.vue)

2.Add route

• Enter the src/router directory, add the routing module folder, and add a file named index.js in the folder.
• Then register the currently added routing information in src/router/index.js

3.Add service

• Enter the src/services directory and add the module corresponding to the interface request. For example, the role-related objects are placed in roleService.js The objects exported by the roleService.js file correspond to abp.services.yoyocms.role . The advantage of using it this way is that it can be managed and expanded uniformly

The above is the basic situation of the vue version of ABP.

Download address:

The open source address of the vue version: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate The demo address of the vue version: http://vue.yoyocms.com/ The open source address of the angularJS version: https://github.com/ltm0203/YoYoCms angularJS Version demo address: http://www.yoyocms.com

If you have good suggestions or bug feedback, please file an issue on github.

At the same time, we also made a project generator with functions similar to the official ABP template. The function will be released in the middle of the year, so please stay tuned.