之前都是本地安装mockjs来进行数据的模拟，但是如今发现一个在线接口 MOCK 平台，于是准备记录一下

1. 为什么要mock数据？

项目定下来之后，前端可能和后端是同时进行开发操作。那么这时接口不存在，前端无从获取数据，开发就会遇到一些问题。

那么，该如何搞嘞？
这种前后端同时开发是一种很常见的状态，工期紧张更要同步进行，不可能等着接口出来在进行前端开发。

这时前端需要和后端同学事先约定一些内容：

1.接口数量以及接口名称
2.接口字段规范

当约定好这些内容之后，前端同学就可以写一些模拟数据来进行辅助测试开发.

2.如何mock数据？

之前都是本地进行mock数据，此时就不进行演示。
演示一下新发现的在线接口mock平台fastmock

1.访问在线mock平台网址 【fastmock】
2.注册账号并登陆
3.创建项目 => 创建项目（图示1） => 进入项目 => 新增接口（图示2） => 新增成功（图示3）

图示1⬇️

图示2⬇️

图示3⬇️

3.项目实战

演示下vue中的使用：
vue.config.js

const baseURL ="https://www.fastmock.site/mock/08e002ebed3dde51cdd5e7a73071b386/mockApi";module.exports = {devServer: {open: true,port: 8090,host: "0.0.0.0",https: false,hotOnly: true,disableHostCheck: true,proxy: {// /api是项目里使用的一截接口路径，这里进行匹配转发 如果真实接口没有，可进行路径重写"/api": {target: baseURL,changeOrigin: true,ws: true,pathRewrite: {"^/api": "/",},},},},
};

test.vue

  mounted() {this.axios({method: "get",url: "/api/userinfo"}).then(res => console.log("请求成功", res)).catch(err => console.warn("请求失败", err)).finally(() => console.log("请求结束"));}

配置好vue.config.js记得重启项目。
打开页面即可看到请求的记录：

至此，over～