从小白到大厂：Mock.js 接口模拟全家桶指南

yvvvy
149 阅读4分钟

🧪从小白到大厂：Mock.js 接口模拟全家桶指南

写给正在学 JS 的我，也写给未来在大厂写代码的你。

🧑‍🎓 前言：没有接口的日子，前端像断了线的风筝

作为一个还在学习 JS 的小白，曾经我以为前端开发就只是写页面：div + css + onClick，配点花里胡哨的动画，然后一提交——大功告成！

直到有一天，老师说：“我们来对接后端接口。”

接口？对接？我一脸懵。后端说你先写页面，接口我还没写好。我说你先写接口，我这边才能调试布局。结果我们就这样互相礼貌地“等死”了一个礼拜。

这时候，一个神秘的工具走入了我的视野——Mock.js。

🍡 什么是 Mock.js？

简单来说：

Mock.js 就是一个用来生成模拟数据的神器，能帮助我们在没有后端接口时假装自己有接口。

它的核心目标就是一个词：“骗”，骗过浏览器、骗过自己，让你以为接口已经通了，数据已经回来了，项目已经跑飞了。

🚀 为什么要用 Mock.js？

🧃 初学者的甜点

  • 接口没写好？用 Mock 来先跑通页面。
  • 想搞点测试数据？Mock 帮你批量造数据。
  • 后端人走茶凉？Mock 永远在线热情服务。

🍱 在大厂中你能看到：

  • 前后端分离项目必须要 Mock 接口进行开发。
  • 自动化测试中，需要稳定、可控的假数据。
  • 搭建快速原型、演示 demo 时，离不开 mock。

🛠 Mock.js 的基本用法

🔧 安装（本地开发环境）

npm install mockjs

或直接用 CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>

🎮 基本使用方式

import Mock from 'mockjs'

Mock.mock('/api/user', 'get', {
  code: 200,
  message: 'success',
  'data|5': [  // 数组长度为5
    {
      'id|+1': 1,
      name: '@cname',
      age: '@integer(18, 40)',
      email: '@email'
    }
  ]
})

🔍 简析语法糖（Mock 的随机规则）

语法含义
@cname随机中文名
@email随机邮箱
@integer(18,40)随机整数
@date随机日期
`'id+1': 1`
`'data3'`
`'data1-5'`

📦 这就是 Mock.js 最强大的地方：用语法规则+模板结构，批量生成假数据，比你编故事还快！

🎯 实战一：搭建一个假接口（配合 axios）

import axios from 'axios'
import Mock from 'mockjs'

Mock.mock('/api/products', 'get', {
  code: 0,
  message: 'ok',
  'list|10': [
    {
      id: '@id',
      name: '@ctitle(5, 10)',
      price: '@float(100, 200, 2, 2)',
      image: "@image('200x100')"
    }
  ]
})

axios.get('/api/products').then(res => {
  console.log('mock 数据:', res.data)
})

🧃效果图如下：

{
  code: 0,
  message: 'ok',
  list: [
    { id: '12345', name: '苹果手机', price: 128.88, image: 'xxx.png' },
    ...
  ]
}

是不是有点像真的电商数据？这就是 Mock.js 的魅力！

🧪 实战二：配合前端框架（以 React 为例）

你可以在 vite.config.js 中配置一个 mock server，也可以直接在组件里加：

useEffect(() => {
  axios.get('/api/products').then(res => {
    setList(res.data.list)
  })
}, [])

🎯页面一跑起来，就能用假数据渲染出列表，等后端接口准备好，再替换成真接口即可，开发节奏丝毫不受影响。

🧵 进阶使用技巧

📍 模拟网络延迟

Mock.setup({
  timeout: '300-1000'  // 300~1000ms 随机延迟
})

测试 loading 动画就靠它！

📍 拦截 POST 请求并带参数

Mock.mock('/api/login', 'post', (options) => {
  const body = JSON.parse(options.body)
  if (body.username === 'admin') {
    return { code: 0, token: 'mock-token' }
  }
  return { code: 1, message: '用户名错误' }
})

是不是像极了登录接口的真实逻辑？

🤔 面试角度：Mock.js 你该知道的知识点

面试官问：“你项目是怎么对接接口的？”

你可以自信答：

  • 开发初期使用 Mock.js 进行接口模拟，前后端并行开发；
  • 使用语法规则生成多样数据，提升联调效率；
  • 配合 axios 或 fetch 拦截请求，模拟返回数据；
  • 后期切换为真实接口，Mock 可随时关闭，支持灵活接入。

🧘 总结：没有接口也能开发，Mock.js 就是前端的“假装很忙”工具

Mock.js 对于前端开发者来说，是一个非常实用的工具，尤其是：

  • 接口未完成时，可以用它保住进度条；
  • 想批量造数据做 UI/测试，Mock 是开挂神器；
  • 掌握语法规则后，你甚至可以“脑补”出整套 API。

📚 建议的学习路线（Mock.js 部分）：

Mock.js 入门 → 随机语法熟悉 → 和 axios 搭配 → 拦截 POST/GET → 模拟登录/分页等业务 → 配合前端框架 → 项目中封装 mock 文件夹

📝 结尾彩蛋：Mock.js 与你的大厂之路

未来你可能会写大型后台、管理系统、电商平台。Mock.js 就像你成长过程中的“小饭桌”：它不顶饭店那种正式场合，但在你饿得慌时，它能让你继续向前冲。

别小看这种“假装”，它是你走向专业开发的一步小跳板，稳稳的！

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏，或者在评论区唠唠你是怎么用 Mock.js “忽悠”项目顺利上线的！

avatar
文章
阅读
粉丝