Based on Vuejs+element-ui Background Management System

vue-admin-webapp

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.

installation

## 克隆项目

git clone git@github.com: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") {
    next();
  } 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 {
      alert(err.response.data)
    }
    return Promise.reject(err);
  });

Echart multiple charts

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

Excel

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

Demo: https://yqxshiki.gitee.io/yqx-vue-admin-webapp/

Source Code: https://github.com/yqxshiki/vue-admin-webapp

#vue #vuejs #javascript