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请求，省去了开发中的许多冗余代码，提高了开发效率。