使用Mock.js模拟接口数据

前言

因为公司产品说以后都会按照他的一个产品原型开发，所以我打算搞个后台管理系统的模板，类似 vue-element-admin。

对我来说，这可以给我省下不少的功夫，让我更快的完成工作任务，然后就有更多的时间来摸鱼，逃~)

目前，这个模板还仅仅是一个雏形。当然，我会慢慢地去完善它，让它拥有很丰富的功能。

好了，废话就不多说了，这次要讲的主题是 Mock。

安装

npm i mockjs

更多信息请参考: 开始 & 安装

使用

Mock 的语法，可以生成什么类型的数据，请参考: Mock.js 语法规范

const Mock = require('mockjs')

const data = Mock.mock({
  // 生成 1-1000 之间的整数
  'id|1-1000': 1,
  // 生成唯一机器码
  guid: '@guid',
  // 生成长度为1-4的数组
  'records|1-4': [
    {
      // 属性值自动加 1， 初始值为 number
      'id|+1': 1,
      // bool值，true 或 false
      'sex|1': true,
      // 随机id
      userId: '@id',
      // 根据正则表达式规则生成手机号
      mobile: /^1[3456789]\d{9}$/,
      // 生成长度5的字符串
      'userName|5': '',
      // 从数组中选择一个
      'userFullname|1': ['张三', '李四', '王二'],
      // 当前时间
      createTime: '@now()',
    }
  ],
})

console.log(data)

// 输出:

{
    "id": 195,
    "guid": "3Fd83228-54bD-c81B-f5c2-e77bAC92ceA7",
    "records": [
        {
            "id": 1,
            "sex": false,
            "userId": 1,
            "mobile": "19110026512",
            "userName": "wJmGp",
            "userFullname": "李四",
            "createTime": "2022-02-17 18:52:14"
        }
    ]
}

使用 axios 请求模拟数据

注意: Mock.js 会拦截 AJAX 请求，所以你直接正常请求接口就行了。

// /mock/user.js

const Mock = require('mockjs')

Mock.mock('/api/user/list', 'get', {
  responseCode: 200,
  total: 10,
  currentPage: 1,
  pageSize: 10,
  'records|1-4': [
    {
      'id|+1': 1,
      'sex|1': true,
      userId: '@id',
      mobile: /^1[3456789]\d{9}$/,
      accessToken: '@guid',
      'userName|5': '',
      'userFullname|1': ['张三', '李四', '王二'],
      createTime: '@now()',
    }
  ],
})

因为我使用的 Vue，所以在 main.js (入口文件)引入:

...


require('../mock/user.js')

测试:

// demo.js

axios.get('/api/user/list').then(res => {
  console.log(res)
})

参考

mockjs-demo

Mock