[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/