前后端真正分离，网线被拔，也能请求数据（mock.js）

做了一回标题党 （别吐槽，说的大实话，真的可以不用后台，就能拿数据，快！，向下看...）

一、mock.js 是什么？

官网机票

简单的描述一下， mock.js 可以在后台接口没有更新时，来本地模拟数据达到测试界面功能的一个很方便的 工具 库，mock.js 可以拦截ajax 请求， 重指向并返回你定义的模板数据。更多细节，可查看官网。

二、安装方式

JS_CDN:

<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>复制代码

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) }
复制代码

踩坑注意：

1.  mock.js 的拦截地址，需要与请求地址保持一直，不然无法拦截请求
2.  mock.js 拦截的请求，不会出现在 network 请求列表中。
3.  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))复制代码

对吧，没骗你吧（手动滑稽），如果觉得可以，请把你敲键盘的速度给我点个赞吧。