V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ruoxie
V2EX  ›  JavaScript

vue-quasar-admin 一个包含通用权限控制的后台管理系统

  •  
  •   ruoxie · 2018-07-01 12:32:01 +08:00 · 3222 次点击
    这是一个创建于 2097 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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,控制页面是否缓存

    可多细节可查看源码

    效果展示

    image

    image

    image

    image

    image

    image

    image

    image

    image

    image

    image

    image

    image

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1066 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 19:06 · PVG 03:06 · LAX 12:06 · JFK 15:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.