web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)
2023-09-27 14:28:56 时间
web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)
主要技术
前端
- vue 全家桶
- ElementUI
后端
- Node.js
- Koa2
- Mongoess
数据库
- mongodb
介绍
基于 VUE+Node.js 后台权限管理系统。采用简单的 rbac 模型(既权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限);主要对菜单与按钮进行权限控制。
页面
- 登录页
- 菜单管理
- 用户管理
- 角色管理
使用
后端
- 数据库配置 找到主目录下 .env文件
# 数据库地址
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
- 后端地址配置
主目录下.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地址 gitee.com/cat-ui
相关文章
- Vue 中为什么要有nextTick?
- vue.js ES6对象字面量的增强写法
- Vue学习笔记之Nodejs中的NPM使用
- 关于前后端同构,我的一点思路和心得(vue、nodejs、react、模版)
- Vue学习(一):Vue实例
- Vue v-if v-for v-bind v-on
- vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
- 实战:vue项目中导入swiper插件
- 前端工程化:vue代码检查工具vetur
- Vue Router4报错 Error: Invalid route component
- 分享7 个VUE项目用得上的JavaScript库
- Vue学习之路---No.5(分享心得,欢迎批评指正)
- vue template 里使用可选链操作符( ?. )报错:Errors compiling template:invalid expression: Unexpected token ‘.‘ i
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 利用webpack和vue实现组件化
- vue——爷孙组件之间通信
- VUE中使用ElementUi的Message弹窗提示
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航