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

可多細節可查看源碼

效果展現