还在为后端没做完给接口而烦恼吗？Mock使用手册

Mock

安装

• npm install mockjs -D 一般mock也都是用于开发环境

模拟接口返回数据

• 返回数据相关格式模板 官方示例

import Mock from 'mockjs'

// Mock.mock(url, method, template)
// 注意：这种Mock拦截  F12控制台 不会产生网络请求
Mock.mock('http://localhost:8080/users', 'get', {
  'users|1-10': [
    {
      name: '@CNAME()',
      'age|18-100': 1,
      mobile: /1[3578]\d{9}/,
    },
  ],
})

// 返回数据
{
  "data": {
    "user": [
	  // 随机生1-10个
	  { "name": "王五", "age": 19, "mobile": 13677235612 }
	  ...
	]
  }
}

// 页面发送请求
// 当请求对应url时 Mock就能拦截到本次请求 并返回数据
async created() {
  const res = await axios.get('http://localhost:8080/users')
}

JSON5

• 正常情况下，json 类型的数据里格式很严格，键和值都必须用双引号包裹，并且不能写注释
• 首先安装json5依赖，然后将 .json 的文件后缀改为 .json5
• 测试：
  

拓展

• 如果想要mock模拟浏览器控制台真实请求，并且在项目中多人使用各自的mock配置文件，参考github: mock配置拓展.