web全棧后台權限管理系統（VUE+ElementUi+nodeJs+koa2）

主要技術

前端

• vue 全家桶
• ElementUI

后端

• Node.js
• Koa2
• Mongoess

數據庫

• mongodb

介紹

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

頁面

• 登錄頁

• 菜單管理

• 用戶管理

• 角色管理

使用

后端

1. 安裝mongodb
   參考安裝mongodb
2. 安裝node
   參考安裝node
3. 代碼clone

點擊進入git倉庫地址

4. 數據庫配置
   找到主目錄下 .env文件

# 數據庫地址
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage

# 環境
NODE_ENV=dev

# jwt密鑰
JWT_SECRET=abcd1234

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

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

6. 項目啟動
   npm install
   npm run dev

前端

1. 代碼clone

點擊進入git倉庫地址

2. 后端地址配置

主目錄下.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

3. 啟動

   npm Install
   npm run serve
   訪問地址:http://localhost:8800

操作說明

1. 登錄

   初始用戶密碼:
   admin 123456

2. 菜單管理

   如果沒有導入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>

3. 角色管理

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

代碼地址

前端地址
后端地址

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