[JavaScript知识库]vue中mock的使用方法

按照以下步骤

1、安装mock

npm install mockjs --save-dev

2、在src下创建mock文件夹，并在main.js下添加下面的代码

require('./mock')

3、在mock文件夹创建index.js文件，这样第2步就会直接运行这个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 (const [path, target] of Object.entries(item)) {
    const protocol = path.split('|')
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  }
})

4、在mock文件夹里创建请求文件，如demo.js

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

5、创建api请求文件

import axios from 'axios'
export function demoList() {
  return axios.get('/api/parameter/query')
}