后端接口还没写好？前端用 Apifox 私有 Mock 先造假数据联调

在传统的敏捷研发流程中，前端与移动端开发经常面临一个极其尴尬的卡点：后端接口和数据库还没写好，前端只能“干等”；或者前端不得不自己在代码里硬编码假数据，等联调时再删掉重写。

如果使用外部公有云的免费 Mock 工具，又会面临数据必须传到公有云、缺乏高级脚本仿真、以及内网隔离环境无法访问的问题。

Apifox 私有化部署版内置了高性能的私有云 Smart Mock 服务器。数据纯存于企业内网，无需连接外网，后端定义好接口后，前端立刻就能调用高仿真的私有 Mock 接口开启联调。

一、零配置 Smart Mock：自动智能识别数据类型

在 Apifox 中，当后端完成 API 文档与数据模型定义后，系统会自动为每个接口生成专有的私有云 Mock URL。

Smart Mock 引擎会根据字段名称与类型自动识别并生成符合常理的逼真数据：

┌────────────────────────────────────────────────────────────────────────┐
│                     Apifox Smart Mock 规则识别示例                     │
├───────────────────┬───────────────────┬────────────────────────────────┤
│     字段名称      │    数据类型       │      Smart Mock 自动生成数据    │
├───────────────────┼───────────────────┼────────────────────────────────┤
│ email             │ string            │ "alex.chen@example.com"        │
│ phone             │ string            │ "13800138000"                  │
│ avatar            │ string (url)      │ "https://cdn.example.com/a.jpg"│
│ create_time       │ string (datetime) │ "2026-08-20 14:30:00"          │
│ price             │ number            │ 199.50                         │
│ status            │ enum [0, 1, 2]    │ 随机枚举值 (0 / 1 / 2)          │
└───────────────────┴───────────────────┴────────────────────────────────┘

前端只需将联调 Base URL 切换为 Apifox 私有云 Mock 地址，无需后端一行代码落地，即可直接拿到高仿真的 JSON 数据展现页面。

二、动态表达式与 Nunjucks / JS 脚本仿真

对于包含复杂业务逻辑的接口，Apifox 私有 Mock 支持高级动态仿真：

动态 Mock 表达式：支持使用 Mock.js 语法生成随机姓名、身份证号、IP 地址、城市名称等丰富数据；
基于传参返回不同响应 (Mock 期望)：在 Mock 期望中设定分支，例如：

当请求 Header 中 token 为空时，Mock 返回 HTTP 401 鉴权失败；
当请求 Body user_id == 1001 时，返回正常用户信息；
当 user_id == 9999 时，返回账号已冻结错误码。

// Apifox 私有 Mock 高级脚本示例 (根据传参返回动态 JSON)
const params = fox.mockRequest.body;
const headers = fox.mockRequest.headers;

// 校验 Token 鉴权头
if (!headers['authorization']) {
    fox.mockResponse.setStatusCode(401);
    fox.mockResponse.setJsonBody({
        code: 401001,
        message: "未提供有效 Token 鉴权凭证"
    });
} else if (params.user_id === 9999) {
    // 模拟特定账号异常
    fox.mockResponse.setStatusCode(200);
    fox.mockResponse.setJsonBody({
        code: 400102,
        message: "该账号处于冻结状态，禁止交易"
    });
} else {
    // 模拟正常业务返回
    fox.mockResponse.setJsonBody({
        code: 200,
        message: "success",
        data: {
            userId: params.user_id,
            userName: fox.mock('@cname'),
            balance: fox.mock('@float(100, 1000, 2, 2)'),
            lastLoginIp: fox.mock('@ip')
        }
    });
}

三、前后端并行开发与提效成果

部署内网私有云 Mock 服务器后，研发流程由“串行等待”升级为“并行协同”：

传统串行流程: [后端设计API] ──► [后端写代码/建表] ──► [前端开始联调] (耗时 10 天)

Apifox 并行流程:
  [后端设计API] ──► [私有 Mock 自动开启] ──► [前端基于 Mock 开发联调] (第 2 天即开始)
                 └──► [后端同步写代码] ──────► [一键切真实接口上线] (整体耗时 5 天)

整体交付周期缩短 30%~50%，且联调阶段的沟通磨合成本大幅下降。

四、极简前端切换流程示例 (React / Vue)

前端项目在联调时，只需切换环境变量配置文件中的 API 基准地址即可完成从假数据到真实后端无缝切换：

// config/env.ts 前端环境切换文件
export const API_BASE_URL = process.env.NODE_ENV === 'development'
  ? 'http://apifox-mock.internal.company.com/m1/1024-0-default' // 使用 Apifox 内网私有 Mock
  : 'http://api-staging.internal.company.com';                 // 切换真实后端