前端接口模拟工具Mock.js上手实践

前端接口模拟工具Mock.js上手实践

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: [email protected]

1. 概念

在前后端开发过程中，常常会遇到前后端进度不一致的情况，如果前端停下来等后端接口调试完再继续开发会大大降低前端的开发效率。Mock.js 是一款成熟强大的接口模拟工具，能够生成随机数据，拦截 Ajax 请求并返回，真正做到前后端分离。

2. vue 工程引入 mock.js

在前端工程项目中引入 mock.js 是非常方便的，以 vue-cli 构建的工程为例，首先安装 axios 和 mockjs

$ yarn add axios mockjs

可以在项目 src 目录下建立 data 文件夹用于统一存放 ajax 请求，例如在 data/api.js 中建立一个测试用的请求：

import axios from 'axios'
const apiTable = {
  log: '/test/log' // get
}
const log = (data = '') => {
  return new Promise((resolve, reject) => {
    axios.get(apiTable.log, {
      params: {
        data: data
      }
    }).then(res => {
      resolve(res)
    }).catch(err => {
      console.log(err)
      reject(err)
    })
  })
}
export { log }

可以在同级目录下的 data/apiMock.js 中建立 mock 请求：

import Mock from 'mockjs'
// 使用mockjs模拟数据
Mock.mock(/\/test\/log/, 'get', (req, res) => {
  const data = Mock.mock({
    'code': 0,
    'msg': 'success',
    'data|1-10': [{
      'name': '@cname',
      'id|+1': 1,
      'age|10-60': 0, // 10-60以内的随机数，0用来确定类型
      'birthday': '@date("yyyy-MM-dd")', // 年月日
      'city': '@city(true)' // 中国城市
    }]
  })
  return data
})
export default Mock

然后，在入口文件 main.js 中引用这个 mock 文件就实现了接口的mock：

// ...
import axios from 'axios'
Vue.prototype.$axios = axios
if (process.env.NODE_ENV === 'development') {
  require('@/data/apiMock')
}
// ...

此时，在 dev server 下，组件中发起 ajax 请求，浏览器的开发者工具中已经抓不到对应的请求，而组件中对请求的调用和原来无异：

import { log } from '@/data/api'
export default {
  created () {
    log('csxiaoyao').then(res => {
      console.log(res)
    }).catch(err => {
      console.log('err: ', err)
    })
  }
}

至此，mockjs 的引入大功告成。

3. mockjs 基础语法

Mock.js 提供了丰富的随机数据模拟，非常实用，语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

官方文档有详细的介绍 https://github.com/nuysoft/Mock/wiki，还提供了丰富的样例 http://mockjs.com/examples.html，此处不再赘述。