Vue实战开发--后台管理系统Vue+Element ui（7）

本节课将开始学习异步库axios（重要！！！）和mockjs模拟后端数据，axios是一个基于promise的HTTP库，使用npm i axios。在main.js中引入，需要绑定在Vue的prototype属性上，并重命名。

main.js文件

import http from 'axios'

Vue.prototype.$http = http

在home的index.vue中添加mounted

1.axios简单例子

  mounted(){
    this.$http.get('/user?ID=123')
    .then(function(response){
      console.log(response);
    })
    .then(function(error){
      console.log(error);
    });
  }

在控制台中可以发现请求已发送，状态为404

2.axios函数封装（枯燥，难点）

在根目录下新建config文件夹，新建index.js，主要是让系统判断当前处于生产状态还是用户状态。

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

对axios函数进行二尺封装，方便后续使用。在根目录下新建api文件夹，新建axios.js文件。

import axios from 'axios'
import config from '../config'

// 将config和anios进行有机结合,对axios进行简单封装。
// 判断是不是生产环境，并拿到config中的dev环境，否则拿到config中的pro环境。
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

// axios工具类,工具类拿到对应的url后，进行相应配置
class HttpRequest {
    constructor (baseUrl) {
        this.baseUrl = baseUrl
    }
    用于定义anios的相关配置的方法
    getInsideConfig(){
        const config = {
            base: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){
            // 对响应数据前做什么
            return response;
        },function(error){
            // 响应错误后做什么
            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)

3.接口调用

在api下新建data.js文件

// 这里引入的是文件，不是依赖
import axios from './axios'

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

4.对响应拦截器进行更改

        instance.interceptors.response.use(function(response){
            console.log(response)
            // 对响应数据前做什么
            return response;
        },function(error){
            console.log(error)
            // 响应错误后做什么
            return Promise.reject(error);
        });

 

5.mockjs使用

mock可以拦截ajax请求，在mock的回调函数中返回接口的响应数据。可以模拟后端发送过来的接口数据。mock可以使用数据模板生成数据。

在api下新建mock.js,先npm i mockjs。Mock.mock(url,回调函数)，这里模块化编程，提前准备好数据模板，在api下新建mockServeData文件夹，新建home.js文件，存放home页面下的mock的模拟数据。

//mock.js

import Mock from 'mockjs'
import homeApi from './mockServeData/home.js'
Mock.mock('/home/getData',homeApi.getStatisticalData)

//home.js

// 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
          }
        ]
      }
    }
  }
}

在main.js中引入import '../api/mock.js'。

在home下index.vue中引入getData。import { getData } from '../../api/data.js'，并暴露使用。

//home下index.js

  mounted(){
    getData().then(res => {
      console.log(res)
    })
  }

在api中data.js中编写getData,这里没有写请求类型，默认是get请求。

//data.js

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

接口拦截成功，并返回数据。

 

 将数据进行解构

对home的index.vue的mounted进行修改，并将return中的tableData定义为空数组，tableData:[]。

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

前后数据区别：一个是原本写死的数据，一个是模拟后端的mock数据。