vue-quasar-admin 一個包含通用權限控制的后台管理系統

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，控制頁面是否緩存

可多細節可查看源碼

效果展示