mock数据如何更加方便？快使用 fastmock

之前都是本地安装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

// 接口域名  先使用fastmock的接口根地址， 后续可替换正式项目域名
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～

---

---

【fastmock参数校验】