vue-element-admin 综合开发四：axios安装和封装、mock安装/学习/使用

导言

一、axios使用

axios官网

1. 安装

npm install axios or yarn add axios

2. main.js 配置 vue

vue不是插件，所以不能通过Vue.use()的方式来引入

3. 测试

在home/index.vue中的mouneted中写如下测试代码：

  mounted(){
    this.$http.get('/user?ID=12345')
        .then(function (response) {
          // 处理成功情况
          console.log(response);
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        })
        .then(function () {
          // 总是会执行
        });
  }

打开控制台，可以发现，虽然请求404，但成功发送了请求

二、axios 二次封装

1. 新建 src/config/index.js

   export default {
     baseUrl: {
       dev: '/api/',
       pro: ''
     }
   }
   

2. 新建 src/api/axios.js：创建axios实例，使用拦截器

   import axios from 'axios'
   import config from './config'
   
   // 判断当前的运行环境, 如果是开发，则取开发地址 否则 取生产地址 
   const baseUrl = process.env.NODE_ENV == 'development' ? config.baseUrl.dev : config.baseUrl.pro
   
   // 工具类， ES6 的class语法   ...: ES6的扩展运算符
   class HttpRequest {
     constructor(baseUrl) {
       this.baseUrl = baseUrl
     }
   
     getInsideConfig() {
       const config = {
         baseURL: this.baseUrl,
         header: {}
       }
       return config
     }
   
     interceptors(instance) {
       // 添加请求拦截器
       instance.interceptors.request.use(function (config) {
         // 在发送请求之前做些什么
         return config;
       }, function (error) {
         // 对请求错误做些什么
         return Promise.reject(error);
       });
   
       // 添加响应拦截器
       instance.interceptors.response.use(function (response) {
         // 2xx 范围内的状态码都会触发该函数。
         // 对响应数据做点什么
         return response;
       }, function (error) {
         // 超出 2xx 范围的状态码都会触发该函数。
         // 对响应错误做点什么
         return Promise.reject(error);
       });
     }
   
     // 调用的函数
     request(options){
       const instance = axios.create()
       options = {...this.getInsideConfig(), ...options}
       this.interceptors(instance)
       return instance(options)
     }
   }
   
   //将 实例化的类 抛出去
   export default new HttpRequest(baseUrl)
   

三、编写请求（正式测试）

1. 新建 src/axios/data.js

import axios from './axios' // 注意:这里是同目录下的 axios

export const getMenu = (param) => {
  return axios.request({
    url: '/permission/getMenu',
    method: 'post',
    data: param
  })
}

2. home/index.vue

a、引入

b、 发请求

c、打印拦截器日志

api/axios.js 中 打印拦截器日志，看是否被拦截

d、页面日志（success）

四、mockjs模拟响应数据

mockjs 是一个 模拟请求响应 制作的假数据。

1. mock 安装和引入

1. npm i mackjs or yarn add mackjs
2. 新建 api/mock.js文件
3. 在 main.js 中引入
   

2. mock 初使用

a、新建 api/mockServeData/home.js

在这里存放home页面的数据，存放请求数据的地方

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    return {
      code: 20000,
      data: {
        // 饼图
        videoData: [
          {
            name: '小米',
            value: 2999
          },
          {
            name: '苹果',
            value: 5999
          },
          {
            name: 'vivo',
            value: 1500
          },
          {
            name: 'oppo',
            value: 1999
          },
          {
            name: '魅族',
            value: 2200
          },
          {
            name: '三星',
            value: 4500
          }
        ],
        // 柱状图
        userData: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          {
            date: '周二',
            new: 10,
            active: 500
          },
          {
            date: '周三',
            new: 12,
            active: 550
          },
          {
            date: '周四',
            new: 60,
            active: 800
          },
          {
            date: '周五',
            new: 65,
            active: 550
          },
          {
            date: '周六',
            new: 53,
            active: 770
          },
          {
            date: '周日',
            new: 33,
            active: 170
          }
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          {
            name: 'vivo',
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000
          },
          {
            name: '苹果',
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000
          },
          {
            name: '小米',
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000
          },
          {
            name: '三星',
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000
          },
          {
            name: '魅族',
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000
          }
        ]
      }
    }
  }
}

b、mock.js 中 编写接口

这里就相当于后台的控制器层，暴露接口，将 请求 与 数据 绑定

import Mock from 'mockjs'
import homeApi from './mockServeData/home'

Mock.mock('/home/getData', homeApi.getStatisticalData)

c、编写前端请求：data.js

export const getData = () => {
  return axios.request({
    url: '/home/getData'
  })
}

d、home.vue 发请求

1. 引入 接口
   

2. 调用接口

     mounted(){
       getData().then(res => {
         const {code, data} = res.data
         if(code == 20000) {
           this.tableData = data.tableData
         }
         console.log(res)
       })
     }
   

   

e、页面正常，查看控制台打印