[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/
转载于:https://www.cnblogs.com/wer-ltm/p/7380122.html
[ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统相关推荐
- .NET Core/.NET5/.NET6 开源项目汇总:(权限)管理系统
前言 企业管理系统一般包含后台管理UI.组织机构管理.权限管理.日志.数据访问.表单.工作流等常用必备功能.下面收集的几款优秀开源的管理系统,值得大家入门学习.如有新的优秀项目,我会不断补充. 开源项 ...
- 2.4K Star!450 个重磅前端开源项目合集推荐
大家好,我是你们的 猫哥,还是那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 不知不觉,公众号:前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年了呀, 前 ...
- 火影推荐程序连载14-Vue开源项目使用探索
前言 本文记录一次使用Vue开源项目的过程. 寻找Vue开源项目 要使用Vue开源项目就必须先找到一个,我们去Github上搜索[后台],然后使用Vue分类进行检索,找到排名第一的开源框架 然后新建一 ...
- 学习 Go 语言,有哪些优质的开源项目?
必须推荐这18个golang开源项目,从新手到进阶该有的都有! 建议收藏!!! 1.Annie https://github.com/iawia002/annie Go 编写的下载快速.使用简单.程序 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理(附赠福利)
ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...
- SpringSecurity权限管理系统实战—一、项目简介和开发环境准备
源码获取: github或者gitee 文章目录 系列目录 前言 一.简介 二.什么是RBAC 三.系统功能 四.环境搭建 五.技术栈 六.说明 七.项目截图 八.请作者喝杯卡布奇诺 系列目录 Spr ...
- vue vuex vue-router后台项目——权限路由(超详细简单版)
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 bl ...
- 分享一套基于SpringBoot和Vue的企业级中后台开源项目,这个项目有点哇塞!
点击上方蓝字关注「程序员的技术圈子」 今天圈子哥给大家分享一套很不错的企业级的开源项目,最近一直比较忙,所以一直没有写文章,但也是一直想着给大家分享一些有价值的东西,而项目经验可能对于很多的在校学生来 ...
- vue 计算屏幕的高度_学习Vue可以参考的10个开源项目——OpenSource
介绍 今天文章重点介绍一些最佳的Vue.js开源项目.Vue.js是一个JavaScript框架,主要专注于在应用程序项目中开发用户界面.Vue是一个简单的最小核心,具有可逐步采用的堆栈,可以处理任何 ...
- 2018.7月Vue优质开源项目清单
2018.7月Vue优质开源项目清单 SmallRuralDog/electron-vue-music stars:325 forks:51 项目描述:基于 electron-vue 开发的音乐播放器 ...
最新文章
- 学习Python不错的网站
- PMBOK项目管理PMI主义\IPMA概述
- 北京科技大学C语言程序设计,北京科技大学《C语言》第1章.ppt
- 如何改造现有文件为 CMD 模块
- IBM 2013策略发布:大数据和分析、云计算、企业移动、社交商务、智慧商务、智慧城市...
- 单例模式不能被继承_Spring的单例实现原理
- JSOI2018冬令营游记总结(迁移自洛谷博客)
- 安装emmet时pyv8下载失败
- Ignite分布式的内存数据库简单应用
- 高效能人士的七个习惯读后感与总结概括-(第七章,第八章,第九章)
- 如何制作语音聊天程序源码,制作语音社交交友APP
- 详细解析Linux /etc/shadow文件
- 获取付费网站图标图片的方法
- 吕著三国史话(观后感一)
- IDM+毒(du)盘 = 高速下载互联网中大部分资源
- linuxoracle静默安装应答文件修改_Linux7静默安装Oracle11g教程,亲测实用有效!
- FileStream,StreamReader,StreamWiter的用法
- 快递查询单号查询物流实用攻略
- 飞翔的小鸟--Java小游戏实战(代码完整)
- 手把手教你使用Python网络爬虫获取B站视频选集内容(附源码)
热门文章
- 系统架构设计理论与原则、负载均衡及高可用系统设计速记
- 推荐10个趣味实战项目,从零入门人工智能和数据分析,看这篇就够了
- 黑客攻击「宝贝回家寻子网」致数据丢失:丧尽天良
- 欠阿里云 1 分钱,数据被删除
- 如何清理 Linux 系统开机启动项?
- BIO,NIO,AIO总结
- Codeforces 463D Gargari and Permutations(求k个序列的LCS)
- Activator.CreateInstance 方法 (Type) 的用法
- DELPHI基础教程 第七章 剪贴板和动态数据交换
- BZOJ 3676 回文串(回文树)题解