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

原创

CS逍遥剑仙

发布于 2019-11-01 16:56:40

4.2K1

文章被收录于专栏：禅林阆苑禅林阆苑

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

[toc]

Write By CS逍遥剑仙我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com

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 的引入大功告成。