Mock.js 数据模拟

Mock.js 是一个强大的前端开发工具，用于生成随机数据并拦截 Ajax 请求。这在开发阶段尤为重要，因为它允许我们在后端 API 尚未准备好时进行前端开发与测试。

前言

Mock.js官方文档：http://mockjs.com/ (opens new window)

1. 安装与引入

1.1 安装 Mock.js

首先，确保在项目中安装了 Mock.js。可以通过 npm 或 yarn 进行安装：

1.1.1 通过 npm 安装

npm install mockjs --save-dev

1.1.2 通过 yarn 安装

yarn add mockjs --dev

Mock.js 一般只在开发环境使用，因此推荐使用 --save-dev 或 --dev 参数安装为开发依赖。

1.2 引入 Mock.js

Mock.js 需要在项目的入口文件或单独的 mock 文件中引入。在使用 Vue 项目时，我们可以在 src/mock 目录下创建一个 index.js 文件，所有的 mock 配置都可以在这里进行。

// src/mock/index.js
import Mock from 'mockjs';

// 引入你需要模拟的数据
import './data.js';

// 如果是 Vue 项目，在 main.js 中引入
// import './mock';

注意事项

只有 mock/index.js 文件引入 main.js 后，项目中所有符合配置的 Ajax 请求才会会被 Mock.js 拦截并返回模拟数据。

2. 使用 Mock.js 模拟数据

2.1 基本用法

Mock.js 提供了 Mock.mock() 方法，用于生成随机数据和拦截 Ajax 请求。该方法的基本语法如下：

Mock.mock(url, type, template);

• 参数说明：
  • url：拦截的请求地址，可以是字符串或正则表达式。
  • type：请求类型，如 'GET'、'POST' 等。
  • template：用于生成响应数据的模板，可以是对象或返回对象的函数。

2.2 生成随机数据

Mock.js 通过数据模板语法和占位符生成各种随机数据。以下是常见的数据生成方式：

2.2.1 生成基本类型

Mock.mock('/api/user', 'get', {
  'id|1-100': 1, // 随机生成 1 到 100 之间的整数
  'name': '@name', // 随机生成英文姓名
  'age|20-30': 1, // 随机生成 20 到 30 之间的整数
  'gender|1': ['male', 'female'], // 随机生成性别
  'birthdate': '@date("yyyy-MM-dd")' // 随机生成日期
});

• 模板语法：
  • 'id|1-100': 1：生成一个在 1 到 100 之间的整数。
  • 'gender|1': ['male', 'female']：从数组中随机选择一个值。
  • @name、@date 等占位符用于生成指定类型的数据。

2.2.2 生成对象和数组

Mock.mock('/api/userlist', 'get', {
  'list|1-10': [{
    'id|+1': 1, // id 自动递增
    'name': '@cname', // 随机生成中文姓名
    'age|20-30': 1
  }]
});

• 数组生成：
  • 'list|1-10'：生成一个长度在 1 到 10 之间的数组，每个数组元素遵循相同的模板。
  • 'id|+1'：从 1 开始递增。

2.2.3 使用函数生成数据

Mock.mock('/api/custom', 'get', {
  'name': '@name',
  'createdAt': function() {
    return new Date();
  }
});

• 自定义函数：
  • 通过函数自定义生成数据的逻辑，函数返回值将作为最终数据返回。

2.3 拦截 Ajax 请求

Mock.js 可以拦截 XMLHttpRequest 和 Fetch 请求，并返回模拟数据。这对前端开发调试非常有用。

2.3.1 拦截 GET 请求

Mock.mock('/api/user', 'get', {
  'id|1-100': 1,
  'name': '@name'
});

当前端发起 GET 请求访问 /api/user 时，Mock.js 将拦截该请求并返回模拟的数据。

2.3.2 拦截 POST 请求

Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body);
  if (username === 'admin' && password === '123456') {
    return {
      status: 'success',
      message: '登录成功',
      token: '1234567890abcdef'
    };
  } else {
    return {
      status: 'error',
      message: '用户名或密码错误'
    };
  }
});

在拦截 POST 请求时，可以通过 options.body 获取请求体数据，并根据业务逻辑返回相应的模拟响应。

2.4 Mock.js 占位符详解

Mock.js 提供了大量的占位符，用于生成各种类型的随机数据。以下是常见占位符的说明：

• @cname：生成中文姓名。
• @name：生成英文姓名。
• @email：生成邮箱地址。
• @date：生成日期，格式可以自定义。
• @time：生成时间。
• @datetime：生成日期时间。
• @url：生成 URL 地址。
• @ip：生成 IP 地址。
• @image：生成图片地址。
• @color：生成颜色值。
• @paragraph：生成随机段落文本。
• @title：生成随机标题。
• @sentence：生成随机句子。
• @csentence：生成随机中文句子。

2.5 提前准备数据并通过 Mock.js 返回

在开发中，我们有时需要模拟后端 API 返回的数据，并且希望这些数据是提前准备好的。Mock.js 支持通过指定的模板数据返回固定的响应结果。

const userList = [
  { id: 1, name: 'Alice', age: 24 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 28 },
];

Mock.mock('/api/users', 'get', userList);

在上面的例子中，/api/users 请求将返回预先准备好的 userList 数组。这种方式非常适合在前端开发时模拟后端接口返回的数据，尤其是在需要一致性和稳定性的情况下。

3. Mock.js 拦截带参数的请求

3.1 拦截 GET 请求并处理查询参数

在前端开发中，GET 请求通常会附带查询参数（params），例如分页、筛选条件等。我们可以使用 Mock.js 来拦截这些请求，并根据参数返回相应的数据。

import Mock from 'mockjs';

// 模拟的数据数组
const testData = [
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' },
  // 其他数据项...
];

// 使用正则表达式拦截带参数的 GET 请求
Mock.mock(/\/api\/data/, 'get', (options) => {
  // 解析请求 URL，获取查询参数
  const url = new URL(options.url, window.location.origin);
  const params = Object.fromEntries(url.searchParams.entries());

  console.log('请求参数:', params);

  // 根据查询参数返回不同的数据
  if (params.id) {
    return testData.filter(item => item.id === Number(params.id));
  }

  // 如果没有特定参数，则返回全部数据
  return testData;
});

• options.url：Mock.js 自动提供的参数，包含完整的请求 URL。
• URL：JavaScript 提供的 URL 对象，用于解析请求的完整 URL。
• url.searchParams：URL 对象的属性，用于获取查询参数。
• Object.fromEntries()：将 searchParams 转换为普通对象，便于后续处理。

---

3.2 拦截 POST 请求并处理请求体参数

POST 请求一般用于提交数据，参数通常位于请求体中。我们可以使用 Mock.js 拦截 POST 请求并处理这些请求体参数。

import Mock from 'mockjs';

// 拦截 POST 请求，模拟登录接口
Mock.mock('/api/login', 'post', (options) => {
  // 将请求体字符串解析为 JSON 对象
  const body = JSON.parse(options.body);
  console.log('请求体参数:', body);

  // 模拟登录逻辑
  if (body.username === 'admin' && body.password === '123456') {
    return {
      status: 'success',
      message: '登录成功',
      token: 'mock-token-12345', // 返回模拟的 token
    };
  } else {
    return {
      status: 'error',
      message: '用户名或密码错误',
    };
  }
});

• options.body：Mock.js 提供的参数，包含 POST 请求的请求体（字符串形式）。
• JSON.parse()：将请求体字符串转换为 JavaScript 对象，便于后续处理。

---

3.3 拦截并处理分页数据

在前端应用中，分页是一个常见的需求。Mock.js 可以拦截分页请求，并返回符合分页要求的数据及总页数

import Mock from 'mockjs';

// 模拟的数据集
const allData = [
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  // 更多数据项...
];

// 拦截分页请求
Mock.mock(/\/api\/data/, 'get', (options) => {
  // 解析 URL 并获取分页参数
  const url = new URL(options.url, window.location.origin);
  const params = Object.fromEntries(url.searchParams.entries());

  const page = Number(params.page) || 1; // 当前页码
  const size = Number(params.size) || 10; // 每页条数
  
  const total = allData.length; // 数据总量
  const totalPages = Math.ceil(total / size); // 计算总页数
  const start = (page - 1) * size; // 当前页数据起始索引
  const end = page * size; // 当前页数据结束索引

  const paginatedData = allData.slice(start, end); // 截取当前页的数据

  return {
    total,       // 数据总条数
    totalPages,  // 总页数
    data: paginatedData // 当前页数据
  };
});

• params.page：分页请求中的当前页码参数。
• params.size：分页请求中的每页显示条数参数。
• total：数据集的总条数，用于前端计算分页。
• totalPages：总页数，通过 Math.ceil(total / size) 计算得出。
• start 和 end：用于确定当前页数据的起始和结束索引。

4. 典型使用场景

4.1 用户数据模拟

Mock.mock('/api/user', 'get', {
  'id|1-100': 1,
  'name': '@cname',
  'gender|1': ['male', 'female'],
  'age|20-30': 1,
  'email': '@email',
  'avatar': '@image("200x200", "#50B347", "#FFF", "Mock.js")'
});

此例展示了生成用户数据的模拟接口，生成的用户数据包括 ID、姓名、性别、年龄、邮箱和头像。

4.2 商品列表模拟

Mock.mock('/api/products', 'get', {
  'list|5-10': [{
    'id|+1': 1,
    'name': '@ctitle',
    'price|100-1000': 1,
    'image': '@image("300x300", "#b3e5fc", "#FFF", "Product")',
    'description': '@cparagraph'
  }]
});

该示例展示了商品列表的模拟接口，生成的商品数据包括 ID、名称、价格、图片和描述。

4.3 登录模拟

Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body);
  if (username === 'admin' && password === '123456') {
    return {
      status: 'success',
      token: '1234567890abcdef',
      message: '登录成功'
    };
  } else {
    return {
      status: 'error',
      message: '用户名或密码错误'
    };
  }
});

此示例展示了登录接口的模拟，用户可以提交用户名和密码进行验证，并根据提交的数据返回成功或失败的响应。

4.4 分页数据模拟

Mock.mock('/api/articles', 'get', {
  'total|100-200': 100,
  'page|1-10': 1,
  'list|10': [{
    'id|+1': 1,
    'title': '@ctitle',
    'content': '@cparagraph',
    'author': '@cname',
    'date

': '@date("yyyy-MM-dd")'
  }]
});

该示例展示了一个分页数据的模拟接口，生成的文章数据包括 ID、标题、内容、作者和日期。

总结

• 安装与引入：通过 npm 或 yarn 安装 Mock.js 并在项目中引入，准备好拦截 Ajax 请求并生成模拟数据。
• 数据模拟：Mock.js 通过模板语法和占位符可以轻松生成各种随机数据，涵盖了基础数据类型、对象、数组、自定义函数等多种场景。
• 提前准备数据：Mock.js 支持通过提前准备好的数据模拟 API 返回结果，非常适合需要一致性和稳定性的数据模拟场景。
• 拦截请求：Mock.js 能够拦截 XMLHttpRequest 和 Fetch 请求，并返回模拟的数据，这在前端开发和调试过程中极为方便。