前端数据模拟利器 Mock.js 深度解析

一、Mock.js 核心价值

1.1 为何需要数据模拟

前后端并行开发加速
接口文档驱动开发
异常场景模拟测试
演示环境数据构造

1.2 Mock.js 核心能力

javascript 复制代码

// 典型数据生成示例
Mock.mock('/api/user', {
  "users|5-10": [{
    "id|+1": 1,
    "name": "@cname",
    "age|18-60": 1,
    "email": "@email",
    "address": "@county(true)"
  }]
})

二、快速入门指南

2.1 安装与引入

bash 复制代码

# NPM 安装
npm install mockjs --save-dev

# 浏览器直接引入
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

2.2 基础使用模式

javascript 复制代码

// 1. 定义模拟规则
const mockData = Mock.mock({
  "list|10": [{
    "id": "@guid",
    "title": "@ctitle(15,25)",
    "content": "@cparagraph(500)",
    "createTime": "@datetime"
  }]
})

// 2. 拦截Ajax请求
Mock.mock(/\/api\/articles/, 'get', () => {
  return mockData.list
})

// 3. 发起真实请求
fetch('/api/articles')
  .then(res => res.json())
  .then(console.log)

三、数据模板语法详解

3.1 基础占位符

占位符	说明	示例输出
@boolean	布尔值	true
@natural(1,100)	自然数	57
@float(0,100,2,2)	浮点数	36.58
@string(5)	随机字符串	"k8d9a"
@cname	中文姓名	"王伟"
@province	省份	"广东省"
@image('200x100')	占位图URL	"http://dummyimage.com/200x100"

3.2 复杂数据结构

javascript 复制代码

Mock.mock({
  "order": {
    "id": "@guid",
    "createTime": "@datetime",
    "price|100-500.2": 1,
    "products|2-5": [{
      "sku": "@string(8).toUpperCase()",
      "name": "@ctitle(6)",
      "spec": "@natural(1,5)XL"
    }],
    "user": {
      "name": "@cname",
      "vip|1-3": true
    }
  }
})

四、高级应用技巧

4.1 RESTful API 模拟

javascript 复制代码

// 用户资源接口模拟
Mock.mock(/\/users\/\d+/, 'get', (options) => {
  const id = options.url.split('/').pop()
  return Mock.mock({
    id,
    name: '@cname',
    age: '@natural(18,60)'
  })
})

Mock.mock(/\/users/, 'post', (options) => {
  const body = JSON.parse(options.body)
  return Mock.mock({
    id: '@guid',
    ...body
  })
})

4.2 动态响应处理

javascript 复制代码

// 分页查询模拟
Mock.mock(/\/api\/records/, (options) => {
  const params = new URLSearchParams(options.url.split('?')[1])
  const page = parseInt(params.get('page')) || 1
  const size = parseInt(params.get('size')) || 10
  
  return {
    total: 100,
    data: Mock.mock({
      [`list|${size}`]: [{
        id: '@guid',
        name: '@ctitle',
        'status|1': ['pending', 'done', 'failed']
      }]
    }).list,
    page,
    size
  }
})

4.3 数据验证规则

javascript 复制代码

// 注册接口参数校验
Mock.mock('/register', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  
  if (!username || username.length < 6) {
    return Mock.mock({
      code: 400,
      message: '用户名至少6个字符'
    })
  }
  
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
    return Mock.mock({
      code: 400,
      message: '密码需包含字母和数字，至少8位'
    })
  }
  
  return Mock.mock({
    code: 200,
    data: {
      userId: '@guid',
      token: '@string(32)'
    }
  })
})

五、工程化实践方案

5.1 目录结构组织

src/
  mock/
    modules/
      user.js
      product.js
    index.js   # 统一导出
    utils.js   # 工具函数

5.2 生产环境隔离

javascript 复制代码

// webpack.config.js
const isDev = process.env.NODE_ENV === 'development'

if (isDev) {
  require('./src/mock')
}

// 或者使用环境变量
if (process.env.USE_MOCK) {
  require('./mock')
}

5.3 真实接口切换

javascript 复制代码

// 配置示例
const API_BASE = process.env.USE_MOCK 
  ? '/mock-api' 
  : 'https://real.api.com'

// 请求封装示例
function request(url, options) {
  return fetch(`${API_BASE}${url}`, options)
}

六、常见问题解决方案

Q1：如何模拟网络延迟？

javascript 复制代码

Mock.setup({
  timeout: '200-600' // 随机延迟200-600ms
})

// 指定接口单独设置
Mock.mock('/slow-api', {
  // ...数据模板
}, { delay: 1000 })

Q2：如何生成关联数据？

javascript 复制代码

// 保持城市与区号关联
const cityMap = {
  北京: '010',
  上海: '021',
  广州: '020'
}

Mock.mock({
  "city": "@city",
  "areaCode": function() {
    return cityMap[this.city] || '0755'
  }
})

Q3：如何处理文件上传？

javascript 复制代码

Mock.mock('/upload', 'post', () => {
  return Mock.mock({
    code: 200,
    data: {
      url: "@image('300x250')",
      size: "@natural(1024, 5120)"
    }
  })
})

七、最佳实践总结

分层设计：按业务模块组织Mock数据
文档同步：使用Swagger生成Mock规则
类型安全：结合TypeScript定义接口
异常覆盖：模拟各类HTTP状态码
性能监控：记录Mock请求耗时

八、扩展生态推荐

easy-mock：可视化Mock平台
json-server：快速搭建REST API
faker.js：增强数据生成能力
apifox：接口管理工具整合

通过合理运用Mock.js，开发团队可以实现：

开发效率提升40%+
接口异常测试覆盖率100%
前后端联调成本降低60%

建议结合具体业务场景灵活选择Mock策略，在保证开发效率的同时，建立可靠的前端数据模拟体系。