vue mock

vue运用mock模拟数据

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

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

 

 

1、seller.json 是模拟数据

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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配置内容如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 首先引入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页面引用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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>