天天看點

web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)

vue 全家桶

ElementUI

Node.js

Koa2

Mongoess

mongodb

基于 VUE+Node.js 背景權限管理系統。采用簡單的 rbac 模型(既權限與角色相關聯,使用者通過成為适當角色的成員而得到這些角色的權限);主要對菜單與按鈕進行權限控制。

登入頁

web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)

菜單管理

web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)
web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)

使用者管理

web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)
web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)

角色管理

web全棧背景權限管理系統(VUE+ElementUi+nodeJs+koa2)

安裝mongodb

參考安裝mongodb

安裝node

參考安裝node

代碼clone

點選進入git倉庫位址

資料庫配置

找到主目錄下 .env檔案

改為自己資料庫位址與名字(預設應該是一樣的)

導入集合(可以選擇不導入,mongodb會自動建立)

集合位址:主目錄下dbjson

如果不導入,集合中隻有一個菜單管理和一個使用者(admin,123456),需要自己手動添加其它菜單

項目啟動

npm install

npm run dev

後端位址配置

主目錄下.env (預設無需配置)

啟動

npm Install npm run serve 通路位址:http://localhost:8800

登入

初始使用者密碼: admin 123456
如果沒有導入JSON的話,導航菜單隻有一個菜單管理;添加菜單可以是多級菜單,菜單路由對應前端代碼 src/view/content下的vue檔案, 比如添加使用者管理路由為:/sys/user。如果加自己頁面的話隻需要在此目錄下建立xx/xx.vue,同時添加菜單路由:/xx/xx即可。 如果選擇按鈕,可以加上辨別控制按鈕權限。例如/sys/role.vue中引入perButton元件傳入perm來判斷是否有此按鈕權限(注意:添加按鈕必須與菜單同級 否則菜單會被當成目錄處理)
點選清單中的角色可以為角色賦予菜單與按鈕權限

前端位址

後端位址

gitee位址 https://gitee.com/cat-ui