mock数据可视化生成:动动鼠标就可以创建一个前端自己的接口

示意图

在开发中,我们通过调用接口来获取数据,如果某个接口还未达到可调试条件,那么就可以通过mock数据来模拟接口的返回值。

这样不会耽误前端的开发进度。

概述

通过mock可以造出各种各样的数据,其实代码书写起来也很简单,但是规则那么多,语法要新学,占位符一大堆,每次写的时候都是反复查看官网文档,最主要的还要做很多相关的配置。

能不能不写代码,只是简单的通过点点鼠标,很轻松的完成这个工作呢?

今天就给大家看一下我的一个实现方式。

通过可视化操作,将实现细节隐藏,不对外暴露语法和规则,所有操作全部在页面中完成,来简单、快速、便捷的生成自己想要的数据。

真的吗?

哈哈哈哈,我们就通过这个例子来介绍一下吧!

先说操作,再将案例。

我们先打开mock配置界面,每一条mock记录称之为一个数据集,输入数据集名称,按回车键即可快速生成一条,然后我们点击配置。

假设我们生成一条叫做"班级学生列表"的数据集:

示意图

主要来看一下这个配置的面板,现在瞧瞧它都能做哪些事:

示意图

映入眼帘的就是这八个部分:

  1. 操作区:确认、取消、刷新按钮
  2. 分类区:mock数据的类型分类
  3. 辅助区:插入占位符或者查看代码
  4. 属性区:每种类型的额外属性配置
  5. 数据区:主要在这里配置数据
  6. 展示区:根据配置的mock动态展示效果
  7. 帮助区:可以查看操作说明等
  8. 提示区:给予一些提示

就以这八部分来展开从而实现我们的班级学生列表数据mock。

一、操作区

点击绿色对勾按钮完成配置,点击粉色叉按钮取消配置,但是粉色圈按钮刷新数据。

二、分类区

mock对于生成数据的方式主要分为七种:

  1. 生成字符串
  2. 生成数值
  3. 生成布尔值
  4. 生成对象
  5. 生成数组
  6. 通过函数的返回值来生成任意数据
  7. 通过正则来生成任意符合规则的内容

三、辅助区

可以查看预置的占位符:

示意图

点击对应的占位符可以自动将该占位符复制到粘贴板以供使用:

示意图

也可以查看目前已经生成的mock的代码:

示意图


四、属性区

当我们在分类区选择一种类型时,可以指定一些额外的属性,比如:

字符串可以指定重复的次数:

示意图

数字可以指定整数范围和小数个数:

对象可以指定选择的属性个数:

示意图

五、数据区

在这个区域我们可以编辑mock数据,整体由表格树的形式来展示,每一个层级的第一行有一个输入框,输入字段名称之后,按下回车,即可生成一个字段key,并展示为新行。

此时可以对当前选中行进行编辑,指定字段值、规则等。

示意图

六、展示区

这里展示了通过数据区配置的mock数据,我们看一下刚才加过total字段后的效果:

示意图

七、帮助区

对于一些操作的说明:

示意图

八、提示区

如果一些占位符有多种用法,那么可以在这里展示出所有用法以及参数说明,比如分类中选择了中文段落:

示意图

案例

整体功能介绍完了,来看一下开篇的那个案例,一起来实现一下,mock造一些假数据,并将次数据集作为一个接口的返回结果。

假设我们的需求是:

  1. 返回班级内的一个学生列表
  2. 每个学生有姓名、性别、爱好、学号、分数等信息

我们首先指定返回的结果中,data数据为一个数组:

示意图

并且动态随机返回50到100个学生的信息:

示意图

然后我们指定数据中的元素为对象:

示意图

并且为它添加上面所说的信息:

  1. 姓名设定为字符串,并用占位符指定值:

示意图

  1. 性别设定为数组,从中随机选取一个:

示意图

  1. 爱好设定为函数,判断如果是男生则随机返回篮球、足球、游泳、骑行中的一个或多个,如果是女生则返回画画、唱歌、跳绳、踢毽子中的一个或多个:

代码

  1. 学号设定为正则,前面固定2023,后面随机六位数字:

示意图

  1. 分数设定为数值,在200到600之间:

示意图

好了,看下现在数据区配置:

示意图

它生成的mock数据又是什么样的呢?

示意图

轻轻松松搞定。

此时我们点击一下操作区的刷新按钮,数据已经动态生成:

示意图

再看下这段代码是什么样的呢?点击辅助区的生成即可看到:

示意图

我们点击完成来生成配置。其中生成的这段代码也是可以随意手动更改的。

配置链接

我们来新建一个请求链接:

示意图

先不要管这个链接是怎么回事,它是我做的页面可视化设计系统中的一部分,包括下面的页面配置也一样,目前我们只讲mock,我们只需要知道这就是一个接口。

并把它的返回值设定为刚才我们生成的mock数据:

示意图

配置页面

我们在页面中生成一个列表,并把数据接口配置为刚才我们新建的请求链接。

示意图

可以看到,已经能够完全正常使用了。

总结:

到此为止,我们已经通过可视化mock数据生成器,模拟了一个接口返回值的数据集,操作简单、方便、快捷,在我们没有后端数据的情况下,可以自己来生成这样一份数据供我们调试。可视化操作不是我们的终极目标,它只是我们开发过程中的一个手段,或者说帮助我们作业的一个工具,通过它来解决绝大部分的问题就可以,降低成本,提高生产力。

展开阅读全文

页面更新:2024-03-03

标签:接口   数据   示意图   数组   字段   按钮   属性   代码   页面   操作

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号

Top