Web Full Stack Background Permission Management System (VUE+ElementUi+nodeJs+ KOA2)

The main technical

The front end

  • Vue buckets
  • ElementUI

The back-end

  • Node.js
  • Koa2
  • Mongoess

The database

  • mongodb

introduce

Based on VUE+Node.js background rights management system. Using a simple RBAC model (where permissions are associated with roles and users gain permissions for those roles by becoming members of appropriate roles); It mainly controls the permissions of menus and buttons.

page

  • The login page

  • Menu management

  • User management

  • Role management

use

The back-end

  1. Install the mongo

See Installing mongodb.

  1. Install the node

See Installing a node.

  1. Code clone

Click to go to git repository address

  1. Database Configuration

Find the.env file in your home directory

# DB_BASE_URL = mongo database address: / / localhost: 27017 DB_NAME = the manage environmental NODE_ENV = dev # # JWT key JWT_SECRET = roadCopy the code

Change your database address and name (default should be the same)

  1. Import collections (you can choose not to, mongodb will create them automatically)

Set address: if you do not import dbJSON from the home directory, there is only one menu management and one user (admin,123456) in the collection, you need to manually add other menus

  1. Project start

npm install

npm run dev

The front end

  1. Code clone

Click to go to git repository address

  1. Back-end address configuration

Env in the home directory (no configuration is required by default)

VUE_APP_NAME = MANAGE # environment info # optional value: development , Production VUE_APP_ENV=development # server information (local proxy address) VUE_APP_SERVER=http://localhost VUE_APP_SERVER_PORT=443 # API information (back-end request address) VUE_APP_API=http://localhost:3000 # Page access information VUE_APP_HOST=http://localhost VUE_APP_PORT=8800 VUE_APP_PATH=http://localhost:8800 # optional value: Proxy, direct (to enable the proxy service, run the serve/proxy.js directory.) VUE_APP_API_MODE=directCopy the code
  1. Start the

    npm Install

NPM Run Serve can be accessed at http://localhost:8800

Instructions for

  1. The login

    Initial user password:

admin 123456

  1. Menu management

    If there is no JSON import, the navigation menu only has a menu management; The add menu can be a multi-level menu, and the menu route corresponds to the front-end code

SRC /view/content vue file, for example, add user management route: /sys/user. If you want to add your own page, just create xx/xx.vue in this directory and add the menu route: /xx/xx. If you select a button, you can add an identity control button permission. For example, /sys/role.vue introduces the perButton component and passes in perm to determine whether the button has permissions (note: the add button must be at the same level as the menu or the menu will be treated as a directory).

<template> ... <per-button size="mini" perm="edit" @click="handleEdit(scope.row)"> edit </per-button>... <template>Copy the code
  1. Role management

    Click a role in the list to grant menu and button permissions to the role

The code address

Front-end address Back-end address

Gitee address gitee.com/cat-ui