背景
在开发过程中,因为后端与前端并行开发,或者前端须要期待后盾开发,难以保障对接效率,同时即应用开发好的 API 对接,也有可能一个 API 不通就阻塞了整个软件的对接工作。同时对软件的敏感度也很高,一不小心就可能导致整个软件不能失常工作。并且界面之间存在着重大的相互依赖关系,产生的业务逻辑非常复杂,这些都会对软件的开发效率产生很大的影响。
所以学习如何利用最好的 Mock 数据是很要害的。这样做会升高前端开发者的工作量,升高开发费用,进步开发效率。
以下是一些常见的 Mock 办法,咱们能够依据具体的场景和条件来进行抉择和配置。最要害的是要晓得如何去做,并从中挑选出最适宜本人的形式。
Mock 介绍
或者还有一些没见过 Mock 的读者,不晓得 Mock 是什么。明天就来跟你说说这玩意的厉害,这玩意非同凡响!
简略地说,Mock 是指在测试期间,为一些难以构建或不易取得的对象,创立一个虚构物体进行测试。而这个虚构物体就是模仿物体,模仿对象是在调试过程中理论对象的代替。
有时候,Mock 服务被称为一个测试服务替代品,或一个测试服务,上面的图片十分活泼地阐明了它的性能。
Mock 能解决什么问题?
Mock 性能的劣势:
- 前端对接不依赖后端:让前端工程师独立于后端进行开发。
- 减少测试的真实性:通过随机数据,模仿各种场景。
- 开发无侵入:不须要批改既有代码,就能够拦挡 Ajax 申请,返回模仿的响应数据。
- 数据类型丰盛:反对生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、色彩等。
- 不便扩大:反对扩大更多数据类型,反对自定义函数和正则。
Mock 性能实用场景在理论工作中十分多,真正在理论我的项目中,引入 Mock 工具通常来解决如下几类问题。
次要有:
- 开发进行单元测试
因为单元测试只对目前的单元进行,所以必须保障所有的内外依赖关系都是稳固的,应用 mock 的形式来模仿根底单元依赖的其它单元,这样就能够把测试的重心放在以后单元的性能上,从而打消内部因素的影响,进步测试的准确性。
- 调用第三方接口
在做接口自动化的时候,有时候须要调用第三方的接口,然而他人公司的接口服务稳定性不受你的管制,有可能他人提供的测试环境明天服务给你开着,他人就关掉了,给自动化接口测试带来很多的麻烦,此时就能够通过 mock 来模仿接口的返回数据,比方模仿各种第三方异样时的返回。
- 解决接口间的相互依赖
例如,您正在开发前端网页,当初您须要开发付款性能:下一次订购、付款页面界面、付款后果、付款胜利、显示付款胜利页、付款失败页。为了实现这个个性,您必须调用后盾界面,并显示出相应的页面。当初的后端界面还没有齐全开发进去,如果是前端开发,那就只能加班了。要实现开发工作的同步,在这个时候,您能够依照接口文件的要求,将接口的地址和参数发送给用户,再通过 mock 接口的不同的返回接口,来实现开发工作。
传统 Mock 解决方案
传统 Mock 解决方案常见的有两种,一种是应用 Postman 接口测试工具进行 Mock 数据,另外一种是应用 Mock js 第三方库进行 Mock 数据。
Postman 接口测试工具
Postman 中须要点击 Create Mock Server 配置 mock 服务。抉择之后,应用程序会进行一步一步的提醒。
配置须要 mock 的接口地址,手动输出响应数据返回值即可。
Mock js 第三方库
Mock.js 是一款模仿数据生成器,旨在帮忙前端攻城师独立于后端进行开发,帮忙编写单元测试。提供了以下模仿性能:
- 依据数据模板生成模仿数据
- 模仿 Ajax 申请,生成并返回模仿数据
- 基于 HTML 模板生成模仿数据
在 Mac 上关上命令行终端,输出装置命令:npm install mockjs,稍等几分钟装置实现。
简略示例展现:
Mock list 是自增数据
// 应用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})
// 输入后果
console.log(JSON.stringify(data, null, 4))
Mock 按规定生成字符串
// 指定范畴的数量
Mock.mock({"string|1-10": "★"}) // 执行后
{"string": "★★"} // 随机生成数量为 1 -10 个 '*' 字符串
// 固定数量
Mock.mock({"string|3": "*"}) // 执行后
{"string": "***"} // 生成指定数量的 '*'(示例是 3 个)字符串
Postman 和 Mock js 应用小结
Postman:Postman 的装置更容易,但 Postman 在 mock 性能中的体现,必须手工填写 mock 数据,而且只有一个配置能够写入。在理论利用中,依然不够灵便,扩展性不强。
Mock js:Mock js 尽管能 mock 出很多类型的数据,然而它须要嵌入在前端 vue 我的项目中联合应用,上手应用有肯定的门槛。
总的来看,传统 Mock 解决方案存在几类问题:
- 适配简单场景的 Mock 能力弱;
- 简单依赖环境不稳固;
- 会减少代码量,在写 mock 对象代码时,有可能引入谬误;
- 学习老本较高,须要编写代码;
综上问题,咱们须要一套开箱即用的 Mock 工具,能应答简单的业务场景、稳固并且牢靠、对代码无侵入、上手应用简略。
Eolink ApiKit 解决方案
在介绍 Eolink 解决方案之前,介绍下 Eolink Apikit 到底是个啥? 能解决什么问题? 让咱们先来理解一下。
官网的解释: Eolink Apikit 可能提供 API 全生命周期治理解决方案,帮忙前端、后端以及测试人员的工作变得更麻利,蕴含性能: 接口文档治理、接口自动化测试、接口数据 Mock 等性能。
这意味着 Eolink Apikit 将会为咱们带来一种全新的技术解决方案, 接下来给大家介绍弱小的 mock 性能应用。
Eolink Apikit 的 mock 性能十分欠缺,从一个整体 Mock 到一个字段级的 Mock 都能够适应不同的状况。我必定置信大部分人会将其用于每天的利用,例如前后端我的项目开发,第三方接口的调试,以及接口的自动化测试,几个小时就能熟练地使用。
我将其性能拆解成思维导图的形式解说,这样会更清晰易懂。
从以上的思维导图能够分为六个档次的 Mock 性能,上面我将通过每个 Mock 的业务上的实例来阐明性能的特点,具体的 Mock 的用法,还有一些具体的调试和优化。
全局 Mock
特点:提供零碎兜底的 Mock 规定,确保每个 Mock 调用的返回参数均有随机数据。
全局 Mock 是 Eolink 提供的最兜底或者最激进的一种 Mock 性能,次要是为了不便那些不想要附加 Mock 的同学,提供一些简略的 Mock 性能。
首先,须要编辑页面的返回后果设置 city 字段。
而后在文档底部 Mock 模块抉择零碎默认冀望链接并且点击复制到浏览器中。
每次刷新浏览器,都会 name 字段都会返回随机字符串,达到了每个 Mock 调用的返回参数均有随机数据的成果。
高级 Mock
特点:配置不同的申请参数,以取得不同的返回数据。灵便全面的自定义配置,一个接口实现多种返回数据。
比方申请参数的类型 name 字段参数值是 1、2、3,然而须要返回的后果返回不同的响应后果。在理论我的项目中,为了升高前端配置 Mock 接口,能够通过一个接口实现配置不同的申请参数,获取不同的返回数据。
可是应用动静 Javascript 通过代码生成返回数据时,JavaScript 是一种反对面向对象编程、命令式编程和函数式编程的网页开发客户端脚本语言,能够应用编写 Javascript 代码的形式,并应用 return 语句返回数据,而且这种形式最容易解决数据,本文中应用的就是这种形式。Javascript 模式中也反对 Mock JS,通过 Mock.mock() 形式调用,详情能够查阅 Mock JS 官网文档。
通过编写 Javascript 脚本设置响应内容,还能够间接应用内置函数设置“申请体触发条件”相干内容,设置的信息等同于在“申请体触发条件”输入框中的设置,如设置 Header 参数或者申请体参数等,设置实现后,在测试时填写对应的参数进行触发。
示例:设置申请体参数,对触发条件进行判断输入符合条件的数值
判断触发条件“a”是否等于“eo_test”若等于则输入“胜利”,否则输入“失败”。
在申请参数中输出 status= 1 后,能够看出后果是 code=1,这样就是依据输出条件动静 mock 返回数据的成果。当然,在“数据输入”中,咱们能够增加代码,对数据的合理性进行查看,以确保数据的正当可信。
返回后果 Mock
特点:编辑接口文档的返回后果的同时实现 Mock 规定配置。边写文档边实现 Mock 配置,无需额定工作量。
在 Mock 规定区域,可间接在 Mock 规定输入框中填写固定值,Mock API 调用时间接返回其固定值。
智能内置 Mock
特点:智能辨认罕用返回参数,主动填入预置 Mock 规定。零配置,无形中实现 Mock 规定填写。
零碎已内置一套罕用的智能 Mock 规定,你无需做任何配置,在文档中编写对应的字段名则会呈现对应的 Mock 规定。实现 Mock API 零配置,无形中实现 Mock 规定填写。
比方: 字段名输出 time,Mock 规定会自动识别匹配出内置 Mock 规定,@datetime(‘yyyy-MM-dd HH:mm:ss’)这种 Mock 规定,用户在应用过程中,应用成果无感知、不须要额定配置。
智能自定义 Mock
特点:智能辨认非凡返回参数,自动化填充自定义 Mock 规定。一次配置屡次复用,晋升 Mock 规定边写效率。
你能够通过智能自定义 Mock 配置,使得你在文档中编写某个字段名后,零碎主动填入对应的 Mock 规定。实现字段 Mock 规定一次配置,永恒复用。大大提高了工作效率,让您在工作中熟能生巧。
把 Mock 规定和字段名的匹配规定事后自定义好,而后后续能够在理论应用的时候,填写对应的字段名能够输入对应的 Mock 规定。
比方
@ctitle: 随机生成一句中文题目。
@cword: 随机中文词组。
@datetime: 日期工夫。
约束条件 Mock
特点:依据字段约束条件主动生成对应的 Mock 数据。字段级多条件配置,还原最实在的随机数据。
对返回参数字段进行约束条件设置后,Mock 规定输入框会主动填入占位符 @eo.limit 并主动依据约束条件返回 Mock 数据。
在操作区域内点击更多设置,如字段长度,最大值最小值,和值可能性等。
Eolink ApiKit 的 Mock 解决方案的劣势:
- 能适配各种场景的 Mock 能力强;
- 学习成本低,不须要额定编写代码;
- mock 能力更加智能,实现零配置;
- mock 服务和应用服务彼此拆散,不会存在代码净化;
结语
Eolink ApiKit 在 Mock 方面体现的很弱小,实用于不同的业务场景、实用于不同的应用人群,通过以上两种简略和高级的调用,不同之处是简略的 Mock 配置简略,而高级 Mock 是基于简略 Mock 的加强,能够适应更加简单的状况,联合多种智能配置形式搭建的 Mock API 能力体系,满足了大部分用户对 Mock 能力的需要。
官网地址:
https://www.eolink.com/?utm_source=cpsf&utm_content=cpy01