Mock.js基本用法

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作。

大概记录下使用过程, 详细使用可以参见Mock官方文档文档

Mock.js的基本用法

1.安装Mock.js

可以通过npm安装Mock.js，命令如下：

npm install mockjs --save-dev

2.引入Mock.js

在需要使用Mock.js的文件中引入Mock.js，命令如下：

import Mock from 'mockjs'

3.Mock数据生成

Mock.js可以生成随机的数据，比如生成随机的数字、字符串、日期等。以下是一些常用的Mock数据生成示例：

// 生成随机的数字
Mock.mock('@integer(1, 100)') // 生成1-100之间的随机整数

// 生成随机的字符串
Mock.mock('@string("lower", 5)') // 生成5位小写字母的字符串

// 生成随机的日期
Mock.mock('@date') // 生成随机的日期

// 生成随机的姓名
Mock.mock('@cname') // 生成随机的中文姓名

4.模拟接口响应

Mock.js可以模拟接口的响应，可以用来测试前端的接口调用。以下是一些常用的Mock接口响应示例：

// 模拟接口返回成功的数据
Mock.mock('/api/success', 'get', {
  code: 0,
  message: 'success',
  data: {
    id: '@id',
    name: '@cname',
    age: '@integer(20, 30)',
  }
})

// 模拟接口返回失败的数据
Mock.mock('/api/fail', 'get', {
  code: 1,
  message: 'fail',
  data: null,
})

5.使用Mock数据

在开发和测试时，可以使用Mock数据来代替真实的数据，这样可以避免对真实数据的影响。以下是一些常用的Mock数据使用示例：

// 使用Mock数据
axios.get('/api/success').then(response => {
  const data = response.data
  // 处理Mock数据
})

// 使用真实数据
axios.get('/api/real').then(response => {
  const data = response.data
  // 处理真实数据
})

以上就是Mock.js的基本用法，通过Mock.js可以方便地生成随机数据、模拟接口响应等功能，可以提高前端开发和测试的效率。