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

時間 2019-11-18

標籤 mock 後端來過夜半燈花 mockjs+vuex+vue mockjs vuex 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:vue

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:

再刷新一次看看！！：

【完】

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

參考資料：

1.mock.js官方文檔： http://mockjs.com/

2.vue-resource官方文檔： https://github.com/pagekit/vue-resource

3.vuex中文文檔： https://vuex.vuejs.org/zh-cn/