vue admin webapp

vue-admin-webapp

After reading an article by Nuggets, I made a Vue backend management system based on other people’s demos.

Nuggets original article address

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

This project github address vue-admin-webapp

Project running address

Project introduction

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

Install

 # 克隆项目

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 automatically open, and you can see the project effect.

Project page structure

Go to the login page. The page mainly consists of three parts: the header sidebar display page . You can click on the sidebar to jump to the route.

Login permission verification

Receive token from fastmock, store it in localStorage when logging in, set global front guard, when entering other pages, you can only enter 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 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Echart multi chart

Be proficient in using Echart, line charts, pie charts, bar charts, dynamic data charts, etc., such as the picture below

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, so I didn't do it. If you want to know more, you can search it.

fastmock data

Here is a quote from the official introduction

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

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

---

My fastmock project port