vue 原生js 使用Easy Mock构建模拟数据

Easy Mock简介

Easy Mock 是一个可视化，并且能快速生成 拟数据的持久化服务，将模拟数据直接写进代码里，能利用 JavaScript 拦截请求，利用 Charles、 Fiddler 等代理工具拦截请求。
伪造数据，能让程序的编写更高效。使用也较为简单 网址：www.easy-mock.com/

使用Easy Mock创建一个项目

第一步：点击右下角的蓝色加号按钮

不管你在哪，页面右下角总是会有一个创建项目的蓝色按钮

第二步：创建项目

补全空格中的信息
如果是团队项目，要记得选团队
补全项目名和项目基础URL。这一部分没有严格的要求，尽量简洁就好。

填完空以后，选择创建

第三步：添加数据

选中刚才创建的项目，点击创建接口，就能进入信息编写的部分。

数据输入完毕后，要为你的这个接口写一个专属的URL，在右边的蓝色方框中，并对数据进行描述。点击创建，就创建成功了。

第四步：获取数据

接口创建成功后，选择操作选项的复制链接，就能获得这个接口的地址。

第五步：前台获取模拟数据

1.原生方法

模拟数据已经成功创建完毕，那么接下来我们就看看如何在前端页面获取创建的模拟数据把。

2.vue用法

第一步：安装axios

npm install axios --save-dev

第二步：main.js引入

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

第三步：组件使用

  axios_get(){      this.$axios({      method: "get",      url: "https://www.easy-mock.com/mock/5f8cf977aed7a3476f051090/indexHome/index", // 接口地址      data: {       //参数      }    })      .then(response => {        console.log(response, "success");   // 成功的返回            })      .catch(error => console.log(error, "error")); // 失败的返回    }