mock.js的基本使用

Mock.js 是一个用于生成随机数据的 JavaScript 库，可以用于前后端分离开发中模拟接口数据，方便前端开发调试。

Mock.js 的基本使用步骤如下：

1. 安装 Mock.js 库

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

npm install mockjs --save-dev

2. 编写模拟数据

在前端开发中，通常需要模拟后端接口的返回数据。使用 Mock.js 可以很方便地生成模拟数据。

示例代码：

import Mock from 'mockjs'

// 模拟一个接口返回数据
Mock.mock('/api/user', {
  'name': '@name', // 随机生成一个中文名字
  'age|1-100': 100, // 随机生成一个 1-100 之间的数字
  'gender|1': ['男', '女'], // 随机生成一个性别
  'email': '@EMAIL', // 随机生成一个邮箱
  'phone': /^1[3456789]\d{9}$/ // 随机生成一个手机号
})

3. 拦截 Ajax 请求

Mock.js 可以拦截 Ajax 请求，根据请求的 URL 和请求方法返回模拟数据。

示例代码：

import Mock from 'mockjs'

// 模拟一个接口返回数据
Mock.mock('/api/user', {
  'name': '@name',
  'age|1-100': 100,
  'gender|1': ['男', '女'],
  'email': '@EMAIL',
  'phone': /^1[3456789]\d{9}$/
})

// 拦截 Ajax 请求
Mock.mock('/api/user', 'get', {
  code: 200,
  message: 'OK',
  data: Mock.mock('@user')
})

4. 使用模拟数据

在前端开发中，可以通过 Ajax 请求获取模拟数据，在页面上展示模拟数据。

示例代码：

import axios from 'axios'

axios.get('/api/user')
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.error(err)
  })

以上是 Mock.js 的基本使用方法，还有更多高级用法，可以参考官方文档。