Vue 中使用Mock

mock？

mock 可以用来模拟后台请求直接使用mock ,模拟后台返回的数据。 主要功能有

• 不需要修改既有代码，就可以拦截 Ajax请求，返回模拟的响应数据；
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；
• 支持支持扩展更多数据类型，支持自定义函数和正则。

优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

使用方法

Mock 官网上的示例很清楚，一目了然。

// 使用 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))

在Vue中使用Mock

1.安装依赖

在vue项目中引入Mock,在这里我使用的时cnpm.

    # 安装
    - cnpm i mockjs
    - npm install mockjs

假如我们在项目当中使用了 axios.

    # 安装axois
    - cnpm i axios

2.使用mock

新建mock.js,导入到main.js 中，这里为了说明，直接将axios挂载到了原型上。

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import './mock';

Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在我们想要使用mock的组件中，例如 demo.vue 中,

    # demo.vue 
    this.$axios.get('/user').then(res => {
        console.log(res)
    })

在demo.vue中有一个网络请求，使用mock 模拟数据。

    # mock.js
    import Mock from 'mockjs'

    const template = {
      'code': "200",
      'title': 'Syntax Demo',
      'desc': 'this is description'
    }
    Mock.mock('/user', /post|get/i, template)

这样就完成了 demo.vue组件中对后台返回数据的模拟。

没有侵入任何代码，就完成了数据的模拟，对于前后端分离的项目，mock用起来很爽，因为不必等后台开发完毕之后，再去开发。

当然，定义什么样的数据结构，这个还是要后后端碰面的。切记！！！