vue使用axios请求easy mock假数据

首先我们需要在项目中安装axios，在idea中打开终端命令输入下面的指令就可以进行安装了

npm install --save axios vue-axios

然后登录easy mock官网，初次使用的注册一个账号就可以了easy mock官网

做好上面的准备工作后，就开始教程啦

1.在main.js文件中引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

2.我们拿element-ui的table表格做例子吧，去官网随便复制一个表格的组件，只需要复制以下代码

<template>
  <div>
    <el-table :data="users" stripe 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>
  </div>
</template>

element-ui的表格会自动帮我们遍历接收到的数据，不需要写别的内容了

3.编写js代码

<script>
    export default {
      name: "UserList",
      data() {
        return {
          users: [{

          }]
        }
      },
      created() {        // 页面加载完毕后执行此函数
        var vm = this;
        this.axios({
          method: 'get', // 请求的方式
          url: ''        // 请求数据的路径
        })
        .then(function (response) {
            vm.users = response.data.users
        })
      }
    }
</script>

4.然后我们再回到easy mock官网，搞一些假数据

点击加号新建一个项目

进入建好的项目，点击创建接口

编写假数据

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

这里需要注意假数据的"users"和"date" “name” "address"是跟前面的table里的"date"和"prop"一一对应的，不能乱写

5.创建成功后，把假数据的接口地址复制到js代码的url中

      created() {        // 页面加载完毕后执行此函数
        var vm = this;
        this.axios({
          method: 'get',
          url: 'https://www.easy-mock.com/mock/5ecf0d160a252f6352077204/test/users'
        })
        .then(function (response) {
            vm.users = response.data.users
        })
      }

最后运行项目就ok啦，数据都自动遍历出来了