mockjs 前端写完 给后台调 mock.js | 改到2.0版本

需求：最近活太忙了，实在是联调没有时间了，无奈又拾起来mockjs

1|01 安装mockjs

npm install mockjs

// 这是个只在开发的时候用，打包后就没有了，业务更安全
npm install mockjs --save-dev

2|02 main.js 自动配置导入mock文件

// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== 'production') require('@/mock/mock.js')

3|03 mock目录为 @/mock/mock.js

这样写 ctrl+p 直接搜 mock.js就定位到文件了

4|04 mock的灵魂函数 Mock.mock()

帮助文档
https://github.com/nuysoft/Mock/wiki/Mock.mock()

函数就用这一个 完活
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

5|05 template 动态参数帮助文档

http://mockjs.com/examples.html

6|06 设置延时

Mock.setup({ timeout: 1000 })

7|07 @/mock/mock.js 文件代码

@/mock/mock.js

import mock from './mockUtils'
import {
  gbsCommunicationTempList
} from './mockList'

let useAllMock = true
// 下面一行 取消注释 后将不使用mock 开发时候临时使用
// useAllMock = false
if (useAllMock) {
  mock('/api/gbs/communicationTemp/list', gbsCommunicationTempList)
  console.info('mock is running')
}

@/mock/mockUtils.js

import Mock from 'mockjs'
Mock.setup({ timeout: 200 })

const mock = (url, func) => {
  const rurl = new RegExp(url.replace(/\//g, '\\/'))
  // console.info('rurl', rurl)
  Mock.mock(rurl, req => {
    console.info('-')
    console.info('-')
    console.info('-==============================')
    console.info('api url: ', req.url)
    console.info('api params: ', req.body)
    const data = func(req)

    const res = {
      ...data, // 返回 data节点 格式必须是 { data: 对象/数组 }
      msg: '',
      status: 20,
    }
    console.info('res => ', res)
    return res
  })
}
export default mock

@/mock/mockList.js

import Mock from 'mockjs'

export const gbsCommunicationTempList = req => {
  return Mock.mock({
    'data|10': [{
      yourKey: 'yourContent',
      ...otherNodes
  })
}

8|0问题记录

早期库的版本是 "mockjs": "^1.0.1-beta3",
url拦截得用 正则 mock(/api/gbs/abc/list/, aaa)
看了个别人的用 或 也很好

'post|/demo': {
    'name': '@cname'
}

更新下库 看看能改成字符串吗
"mockjs": "^1.1.0", 从新安装完 版本改成这个了
两个版本库 都是用的 rurl，所以又恢复成老库了

9|0mock 2.0 版本

全局安装 mockjs npm install mockjs
mock数据放在业务目录下 mockData.js
接口调用的时候 this.$api(url, params, { mockData }).then(res => {})
全局 通过 window.isUseMock = true false 控制全局是否开启
if (process.env.NODE_ENV === 'development') window.isUseMock = true

export const api = (url, data, config = {}) => {
  const { type = undefined, mockData = null } = config
  if (mockData !== null && window.isUseMock) {
    console.info('- + + -')
    console.info('---- mock 请求 ----')
    console.info('url: ', url)
    console.info('params: ', { ...data })
    console.info('res: ', mockData)
    return new Promise(function (resolve, reject) {
      resolve(mockData)
    })
  }

__EOF__

本文作者：Reciter
本文链接：https://www.cnblogs.com/pengchenggang/p/17108827.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！