Web full stack background authority management system (Vue + elementui + nodejs + koa2)

Time:2021-11-26

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

Main technology

front end

  • Vue family bucket
  • ElementUI

back-end

  • Node.js
  • Koa2
  • Mongoess

database

  • mongodb

introduce

Background authority management system based on Vue + node.js. A simple RBAC model is adopted (i.e. permissions are associated with roles, and users get the permissions of these roles by becoming members of appropriate roles); It mainly controls the permissions of menus and buttons.

page

  • Landing page

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

  • Menu management

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

  • user management

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

  • Role management

Web full stack background authority management system (Vue + elementui + nodejs + koa2)

use

back-end

  1. Install mongodb
    reference resourcesInstall mongodb
  2. Install node
    reference resourcesInstall node
  3. Code clone

Click to enter git warehouse address

  1. Database configuration
    Find the. Env file in the home directory
#Database address
DB_BASE_URL=mongodb://localhost:27017
DB_NAME=manage

#Environment
NODE_ENV=dev

#JWT key
JWT_SECRET=abcd1234

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

  1. Import collection (you can choose not to import, and mongodb will create it automatically)
    Collection address: dbjson under the home directory
    If you do not import, there is only one menu management and one user (admin, 123456) in the collection. You need to add other menus manually
  2. Project start
    npm install
    npm run dev

front end

  1. Code clone

Click to enter git warehouse address

  1. Backend address configuration

. env in the home directory (no configuration required by default)

#Project information
VUE_APP_NAME = MANAGE

#Environmental information
# optional value: development , production
VUE_APP_ENV=development

#Server information (local agent address)
VUE_APP_SERVER=http://localhost
VUE_APP_SERVER_PORT=443

#API information (backend 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 (if proxy setting requires starting the proxy service, the directory serve / proxy. JS)
VUE_APP_API_MODE=direct
  1. start-up

    npm Install
    npm run serve
    Access address:http://localhost:8800

Operating instructions

  1. Sign in

    Initial user password:
    admin 123456

  2. Menu management

    If JSON is not imported, the navigation menu has only one menu management; The add menu can be a multi-level menu, and the menu route corresponds to the front-end code
    Vue file under Src / view / content, for example, add user management route as: / sys / user. If you add your own page, you only need to create XX / xx.vue in this directory and add menu route: / XX / XX.
    If you select a button, you can add an identification control button permission. For example, the perbutton component is introduced into / sys / role.vue and passed into perm to determine whether this button permission is available (Note: the Add button must be at the same level as the menu, otherwise the menu will be treated as a directory)

<template>
...
< per button size = "mini" perm = "Edit" @ Click = "handleedit (scope. Row)" > Edit < / per button >
...
<template>
  1. Role management

    Click the role in the list to assign menu and button permissions to the role

Code address

Front end address
Back end address

Gitee addresshttps://gitee.com/cat-ui