vue mock

vue运用mock模拟数据

一、源数据可以是JSON文件也可以根据mock.js的api生成

在项目根目录创建mock文件夹和文件，结果如下图：

 

 

1、seller.json 是模拟数据

2、goods.js 是处理模拟数据

import seller from './seller.json'

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

//这里可以选择是seller.json的数据或者userList(mock生成的数据)
export default {
    'get|/getUserList': seller
}

　　

3、index.js mock配置内容如下

// 首先引入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引入mock

 

 三、在vue页面引用

<script>
import axios from 'axios'

export default {
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    getData() {
      axios.get('/getUserList').then((res) => {
        console.log('res====' + JSON.stringify(res.data))
      })
    }
  }
}
</script>