Vue-axios 前后交互

1、设置访问的域名端口

config -> index.js 中 module.exports -> dev -> proxyTable

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://端口', // 要访问的IP地址
        // 目标
        pathRewrite: {'^/api': '端口'},
        changeOrigin: true ,   // 开启代理
      }
    },
  }

2、使用axios

(1) 安装

npm install --save axios

(2) 第一种： main.js 引入，直接使用

import axios from 'axios';
Vue.prototype.$ajax = axios;  // 设置全局使用

this.$ajax({
      method: 'post',  // 其它请求
      url: '/api' + `${url}`,  // 访问路径
      data: params,  // 传参
    });

(3) 第二种： 自定义小工具util.js进行封装

a-首先：util.js中

import axios from 'axios';

export default class util {
  /**
   * post请求
   */
  static postRequest(url, params) {
    return axios({
      method: 'post',
      url: 'url`,
      data: params,
    });
  }
}

b-然后： main.js中设置全局使用util.js

import util from './util/util'; // 自定义工具
Vue.prototype.util = util;

c-methods使用：

this.util.postRequest("url", this.tdWxStudent).then(response => {
		...操作...
});