fastmock线上数据模拟器

简介

官网地址

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

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

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

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

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

---

其他的mock数据，基本上的原理都是前端在本地起一个服务器，然后发起http请求来获取数据。这样一来，就需要在本地管理模拟的数据，但是随着前端的发展，已经有了不少在线的mock数据平台。由他们来提供服务器，我们只要在他们平台上创建好自己的模拟数据，就可以使用了。
原理：

我们将mock层独立出来，通过中间服务的形式在前端和后端服务之前建立一道围栏，使用fastmock，前端只需要修改自己的XHR请求地址，后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成，前端再将XHR请求地址替换回来进行联调测试即可。

fastmock支持以下四种数据：

• restful链接参数：如/user/1，对应数据为{id: 1}，获取方式为_req.params.id
• query查询参数：如/user?username=Amour，获取方式为_req.query.username。常用于get请求
• body请求体数据：参数在request body中，获取方式为_req.body.key。常用于post请求
• headers头部信息：获取方式为_req.headers.key。常用的场景是接口的token验证，获取方式为_req.headers.token

一.创建项目

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

二.创建接口

在刚刚新建的项目中点击新增接口，如下图：

三.配置接口

依照提示填写内容，如下图：

四.调用接口

可以直接查看接口

接口请求：

 fetch(
      'https://www.fastmock.site/mock/30404d2e9829c8a34c7c66993c0bf740/test/get/no',
    )
      .then((rsp) => rsp.json())
      .then((data) => console.log(data));

五.动态传参

fetch(
      'https://www.fastmock.site/mock/30404d2e9829c8a34c7c66993c0bf740/test/postdata',
      {
        method: 'POST',
        body: JSON.stringify({
          username: 'admin',
          password: '123456',
        }),
        headers: {
          'Content-Type': 'application/json',
        },
      },
    )
      .then((resp) => resp.json())
      .then((data) => console.log(data));

示例：

六.fastmock数据编写小技巧

生成14个随机数组

{
    "retcode":"000000",
    "retinfo":"Succeeded",
    "data":{
        "results|15":[{
            "updateTime":"@date('yyyy-MM-dd hh:mm:ss')",
            "loginSystem|1":"[0,1]",
            "documentNo":"登录版本",
            "totalApplyNum":"1",
            "status":"登录结果",
            "documentId":"1",
            "applyDate":"2020-09-09"
        }]
    }
}

---

日期

 "updateTime":"@date('yyyy-MM-dd hh:mm:ss')",
 "startDate":"@date('yyyy-MM-dd')",
 "endDate":"@date('yyyy-MM-dd')",

---

数据从0与1之间随机抽取一个

"loginSystem|1":"[0,1]",

---

数据从true与false之间随机抽取一个

"isOptional|1":["true","false"]

---

生成url地址

{
    "retcode": "000000",
    "retinfo": "Succeeded",
    "data": {
        "codeUrl": ["@url","@url"]
    }
}

---

生成6个文字

{
    "retcode":"000000",
    "retinfo":"Succeeded",
    "data":{
        "messages|10":[{
            "content":"@cword(6)",
        }]
    }
}

---

a到b范围之间的一个随机数

"warningId":"@integer(a, b)",

---

随机生成名称

"staffName":"@cname",

---

地址名称

省："provinceName":"@province",
市： "cityName":"@city()",
区："areaName":"@region",
地址："address":"@county(true)",

---

携带图片的

{
  "status":"200",
  "msg":"请求成功",
  "data": {
    "list|5": [{  //生成5个图片的结构
      "id|+1":1,   //每一项都自加一
      "image": "@image('750x440', '#ffcc33', '#FFF', 'png', 'Fast Mock')"  //生成图片
    }]
  }
}

---

生成限定的随机数和文章标题

{
  "status":"200",
  "msg":"请求成功",
  "data": {
    "list|10": [{
      "id|+1":1,    //生成会自加的id
      "title":"@ctitle(3, 8)",   //随机生成3到8个中文，可用来模拟文章标题
      "score|1-9.1":1,   //随机生成1-9.9的浮点数，且属性的名字是score
      "image": "@image('200x270', '#ffcc33', '#FFF', 'png', 'image')"   //随机生成图片
    }]
  }
}

---

生成带随机时间的

{
  "status":"200",
  "msg":"请求成功",
  "data": {
    "list|10": [{
      "id|+1":50,
      "title":"@ctitle(3, 8)",
      "score|1-9.1":1,
      "listtag":"2018/美国/科幻/超级英雄",
      "listtime":"@datetime('yyyy-MM-dd')",   //生成诸如2018-20-19之类的随机时间
      "image": "@image('200x270', '#ffcc33', '#FFF', 'png', 'image')" 
    }]
  }
}