web全堆疊后臺權限管理系統（VUE+ElementUi+nodeJs+koa2）

主要技術

前端

vue 全家桶
ElementUI

后端

Node.js
Koa2
Mongoess

資料庫

mongodb

介紹

基于 VUE+Node.js 后臺權限管理系統，采用簡單的 rbac 模型（既權限與角色相關聯，用戶通過成為適當角色的成員而得到這些角色的權限）；主要對選單與按鈕進行權限控制，

頁面

登錄頁

選單管理

用戶管理

角色管理

使用

后端

安裝mongodb
參考安裝mongodb
安裝node
參考安裝node
代碼clone

點擊進入git倉庫地址

# 資料庫地址
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage

# 環境
NODE_ENV=dev

# jwt密鑰
JWT_SECRET=abcd1234

改為自己資料庫地址與名字（默認應該是一樣的）

匯入集合（可以選擇不匯入，mongodb會自動創建）
集合地址：主目錄下dbjson
如果不匯入,集合中只有一個選單管理和一個用戶（admin,123456),需要自己手動添加其它選單
專案啟動
npm install
npm run dev

前端

代碼clone

點擊進入git倉庫地址

后端地址配置

主目錄下.env (默認無需配置)

# 專案資訊
VUE_APP_NAME = MANAGE

# 環境資訊
# optional value: development , production
VUE_APP_ENV=development

# server資訊 （本地代理地址）
VUE_APP_SERVER=http://localhost
VUE_APP_SERVER_PORT=443

# api資訊（后端請求地址）
VUE_APP_API=http://localhost:3000

# 頁面訪問資訊
VUE_APP_HOST=http://localhost
VUE_APP_PORT=8800
VUE_APP_PATH=http://localhost:8800

# optional value: proxy, direct （如果設定proxy 需要啟動代理服務，目錄serve/proxy.js）
VUE_APP_API_MODE=direct

啟動

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來判斷是否有此按鈕權限（注意：添加按鈕必須與選單同級否則選單會被當成目錄處理）

<template>
...
<per-button size="mini" perm="edit"  @click="handleEdit(scope.row)">編輯</per-button>
...
<template>

角色管理

點擊串列中的角色可以為角色賦予選單與按鈕權限

代碼地址

前端地址
后端地址

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320930.html

標籤：其他

上一篇：想實作前端酷炫的打字機一樣的效果嗎？

下一篇：不能將CSS居中