Web

VUE中使用Mock模拟数据请求

是
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

记录一下在项目中的使用方法

安装

1
npm install mockjs

当然通常在项目中会在package.json中添加mockjs依赖，再npm install所有项目中需要依赖的库

1
2
3
"dependencies": {
    "mockjs": "^1.1.0"
  }

引用

src/mock/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//引入mock
import Mock from 'mockjs'

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

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (const [path, target] of Object.entries(item)) {
    const protocol = path.split('|')
    Mock.mock(protocol[1], protocol[0], target)
  }
})

main.js中引入

1
2
3
4
//开发环境引入
if (process.env.NODE_ENV === 'development') {
  require('@/mock')
}

mock文件下建立personList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let personList = [{
        id: 1,
        name: '小丽',
        age: '18',
        number: '8'
    },{
        id: 1,
        name: '小芳',
        age: '20',
        number: '6'
    }]

export default {
    'get|/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: personList
    };
  }
}

接下来在网络请求时，发现如果是get请求路径是/parameter/query，就会返回我们mock定义好的数据。另外还有其它语法来生成随机数据。详细参考数据模板定义 DTD

参考

Mock.js
Mock