axios

安装axios

1、安装axios

npm install axios
//直接安装 axios

2、在main.js文件中引入axios，并配置为原型链

//引入axios
import axios from 'axios'
//使用axios
Vue.prototype.axios = axios

3、在new Vue中进行使用

new Vue({
el:'#app',
axios
})

4、在config/index.js文件中， 要对proxyTable以及Target配置为后端给的接口地址和域名,如果接口需要跨域，则需要把changeOrigin改为true 5、 把host 以及post 改为客户端访问的接口地址以及域名 6、在需要调取接口的页面的methods里面新建方法getfloat()获取数据

开始使用

1.新建Table.vue文件，直接复制Elementui中的Table表格代码，删除TableData[]中的数据，得到如下代码：

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: []
        }
      }
    }
  </script>

2.在methods{}方法中，新建getfloat(){}方法，调取接口，获取数据

methods:{
getfloat(){
this.axios.get("").then((res)=>{
console.log(res.data)
this.tableData = res.data;
})
.catch(function(res){
console.log(res)
})
}
}

创建api接口

3.打开Mocky,在HTTP Response Body 中，按照格式写下json数据，点击生成按钮，即可生成api接口，将接口填入get方法里面，即可得到数据

[{    "date": "2016-05-02",    "name": "王小虎",    "address": "上海市普陀区金沙江路 1518 弄"  },    {        "date": "2016-05-02",        "name": "王小虎",        "address": "上海市普陀区金沙江路 1518 弄"        },{    "date": "2016-05-02",    "name": "王小虎",    "address": "上海市普陀区金沙江路 1518 弄"  },{    "date": "2016-05-02",    "name": "王小虎",    "address": "上海市普陀区金沙江路 1518 弄"  }]

4、通过prop即可拿到数据，并进行展示，生成表格

完成

通过以上方法，即可完成接口的简单调用以及渲染