在线接口Mock工具fastmock详解

简介

简单好用的在线接口 MOCK 平台

• 本地无需任何开发，讲请求根地址指向到模拟地址即可轻松实现接口模拟
• 快速生成演示数据，只需要开发前端即可向客户演示真实效果

服务于前后端分离项目的接口 MOCK 平台

fastmock 让接口 mock 变得更加简单，让团队协作变得更加高效

• fastmock 可以让你在没有后端程序的情况下能真实地在线模拟 ajax 请求，实现前后端分离
• 用 fatmock 实现项目初期纯前端的效果演示，再也不必为演示而开发全套程序
• 使用简单，只需简单的配置，将根地址指向到 fastmock ，即可实现数据模拟，无需额外开发

去掉一切繁琐，提取出最关键的功能，只需要 登录 => 创建项目 => 创建接口 => 录入您想返回的数据 即可轻松创建一个接口。

一、创建项目

在官网注册登录后就可以开始创建项目了，如下图：

二、创建接口

在刚刚新建的项目中点击创建接口

三、配置接口(重点)

官方常用返回规则示例：

注意：录入的规则代码中不能含有注释；代码行尾分号不能缺少

1.基本数据(固定json结构)

{
  "code": "0000",
  "data": {
    "name": "张三",
    "age": 12
  },
  "desc": "成功"
}

2.基本数据(Mock随机json结构)

{
  "code": "0000",
  "data": {
    "list|20": [{
      "name": "@name",
      "age": "@integer(20)"
    }],
    "url": "'11111'"
  },
  "desc": "成功"
}

3.RESTFUL判断输入的登录用户名密码是否正确

{
  "code": "0000",
  "data": {
    "verifySuccess": function({_req, Mock}) {
      let body = _req.body;
      return body.username === 'admin' && body.password === '123456';
    },
    "userInfo": function({_req, Mock}) {
      let body = _req.body;
      if (body.username === 'admin' && body.password === '123456') {
        return Mock.mock({
          username: "admin",
          email: "@email",
          address: "@address"
        });
      } else {
        return null;
      }
    },
  },
  "desc": "成功"
}

4.根据id查询指定列表对象

{
  code: '0000',
  data: function({_req, Mock}) {
    var list = [
      {
        id: 1,
        name: '剃须刀'
      },
      {
        id: 2,
        name: '电动牙刷'
      }
    ];
    var query = _req.query || {};
    var obj = list.find(function(item) {
      return item.id / 1 === query.id / 1;
    });
    return obj;
  }
}

配置好相关接口，如下图：

此处入参只有是username: 'admin' , password: '123456'才会返回登录成功.

保存即可生效

四、使用接口

在项目中使用：

// $axios的封装此处省略
$axios.post('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/login', data).then(res => {
    if (res.code === 0) {
        if (res.data.success) {
            Message.success(res.data.msg);
            commit('SET_TOKEN', res.data.token);
        } else {
            Message.error(res.data.msg);
        }
        resolve(res);
    }
}).catch(error => {
    reject(error);
})

五、调用接口

当入参是username: 'admin' , password: '123456'时返回登录成功，如下图：

.

当入参不匹配时则返回登录失败，如下图：

是不是 so easy 啊 ~