关于前端:可视化Mock工具VirAPI快速创建虚拟格式化数据

40次阅读

共计 1961 个字符,预计需要花费 5 分钟才能阅读完成。

VirAPI — 非侵入式在线虚构数据申请返回接口,可视化创立丰盛多样的数据格式,申请即可得你所须要的响应数据。

抱着冲动的情绪在此向大家隆重介绍:可视化创立虚构接口性能上线啦!!! 辞别须要理解 Mock 语法的限度,间接可视化定义丰盛多样的数据格式(比方常见的:IP、URL、昵称姓名、邮箱地址、工夫日期、图片地址、字符串文本、数值、布尔值、数组、Map 对象 …),让小白也能无门槛的疾速上手创立虚构数据接口。轻快敌对,是 VirAPI 平台的理念。

那么可视化操作起来会不会短少灵活性并增加复杂度呢?接下来咱们用理论应用的案例来给大家演示一下。

1. 抉择创立可视化接口

首先,登录 VirAPI 后盾控制系统,在页面顶部菜单栏右侧,抉择点击【新建接口】进入创立页面。具体接口创立的步骤这里就不再做具体介绍,有趣味的小伙伴能够参见《新手入门 02- 新建接口》。

此时在设置“对应响应数据 (data)”时,会发现右侧有两个模式按钮: 可视化(默认)和 MockJS。你能够依据须要抉择适合的形式创立。设置并保留后,暂不反对更改;请留神!

  • 可视化: 利用零碎设计的敌对型可视化控件,疾速上手自定义虚构返回数据格式;
  • MockJS: 借助 MockJS 语法,实现编程式自定义虚构返回数据格式。

此时抉择 可视化 模式,即能够间接点击下方的“新增字段”按钮来可视化界面创立所须要的响应数据格式了。

2. 新增字段

点击“新增”字段按钮后,响应数据区即会呈现一个字段编辑块。
次要由 字段键名、数据类型、规定、形容、编辑按钮 组成。

  • 字段键名:即所返回数据的字段名,不能为空,且长度最多为 36 个字符;
  • 数据类型:以后字段的数据类型,以后反对 String、Number、Boolean、Array、Object 五个大类,不同数据类型其“规定”也会不同;
  • 规定:即给该字段在以后数据类型下的具体数据格式设置规定,以数据类型为“String”为例,规定可设定为:根本字符串、题目、段落、姓名、图片地址、电子邮箱、IP、URL、日期工夫、后果集筛选等等;
  • 形容:即该字段的含意形容,可选填。

3. 字段数据类型及规定介绍

当指定字段所属数据类型后,可点击“规定”按钮,为该字段限度具体的数据格式。

当数据类型为“Number”时,可指定其数值模式:

  • 整数:即设置该字段为整数型字段,反对设置其取值范畴(最大最小值);
  • 浮点数:即设置该字段为整数型字段,反对设置其取值范畴(最大最小值),以及小数位精度;
  • 后果集筛选:即设置该字段的值会从该设置的后果集中随机筛选一个。

当数据类型为“String”时,可指定其数值模式:

  • 根本字符串:即设置该字段为任意字段字符串,反对设置其字符指定固定长度或长度范畴;
  • 单词文字:即设置该字段为英文单词文字,反对设置其字符指定固定长度或长度范畴;
  • 中文题目:即设置该字段为中文题目字符串,反对设置其字符指定固定长度或长度范畴;
  • 句子:即设置该字段为英文句子,反对设置其字符指定固定长度或长度范畴;
  • 中文段落:即设置该字段为中文字符串段落,反对设置其字符指定固定长度或长度范畴;
  • 中文姓名:即设置该字段为中文姓名昵称;
  • 图片地址:即设置该字段为在线网络图片 URL,反对设置其图片的宽高尺寸,以及图片格式类型(png、jpg 等);
  • 电子邮箱:即设置该字段为电子邮箱格局字符串,反对自定义邮箱后缀域名;
  • IP:即设置该字段为网络 IP 字符串;
  • 全局惟一标识符:即设置该字段为可做惟一标识的字符串;
  • URL:即设置该字段为 URL 地址,反对自定义对应网络协议(如 http、https、ftp 等);
  • 日期工夫:即设置该字段为工夫日期字符串,可指定日期字符串的格局,如 yyyy 年 MM 月 dd 日 HH:mm:ss;
  • 后果集筛选:即设置该字段的值会从该设置的后果集中随机筛选一个。

当数据类型为“Boolean”时,可指定值为 false 时的概率(0 至 100 之间)。

当数据类型为“Object”时,可指定值为 null 时的概率(0 至 100 之间);且还可为其增加子字段属性。

当数据类型为“Array/String”、“Array/Number”、“Array/Boolean”、“Array/Object”时,可设置该数组的固定长度或长度范畴,且还可再指定数组内元素的规定。

4. 创立胜利,提交保留

创立好响应数据字段后,点击下方【创立接口】按钮,即创立实现。是不是很简略!

在接口列表页可查看该接口,成果如下:

接下来咱们再来看看通过网络申请该接口,是否能失去想要的格局数据:

???? 几乎完满!


咱们置信可视化创立虚构数据接口,可为开发使用者进步创立效率,防止了还需学习 Mock 语法的门槛,只需点下按钮抉择参数即可疾速创立丰盛的虚构格局数据。

当然,目前的可视化操作还有待持续优化,所反对的数据类型及规定还无奈最好的适应所有场景;期待咱们的更新与迭代吧!

正文完
 0