[ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

很久没写文字了，固然你们也不期待嘛，反正看代码就好了。

演示网站

首先说下这个项目吧。
如标题同样是基于VUE+.NET开发的框架，也是群友一直吼吼吼要一个vue版本的ABP框架。
咱们先来看看首页吧：

还比较酷炫，提供下演示帐号

演示地址：http://vue.yoyocms.com/
帐号：demo
密码：bb123456
固然你也能够本身注册一个帐号，来进行验证。

介绍

首先对不知道ABP框架的同窗说明下啥是ABP框架：

ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。
ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。
框架
ABP是基于最新的ASP.NET CORE，ASP.NET MVC和Web API技术的应用程序框架。并使用流行的框架和库，它提供了便于使用的受权，依赖注入，验证，异常处理，本地化，日志记录，缓存等经常使用功能。
架构
ABP实现了多层架构（领域层，应用层，基础设施层和表示层），以及领域驱动设计（实体，存储库，领域服务，应用程序服务，DTO等）。还实现和提供了良好的基础设施来实现最佳实践，如依赖注入。
模板
ABP轻松地为您的项目建立启动模板。它默认包括最经常使用的框架和库。还容许您选择单页（Angularjs）或多页架构，EntityFramework或NHibernate做为ORM。访问官网，了解更多。

结构

本次选择的项目的结构为:

• .net framework 4.6
• VUE + VUEX+ VUE-ROUTER
  这样的先后端分离的技术，可是分离的不是很纯粹，由于ABP设计的缘由，若是要纯粹的先后端分离，在作受权的时候有点麻烦，也就没有采用token的方式进行受权。

在以前的文章 [ABP框架]动态web Api的拦截用法 中有说明如何使用token进行受权验证，目前使用的依然是cookie的方式进行验证。
可是不影响先后端开发方式。
看下登陆页面：

功能实现

• 登陆注册
• 多语言切换
• 消息管理
• 租户管理（多租户）
• 角色管理
• Session
• 受权（权限管理）
• 设置管理
• 多语言管理
• 审计日志
• 动态WebApi
  等功能，但愿你本身去体验。

若是你的.NET技能不扎实，或者想有提升，ABP是最好的学习框架。

前端技术栈说明：

前端使用的框架

1.vue
2.vuex
3.vue-router
4.jquery

UI库

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

项目结构

• build webpack构建的脚本
• config webpack构建的配置
• dist build以后的文件
• src 源代码目录
  • assets 全局的资源文件
  • common 公共样式 公共的方法
    • language 语言包(暂时无用)
    • utils 工具类
  • components 全局的组件
  • filters 过滤器
  • mixins 存放sass的各种样式
  • router 路由配置
  • service 接口请求层
  • store vuex
  • vendor 存放第三方的库
  • views 视图文件
  • vuePlugin 自定义的vue插件
• static 静态文件,编译后的目录不变

如下是前端人员的原话，感谢 慧鑫666 抽出时间来完善vue的界面。

## 开发步骤

进行开发前, 咱们假定你有 es6,sass,vue,vue-router,vuex 的技能基础。
建议读一读 尤雨溪大神的建议

安装前端依赖

进入Web项目中的Assets目录

$ npm i

运行项目

记得先启动后台

$ npm run dev

webpack会用 express 启动一个8986端口的web服务器

部署

$ npm run build

该命令会将全部文件编译到 dist 目录下, 参考上面的项目结构图

1.添加页面

• 先到 src/views 建立一个模块的目录。
  好比当前我添加了一个叫 administration 的目录, 其中包含了全部系统管理的页面
  每一个模块里面也可能会包含 components 和 assets目录, 表示其中的组件和资源都只属于当前模块
  
• 接下来添加一个 Index.vue, 做为父路由的页面, 用来控制该模块下的全部页面。
  须要注意 keep-alive 的做用
• 而后添加你须要的页面 好比叫 User.vue
  若是须要获取数据, 请在 methods 中添加名为 fetchData 的方法, 在该方法中, 须要在获取完数据后调用 abp.view.setContentLoading(false)关闭内容区域的loading遮罩层。（能够参照User.vue)

2.添加路由

• 进入src/router目录，添加路由的模块文件夹，在该文件夹中添加名为 index.js的文件
  
• 而后向src/router/index.js 中注册当前添加的路由信息

3.添加service

• 进入src/services目录, 添加对应接口请求的模块, 好比role相关的都放到roleService.js中
  该roleService.js文件导出的对象和abp.services.yoyocms.role是对应的。这样使用的好处是能够统一管理和扩展

以上就是vue版本的ABP 的基本状况了。

下载地址：

vue版本开源地址：https://github.com/yoyocms/YoYoCms.AbpProjectTemplate
vue版本演示地址：http://vue.yoyocms.com/
angularJS版本开源地址：https://github.com/ltm0203/YoYoCms
angularJS版本演示地址：http://www.yoyocms.com

若是你有好的建议或者bug反馈，请到github上提issue 。

同时咱们也作了一个项目生成器，功能相似ABP官方的模板。

体验网址 是: http://www.yoyocms.com/