前端福音史上最强Mock工具,没有之

前端的痛苦作为前端,最痛苦的是什么时候?

每个迭代,需求文档跟设计稿都出来了,静态页面唰唰两天就做完了。可是做前端又不是简单地把后端吐出来的数据放到页面上就完了,还有各种前端处理逻辑啊。

后端接口还没出来,我就得边写代码边测前端效果,又没有真实数据。有人建议用Mock工具,可是每个接口都要自己写Mock规则,这得让费多少时间呀。

等到后端好不容易把接口写出来了,一对接联调,好多字段的数据又跟我Mock的数据对不上,又得重新改代码。

每个迭代都是一场折磨。

就是那种,明明知道这个地方整个团队都可以更有效率,但偏偏就是做不到的无力感。

黎明的希望

直到有一天,我遇到这个神器。我的效率提升了%。

我可以用最省力最优雅的方式得到我需要的Mock数据,甚至不需要任何配置。而且,联调时候曾经遇到的各种令人崩溃的前后端数据对接问题,统统不!见!了!

就是这个??

Apifox

我研究了整整一周,越研究越是心惊。这个工具太强大,完全超出我的预期,就如《倚天屠龙记》里张无忌修炼的乾坤大挪移,练完一层,上面还有一层,每一层都是一片全新的天地。

我曾经以为,定接口什么的你们后端定就行了,跟我前端有什么关系。定好了吐数据给我就行了。

我曾经以为,写接口文档什么的完全是浪费时间,边写代码边改接口不好嘛。

直到我遇到这个神器,我才明白好的工作习惯能给我提升多少效率。

现在的我已经不一样了。我认为这款神器能够把全中国前端程序员的工作效率都提升一倍。我也希望在读这篇文章的你,能够好好把这款工具用起来。

以下还有字,阅读时长5~10分钟。如果你嫌读文字太麻烦,这里也有个视频,内容是一样的。

好,接下来我要发功了。

第一层:智能Mock

其实我们遇到的大部分API返回数据都是通用的,用户名、手机号、地址、邮箱、时间戳,等等等等。但是你要去写Mock规则就很麻烦。你要怎么生成一个看起来合理的中国人名?

在Apifox里面,这变成了最简单的事情,甚至是完全无感的。只要写接口文档的时候把每个字段的名称定义好,这个事情就完成了。不需要任何配置。

接口返回字段名称叫username,在Mock环境下发送,就会得到“程敏”“王宁”“安慕希”“李玛璧”。

字段名称叫phone,就会得到“”“”。

字段名称叫city,就会得到“杭州市”“高雄市”“博尔塔拉蒙古自治州”。

甚至如果你的字段名称叫icon,就会返回一个图片URL,打开就真的是一张png图片!

Apifox会自动启动一个本地的Mock服务,你可以直接用这个url来获取Mock数据。

Apifox本地Mock服务

如果你们团队使用的是Swagger等管理API文档的话,也可以自动导入到Apifox(Apifox支持20多种接口数据格式导入),一样可以使用这个智能Mock,一样是免配置自动生成所有Mock数据。

完全不用操心任何Mock数据配置的问题,只要接口定好了,我什么前端代码都能写。

第二层:自定义智能Mock规则

有的同学问,你这个都是预设死的吧?我怎么知道写什么参数名称你会给我Mock出什么数据来?好,这就是ApifoxMock功能的第二层:自定义智能Mock规则。

在Apifox里面内置了一整套Mock规则,完全兼容Mock.js。当我们的返回字段名匹配上了其中的某条规则,就会返回对应规则生成的随机值。

Apifox内置智能Mock规则

字段名称的匹配方式支持通配符和正则表达式,比如字段只要以“url”结尾,就会得到一个


转载请注明:http://www.aierlanlan.com/tzrz/207.html