当前位置: 首页 > 后端技术 > Node.js

Web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)

时间:2023-04-03 23:07:11 Node.js

web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)主要技术前端vue全家桶ElementUI后端Node.jsKoa2Mongoess数据库mongodb介绍基于VUE+Node.js的后台权限管理系统。采用简单的rbac模型(即权限与角色相关联,用户通过成为合适角色的成员来获得这些角色的权限);主要控制菜单和按钮的权限。页面登录页面菜单管理用户管理角色管理使用后端安装mongodb参考安装mongodb安装节点参考安装节点代码clone点击进入git仓库地址数据库配置在主目录下找到.env文件#数据库地址DB_BASE_URL=mongodb://localhost:27017DB_NAME=manage#EnvironmentNODE_ENV=dev#jwtkeyJWT_SECRET=abcd1234改成自己的数据库地址和名称(默认应该一样)导入集合(可以选择不导入,mongodb会自动创建)集合地址:主目录下的dbjson如果不导入,集合中只有一个菜单管理和一个用户(admin,123456),需要手动添加其他菜单项启动npminstallnpmrundev前端代码clone点击输入git仓库地址和后端地址配置主目录。env(默认不需要配置)#项目信息VUE_APP_NAME=MANAGE#环境信息#可选值:development,productionVUE_APP_ENV=development#服务器信息(本地代理地址)VUE_APP_SERVER=http://localhostVUE_APP_SERVER_PORT=443#api信息(后端请求地址))VUE_APP_API=http://localhost:3000#页面访问信息VUE_APP_HOST=http://localhostVUE_APP_PORT=8800VUE_APP_PATH=http://localhost:8800#可选值:proxy,direct(如果设置了proxy,需要开启代理服务,目录serve/proxy.js)VUE_APP_API_MODE=direct启动npm安装npmrunserve访问地址:http://localhost:8800操作说明登录初始用户密码:admin123456菜单管理如果不导入json,导航菜单只有一个菜单管理;添加的菜单可以是多级菜单,菜单路由对应前端代码src/view/content下的vue文件,例如添加用户管理路由为:/sys/user。如果添加自己的页面,只需要在该目录下创建xx/xx.vue,同时添加菜单路由:/xx/xx即可。如果您选择一个按钮,您可以添加一个标志来控制按钮的权限。比如在/sys/role.vue中引入perButton组件,传递给perm判断按钮是否有权限(注意:添加的按钮必须和菜单同级,否则菜单会被当做一个目录)