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

简介: 好久没写文字了,当然大家也不期待嘛,反正看代码就行了。演示网站首先说下这个项目吧。如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架。

好久没写文字了,当然大家也不期待嘛,反正看代码就行了。
img_57997b735621f70d9b73ab36bdb491d5.jpe

演示网站

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

img_d8ca7b56cac0c04766f647ed2aecfdbd.gif
1.gif

还比较酷炫,提供下演示账号

演示地址: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的方式进行验证。
但是不影响前后端开发方式。
看下登录页面:

img_0b47efcc04e3dcb5ec8d491c685182e5.gif
login.gif

功能实现

img_0590b730f2259563f6f16f631537046c.png
image.png
  • 登录注册
  • 多语言切换
  • 消息管理
  • 租户管理(多租户)
  • 角色管理
  • 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 的目录, 其中包含了所有系统管理的页面
    每个模块里面也可能会包含 componentsassets目录, 表示其中的组件和资源都只属于当前模块
  • 接下来添加一个 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/

目录
相关文章
|
2天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
2天前
|
JavaScript
vue知识点
vue知识点
17 5
|
1天前
|
JavaScript 前端开发 Java
【Vue】大悟Vue的核心之MVVM
【Vue】大悟Vue的核心之MVVM
8 1
|
1天前
|
JavaScript 前端开发 安全
如何快速上手VUE框架
如何快速上手VUE框架
6 0
|
1天前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
7 0
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
5天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
4天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
14 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
16 2
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
14 1