vue-quasar-admin 一個包含通用許可權控制的後臺管理系統

若邪發表於2018-05-17

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，控制頁面是否快取