一、mock.js

对于前后端分离的项目，前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟，这是比较浪费时间的，也是十分无聊的。引入mock.js，这样就可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据！

官方网站地址：http://mockjs.com

二、vue项目使用mock.js

下面我们尝试在vue中引入mock和axios来模拟前后端数据交互！

安装mock.js

npm install mockjs

安装axios.js

npm install axios

新建mock文件夹，并新建index.js和userList.js。

这个文件夹包含了mock的初始化（idnex.js）以及需要模拟的数据（userList.js）

mock/index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

mock/userList.js

let userList = {
    code: 200,
    message: 'success',
    data: {
        total: 100,
        'rows|10': [{
            id: '@guid',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
        }]
    }
};
export default {
    'get|/getUserList': userList
}

在main.js中运行mock

require('./mock/index');//运行mock

利用axios请求mock接口(mock.vue)

<template>
  <div>
    <button @click="getData">BUTTON</button>
    <div>
      <ol>
        <li v-for="item in userList" v-key="item.id">
          <p>姓名：{{ item.name }}</p>
          <p>年龄：{{ item.age }}</p>
          <p>职位：{{ item.job }}</p>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    getData() {
      axios.get('/getUserList').then((res) => {
        console.log(res)
        this.userList = res.data.data.rows;
      })
    }
  }
}
</script>

运行vue项目，打开控制台

页面显示结果

可以看到，我们成功模拟一次请求，并且得到了我们想要的数据了！

三、mock.js文档

前面的示例中使用到了占位符（@）、随机id（guid）、随机中文名称（cname）等可以模拟产生的随机数据，在文档中都是有详细介绍的！