首先我们需要在项目中安装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啦,数据都自动遍历出来了