Vue Cli脚手架使用axios&&rap2模拟接口

在脚手架中使用axios

安装axios

​ 1.安装axios

​ npm install axios --save-dev

​ 2.配置main.js，引入axios

​ import axios from ‘axios’

​ Vue.prototype.$http = axios

​ 3.使用axios

​ 日后使用axios时,使用如下方式 this.$http.get()/this.$http.post(’’)

rap2 模拟接口

rap2就是一款在线模拟数据生成器，可以拦截Ajax请求，其作用在于帮助前端工程师独立于后端进行开发，实现前后端分离。

rap2使用步骤

1.新建仓库

2.创建接口

3.填入模拟的请求参数/请求体以及响应数据

图示

点击接口返回的模拟数据

Vue Cli使用axios

<script>
export default {
  name: "operator",
  data () {
    return {
      users:[]
    }
  },
  created(){
    var that = this;
    this.$http.get("http://rap2api.taobao.org/app/mock/285381/user/findAll")
    .then(function (response) {
      console.log(response.data);
      that.users = response.data.result;
    })
  }
}
</script>

前端页面显示结果