Vue中使用Mock.js构造数据

1.Mock

Mock官网地址

2.如何在Vue中使用

Demo中用到如下，前提安装好了axios,mock

"dependencies": {
    "axios": "^0.19.2",
    "iview": "^3.5.4",
    "mockjs": "^1.1.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

 接下来开始在vue中使用mock

• 建好工程以及要进行数据仿真的test.Vue文件

<template>
  <div>
    <Button type="primary"
            @click="loaddata">GetData</Button>
    <br>
    <Table :columns="columns1"
           :data="data1"></Table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns1: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data1: []
    }
  },
  methods: {
    loaddata () {
      alert('hi')
      this.$axios.get('/parameter/query').then((res) => {
        this.data1 = res.data.data
      })
    }
  }
}
</script>

• 初始页面如下图

• 在src下新建mock文件夹

在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文件夹下新建resdata.js,添加如下内容 其中定义了方法为get，路径/parameter/query

let resdata = [{
  id: 1,
  name: 'zs',
  age: '23',
  address: '成都'
}, {
  id: 2,
  name: 'ww',
  age: '24',
  address: '北京'
}]
export default {
  'get|/parameter/query': option => {
    return {
      status: 200,
      message: 'success',
      data: resdata
    };
  }
}

•  main.js中引入mock

require('./mock')

•  数据访问见上面test.vue的methods；点击GetData按键，结果如下，成功。
•