美文网首页工具程序员
Mock API是如何在开发中发光发热的?

Mock API是如何在开发中发光发热的?

作者: eolink的小E | 来源:发表于2018-04-02 16:56 被阅读70次

在长期的服务过程中,我们经常会遇到前来咨询的用户与我们反馈以下这种情况:咨询者是一个前端人员,在项目开发的过程中需要与后端进行对接,遇到后端还没完成数据输出的情况下,他只好写静态模拟数据,在遇到大型项目的情况下,数据冗长、代码复杂、多样的数据类型包括IP、图片,地址,函数等,在极短的项目周期及验收时间下,手动修改模拟数据显得一点都不现实。

对于这样的问题,其实eoLinker提供了目前最佳的解决方案:Mock API。

使用Mock API,前后端人员只需要定义好接口文档就可以开始并行工作;后端之间的接口耦合和测试中未准备好的依赖接口也能被Mock解决,不会出现团队互等的情况。这样的话,越早开展开发自测,提前了发现、修复缺陷的时间,也有效地保证整个产品质量以及进度。

eoLinker提供了两种模拟API的方式,基础Mock以及高级Mock,那应该怎么使用eoLinker的Mock呢?基础Mock和高级Mock的区别是什么呢?

在eoLinker中,基础Mock也称简易Mock,提供了以下功能:

1、支持HTTP、HTTPS

2、支持RESTful风格API

3、支持对请求方式进行校验(免费版为默认开启,专业版可针对项目设置关闭)

4、支持模拟HTTP状态码

5、支持真实的前置URL全局替换掉Mock请求的前置URL

6、支持对请求参数进行校验(专业版)

而高级Mock除了拥有基础Mock的功能之外,还具备以下功能:

7、支持根据mockjs规则生成mock数据,支持自定义js函数

8、支持根据在高级MOCK中设定的生成规则&属性值重新构造MOCK

(专业版)

......

其中的3、6、8功能点,需前往专业版AMS中使用。下面我们选择三个重要功能点进行简单叙述。

1、支持设置返回结果的生成规则,支持MockJS:

Mock.js由于能拦截并模拟 ajax 请求,因此用Mock.js模拟后端数据变得异常简单:

结合上述场景来看,eoLinker通过支持MockJS将能解决以下所有问题。

1、文档没有事先定义,开发过程,后端人员可能存在口头讲述,但是和实际返回数据不一样的情况,而eoLinker 高级mock本身就规范了这种行为,高效协作不是问题。

3、想要尽可能还原真实的数据,不用编写更多代码,也不用手动修改模拟数据。

直接模拟后台数据返回,事半功倍。

4、不担心例如IP,随机数,图片,地址等特殊的格式多重收集,丰富的格式支持省下大量时间。

5、eoLinker的MOCK还支持自定义函数和正则等复杂的数据类型,方便拓展各类更多数据类型。

正因如此,eoLinker MockAPI支持MockJS,解决了前后端开发中的数据模拟问题,大幅提升了开发的工作效率。

2、对请求参数进行校验:

这是高级版中的功能,eoLinker考虑到,开发过程中,有很多后端接口都会对参数进行校验的,确认哪些接口参数是必传,哪些接口参数是非必传。而前端开发调用的是Mock接口,从协助的角度上看,Mock API是模拟后端接口返回参数协作前端开发,那么对参数校验的功能也就十分必要,这样子才能模拟最真实的后端接口,更好地协助前端开发。eoLinker支持对请求参数进行校验,确定好这些接口参数是否必传,这样子就不会漏传某个参数了,行之有效的避免了冗余的工作量。

3、支持每次请求随机生成返回结果:

这同样是高级版中的功能,eoLinker认识到,随机生成返回结果的功能是必要的功能,因为接口每次返回的参数的值是不同的,所以随机生成可以使模拟的返回结果更真实。

接下来就是高级Mock实际教程部分。

1、编辑Mock数据

进入接口编辑页面,点击上方 高级Mock 选项卡,进入到Mock设置页面:

注意:

Mock的填写依赖于接口文档中的返回参数,如果进入Mock设置页面发现没有可以设置的字段,请返回 基础信息 选项卡完善接口的返回信息;

MockAPI支持 Mockjs 语法,了解相关语法教程请前往:http://Mockjs.com/;

使用步骤:1.返回参数填写相关键值对,若拥有层级结果,请用 两个英文右箭头 >>或者::表示层级:

2. 根据Mockjs示例进行拆分填写。以下图 红框 部分进行讲解:

name对应列表字段名;

min-max对应列表生成规则;

string对应列表属性值,使用需搭配@Mock=使用,如 @Mock=’★’

将上图的Mock语法写入:

注意:红色框部分为设置整体返回结果类型,支持两种(object/array),生成规则及属性值同样对应Mockjs语法

2、调用MockAPI

进入接口详情页,点击上方的Mock标签,在下方的Mock部分可以看到有Mock API的请求地址,复制该地址即可访问Mock API得到虚拟数据:

相关文章

  • Mock API是如何在开发中发光发热的?

    在长期的服务过程中,我们经常会遇到前来咨询的用户与我们反馈以下这种情况:咨询者是一个前端人员,在项目开发的过程中需...

  • 实现一个非常便捷的本地mock

    一、什么是Mock 二、Mock的好处 三、实现Mock 我们是如何在没有真实接口的情况下进行开发的呢? 第一步:...

  • Mock

    这里介绍2种mock方法 ,1.使用别人开发好的工具 2. 利用flask建立mock api 1. moco ...

  • Mock.js数据生成器

    mock.js主要解决的问题是:让前端和后台开发人员根据API文档开发,不相互依赖,前端可以模拟api接口数据,达...

  • 2021-06-06 在vue中简单使用mock.js

    在vue项目使用 package.json中引入开发时依赖 新建文件mock.js,内容如下 如何在vue组件中测...

  • iOS单元测试资料收集

    mock 中文资料 官方原版教程,开始mock mock3 API 参考

  • 在 Angular-cli 中使用 simple-mock 实现

    在前后端分离的开发模式中,接口数据模拟(API Mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各...

  • 如何使用 Mock

    Mock 能做什么? 1.API 没开发好,使用 Mock 快速对接 在产品经理发布需求后,前后端同学先根据功能需...

  • mockjs使用

    安装&使用 基础api Mock.mock( rurl?, rtype?, template|function( ...

  • Mock.js安装以及简单使用(入门小白)

    基于Vue.js搭建Mock.js Mock.js官方文档 Mock.js是一款前端开发中拦截Ajax请求...

网友评论

    本文标题:Mock API是如何在开发中发光发热的?

    本文链接:https://www.haomeiwen.com/subject/nkexhftx.html