天天看點
傳回

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

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

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落燈花（mockjs+Vuex+Vue實戰）
mock.js搶鮮看——主要的作用和API
後端不來過夜半，閑敲mock落燈花（mockjs+Vuex+Vue實戰）

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')
後端不來過夜半，閑敲mock落燈花（mockjs+Vuex+Vue實戰）

不指定參數則取随機的寬高并顯示對應的寬高資料：

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

模拟姓名資料：

模拟全名：

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落燈花（mockjs+Vuex+Vue實戰）
Mock.js小練兵——用Vue + Vuex + mockjs搭建一個簡單的文章Feed

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

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

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

我們希望能顯示多個文章卡片，并且向其中插入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落燈花（mockjs+Vuex+Vue實戰）

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

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

【完】

黃梅時節家家雨，青草池塘處處蛙。有約不來過夜半，閑敲棋子落燈花
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，既不少，也不多

參考資料
  • mock.js官方文檔
  • vue-resource官方文檔
  • vuex中文文檔
後端不來過夜半，閑敲mock落燈花（mockjs+Vuex+Vue實戰）

猜你還對這些感興趣

  • [windows] 功能強大的 免費PDF轉換器 V9版 破解版
  • [Windows] win平台 Adobe CC 2019 全系列安裝包 + 破解更新檔
  • 「wordpress插件」 Yoast SEO Premium 9.3 破解版 — 喵容自用插件合集（二）
  • [系統工具] CCleaner Pro v5.42 專業增強版及綠色特别版
  • JavaScript 中複雜判斷的更優雅寫法
  • 「前端進階」2018/2019 史上最全的前端學習路線
  • vue中Axios的封裝和API接口的管理

原文連結：後端不來過夜半，閑敲mock落燈花（mockjs+Vuex+Vue實戰）

前端 程式設計 學習筆記 mockjs axios Easy Mock ajax 喵容
上一篇: 【fullCalendar月曆控件】根據月曆控件展示的月份，控制datetimebox初始化顯示控件的月份資訊。
下一篇: java和equals差別_Java中==和equals的差別（詳細）

繼續閱讀