码云推荐 | 基于 Vue.js 的单页面后台管理系统

栏目: JavaScript · 发布时间: 7年前

内容简介:码云推荐 | 基于 Vue.js 的单页面后台管理系统

framework-admin

基于Vue.js的单页面后台管理系统

尽管oschina已经存在大量优秀的 Java 平台管理系统, 但还有不少数量的项目前端架构还是上古时代遗留下来的iframe + jsp, 较新一点的是ajax + HistoryAPI, 前一秒刚被各项目后端琳琅满目的功能吓尿的同时, 再一看那粗鄙的前端交互设计, 就像远处走来一个肤白貌美大长腿的大美女, 走近一看竟然他妈的是凤姐一样?(凤姐对不起) 在这个全民ES6 + Babel的大时代下, 总感觉像吃了苍蝇一样难受!

是不是每次做项目的激情都被BOSS一句: "后台系统又不给外人用, 做那么漂亮干嘛, 能用就行.." 给活生生的浇灭?

难道每个后台系统都注定是简陋的? 做完之后连自己使用、维护的心情都欠逢的?

...

不不不,咱也要把后台系统当做交给用户的产品来做, 凭什么咱天天打交道的系统不能长得漂漂亮亮的?

谁说花在UI交互上的时间不能超过后端编码, 我就不!

这个项目的开发宗旨里, 一切能简化的操作都尽量简化, 不管花费的代价多么大, 只要有办法可以实现, 就一定实现它:

  • 能一个页面完成的操作绝对拆分成两个页面
  • 能有更好的实现方法全部推倒重做也在所不惜
  • ...

基础功能

管理系统的基础---权限控制方面, 颠覆了管理系统把所有菜单/页面/权限都一股脑塞到数据库的一惯套路, 既然要搞前后端分离, 那咱就分得更彻底一点:

  • 创建权限时只记录两个重要信息: 权限标识上下级关系 , 所有系统权限只跟 权限标识 有关, 其它什么乱七八糟的都可以去掉 简化!
  • 所有路由在前端路由文件中写死, 通过directive配合内存中用户的 权限标识 集合做展示控制 (好处是UI位置随便放, 爱放哪放哪) 简化!
  • 简化的RBAC模型, 一个用户只和单个角色相关联. (你问为什么不关联多个? 为什么不能只关联一个? 我能想到唯一的缺点就是不能多个角色权限相互组合, 但那并不是什么大不了的问题, 每个角色单独配置不行吗?) 简化!
  • 既然所有权限只跟一个 权限标识 字符串相关, 就可以对后台系统的一堆权限框架说拜拜了, spring-security, apache-shiro统统可以从依赖里删掉, 一个拦截器不超过10行代码就搞定了 简化!

简直完美有没有?

系统结构

项目基于vue-template的webpack-simple构建, 采用的主要框架除了Bootstrap 4, 没有任何其它重度依赖(个人感觉那些个基于vue的UI框架都是在抄袭BS重复选轮子, 而且造得不怎么样, 还不如自己来造-_-!):

  • SweetAlert 弹框
  • toastr 提示(已被俺ES Moudle化, 为的是将来添加Vue的transition动画)
  • jquery.treetable 用于树形列表的展示
  • jstree 用于树形Dropdown
  • ...

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

该项目仅含前端代码,运行前请先启动该后台系统:framework-server (Java平台)

系统部分截图:

用户管理模块

码云推荐 | 基于 Vue.js 的单页面后台管理系统

角色管理模块

码云推荐 | 基于 Vue.js 的单页面后台管理系统

权限管理模块

码云推荐 | 基于 Vue.js 的单页面后台管理系统

数据字典编辑

码云推荐 | 基于 Vue.js 的单页面后台管理系统


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5秘籍

HTML5秘籍

Matthew MacDonald / 李松峰、朱巍 / 人民邮电出版社 / 2012-8 / 79.00元

《HTML5秘籍》共包括四个部分,共12章。第一部分介绍了html5的发展历程,利用html5重新构造网页,以及html5的语义元素。第二部分介绍了html5对传统web表单的翻新、html5中的音频与视频、canvas绘图技术、css3等内容。第三部分介绍了数据存储、离线应用、与web服务器通信,以及html5与javascript技术的强大结合等内容。第四部分为附录,简单介绍了css和java......一起来看看 《HTML5秘籍》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具