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仓库地址

  1. 数据库配置

    找到主目录下 .env文件
# 数据库地址
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage # 环境
NODE_ENV=dev # jwt密钥
JWT_SECRET=abcd1234

改为自己数据库地址与名字(默认应该是一样的)

  1. 导入集合(可以选择不导入,mongodb会自动创建)

    集合地址:主目录下dbjson

    如果不导入,集合中只有一个菜单管理和一个用户(admin,123456),需要自己手动添加其它菜单

  2. 项目启动

    npm install

    npm run dev

前端

  1. 代码clone

点击进入git仓库地址

  1. 后端地址配置

主目录下.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
  1. 启动

    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>
  1. 角色管理

    点击列表中的角色可以为角色赋予菜单与按钮权限

代码地址

前端地址

后端地址

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

web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)的更多相关文章

  1. Web全栈工程师修养

    全栈工程师现在是个很热的话题,如何定义全栈工程师?在著名的问答网站Quora上有人提出了这个问题,其中一个获得了高票的回答是: 全栈工程师是指,一个能处理数据库.服务器.系统工程和客户端的所有工作的工 ...

  2. Web 全栈大会:万维网之父的数据主权革命

    大家好,今天我和大家分享一下由万维网之父发起的一场数据主权革命.什么叫数据主权?很容易理解,现在我们的数据是把持在巨头手里的,你的微信通讯录和聊天记录都无法导出,不管是从人权角度还是从法理角度,这些数 ...

  3. 《web全栈工程师的自我修养》读书笔记

    有幸读了yuguo<web全栈工程师的自我修养>,颇有收获,故在此对读到的内容加以整理,方便指导,同时再回顾一遍书中的内容. 概览 整本书叙述的是作者的成长经历,通过经验的分享,给新人或者 ...

  4. 基于LeanCloud云引擎的Web全栈方案

    LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者See ...

  5. 《web全栈工程师的自我修养》阅读笔记

    在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...

  6. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  7. 处女作《Web全栈开发进阶之路》出版了!

    书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...

  8. 用GO写一个后台权限管理系统

    最近用GO写了一个后台权限管理系统,在WIN10和ubuntu下部署,在win系统下编译ububtu的部署文件要先做如下配置 set GOARCH=amd64 set GOOS=linux go bu ...

  9. node实现后台权限管理系统

    本文面向的是node初学者,目标是搭建一个基础的后台权限系统.使用的node框架是上手最简单的express,模板是ejs,这些在node入门的书籍中都有介绍说明,所以应该是难度较低的. 对于node ...

随机推荐

  1. MySQL-SQL基础

    mysql> use test; Database changed mysql> create table emp(ename varchar(10),hirdate date,sal d ...

  2. Mybatis-Plus增强包

    简介 本框架(Gitee地址 )结合公司日常业务场景,对Mybatis-Plus 做了进一步的拓展封装,即保留MP原功能,又添加更多有用便捷的功能.具体拓展体现在数据自动填充(类似JPA中的审计).关 ...

  3. Python - 面向对象编程 - __call__()

    __call()__ 的作用 使得类实例对象可以像普通函数那样被调用 实际栗子 from typing import Callable class PoloBlog: def __init__(sel ...

  4. Devexpress主题/皮肤

    如何在C#中使用DevExpress皮肤管理器.步骤1: 单击 新建项目,然后选择左侧的Visual C#,然后 视窗 ,然后选择 Windows窗体应用程序.将您的项目命名为" SkinD ...

  5. leetcode数组典型题目小结

    数组与矩阵 数组与矩阵的基本知识: 1.数组:数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按有序的形式组织起来的一种形式. 首先,数组会利用索引来记录每个元素在数组中的位置,且在大多数 ...

  6. awk工作流程

    awk 工作过程:先执行BEGIN模块,再跟文本交互,最后执行END模块.也就是说BEGIN/END模块,这俩是单独操作跟文本是同一级,但执行有优先级,BEGIN模块>文本>END模块 行 ...

  7. C# windows服务知识集锦

    最近公司项目,本人也是刚接触windows服务,现在把这两天上网学习的一些资料拿出来与大家分享. 1).关于windows服务安装包的制作和自动启动服务 http://blog.csdn.net/re ...

  8. excel中if函数的用法

    IF函数有三个参数,语法如下: =IF(条件判断, 结果为真返回值, 结果为假返回值) 第一参数是条件判断,比如说"A1="百度""或"21>3 ...

  9. Docker系列(17)- MySQL同步数据

    #获取镜像 [root@localhost ~]# docker pull mysql:5.7 #启动容器,需要做数据挂载!安装启动mysql,需要配置密码的,这是注意点! #官方安装文档:docke ...

  10. python的列表和java的数组有何异同

    今天面试被问到,自己学习一下. python的列表是可变长的,定义时不需要指定长度:pyhton是弱对象类型,python的列表存储的数据类型可以不相同:python的列表更加灵活,如可以通过''命令 ...