【技术创作101训练营】mock工具模拟接口联调

PPT第一页

第一页演讲文稿：

社区的小伙伴，大家好，我是小两同学。我带来的分享主题是，mock工具模拟接口联调。

PPT第二页

第二页演讲文稿：

首先聊一下，什么是Mock。

在程序设计中指的是使用模拟的对象来替代真实对象，以测试其他对象的行为。而在前端开发中，通常是指模拟数据以及生成和使用模拟数据的工具与流程。

PPT第三页

第三页演讲文稿：

为什么要使用Mock工具呢？我们可以试想下以下场景：

在一个常规的项目开发流程中，假设前端开发时间 t1，后端开发时间 t2，前后端联调时间 t3，前后端同时进行开发，而后进入联调阶段，再到测试以及上线。在理想情况下，整体的项目开发时间应为是 <=max（t1，t2）+t3。但实际开发中，前端往往需要依赖一定的数据模型才能实现相对应的交互 ，而数模型又依赖着后端提供的 API 接口。在这种情况下，t1需要依赖于t2，刚刚的表达式就不成立了，相对应我们整体的项目开发时间也就delay了。

PPT第四页

第四页演讲文稿：

那么，如何实现前端的无依赖独立开发以提升效率呢？

这就要引出我们今天的分享主题：mock工具模拟接口联调

PPT第五页

第五页演讲文稿：

提到Mock呢，我这里给相对应的方案分为了四大类。

第一种：直接在代码中侵入式地书写静态返回数据来调试相关逻辑；

第二种：使用后端开发服务作为 Mock 服务，将未实现的功能在后端返回 Mock 数据；

第三种：通过一些本地 Mock 工具，使用项目本地化的 Mock 规则来生成 Mock 数据；

第四种：使用功能更丰富的接口管理工具来提供独立的 Mock 能力。

第一种方法我们通常直接在项目中写入模拟接口返回的静态json数据，实现对接口数据的模拟，但这种方法相对而言灵活性不够高；第二种方法，后端在没有实现功能的时候可以模拟数据返回，但这种方法仍然强依赖于后端；所以我们在这重点说明后两种方法。

PPT第六页

第六页演讲文稿：

提到Mock工具，我们难免会想到Mock.js。这里的Mock.js就是属于第三种方案，通过一些本地 Mock 工具，使用项目本地化的 Mock 规则来生成 Mock 数据。

Mock.js 是前端领域流行的 Mock 数据生成工具之一，后续许多功能更丰富的工具和系统在各自的 Mock 功能部分都将它作为基础设施。

PPT第七页

第七页演讲文稿：

Mock.js 的核心能力是定义了两类生成模拟数据的规范：数据模板定义规范（Data Template Definition, DTD）与数据占位符定义规范（Data Placeholder Definition, DPD），以及实现了应用相应规范生成模拟数据的方法。

PPT第八页

第八页演讲文稿：

首先数据模板定义，它规范约定了可以通过“属性名|生成规则：属性值”这样的格式来生成模拟数据。

如图所示案例。

PPT第九页

第九页演讲文稿：

数据占位符定义规范，则是对于随机数据的一系列常用类型预设，书写格式是'@占位符（参数 [, 参数] ）'。

如图所示案例。

我们通过尝试，可以得出最后一例的结果是，随机生成了一组姓名数组，数组包含1~3个元素。

PPT第十页

第十页演讲文稿：

从以上案例我们可以得出结论：占位符既可以用于单独返回指定类型的随机数据，又能结合数据模板作为模板中属性值的部分来生成更复杂的数据类型。

那我们再接着看一下，在实际项目中，如何使用Mock.js来实现模拟数据的功能。

PPT第十一页

第十一页演讲文稿：

这里以Vue项目为例。首先安装Mock.js的依赖。

PPT第十二页

第十二页演讲文稿：

然后在项目中新建mock.js文件，引入依赖，根据需要写入模拟数据。这里模拟的是get接口生成的数据，也可以模拟post接口生成的数据，会稍微复杂一点。接口命名为 api/test，注意这里使用的是正则的写法。

这里我把文件新建在 src/apis/mock 文件夹下。

PPT第十三页

第十三页演讲文稿：

在main.js文件中引入该mock文件

PPT第十四页

第十四页演讲文稿：

可直接使用axios以调用 API 接口的方式，调用我们模拟的接口就可以啦。

PPT第十五页

第十五页演讲文稿：

通过示例，我们了解到了 Mock.mock 方法，可以通过设置 url 和 type 模拟各种请求。

除此以外，Mock还提供了很多其他非常好用的方法。

例如：Mock.setup 方法可以设置拦截 Ajax 请求后的响应时间。

PPT第十六页

第十六页演讲文稿：

Mock.valid 方法验证指定数据和数据模板是否匹配，用于验证后端 API 接口返回值与对应 Mock 数据的规则描述是否冲突。

PPT第十七页

第十七页演讲文稿：

以及Mock.toJSONschema可用于将数据模板导入到支持 JSON Schema 格式的工具中。

PPT第十八页

第十八页演讲文稿：

第三种方案，除了Mock.js，还有一个js库叫Faker.js

它们的作用大致相同，在使用上略有不同。

它没有自己特定的模板语言，使用起来更像是在调用一个类。

PPT第十九页

第十九页演讲文稿：

除了第三种方案：通过一些本地 Mock 工具，使用项目本地化的 Mock 规则来生成 Mock 数据；我们还提到了第四种：使用功能更丰富的接口管理工具来提供独立的 Mock 能力。

比如：

easy mock 可视化，并且能快速生成 模拟数据 的持久化服务

easy mock是一个开源的模拟数据的平台，由于使用者较多情况下并发量过大，平台经常会崩掉，所以它也有提供了开源的代码及手册支持开发人员自己部署一个Mock平台服务。

rap2 阿里开源接口管理平台

同样也是一个支持在线模拟接口的平台

PPT第二十页

第二十页演讲文稿：

YApi 接口管理服务

这是百度家开发的一款开源接口管理服务，整体使用和 postman 的感觉很类似。旨在为开发、产品、测试人员提供更优雅的接口管理服务

PPT第二十一页

第二十一页演讲文稿：

YAPI相对于其他Mock工具有如图特色功能可做了解，功能非常强大。

PPT第二十二页

第二十二页演讲文稿：

除此以外呢，也有桌面端应用的Mock工具。

Apifox 桌面应用类的接口管理工具

它同样提供了很多很有效且友好的模拟数据模型的途径。

PPT第二十三页

第二十三页演讲文稿：

以上就是今天的全部分享内容啦~ 欢迎交流

PPT内容详见 https://ppt.baomitu.com/d/55f74a5b