示意图

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

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

概述

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

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

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

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

真的吗？

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

先说操作，再将案例。

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

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

示意图

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

示意图

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

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

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

一、操作区

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

二、分类区

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

生成字符串生成数值生成布尔值生成对象生成数组通过函数的返回值来生成任意数据通过正则来生成任意符合规则的内容三、辅助区

可以查看预置的占位符：

示意图

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

示意图

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

示意图

四、属性区

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

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

示意图

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

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

示意图

五、数据区

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

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

示意图

六、展示区

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

示意图

七、帮助区

对于一些操作的说明：

示意图

八、提示区

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

示意图

案例

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

假设我们的需求是：

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

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

示意图

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

示意图

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

示意图

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

姓名设定为字符串，并用占位符指定值：

示意图

性别设定为数组，从中随机选取一个：

示意图

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

代码

学号设定为正则，前面固定2023，后面随机六位数字：

示意图

分数设定为数值，在200到600之间：

示意图

好了，看下现在数据区配置：

示意图

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

示意图

轻轻松松搞定。

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

示意图

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

示意图

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

配置链接

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

示意图

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

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

示意图

配置页面

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

示意图

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

总结：

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