三、vue-cli3 配置axios

1. 添加axios: vue add axios
   
   

   image.png
2. main.js中自动引入axiosimport './plugins/axios'
   
   

   image.png
   
   其中axios.js代码如下

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

3. 在App.vue绑定点击事件，设置getImage方法

    getImage () {
      axios.get('http://172.29.1.233/m/sysuser/imagecode', {
        params: {
          codekey: 'd'
        }
      })
    }

运行，可在浏览器看到数据返回

4. 显示Base64图片
   上面的接口，返回base64的格式的验证码，先把base64编码取出来

  data: function () {
    return {
      codekey: 'codekey',
      imageCode: 'imageCode'
    }
  },
  methods: {
    getImage () {
      axios.get('http://172.29.1.233/m/sysuser/imagecode', {
        params: {
          codekey: this.codekey
        }
      })
        .then(r => {
          this.codekey = r.data.codekey
          this.imageCode = r.data.imageCode
        })
    }
  }

使用el-image来显示

5. axios发送post请求
   1）引入qs，执行npm i qs
   2）创建Login.vue

其中关键代码

……
import qs from 'qs'
……
  name: 'Login',
……
    login () {
      axios.post('m/sysuser/login', qs.stringify({
        inputStr: this.inputStr,
        password: this.password,
        code: this.code,
        codekey: this.codekey,
        clientType: 'web'
      }))
 ……

引入qs，name不能重复（和文件保持一致），qs.stringify将json转变为form表单提交。
参考文章

1. vue-cli3 axios
2. vue-cli3 配置跨域并通axios进行数据请求
3. vue2.0项目实战（3）使用axios发送请求
4. Vue-cli3 axios 跨域
5. Vue base64图片展示

问题说明

1. 禁用eslint，否则编译报错。

   
   
   

   image.png