Mock的由來【誤】

黃梅時節家家雨，青草池塘處處蛙。 後端不來過夜半，閒敲mock落燈花

趙師秀：南宋時期的一位前端工程師

詩詞背景：在一個梅雨紛紛的夜晚，正處於專案編碼階段，書童卻帶來訊息：“寫後端的李秀才在幾個時辰前就趕往臨安度假去了，後端編碼的進度又延後…”

此時手頭僅有一個簡單的http資料介面文件的趙師秀來了一套素質三連後，不由得慨嘆一聲：”好吧，那還是我自己先模擬一下後端的介面吧”

(:3 」∠) 再後來，就有了那句千古名句啦~~

（ 為了表示對趙師秀先生的歉意，文末我將附上原文）

如果我說這就是前後端分離思想和mock.js的由來，你會信麼？（ฅ´ω`ฅ）

mock的由來【真】

我們在Vue或React的文件裡時不時就會看到這個名詞，那麼mock到底是什麼東西呢？

mock有“愚弄、欺騙”之意，在前端領域，mock可以理解為我們前端開發人員製造的假資料。也就是說不是由後臺真實製造，而是由我們其他一些方式模擬的資料，例如藉助mock.js。

通過這種方式，我們能在一定程度上實現前後端分離的開發流程。因為如果前端開發人員能夠自己模擬資料的話，就不必等著拿到後端的接口才能完成剩下的工作，使得前端人員獨立開發的能力增強，在此基礎上做到前端後臺各自獨立的開發（當然這個前提是有 “寫好的+詳細的+不再臨時改變的” 公共資料介面的文件）

最後對接的工作是前後端聯調資料，因為前端mock的輔助，我們儘可能地減少了前後端對接過程中的效率損耗

mock.js是一個能夠提供Mock功能的模組

mock.js初上手——安裝和使用

在終端裡通過執行npm install mockjs去安裝mock.js模組，安裝成功後你就可以通過模組化的方式去使用模組化的方式去使用mock了，下面這個是官方文件的小例子：

var Mock = require('mockjs')
var data = Mock.mock({
  // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
  'list|1-10': [{
    // 屬性 id 是一個自增數，起始值為 1，每次增 1
    'id|+1': 1
  }]
})
// 輸出結果
 

console.log(JSON.stringify(data, null, 4))

demo:

mock.js搶鮮看——主要的作用和API

mock.js的作用

mock.js的作用，從它文件的首頁介紹便可以略知一二：

1. 它可以生成大量不同型別的模板資料，從最基本的隨機陣列/數字/物件/字串，再到一個域名，一個地址（省/市），一個標題，一段文字，甚至給定寬高和顏色的圖片，它都能模擬生成！ 這就是mock.js的強大之處
2. 相比起生成隨機的模擬資料，其實我們更關心的是當我們傳送Ajax請求的時候，我們能夠接收到這些資料，這就是mock.js的第二大作用：攔截Ajax請求，當你對一個mock.js所指定的URL發起Ajax請求的時候，mock.js會將1中的模板資料作為響應資料回傳給你，從而讓你開發能在相當於已經拿到後端介面的前提下進行前端開發！

【注意】：mock.js只攔截Ajax，而不是fetch，所以,習慣於使用fetch的API的朋友們要注意了

mock的API其實非常簡單，主要要用到的API其實就兩個（我是說主要哈~~）：

1.Mock.Random

這是一個物件，物件裡包含許多可供呼叫的方法，返回相應的模擬資料，例如Mock.Random.domain() 可以返回一個隨機的域名，Mock.Random.csentence() 可以返回一個隨機的中文句子

2.Mock.mock

([你發起Ajax請求的URL], [“get”或”post”],[根據Mock.Random定製的模板或函式])

呼叫這個方法後你就可以發起Ajax請求並且接收到你私人定製的隨機資料啦！

【注意】前兩個引數是字串，最後一個引數是物件或函式

所以下面我就主要圍繞這兩點展開

Mock.Random的運用

模擬Web資料：

生成隨機域名(每次執行結果不同)：

var Random = Mock.Random
Random.domain()  //   "nhou.org.cn"

生成隨機IP(每次執行結果不同)

var Random = Mock.Random
Random.ip()   //  "74.97.41.159"

生成隨機URL(每次執行結果不同)

Random.url()  //   "news://wrmt.na/rbcgbws"

模擬地理位置資料：

生成隨機省份：

var Random = Mock.Random
Random.province()  //"海南省"

生成隨機城市：

var Random = Mock.Random
Random.city()   // "澳門半島"

生成在某個省份的某個城市：

var Random = Mock.Random
Random.city(true) // "廣東省 廣州市"

模擬文字資料：

生成一條隨機的中文句子：

var Random = Mock.Random
Random.csentence()   //  "會候權以解包黨心要按總場火義國而片精。"

【注意】

1.預設一條句子裡的漢字個數在12和18之間

2. 通過Random.csentence( length )指定句子的漢字個數：

Random.csentence(5)  // "文鬥領拉米。"

3.通過Random.csentence( min?, max? )指定句子漢字個數的範圍：

Random.csentence(3, 5)  // "住驗住"

生成隨機的中文段落：

var Random = Mock.Random
Random.cparagraph()
// "電力速率離老五準東其引是外適只王。體區先手天裡己車發很指一照委爭本。
    究利天易里根幹鐵多而提造幹下志維。級素一門件一壓路低表且太馬。"

【注意】

• cparagraph可以看作是多條csentence以逗號連線後的字串，預設條數為 3 到 7條csentence
• 通過Random.cparagraph(length )指定句子的個數

Random.cparagraph(2)
// "而易除應精基還主局按選際復格從導。天第們國分比積造業王該回過白親。"

4.通過Random.cparagraph(min?, max?）指定句子的個數的範圍：

Random.cparagraph(1, 3)
//  "作養裝軍頭確應當號天革來人車號把文。證細專物轉民相解狀律極或經較把馬。
      其省級支際標業強龍算建物況。"

模擬顏色資料：

var Random = Mock.Random
Random.rgba()  // "rgba(122, 121, 242, 0.13)"

模擬日期/時間資料：

日期：

Random.date('yyyy-MM-dd')  // "1975-04-27"
Random.date('yy-MM-dd')    //   "00-01-08"

時間：

Random.time()   // "05:06:06"

模擬圖片：

Random.image('200x100', '#4A7BF7', 'Hello')

不指定引數則取隨機的寬高並顯示對應的寬高資料：

模擬姓名資料：

模擬全名：

Random.cname()   // "黃秀英"

模擬姓氏：

Random.cfirst()   // "龍"

模擬名字

Random.clast()  // "秀英"

Mock.mock()的運用

除了製造模擬資料之外，更關鍵的是，我們發起Ajax請求的時候要能夠接收到這些資料呀。嘿嘿，這就是Mock.mock()的作用啦！

上面我介紹過Mock.mock()的用法，如下：

Mock.mock([你發起Ajax請求的URL], ["get"或"post"],[根據Mock.Random定製的模板或函式])

在文章開頭的時候，我們通過使用mock函式的第三個引數生成了對應的模擬資料：

var data = Mock([模板引數])；

但如果我們希望這個資料能夠被請求某個ＵＲＬ的ａｊａｘ接收到，那就要運用到前兩個引數了：

用例如下：

［注意］　為了在Vue中使用Ajax，我註冊了一個外掛：Vue-Resource，關於更多可以參考Vue-Resource的官方文件

import Vue from 'vue'

// Vue-Resource外掛，這樣我們就可以Vue.http.get（URL）去發出Ajax請求了
import VueResource from 'vue-resource'
Vue.use(VueResource)

var Mock = require('mockjs')
Mock.mock('/penghuwan.com/', 'get', {
  // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
  'list|1-10': [{
    // 屬性 id 是一個自增數，起始值為 1，每次增 1
    'id|+1': 1
  }]
})
// 輸出結果
Vue.http.get('/penghuwan.com/').then(
  response => {
    console.log(response.body)
  }
)

demo:

Mock.js小練兵——用Vue + Vuex + mockjs搭建一個簡單的文章Feed

下面，我將用用Vue + Vuex + mockjs搭建一個簡單的應用，展示前後端分離的工作流程

先看看我們最終要達到的效果，這是UI的最小單元:

我們希望能顯示多個文章卡片，並且向其中插入mockjs模擬的內容

我的主要檔案有四個：

├── app.vue          // 頁面UI
├── main.js          // 入口檔案，初始化vuex和vue-resource,並掛載mockjs
├── mock.js          // 生成模擬資料
└── module.js        // vuex的module部分

app.vue:

<template>
  <div id="app">
      <template v-for ="(item, index) in articles">
        <div :key="index">
          <h1 class="title">{{ item.title }}</h1>
          <div>
            {{ item.content }}
          </div>
          <div>
            <p class="time">{{ '發表時間：' +  item.time}}</p>
            <p class="location">{{ '發表地址： ' + item.location }}</p>
          </div>
        </div>
    </template>
  </div>
</template>
  <script>
import { mapGetters, mapActions } from 'vuex'

export default {
  mounted: function () {
    this.fetchData()
  },

  methods: {
    ...mapActions({
      fetchData: 'fetchArticlesData'
    })
  },

  computed: {
    ...mapGetters({
      articles: 'getArticles'
    })
  }
}
</script>
<style scoped>
  #app div{
    border: 1px solid gray;
    padding: 10px;
    margin: 10px;
    overflow: hidden;
  }

  #app p{
    margin: 0px;
  }

  .title{
    font-size: 16px;
  }

  .time{
    float: left;
  }

  .location{
    float: right;
  }
</style>

入口檔案main.js:

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'

import App from './app'
import article from './module.js'

Vue.use(Vuex)
Vue.use(VueResource)

// 呼叫mock的API，使Ajax能夠捕獲隨機資料
require('./mock.js')
// 建立Vuex的store
const store = new Vuex.Store({
  modules: {
    article
  }
})

new Vue({
  el: '#app',
  template: '<App />',
  store: store,
  components: { App }
})

mock.js:

var Mock = require('mockjs')
var Random = Mock.Random

const produceData = function () {
  let articles = []
  for (let i = 0; i < 10; i++) {
    let newArticleObject = {
      title: Random.csentence(5),
      content: Random.cparagraph(5, 7),
      time: Random.date() + ' ' + Random.time(),
      location: Random.city()
    }
    articles.push(newArticleObject)
  }
  return {
    articles: articles
  }
}
// 第三個引數可以是物件也可以是返回物件的函式
Mock.mock('/article', 'get', produceData)

module.js:

import Vue from 'vue'

const RESQUEST_ARTICLES = 'RESQUEST_ARTICLES'

export default {
  state: {
    articles: []
  },

  getters: {
    getArticles: state => state.articles
  },

  actions: {
    fetchArticlesData (context) {
      context.commit(RESQUEST_ARTICLES)
    }
  },

  mutations: {
    [RESQUEST_ARTICLES] (state) {
      Vue.http.get('/article').then(
        response => {
          let data = response.body
          state.articles = data.articles
        }
      )
    }
  }
}

demo:

再重新整理一次看看！！：

【完】

黃梅時節家家雨，青草池塘處處蛙。有約不來過夜半，閒敲棋子落燈花

Mock.js的缺點

這裡要說明一下的是：雖然我上述介紹的都是些Mockjs的優點，但我並沒有說推薦大家使用，我的目的僅僅是向大家介紹github上有這麼一個體驗Mock的模組而已。

下面說下個人使用的時候感受到的Mock.js的一些缺點吧

1. 不支援當今流行的fetch，而只支援Ajax
2. 前後端資訊互動的能力略若弱，例如傳到後臺的request僅能攜帶3種資訊： type,url和body

3. mockjs不能滿足實際的使用需求： 實際上作為前端小白，我很希望mock.js能給我模擬出這樣一種資料：

   [“字串1”，”字串2”,”字串3”] // 三個字串除了每次互動都不同外，也各不相同

但mockjs卻只能給我提供這樣一種資料

["字串1"，"字串1","字串1"]
// 不同的互動次數，字串1是不同的，但三個字串都是相同的字串1

4. 使用起來的時候發現它的最大的優點是”讓展示的介面看起來很完整好看？？”，有點華而不實的感覺

所以，直到今天為止，mockjs在github仍然是5000多star，既不少，也不多

參考資料

站內文章推薦：