Mock在Vue中的应用

  Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。这里介绍在Vue工程中使用Mockjs。

1. 安装

npm install --save-dev mockjs

2. 引入

  为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config/dev.env.js(开发环境)中做一个配置。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true' //添加一个属性
})

config/prod.env.js(生产环境)

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false' //添加一个属性
}

src/main.js

import Mock from '@/mock/index.js' //也可以不写index.js
import axios from 'axios'; //引入axios,发送Ajax请求用的。
// 如果process.env.Mock == true执行startMock()
if (process.env.MOCK) {
	Mock.startMock();
}

// 也可以不用创建MOCK属性，正常用NODE_ENV判断。
// if (process.env. NODE_ENV == "development") {
//	   Mock.startMock();
// }

// 为了要在其他组件中使用，将axios改为vue的原型属性。
Vue.prototype.$axios = axios;

3. 目录和文件创建

  在src目录下创建mock目录，添加index.js文件。

mock/index.js (方法1)

import Mock from 'mockjs';

Mock.mock('/list/index',{
	'list|5':[{
		'title':'@ctitle(5,20)'
	}]
})

  这里建议 (使用方法2) 给每类api使用单独的mock文件，例如listapi中使用的所有接口要使用的mock放到listmock.js文件里。

src/mock/listmock.js (方法2)

import Mock from 'mockjs'

export default {
  listData: confit => { 
  // confit中存放的是{url: "/list/index", type: "GET", body: null}
  // body是传过来的值
  console.log(confit)
    return Mock.mock({
       'list|5':[{
         'title':'@ctitle(5,20)'
      }]
    })
  }
}

mock/index.js

import Mock from 'mockjs'
// 将所有的mock文件引入
import listAPI from './list'

export default {
	startMock(){
		// 设置所有ajax请求的超时时间，模拟网络传输耗时
		Mock.setup({
		    timeout: 0-300
		})
		//在index.js中引入数据
		Mock.mock('/list/index', 'get', listAPI.listData);
	}
}

  用Ajax请求打印出来我们在mock写入的虚拟数据。

src/component/list.vue

<template>
  <div>
    <ul>
      <li v-for='(item,index) in message'>{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'List',
    data () {
      return {
        message: ''
      }
    },
    mounted(){
      this.getData();
    },
    methods:{
      getData:function(){
        var that = this;  //用that去保存vue的实例
        that.$axios.get('/list/index').then(function (res) {
          that.message = res.data.list
          console.log(res);
        })
      }
    }
  }
</script>

执行之后console.log(res)打印出来的如下图：

---

---

4.拦截ajax请求，配置mock的数据

 拦截ajax请求主要可以使用Mock中的两个方法：
   1. Mock.mock( rurl, rtype, template )
   2. Mock.mock( rurl, rtype, function( options ) )

• rurl：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如：

/\/domain\/list\.json/
'/domian/list.json'

• rtype：表示需要拦截的 Ajax 请求类型。例如 GET、POST等。
• template：表示数据模板，可以是对象(obj)或字符串(string)。如果需要要把数据写死，可以直接写一个普通的对象。如果要让Mock随机生成，可以根据Mock模板的规则自定义。例如：
  { ‘data|1-10’:[{}] } 表示生成生成包含 1到10个空对象的数据
  ‘@EMAIL’ 表示随机生成一个email地址
  ‘@CNAME’ 表示随机生成一个中文人名