主要技術(shù)
前端
- vue 全家桶
- ElementUI
后端
- Node.js
- Koa2
- Mongoess
數(shù)據(jù)庫(kù)
- mongodb
介紹
基于 VUE+Node.js 后臺(tái)權(quán)限管理系統(tǒng)。采用簡(jiǎn)單的 rbac 模型（既權(quán)限與角色相關(guān)聯(lián)，用戶通過(guò)成為適當(dāng)角色的成員而得到這些角色的權(quán)限）；主要對(duì)菜單與按鈕進(jìn)行權(quán)限控制。
頁(yè)面
- 登錄頁(yè)
- 菜單管理
- 用戶管理
- 角色管理
使用
后端
點(diǎn)擊進(jìn)入git倉(cāng)庫(kù)地址
- 數(shù)據(jù)庫(kù)配置
找到主目錄下 .env文件
# 數(shù)據(jù)庫(kù)地址
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage
# 環(huán)境
NODE_ENV=dev
# jwt密鑰
JWT_SECRET=abcd1234
改為自己數(shù)據(jù)庫(kù)地址與名字（默認(rèn)應(yīng)該是一樣的）
導(dǎo)入集合（可以選擇不導(dǎo)入，mongodb會(huì)自動(dòng)創(chuàng)建）
集合地址：主目錄下dbjson
如果不導(dǎo)入,集合中只有一個(gè)菜單管理和一個(gè)用戶（admin,123456),需要自己手動(dòng)添加其它菜單項(xiàng)目啟動(dòng)
npm install
npm run dev
前端
- 代碼clone
點(diǎn)擊進(jìn)入git倉(cāng)庫(kù)地址
- 后端地址配置
主目錄下.env (默認(rèn)無(wú)需配置)
# 項(xiàng)目信息
VUE_APP_NAME = MANAGE
# 環(huán)境信息
# optional value: development , production
VUE_APP_ENV=development
# server信息 （本地代理地址）
VUE_APP_SERVER=http://localhost
VUE_APP_SERVER_PORT=443
# api信息（后端請(qǐng)求地址）
VUE_APP_API=http://localhost:3000
# 頁(yè)面訪問(wèn)信息
VUE_APP_HOST=http://localhost
VUE_APP_PORT=8800
VUE_APP_PATH=http://localhost:8800
# optional value: proxy, direct （如果設(shè)置proxy 需要啟動(dòng)代理服務(wù)，目錄serve/proxy.js）
VUE_APP_API_MODE=direct
- 啟動(dòng)
npm Install
npm run serve
訪問(wèn)地址:http://localhost:8800
操作說(shuō)明
- 登錄
初始用戶密碼:
admin 123456
- 菜單管理
如果沒(méi)有導(dǎo)入JSON的話，導(dǎo)航菜單只有一個(gè)菜單管理；添加菜單可以是多級(jí)菜單，菜單路由對(duì)應(yīng)前端代碼
src/view/content下的vue文件, 比如添加用戶管理路由為：/sys/user。如果加自己頁(yè)面的話只需要在此目錄下創(chuàng)建xx/xx.vue，同時(shí)添加菜單路由：/xx/xx即可。
如果選擇按鈕，可以加上標(biāo)識(shí)控制按鈕權(quán)限。例如/sys/role.vue中引入perButton組件傳入perm來(lái)判斷是否有此按鈕權(quán)限（注意：添加按鈕必須與菜單同級(jí) 否則菜單會(huì)被當(dāng)成目錄處理）
<template>
...
<per-button size="mini" perm="edit" @click="handleEdit(scope.row)">編輯</per-button>
...
<template>
- 角色管理
點(diǎn)擊列表中的角色可以為角色賦予菜單與按鈕權(quán)限
代碼地址
gitee地址 https://gitee.com/cat-ui
