Vue后台管理系统练习-4 axios+mock实现数据模拟

首先安装axios与mock

npm i axios & npm i mockjs

在main.js中引用并配置axios

import http from 'axios'
Vue.prototype.$http = http

新建config文件夹，创建index.js配置axios

export default {
  baseUrl: {
    dev: '/api/',  // 开发环境
    pro: ''   // 生产环境
  }
}

在项目中新建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

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);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      console.log(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)

之后要使用axios，可以在api中配置data.js整合所有的数据请求，这里以请求首页数据为例：

import axios from './axios'

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

然后在HomeArticle.vue中进行引用即可发送网络请求了：

import {getData} from '@/api/data.js'

mounted() {
	getData().then(res => {
		// 数据处理操作后续添加
	})
},

*axios基于promise因此可以使用.then

本项目中我们使用到mock的主要函数为Mock.mock( rurl, function )
因此为了集合不同的数据，首先在api中新建mockServeData文件夹，新建home.js写入

getData() {
	return {
		code: 200,
		orders: [],
		countData:[]
	}
}

这两个是HomeArticle中需要用到的两个数组，就正好写在一起了
写完这个模拟接口之后，在api中新建mock.js文件，使用mock方法拦截’/home/getData’的请求

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

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

同时记得在main.js中引入

import '@/api/mock'

此时，如果通过控制台输出能够发现，在我们对’/home/getData’发送axios网络请求时，被mock拦截，替换为mock中配置的getData()返回值

获取了数据后再次对HomeArticle中的mounted进行补全，替换data中储存的静态函数，也能够在页面中显示

mounted() {
  getData().then(res => {
    const { code, orders, countData } = res.data
    if (code === 200){
      this.orders = orders
      this.countData = countData
    }
  })
},