vue引入mock模拟数据

首先安装mockjs

npm install mockjs

src/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);
  }
});

在main.js中引入

// main.js
require('./mock');

在mock文件夹下随便创建一个文件demoList.js
在该文件中，我们可以按照index注册服务的格式来写我们的mock
src/mock/demoList.js

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

再Vue文件里使用

<template>
    <div>
        <button @click="login">login</button>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.get("/parameter/query").then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                })
            }
        }
    }
</script>

<style>

</style>