当前位置: 首页 > 工具软件 > easy-tips > 使用案例 >

翻译?Easy-mock平台简易操作文档,你也能不写代码实现mock

淳于烈
2023-12-01

Easy-mock基本操作手册:介绍数据类型及响应式数据

1、本地部署Easy-mock或者使用线上平台,目前线上平台证书过期或服务器不稳定,偶尔不能正常访问,而且同步的swagger地址必须是对外访问的,从稳定及安全方面来评估,还是建议本地化部署,恰巧人家也是github的开源项目且支持二次开发。

2、本地化部署步骤略,参照github的md部署文档操作即可,注意环境软件版本及easy-mock配置。

3、部署成功后,可以别名访问或直接ip+port访问,登录平台时不存在的用户就会创建用户(不支持密码找回),部署的文档也一应俱全。

4、那么现在可以自己创建项目来玩玩Easy-mock平台:

  • 创建项目,可以选择个人还是团队,如果是团队,那么其他人完成注册后就需要申请加入团队,反而是个人可以添加成员协同操作;
  • 支持mock.js语法,需要熟悉前端js语法,才能更好的支持响应式数据,下面会简单介绍基本用法
  • 因为它支持与swagger接口文档完美整合,同步接口文档,每次都只会同步变更的接口信息
  • 就算公司不是swagger接口文档也没关系,可以手动创建接口,也只不是黏贴与复制的操作

tips:如果你不熟悉或是忘记了mock.js语法,那么可以在数据编辑器里输入em获得提示!

5、接下来介绍如何mock响应式数据

  • 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
  • 支持扩展更多数据类型,支持自定义函数和正则
    • 支持正则:“regexp”: /[a-z][A-Z][0-9]/
    • @string、@integer(10, 30)、@date(yyyy-MM-dd)、@boolean、@id、@email、@datetime等数据占位符
  • 因为无法联动,但是借助响应式数据,也能满足一定的需求:
 数据编辑器,可以为某个属性(响应参数)指定function,其中提供了_req对象;
 通过请求对象编写逻辑,实现响应式数据,如下:
 原数据响应格式:
{
  "count": 1000,
  "status":0
  "data": {
    "data1": 10086,
    "data2": 10010,
    "data3": [{
        "data4": 10000
      },
      {
        "data5": 20000
      }
    ],
  },
  "msg": "请求数据成功"
}
  • 前后端通过约定的status响应参数来确定接口请求是否正确,那么需要模拟异常,该怎么做?
1》使用@integer(0,1)数据占位符来代替,随机非0和0的状态;
2》也可以在参数status后写:|1-10,即"status|1-20":0,响应参数会随机0-20之间的数值
3》接下来走业务场景,使用function来决定,代码如下:
{
  "count": 1000,
  status: function({
    _req,
    Mock
  }) {
    if (_req.query.test === "test") {
      return 0
    } else {
      return 10086
    }
  },
  "data": {
    "data1": 10086,
    "data2": 10010,
    "data3": [{
        "data4": 10000
      },
      {
        "data5": 20000
      }
    ],
  },
  "msg": "请求数据成功"
}
tips:对象_req.query(查询参数是url?拼接的参数).test(参数名);如果参数在body里面,query替换成body即可
  • 下面来看一下_req对象会输出哪些东西:
  调试代码如下:
  {_req: function({
    _req
  }) {
    return _req
  }
    • 结果输出如下:
{
"_req": {
  "method": "POST",
  "url": "/mock/5dbbc103e0e5c1139e64b376/updateUserTarget?test=test",
  "header": {
    "host": "47.112.110.115:3300",
    "connection": "keep-alive",
    "content-length": "15",
    "accept": "application/json, */*",
    "origin": "http://47.112.110.115:3300",
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36",
    "content-type": "application/json",
    "referer": "http://47.112.110.115:3300/mock/5dbbc103e0e5c1139e64b376/updateUserTarget",
    "accept-encoding": "gzip, deflate",
    "accept-language": "zh-CN,zh;q=0.9",
    "cookie": "UM_distinctid=16d5d139292b92-03b199b3669017-7373e61-1fa400-16d5d13929397e; CNZZDATA1277812015=2091627324-1569220588-%7C1570524984; jenkins-timestamper-offset=-28800000; easy-mock_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmJjMDJlZTBlNWMxMTM5ZTY0YjM2ZCIsImlhdCI6MTU3MjgzNzYxOCwiZXhwIjoxNTc0MDQ3MjE4fQ.gdk1GeGAzDuVigi7xOtTUHmGKG8WNiAYHLuvX7LFgWY"
  }
}
}

aq:那么如何引用_req返回的对象呢?
还是同上操作,需要function定义_req对象,只是return的_req对象变成_req.method\url\cookie等
  • 再示例一种特殊场景,如果入参获取不到或是不存在参数,return一个默认值,再响应参数中定义一个
default:自定义值,代码如下:
defaul:10086
if (_req.query.test === "test") {
      return 0
    } else {
      return this.default
    }
    
解释:如果请求参数test不等于test,那么函数返回上面定义的default的值
tips:有些时候还可以这样玩,还是上面的场景,如何覆盖status所有状态码?代码如下:
"status|1":[0,10010,10086,500]

6、至此easy-mock的基本数据类型操作及应用场景介绍完毕,所以前后端开发分离不是梦。

7、再多提个提升效率的问题,建议以团队项目来开展,多人维护mock平台的数据,使得数据的一致性,因为此平台,团队项目不能批量拉人,个人项目却可以协同维护,不管是哪种加入方式,都可以加个五角星,只在个人工作台显示即可。

 类似资料: