先後端真正分離，網線被拔，也能請求數據（mock.js）

作了一回標題黨 （別吐槽，說的大實話，真的能夠不用後臺，就能拿數據，快！，向下看...）

1、mock.js 是什麼？

官網機票 

簡單的描述一下， mock.js 能夠在後臺接口沒有更新時，來本地模擬數據達到測試界面功能的一個很方便的工具庫，mock.js 能夠攔截ajax 請求， 重指向並返回你定義的模板數據。更多細節，可查看官網。

2、安裝方式

    JS_CDN:  

<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>複製代碼

   Yarn:

yarn add mockjs複製代碼

  其它安裝方式可看官網

3、簡易使用教程

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 )

官方的隨機支持功能很強大，也很全， 部分隨機函數可支持傳參，可定義適合場景的隨機數據，由於
功能太多了，沒法一一列舉，可到官網尋找合適本身的。 複製代碼

官方支持隨機數據：複製代碼

4、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)
      },
    })
  }複製代碼

5、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參數注意該字段須要所有小寫，不然沒法匹配。

6、使用擴展

不少時候，服務器都有定義固定的返回值，如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))複製代碼

對吧，沒騙你吧（手動滑稽），若是以爲能夠，請把你敲鍵盤的速度給我點個贊吧。

！轉載請註明出處