一、项目介绍：

用于每天的菜品数据分析，客户的管理，员工的管理，查看订单信息，菜品的添加或者下架管理

二、项目使用技术栈：

vue2全家桶、element-ui、axios、js、es6、echarts

三、主页效果图：

四、二次封装axios：

这个项目的token需要加密，这里用到了Base64，

下载方式：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;

封装api：

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

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