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