Mock 功能简介
前端开发往往依赖于后端数据接口,在后端接口就绪能够返回数据之前,前端通常很难开工。Mock 功能常用于解决数据模拟问题,有了 Mock 工具模拟数据后,前后端可以同步进入开发,提升团队研发效率。
视频教程
功能概览
Mock 功能可以根据接口/数据结构定义、Mock 规则配置、Mock 期望配置等功能自动生成模拟数据。无需复杂配置,使用者可以根据实际需求灵活构造各种非常人性化的 mock 数据。
- 根据接口定义里的数据结构、数据类型,自动生成 mock 规则。
- 内置 智能 Mock 功能,根据字段名、字段数据类型,智能优化自动生成的 mock 规则。如:名称包含字符串
image
的string
类型字段,自动 mock 出一个图片地址 URL;包含字符串time
的string
类型字段,自动 mock 出一个时间字符串;包含字符串city
的string
类型字段,自动 mock 出一个城市名。 - 根据内置规则(可关闭),可自动识别出图片、头像、用户名、手机号、网址、日期、时间、时间戳、邮箱、省份、城市、地址、IP 等字段,从而 Mock 出非常人性化的数据。
- 除了内置 mock 规则,用户还可以自定义规则库,满足各种个性化需求。支持使用正则表达式、通配符匹配字段名自定义 mock 规则。
Mock 数据效果预览:
Mock 请求 URL
请求 method
需要与接口定义中的 method
保持一致。例如项目 ID 为18600
,此时需要 mock 的接口 ID 为89343
,路径为/users/123
,请求 method
为 POST
,则实际 Mock URL 示例地址为:
// 本地 Mock 地址
POST http://127.0.0.1:4523/m1/18600-0-default/users/123
或
POST http://127.0.0.1:4523/m2/18600-0-default/89343
// 云端 Mock 地址
POST https://mock.apifox.cn/m1/18600-0-default/users/123
或
POST https://mock.apifox.cn/m2/18600-0-default/89343
定义“接口/数据结构“后无需做任何额外的配置,访问自动生成的 URL 即可访问自动 Mock 出来的数据接口。
Mock URL 说明
本地 Mock:
- 路径模式
http://127.0.0.1:4523/m1/{项目 ID}-{版本编号}-{服务编号}/{接口路径}
- 示例:http://127.0.0.1:4523/m1/18600-0-0/users/123
- ID 模式
http://127.0.0.1:4523/m2/{项目 ID}-{版本编号}-{服务编号}/{接口 ID}
- 示例:http://127.0.0.1:4523/mock2/18600-0-0/84924
云端 Mock
- 路径模式
https://mock.apifox.cn/m1/{项目 ID}-{版本编号}-{服务编号}/{接口路径}
- 示例:https://mock.apifox.cn/m1/18600-0-0/users/123
- ID 模式
https://mock.apifox.cn/m2/{项目 ID}-{版本编号}-{服务编号}/{接口 ID}
- 示例:https://mock.apifox.cn/m2/18600-0-0/84924
其他说明
- 项目 ID:打开 Apifox,进入“项目设置”查看
- 版本编号:默认版本编号为“0”,表示主版本。(目前 Apifox 多版本功能还未上线,填“0”即可)
- 服务编号:仅在项目使用了
多个服务
的时候才特殊指定,“default”表示默认服务(推荐,默认服务下不存在该接口时自动查询其他服务下同路径接口)。
- Mock 服务是在本地启动的,所以 URL 里的 ip 地址为
127.0.0.1
,如有其他设备需要访问 mock 数据,只需将127.0.0.1
改成本机的内网 ip 即可。如果还是访问不了,请检查是否防火墙等限制了 mock 所用的4523
端口。 - 如一个项目内,有多个接口拥有相同的
method + path 路径
,可使用如下 2 种方式指定接口,否则在会产生路径冲突。- 接口路径模式:需额外添加 Query 参数
?apifoxApiId={接口 ID}
. - 接口 ID 模式:无需任何处理
- 接口路径模式:需额外添加 Query 参数
- 如接口路径不是以
/
起始的,则只能使用 接口 ID 模式,不能使用 接口路径模式。 - 打开 Apifox 就会默认启动 mock 服务,无需额外操作。
- Mock 服务的
前置 URL
是固定的,不能修改。
旧版本地 Mock
- 路径模式
http://127.0.0.1:4523/mock/{项目 ID}/{接口路径}
- 示例:http://127.0.0.1:4523/mock/18600/users/123
- ID 模式
http://127.0.0.1:4523/mock2/{项目 ID}/{接口 ID}
- 示例:http://127.0.0.1:4523/mock2/18600/84924
目前依然兼容,后续将废弃。
获取接口 mock URL
打开接口详情
-查看
页面的Mock
模块,即可获取对应接口的 mock URLs。
自定义 Mock 规则
Apifox 支持非常灵活的 mock 规则定义,满足各种业务需求。
1. 数据结构定义 mock 规则
定义数据结构的时候,可手动设置 mock 规则,支持 Mock.js 数据占位符定义
方式书写 Mock 规则。参考《Mock.js 语法》了解更多详细语法。
2. 数据字段高级设置
在”高级设置“页中支持设置数据字段的长度范围、枚举值、Partten、format 等,这些设置可以作为 Mock 规则进行使用。
3. 高级 Mock
高级 mock 是最灵活的 mock 方式,可实现灵活的自定义数据结构,并且还不受接口数据结构限制;还可以根据不同的请求参数值返回不同的数据。你可以阅读《高级 Mock》了解更多用法。
4. 智能 Mock
当接口设计的返回 Response (或数据模型) 里的字段未配置 mock 规则时,系统会自动使用智能 Mock 规则生成数据,以实现使用时零配置
即可 mock 出非常人性化的数据。查看智能 Mock 说明文档。
Mock 规则优先级
数据字段在自动 Mock 数据时,实际执行的 Mock 规则优先级顺序如下:
- 接口详情「高级 Mock」里设置的期望(根据接口参数匹配)。
- 数据结构的字段里设置的 Mock 规则。
- 数据结构的字段「高级设置」里设置的最大值、最小值、枚举值、Partten。
- 「项目设置」-「智能 Mock 设置」中的自定义规则。
- 「项目设置」-「智能 Mock 设置」中的内置规则。
- 数据结构里字段的数据类型。
其他说明
默认情况下,系统会使用 mock 接口定义里的第一个 Response
数据结构。如果需要 mock 其他 Response
,可在”接口详情“ → “查看”页的 Mock
模块获取其他 Response
的 mock URL。