Mock.js的安装与使用教程(摆脱后端同学的束缚)

下面我会详细讲解"Mock.js的安装与使用教程(摆脱后端同学的束缚)"的完整攻略。

1. 简介

Mock.js是一个模拟数据生成器，可以用于前端开发中的接口测试、调试和前后端分离开发。Mock.js提供了丰富的数据类型、生成规则，可以生成符合规范的模拟数据，简化前端开发流程，提高开发效率。

2. 安装

2.1 npm安装

Mock.js是一个npm包，可以通过npm安装。

$ npm install mockjs

2.2 手动引入

也可以手动下载Mock.js，然后在HTML文件中引入。

<script src="/path/to/mock.js"></script>

3. 使用

使用Mock.js可以生成符合规范的模拟数据，可以通过API方式生成数据、通过拦截XHR请求返回模拟数据。下面将说明Mock.js的常用API和XHR拦截器的使用方法。

3.1 API方式生成数据

API方式可以使用Mock.mock()方法生成符合规范的模拟数据。Mock.mock()方法第一个参数是需要生成数据的模板，模板是一个JavaScript对象，可以包含各种数据类型和生成规则。第二个参数是可选的，可以指定生成数据的次数。

const Mock = require('mockjs')

const template = {
  'list|10': [{
    'id|+1': 1,
    'title': '@ctitle(5,8)',
    'desc': '@cparagraph(1,3)',
    'createTime': '@datetime'
  }]
}

const data = Mock.mock(template)

console.log(data)

上面的代码中，使用Mock.mock()方法生成了一个对象template，包含了一个list数组，数组中包含10个元素。每个元素包含id、title、desc和createTime属性。其中id属性从1开始，每个元素的id递增1，title属性是5到8个字的中文标题，desc属性是1到3个段落的中文描述，createTime属性是一个随机的日期时间。

在上面的代码中，Mock.mock()方法生成了符合规范的模拟数据，并赋值给了一个变量data。通过console.log()方法输出数据。

3.2 XHR拦截器方式生成数据

XHR拦截器可以使用Mock.mockjax()方法拦截XHR请求，并返回模拟数据。Mock.mockjax()方法可以拦截GET、POST、PUT、DELETE等请求。

const Mock = require('mockjs')

Mock.mockjax('/api/list', 'get', {
  'list|10': [{
    'id|+1': 1,
    'title': '@ctitle(5,8)',
    'desc': '@cparagraph(1,3)',
    'createTime': '@datetime'
  }]
})

const xhr = new XMLHttpRequest()

xhr.open('get', '/api/list')

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText)
    }
  }
}

xhr.send()

上面的代码中，使用Mock.mockjax()方法拦截了GET请求，URL匹配了/api/list，返回了符合规范的模拟数据。

在发送请求之前，需要创建一个XMLHttpRequest对象，然后调用open()方法打开连接，调用send()方法发送请求。在接收到响应后，通过xhr.responseText可以获取到响应内容。

4. 示例

4.1 示例1：生成随机的中文姓名和手机号码

const Mock = require('mockjs')

const template = {
  'name': '@cname',
  'mobile': /^1[3-9]\d{9}$/
}

const data = Mock.mock(template)

console.log(data)

上面的代码中，使用Mock.mock()方法生成了一个模板，包含了name和mobile属性。其中name属性可以是随机中文姓名，mobile属性可以是随机手机号码。

4.2 示例2：拦截XHR请求，生成符合规范的模拟数据

const Mock = require('mockjs')

Mock.mockjax('/api/list', 'get', {
  'list|10': [{
    'id|+1': 1,
    'title': '@ctitle(5,8)',
    'desc': '@cparagraph(1,3)',
    'createTime': '@datetime'
  }]
})

const xhr = new XMLHttpRequest()

xhr.open('get', '/api/list')

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText)
    }
  }
}

xhr.send()

上面的代码中，使用Mock.mockjax()方法拦截了GET请求，URL匹配了/api/list，返回了符合规范的模拟数据。在发送请求之前，需要创建一个XMLHttpRequest对象，然后调用open()方法打开连接，调用send()方法发送请求。在接收到响应后，通过xhr.responseText可以获取到响应内容。

以上就是"Mock.js的安装与使用教程(摆脱后端同学的束缚)"的完整攻略，希望对你有所帮助。