1. Project introduction:

It is used for daily dish data analysis, customer management, employee management, order information viewing, dish addition or removal management

2. The technology stack used by the project:

vue2 family bucket, element-ui, axios, js, es6, echarts

3. Home page renderings:

Fourth, the secondary packaging axios:

The token of this project needs to be encrypted, and Base64 is used here.

Download method: npm install -- save js-base64

import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "../router"
import { Base64 } from 'js-base64'
// 封装loading开启和结束函数
let loading;
const baseUrl = 'https://meituan.thexxdd.cn/apit'
function startLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加载中...',
    background:'rgba(0,0,0,0.7)'
  })
}
function endLoading(){
  loading.close()
}

function getToken() {
  const token = localStorage.Token || ''
  //后端和前端的约定 
  const base64_token = Base64.encode(token + ':')
  return 'Basic ' + base64_token
}

 
//1: 创建axios实例
const service = axios.create({
  //基地址
  baseURL:baseUrl,
  //baseURL:env.dev.baseUrl,
  settimeout: 5000,
});

//2:请求拦截
service.interceptors.request
  .use((config) => {
    //在发送请求之前做些什么，比如验证token之类的
    if(localStorage.Token){
      config.headers.Authorization = getToken()
    }
    //开启loading
    startLoading();
    return config;
  },(error) => {
    //对错误请求做些什么
    //关闭loading
    endLoading();
    return Promise.reject(error)
  })
 
//3:响应拦截
service.interceptors.response.use(
  (response) =>{
    //关闭loading
    endLoading();
    return response;
  },
  (error) => {
    //对错误请求做些什么
    const {status} = error.response
    if(status == 401){
      Message.error('用户过期，请重新登录！')
      localStorage.removeItem("Token")
      router.push("/login")
    }
    //关闭loading
    endLoading();
    //提示信息
    Message.error(error.response.data.msg)
    return Promise.reject(error)
})
//4:抛出axios对象实例
export default  service;

Package api:

// 引入封装好的接口
import request from "./request"

const RequestApi = {
  // 登录
  login(data) {
    return request({
      url: "/login",
      method: "POST",
      data,
    })
  },
}
//抛出
export { RequestApi }

5. Home page

Renderings:

Login and registration are basically the same, and can be completed with one page. The specific implementation method uses v-if judgment and ternary expression

Change text with ternary expressions

v-if judges variables, true shows login, false shows registration, and their click events use the simplest way to write two click events

It is the same as login, except that the login interface is replaced by the registration interface

Six: Authentication

Seven: Log out

8. Data Analysis

Renderings:

For this effect, go to the official Echarts to find the configuration

The main thing is to accept the data in the background. Among them, the line graph and the histogram need to be extracted from the data. The method that can be used for both graphs is to realize

9. User list

There is nothing difficult about this page, just put the request data. To render data, use element-ui to write the parameter fields correctly

What page is the page, the subscript of the first page in the background starts from 0, and the page I defined is 1, so I subtract one when requesting data

10. Order page

Renderings:

Enter the page to request data and render the data

Screening is to modify the sent background data into filtered data, which can be viewed together according to the above figure

The time module of element is used here, it returns an array, and the background needs string type, so it needs to be converted

Detailed menu renderings:

Click to get the id of the current data, call the interface to send the id to the background, and get the detailed data

The data returned in the background is an array type, so it is necessary to write a layer of v-for outside

11. Menu management ( difficulties, upload pictures )

Renderings:

get data, render data

Dishes

Add data (difficulty)

They are all data double-star bindings implemented with v-model, mainly talking about uploading some pictures

I have annotated the configuration in the picture using the element component. If you want to know more, go to the official website.

Obtain the local token request header and the interface path for image upload

upload::on-success Hook when file upload is successful

Delete picture: Hook when on-remove file list removes files

Data needed in the background

Click Submit to send the data needed in the background

Editing is the same as the above method, it can be done on one page, if the technology is not good, you can copy this page to another page to write and edit

Click Edit to import all the data of the current row to the edit page