前端 Mock 数据指南

什么是前端 Mock？

前端 Mock 是指在没有真实后端接口的情况下，由前端自行构造符合接口规范的假数据，用于页面渲染和功能测试。

常见 Mock 方式

• 使用 Mock.js：流行的 JavaScript 库，支持随机数据生成与拦截 Ajax 请求。
• 本地 JSON 文件 + 本地服务器：如使用 Live Server 插件提供静态接口。
• Mock 平台：如 YApi、Easy Mock、Apifox 等，支持团队协作。
• 浏览器插件：如 ModHeader、Requestly 可重定向请求到本地文件。

简单示例（使用 Mock.js）

<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock-min.js"></script>
<script>
  Mock.mock('/api/user', {
    'id|1-100': 1,
    'name': '@cname',
    'email': '@email'
  });

  fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log(data));
</script>
      

最佳实践建议

• Mock 数据结构应尽量贴近真实接口文档。
• 在项目中统一管理 Mock 规则，便于维护和切换。
• 上线前务必移除或关闭 Mock 逻辑，避免影响生产环境。