【mock】后端不來過夜半，閑敲mock落燈花（mockjs+Vuex+Vue實戰）

本文轉載自查看原文 2017-08-06 16:29 7307 Vue

mock的由來【假】

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

詩詞背景：在一個梅雨紛紛的夜晚，正處於項目編碼階段，書童卻帶來消息：寫后端的李秀才在幾個時辰前就趕往臨安度假去了,！此時手頭僅有一個簡單的數據接口文檔的趙師秀慨嘆一聲："好吧，那還是我自己先模擬一下后端的接口吧"

_(:3 」∠)_ 再后來，就有了那句千古名句啦~~（為了表示對趙師秀先生的歉意，文末我將附上原文）

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

mock的由來【真】

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

mock有“愚弄、欺騙”之意，在前端領域，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()  
// "電力速率離老五准東其引是外適只王。體區先手天里己車發很指一照委爭本。究利天易里根干鐵多而提造干下志維。級素一門件一壓路低表且太馬。"

【注意】

1. cparagraph可以看作是多條csentence以逗號連接后的字符串，默認條數為 3 到 7條csentence

2.通過Random.cparagraph(length )指定句子的個數

Random.cparagraph(2)

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

3.通過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([模板參數])；

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

用例如下：

［注意］　為了在Ｖｕｅ中使用Ａｊａｘ，我注冊了一個插件：Ｖｕｅ－Ｒｅｓｏｕｒｃｅ，關於更多可以參考Ｖｕｅ－Ｒｅｓｏｕｒｃｅ的官方文檔：https://github.com/pagekit/vue-resource/blob/develop/docs/config.md

import Vue from 'vue'
 
／／注冊Ｖｕｅ－Ｒｅｓｏｕｒｃｅ插件，這樣我們就可以Vue.http.get（URL）去發出Ａｊａｘ請求了
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: