VueMock入門指南

一、VueMock是什麼

VueMock是一個基於Vue.js的mock庫，旨在實現前端模擬後端。VueMock可以模擬HTTP請求，生成假數據，模擬後台API介面等等，對於前端開發者來說，這是一個非常實用的工具。

VueMock提供了多種mock功能，包括數據模擬、數據綁定、服務端等，下面將詳細介紹。

二、VueMock的基本使用

首先，在Vue項目中安裝VueMock：

npm install vue-mock --save-dev

然後在Vue項目的main.js中引入VueMock：

import VueMock from 'vue-mock'

Vue.use(VueMock)

1. VueMock數據模擬

VueMock可以很方便地模擬假數據，在Vue組件中使用VueMock的api，就可以得到模擬的數據。

// 假數據
Vue.mock('/api/user', {
  'name': '張三',
  'age': 20,
  'sex': '男'
})

// 在Vue組件中使用假數據
this.$http.get('/api/user').then((response) => {
  console.log(response.data)  // {name: "張三", age: 20, sex: "男"}
})

上面的代碼中，VueMock生成了一份假數據，並將它與指定的URL關聯起來。在Vue組件中使用$http.get()請求這個URL，VueMock就會返回這份假數據。

2. VueMock數據綁定

VueMock還可以將假數據綁定到Vue組件中，使用時需要在Vue組件中引入VueMock的api，然後使用$mock來綁定數據。

// 在組件中引入VueMock
import VueMock from 'vue-mock'

export default {
  data () {
    return {
      users: []
    }
  },
  created () {
    // 綁定假數據
    this.$mock('/api/users', [
      {name: '張三', age: 20},
      {name: '李四', age: 22},
      {name: '王五', age: 24}
    ])
    
    // 獲取綁定的數據
    this.$http.get('/api/users').then((response) => {
      this.users = response.data
    })
  }
}

上面的代碼中，通過$mock綁定了一份假數據到URL /api/users，然後在組件中使用$http.get()請求這個URL，就可以得到綁定的假數據。

3. VueMock模擬伺服器

VueMock還可以模擬IP地址、埠號等伺服器相關信息，使用時只需要在VueMock的配置中指定模擬的伺服器信息即可。

Vue.mockConfig.server = {
  host: '192.168.1.100',
  port: 8080
}

上面的代碼中，將模擬的伺服器的IP地址設置為192.168.1.100，埠號為8080。

三、VueMock進階

1. VueMockJS數據綁定到表格中

VueMockJS是一個用於生成隨機數據的庫，使用VueMockJS可以非常方便地生成模擬數據。下面是將VueMockJS生成的數據綁定到表格中的例子：

// 安裝vue-mockjs
npm install vue-mockjs --save-dev

// 在main.js中使用mock.js
import VueMock from 'vue-mock'
import Mock from 'vue-mockjs'
Vue.use(Mock)
Vue.use(VueMock)

// 創建假數據
Mock.mock('/api/users', {
  'users|10-20': [
    {
      'id|+1': 1,
      'name': '@name',
      'age|10-50': 20,
      'gender|1': ['男', '女'],
      'email': '@email'
    }
  ]
})

// 綁定假數據
this.$mock('/api/users', Mock.mock('/api/users').users)

// 在組件中綁定數據

  

    

      

        
ID
        
姓名
        
年齡
        
性別
        
郵箱
      
    
    

      

        
{{user.id}}
        
{{user.name}}
        
{{user.age}}
        
{{user.gender}}
        
{{user.email}}
      
    
  



  export default {
    data () {
      return {
        users: []
      }
    },
    created () {
      // 獲取假數據
      this.$http.get('/api/users').then((response) => {
        this.users = response.data
      })
    }
  }

在這個例子中，先使用VueMockJS生成了一個假數據/users，然後將這個數據綁定到URL /api/users。在vue組件中使用$http.get()請求URL /api/users，就可以得到VueMockJS生成的假數據，並將數據綁定到表格中。

2. VueMock封裝HTTP

VueMock還可以封裝HTTP請求，使得在Vue組件中使用$http請求數據時，返回的數據就是假數據。這樣就可以在開發和測試階段快速、無縫地切換到使用假數據，提高開發效率。

// main.js中配置VueMock
import Vuex from 'vuex'  // 引入Vuex

import VueMock from 'vue-mock'
import Mock from 'vue-mockjs'
Vue.use(Mock)
Vue.use(VueMock, {
  // 將HTTP請求封裝
  wrap: (fn) => {
    // 將Vue組件中的$http請求替換為mock
    return function (url, params) {
      // 如果URL存在於$mock的mock表中，則返回mock數據
      if (Vue.$mock.mockTable[url]) {
        return Promise.resolve({data: Vue.$mock.mockTable[url]}, 'success')
      }
      // 否則調用原來的$http請求
      return fn(url, params)
    }
  }
})

...

在上面的代碼中，使用了VueMock的wrap功能，將Vue組件中的$http請求替換為mock，在請求URL /api/users時，如果這個URL存在於$mock的mock表中，就直接返回mock數據，否則調用原來的$http請求。

3. VueMock模擬數據與封裝HTTP

將VueMock的模擬數據和封裝HTTP同時使用，在Vue組件開發中可以起到非常方便的作用，省去了許多冗餘的代碼。使用VueMock模擬數據和封裝HTTP的部分代碼如下：

// 假數據
Vue.mock('/api/users', {
  'users|10-20': [
    {
      'id|+1': 1,
      'name': '@name',
      'age|10-50': 20,
      'gender|1': ['男', '女'],
      'email': '@email'
    }
  ]
})

// main.js中配置VueMock
Vue.use(VueMock, {
  // 封裝HTTP請求
  wrap: (fn) => {
    return function(url, params) {
      // 如果URL存在於$mock的mock表中，則返回mock數據
      if (Vue.$mock.mockTable[url]) {
        return Promise.resolve({data: Vue.$mock.mockTable[url]}, 'success')
      }
      // 否則調用原來的$http請求
      return fn(url, params)
    }
  }
})

// vue組件中獲取假數據

  export default {
    data () {
      return {
        users: []
      }
    },
    created () {
      // 獲取假數據
      this.$http.get('/api/users').then((response) => {
        this.users = response.data
      })
    }
  }

上面的代碼中，在Vue組件中使用$http.get()請求URL /api/users，如果這個URL存在於$mock的mock表中，就直接返回mock數據，否則調用原來的$http請求。這種方式封裝了$http請求，省去了開發中的許多冗餘代碼，提高了開發效率。