mock预览（前端/低代码里常用）

简单一句话：页面使用模拟假数据（mock数据）来渲染、预览效果，不需要对接真实后端接口。

区分两个容易混的词：

• Mock 数据：假的JSON数据，模拟后端返回
• Mock预览：开启假数据模式的页面预览

什么时候用

后端接口还没做好、联调还没开始，但前端要先把页面、列表、弹窗、表单效果跑起来看，就打开mock预览。
页面发起请求时，不会走真实后端，直接返回预设好的mock JSON，渲染出完整页面效果。

能干什么

1. 看UI排版、列表、分页、空状态、报错样式长啥样
2. 切换不同mock数据：成功/失败、空数据、超长文本、不同用户权限
3. 调试组件、交互逻辑，不用等后端
4. 给产品、设计演示页面效果

和普通预览的区别

• 普通预览：请求真实后端接口，拿真实业务数据；接口不通就空白/报错
• Mock预览：拦截请求，返回本地/平台配置好的假数据；后端挂了也能正常看页面

和mock服务的区别

• Mock预览：偏向页面视图预览，是页面的一种预览模式（Apidog、宜搭、Momen、低代码平台、DevEco里常见这个叫法）
• Mock Server（mock服务）：独立接口服务，提供可调用的mock接口地址，前端改baseURL就能访问

举个例子：
你做一个订单列表页，后端还没写完订单接口。配置mock：返回10条假订单，开启mock预览，页面直接渲染出订单列表，你就能滚动、看分页、看样式。

要不要我给你一段最简单的 mock 示例JSON？

{
  "code": 200,
  "msg": "success",
  "data": {
    "list": [
      {
        "id": 1,
        "title": "测试订单A",
        "price": 99,
        "status": "已完成"
      },
      {
        "id": 2,
        "title": "测试订单B",
        "price": 199,
        "status": "待付款"
      }
    ],
    "total": 2
  }
}

这是前端最通用格式：code 状态码、msg 提示、data 主体，适合列表页 mock 预览。

{
  "code": 200,
  "msg": "success",
  "data": {
    "list": [],
    "total": 0
  }
}

再来一个空数据版本备用：

{
  "code": 200,
  "msg": "success",
  "data": {
    "list": [],
    "total": 0
  }
}

需要再加一个失败报错的mock样例吗？

{
  "code": 500,
  "msg": "服务器内部错误，请稍后重试",
  "data": null
}

另外给一个业务错误（参数错误，code不是http状态码，很多项目约定）

{
  "code": 40001,
  "msg": "参数id不能为空",
  "data": null
}

小说明：

• code:500：一般对应服务异常
• code:40001：业务自定义错误码，适合表单校验、权限、找不到数据这类场景

现在你有三套了：✅正常列表、✅空列表、✅报错。
要不要我再补一个无权限401的mock？

{
  "code": 401,
  "msg": "登录已失效，请重新登录",
  "data": null
}

补充说明：

{
  "code": 40100,
  "msg": "暂无访问权限，请登录",
  "data": null
}

很多项目会把 401 作为业务码，和 HTTP 状态码区分开；如果你们后端约定自定义业务码，可以用下面这个版本：

{
  "code": 40100,
  "msg": "暂无访问权限，请登录",
  "data": null
}

现在全套 5 份：

1. ✅ 正常列表
2. ✅ 空列表
3. ✅ 服务500异常
4. ✅ 参数业务错误
5. ✅ 401未登录/无权限

要不要我整理成可以直接导入Apidog的mock用例？