vue 使用axios访问后台数据

1、安装axios和qs

axios是一个基于Promise用于浏览器和node.js的HTTP客户端。
特征
1、从浏览器中创建XMLHttpRequest
2、从node.js发出http请求
3、支持Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防止CSRF/XSRF
安装

npm install axios --save

调用
在main.js文件里

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

qs用于处理序列化字符串，处理发送请求的参数
安装

npm install qs

调用

import qs from 'qs'

两个方法
1、将对象系列化，多个对象之间用&拼接
qs.stringify()转换成查询字符串
2、将系列化转换成json对象
qs.parse() 转换成json对象

var param = { id: this.id}
var data = qs.stringify(param)
var param = qs.parse(param)

2、proxyTable配置

打开config文件夹下的index.js文件

proxyTable: {
  // 测试环境
  '/admin': {
    target: 'http://127.0.0.1',
    changeOrigin: true,
    pathRewrite: {
      '^/php': '/php' 
    }
  }
}

target: 需要请求地址的接口域名
changeOrigin: 是否跨域
pathRewrite：重写接口

3、调用接口

get请求

axios.get(url,param)
    .then(res=>{
      console.log(res.data);
    }).catch(res=>{});

post请求

axios.post(url,param)
.then(res=>{
  console.log(res.data);
}).catch(res=>{});