企业官网建设流程全解析

Apifox和Mock.js的集成为接口测试和数据模拟提供了强大支持，主要通过三种方式实现：在接口字段中直接使用 @ 占位符、在“高级 Mock”中结合Nunjucks模板生成复杂动态数据，以及通过JavaScript脚本实现完全思路控制。

Mock.js语法

在Apifox中应用Mock.js，是掌握其两大语法规范，用来定义数据的结构和内容。

数据模板定义规范

创建数据的规则，格式为 'name|rule': value。规则 (rule) 的含义根据属性值 (value) 的类型动态变化。

字符串：‘phone\|3-5‘: ‘*‘ 生成3到5个星号。

数字：

‘age\|18-60‘: 1 生成18-60的整数。

‘score\|60-100.1-2‘: 1 生成60-100、带1-2位小数的浮点数。

‘id\|+1‘: 100 生成自增ID（用于数组）。

布尔值：‘success\|1‘: true 表示true/false概率各50%。

对象：‘info\|1-2‘: {a:1, b:2} 随机选取1到2个属性。

数组：

‘status\|1‘: [1,2,3] 随机选取1个元素。

‘list\|3‘: [‘a‘, ‘b‘] 将数组重复3次。

函数和正则：‘email‘: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 生成一致正则的字符串。

数据占位符定义规范

填充数据的快捷方式，格式为 @占位符(参数)。

基础类型：@integer(60, 100), @float(0, 100, 2, 2), @string(‘lower‘, 5), @boolean。

文本和名称：@ctitle(2,4) (中文标题), @cname (中文名), @name (英文名), @paragraph。

联系方式和网络：@email, @ip, @url。

地址和ID：@city (城市), @county(true) (省市区), @id (身份证), @guid。

时间：@datetime (日期时间), @date (日期), @time (时间)。

图像：@image(‘200x100‘, ‘#ccc‘, ‘#000‘, ‘png‘, ‘文本‘) 生成图片Base64。

扩展占位符：Apifox额外提供了如 @phone (中国手机号) 等更本土化的占位符。

生成动态分页数据

下面是一个在高级Mock使用Nunjucks模板结合Mock.js生成分页数据的示例：

{ "code": 0, "message": "success", "data": { "total": 150, "pageSize": {{fox.mockRequest.getParam('pageSize') or 10}}, "currentPage": {{fox.mockRequest.getParam('page') or 1}}, "list": [ {% for i in range(0, 20) %} { "id": "@integer(10000,99999)", "userName": "@cname", "userAvatar": "@image('64x64')", "email": "@email", "city": "@city", "lastLogin": "@datetime", "status|1": ["active", "inactive"] }{% if not loop.last %},{% endif %} {% endfor %} ] } }

文章来源：卓码软件测评

精彩推荐：点击蓝字即可
▲软件负载测试▲API自动化测试▲软件测试▲第三方软件测试▲软件性能测试▲软件测试机构

代码分析：

动态参数读取：{{fox.mockRequest.getParam(‘page‘)}} 直接获取请求参数，使模拟响应和请求联动。

Nunjucks循环：{% for i in range(0, 20) %} 生成包含20条记录的数组，轻松模拟大批量数据。

Mock.js占位符嵌套：在循环体内使用 @cname、@datetime 等生成每一条不重复的随机数据。

DTD规则混合使用：“status\|1“: [“active“, “inactive“] 在模板内使用Mock.js规则，随机选择状态。

技巧

条件响应和异常模拟：在“自定义脚本”中，可以用JavaScript根据请求头、Cookie等返回不同数据或模拟超时、403/500等状态。如，检查 fox.mockRequest.headers.get(‘token‘) 是不是存在来决定是不是返回403错误。

使用技巧：

准确过滤：高级Mock为“期望”设置具体的“参数条件”（如Query参数、JSON Path），让不同的请求命中不同的Mock响应。

延迟：在期望设置或脚本中，使用 fox.mockResponse.setDelay(3000) 模拟网络延迟，测试前端加载状态。

云端：利用Apifox的云端Mock功能，生成一个固定URL供整个团队访问，保证数据一致。

优先级和调试：记住Mock优先级为 高级Mock期望 > 自定义脚本 > 字段级Mock。如果未按预期返回数据，请先检查是不是被高优先级规则包括。