Based on Vuejs+element-ui Background Management System

Based on Vuejs+element-ui Background Management System

vue-admin-webapp Based on vuejs+element-ui background management system


After reading an article by Nuggets, I made a vue background management system modeled on someone else’s demo.

Nuggets original article address

The technology stacks involved in this project are vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

The github address of this project is vue-admin-webapp

Project operating address

Project Description

vue-admin-webapp is a background management system, based on vuecli and element-ui , using fastmock to simulate data, including charts, tables, permissions, excel, etc. You can add routing according to your needs.


## 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

## 进入项目目录
cd vue-admin-webapp

## 安装依赖
npm install

## 启动服务
npm run serve

After startup, the browser http://localhost:8080 will be opened automatically , and you can see the effect of the project.

Project page structure

Go out to the login page, the page is mainly composed of three parts: the head sidebar display page , you can click the sidebar to route and jump

Login permission verification

Receive the token from fastmock, store it in localStorage when logging in , set a global front guard, and enter other pages only when there is a token, otherwise it will jump to the login page

Global front guard
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.loginToken ? true : false;
  if (to.path == "/login") {
  } else {
    isLogin ? next() : next('/login')
Request interception
axios.interceptors.request.use(config => {
  // 判断是否有token
  if (localStorage.loginToken) {
    config.headers.Authorization = localStorage.loginToken;
  return config;
}, err => {
  // 请求错误
  return Promise.reject(err);
Response interception
axios . interceptors . response . use ( res  =>  { 
  return  res ; 
} , 
  err  =>  { 
    const  { status }  =  err . response ; 
    if  ( status  ==  401 )  { 
      // background defines 401 as expired 
      alert ( "token expired Please log in again "! ) 
      // clear token 
      localStorage . removeItem ( " loginToken " ) ; 
      Router . the Push("/login");
    } else {
    return Promise.reject(err);

Echart multiple charts

Familiar with Echart, line graph, pie chart, histogram, dynamic data graph, etc., such as the following figure


In actual projects, excel is mainly done on the back-end. Of course, the front-end can also be done, but I don’t think it is necessary now. You can search for it if you want to know.

fastmock data

The official introduction is quoted here

fastmock allows you to simulate ajax requests online without a back-end program. You can use fatmock to demonstrate the effect of the pure front-end project at the beginning of the project, or use fastmock to implement data simulation during development to achieve separation of front-end and back-end. Before using fastmock, your team may implement data simulation in one or more of the following scenarios

  • Local handwritten data simulation generates a lot of mock code in the front-end code.
  • Use mockjs or canjs' can-fixture to implement ajax interception, and configure the necessary json rules locally.
  • The backend falsifies data at the Controller layer and returns it to the frontend.

My fastmock project port 

Download Details:

Author: yqxshiki


Source Code:

vue vuejs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.