vue-quasar-admin

  Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cordova),跨平台应用(通过Electron)。

  Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App 在使用Quasar的时候, 你甚至不需要Hammerjs, Momentjs, 或者Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到。

  vue-quasar-admin是基于Quasar-Framework搭建的一套包含通用权限控制的后台管理系统(目前只针对PC端)。

github

online demo

登录账号:

admin 123

test 123456

website_admin 123456

请不要随意修改账号名称,其他操作随意,可通过右上角"数据初始化"按钮初始化数据

功能与特点

  • 真实后端数据支持
  • 登录/登出
  • 灵活的九宫格布局
  • 收缩左侧菜单栏
  • tag标签导航
  • 面包屑
  • 全屏/退出全屏
  • 动态菜单
  • 菜单按模块划分
  • 通用权限控制
    • 菜单级权限控制
    • 接口级权限控制
    • 元素级权限控制
  • 全局可配置loading效果
  • 网络异常处理
  • 模块
    • 系统模块

      • 系统设置

        • 菜单管理
      • 权限管理
        • 功能管理
        • 角色管理
        • 角色权限管理
        • 角色用户管理
        • 用户角色管理
      • 组织架构
        • 部门管理
        • 职位管理
      • 用户管理
    • 网站模块
      • CMS

        • 文章管理
    • 开发模块
      • 官方组件

        • 。。。
      • 业务组件
        • sku
    • 审计日志
    • 数据初始化

文件结构

.
├── .quasar Quasar CLI生成的配置
└── src
├── assets 资源文件
├── components 自定义组件
├── css 样式文件
├── layout 布局组件
├── libs 工具方法
├── router 路由配置
├── store 状态管理
├── service API管理
├── plugins 需要全局注册的组件、指令、插件
└── pages
├── cms
│ └── 文章管理
├── develop
│ ├── 官方组件
│ └── 业务组件
├── organization
│ ├── 部门管理
│ └── 职位管理
├── other
│ └── 审计日志
├── permission
│ ├── 功能管理
│ ├── 角色管理
│ ├── 角色权限管理
│ ├── 角色用户管理
│ └── 用户角色管理
├── system
│ ├── 菜单管理
├── user
│ └── 用户管理
├── 403 无权限页面
├── index 首页
└── login 登录页

安装使用

Install

npm install

Run

Development

quasar dev

Production(Build)

quasar build

安装后台程序

后台程序

git clone https://github.com/wjkang/quasar-admin-server.git

Install

npm install

Run

Development

npm run start

Production(Build)

npm run production

后端程序使用koa2构建,并且使用lowdb持久化数据到JSON文件(使用JSON文件存储是为了快速构建demo)。

功能开发步骤(以文章管理为例)

  • 前端

    • 定义功能码:
    • post_view -文章列表查看
    • post_edit -文章编辑
    • post_del -文章删除
    • 新建文章列表页 post.vue
    • 新增路由
    • 使用菜单管理功能新增"文章管理"的相关菜单,菜单名称必须与上一步新增的路由的name字段一致。权限码填定义好的"文章列表查看"功能对应的权限码(菜单级权限控制)
    • 使用功能管理在新建的菜单下录入定义好的功能名称及功能码
    • 配置角色与用户
    • 在角色权限管理为相应的角色设置功能权限
  • 后端
    • db.json文件新增文章存储结构
    • services下新增postService.js,编写对db.json文件的操作
    • controllers下新增post.js,引入postService.js做相关操作
    • main-routes.js 增加相关路由,使用PermissionCheck中间件进行后端接口级的权限控制(可使用功能码或角色码)
  • 前端
    • service下新增post.js,配置API相关操作,配置loading字段实现自定义loading效果,permission字段可配置功能编码与角色编码(实现前端接口级权限控制)
    • 回到post.vue文件,引入API访问文件,编写业务代码
    • 使用v-permission指令控制页面元素的是否显示,可使用功能编码与角色编码(实现元素级权限控制)
    • store app模块下配置dontCache,控制页面是否缓存

可多细节可查看源码

效果展示

vue-quasar-admin 一个包含通用权限控制的后台管理系统的更多相关文章

  1. 3YAdmin-专注通用权限控制与表单的后台管理系统模板

    3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...

  2. django web 自定义通用权限控制

    需求:web系统有包含以下5个url,分别对于不同资源: 1.stu/add_stu/ 2.stu/upload_homework/ 3.stu/query_homework/ 4.stu/add_r ...

  3. django通用权限控制框架

    在web项目中根据不同的用户肯定会限制其不同的权限,利用以下模块可以满足日常几乎所有的权限控制 permission_hook.py  # 自定义权限控制,必须返回True/false  ,True表 ...

  4. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  5. 前端axios传递一个包含数组的对象到后台,后台可以用String接收,也可以用List集合接收

    前端代码: data() { return { listQuery: { date: [], } }}, //查询列表信息getList() { if (this.listQuery.date == ...

  6. 基于Vue+Spring MVC+MyBatis+Shiro+Dubbo开发的分布式后台管理系统

    本文项目代码: 服务端:https://github.com/lining90567/dubbo-demo-server 前端:https://github.com/lining90567/dubbo ...

  7. 基于RBAC权限管理的后台管理系统

    在摸爬滚打中渐渐理解了RBAC权限管理是个什么玩意. RBAC的基本概念: **RBAC认为权限授权实际上是Who.What.How的问题.在RBAC模型中,who.what.how构成了访问权限三元 ...

  8. angular基于ui-router实现系统权限控制

    前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? ...

  9. Spring Cloud实战 | 第十一篇:Spring Cloud Gateway 网关实现对RESTful接口权限控制和按钮权限控制

    一. 前言 hi,大家好,这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT实现的统 ...

随机推荐

  1. PDA开发数据由DB下载至PDA本地

    public string DownFile = "\\下载.txt";//下载路径 public string LoadFile = "\\上传.txt";/ ...

  2. Learning ROS for Robotics Programming Second Edition学习笔记(九) indigo Gazebo rviz slam navigation

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 书中三维环境gazebo,slam的仿真例子 --$ r ...

  3. RedHat系列软件管理(第二版) --脚本安装

    RedHat系列软件管理 --脚本安装 一.解压缩 tar -zxvf webmin-1.700.tar.gz 二.进入相关目录 cd webmin-1.700 三.如果此时执行./configure ...

  4. C语言之鞍点的查找

    鞍点(Saddle point)在微分方程中,沿着某一方向是稳定的,另一条方向是不稳定的奇点,叫做鞍点.在泛函中,既不是极大值点也不是极小值点的临界点,叫做鞍点.在矩阵中,一个数在所在行中是最大值,在 ...

  5. 初涉IPC,了解AIDL的工作原理及使用方法

    初涉IPC,了解AIDL的工作原理及使用方法 今天来讲讲AIDL,这个神秘的AIDL,也是最近在学习的,看了某课大神的讲解写下的blog,希望结合自己的看法给各位同价通俗易懂的讲解 官方文档:http ...

  6. 苹果新的编程语言 Swift 语言进阶(十三)--类型检查与类型嵌套

    一 类型检查 1. 类型检查操作符 类型检查用来检查或转换一个实例的类型到另外的类型的一种方式. 在Swift中,类型检查使用is和as操作符来实现. is操作符用来检查一个实例是否是某种特定类型,如 ...

  7. ORACLE中用rownum分页并排序的SQL语句

    ORACLE中用rownum分页并排序的SQL语句 以前分页习惯用这样的SQL语句: select * from (selectt.*,rownum row_num frommytable t ord ...

  8. 网络最短路径Dijkstra算法

    最近在学习算法,看到有人写过的这样一个算法,我决定摘抄过来作为我的学习笔记: <span style="font-size:18px;">/* * File: shor ...

  9. Spring Kafka和Spring Boot整合实现消息发送与消费简单案例

    本文主要分享下Spring Boot和Spring Kafka如何配置整合,实现发送和接收来自Spring Kafka的消息. 先前我已经分享了Kafka的基本介绍与集群环境搭建方法.关于Kafka的 ...

  10. C# PDF Page操作——设置页面切换按钮

    概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适 ...