做了一回标题党 （别吐槽，说的大实话，真的可以不用后台，就能拿数据，快！，向下看...）
一、mock.js 是什么？
官网机票
简单的描述一下， mock.js 可以在后台接口没有更新时，来本地模拟数据达到测试界面功能的一个很方便的工具库，mock.js 可以拦截ajax 请求， 重指向并返回你定义的模板数据。更多细节，可查看官网。
二、安装方式
JS_CDN:
复制代码Yarn:
yarn add mockjs复制代码其它安装方式可看官网
三、简易使用教程
Mock.mock()
@parmas rul {string} 拦截请求url 地址，需要与请求地址保持一直，不然无法拦截请求
@params rtype {string} 请求方式，如果不传该参数，则post/get请求均可获得匹配数据，
注意该字段需要全部小写，否则无法匹配。
@params template {*} 默认数据 （最终请求返回结果）
@params function {function} options 为请求的数据，可在下面查看示例，这里不解释了，
该函数结束需要return ,return 数据则为最终请求结果，
可根据options的参数，处理不同的逻辑复制代码1. Mock.mock( template )
2. Mock.mock( rurl, template )
3. Mock.mock( rurl, function( options ) )
4. Mock.mock( rurl, rtype, template )
5. Mock.mock( rurl, rtype, function( options ) )
列举基本的使用，更多细节描述，可查看官网。
Mock.setup()
Mock.setup({
timeout: 400 // 设置超时时间
})
Mock.setup({
timeout: '300 - 6000' // 区间随机超时时间
})
目前官网列举的就一个参数 timout (ajax 的请求超时时间)
复制代码- Mock.Random (该功能较多，只列举部分常用的)
var Random = Mock.Random //声明随机函数对象var randomEmail = Random.email() //随机生成邮箱
var randomBoolean = Random.boolean() //随机生成布尔值
var randomBase64Img = Random.dataImage() //随机生成图片BASE 64 数据
var randomUrl = Random.url() //随机生成Url 地址
var randomIp = Random.ip() //随机生成ip 地址
var randomColor = Random.color() //随机生成布尔值
/**
@params size {String} 需要生成的图片尺寸 （'600 X 300'）
@params background {String} 生成图片的背景色 默认白色 （RBG）
@params text {String} 生成图片的中间文字 默认为图片尺寸
@params format {Sting} 生成图片的格式 默认为png（可选：jpg/png/gif）
*/
Random.image()
Random.image( size )
Random.image( size, background )
Random.image( size, background, text )
Random.image( size, background, foreground, text )
Random.image( size, background, foreground, format, text )
官方的随机支持功能很强大，也很全， 部分随机函数可支持传参，可定义适合场景的随机数据，因为
功能太多了，无法一一列举，可到官网寻找合适自己的。 复制代码官方支持随机数据：复制代码四、js 中的示例
let random = Mock.Random // 随机函数
// 测试 get
Mock.mock('/get','get',{id: random.id(), name: 'GET', email: random.email()})
// 测试 post
Mock.mock('/post','post',{id: random.id(), name: 'POST', email: random.email()})
// 测试自定义模板
Mock.mock('/template','post', function (option) {
console.log('我是自定义函数请求参数：', option)
let data = {id: 1, name: 'Template',image: random.image()}
return data
})
testRequest('/get', 'GET') // 测试Get 请求
testRequest('/post', 'POST') // 测试Post 请求
testRequest('/template', 'POST', {key: 'Test Params'}) // 测试Post 请求
/**
* @Description: Mock 测试请求
*/
function testRequest (url, type,data = {}) {
let baseUrl = ''
$.ajax({
url: baseUrl + url,
type: type,
data: data,
dataType: 'json',
success: res => {
console.log(res)
},
})
}复制代码五、Vue 中的使用
==> mock/index.js
import Mock from 'mockjs'
// 测试 get
Mock.mock('/get','get',{id: 1, name: 'GET'})
// 测试 post
Mock.mock('/post','post',{id: 1, name: 'POST'})
// 测试自定义模板
Mock.mock('/template','post', function (option) {
console.log('我是自定义函数请求参数：', option)
let data = {id: 1, name: 'Template'}
return data
})
==> main.js // 在main.js 的代码里引用模拟数据文件
*****
import './mock/index.js'
*****
import axios form 'axios'
// 测试get 请求
axios.get('/get').then(res => { console.log(res) }
// 测试post 请求
axios.post('/post').then(res => { console.log(res) }
// 测试自定义模板请求
axios.post('/post', {key: 'Test Params'}).then(res => { console.log(res) }
复制代码踩坑注意：
- mock.js 的拦截地址，需要与请求地址保持一直，不然无法拦截请求
- mock.js 拦截的请求，不会出现在 network 请求列表中。
- mock.js Mock.mock(..rtype) rtype参数注意该字段需要全部小写，否则无法匹配。
六、使用扩展
很多时候，服务器都有定义固定的返回值，如code 为0 则表示该请求有效。那么我们可以封装一个函数，每次返回数据前都调用函数，来格式化服务器固定的返回模板。
/**
* @Description: 格式化mock 返回数据
* @param data {*} 请求数据结果
* @param code {number} 请求状态值
* @param msg {Sting} 请求状态消息
*/
function formattingData (data, code = 0,msg) {
return {
data: data,
code: code,
msg: msg || (code === 0 ? '请求成功' : '请求失败')
}
}
// 测试 get
Mock.mock('/get','get',formattingData({id: 1, name: 'GET'}))
// 测试 get 请求失败
Mock.mock('/get/err','get',formattingData(undefined,1))复制代码