首页 > 其他分享 >mockjs 前端写完 给后台调 mock.js

mockjs 前端写完 给后台调 mock.js

时间:2023-03-26 11:32:56浏览次数:38  
标签:info console js mock rurl mockjs Mock

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

1 安装mockjs

npm install mockjs

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

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

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

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

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

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

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

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

5 template 动态参数帮助文档

http://mockjs.com/examples.html

6 设置延时

Mock.setup({ timeout: 1000 })

7 @/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
  })
}

问题记录

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

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

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

---------------------------------------------
生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。
↑面的话,越看越不痛快,应该这么说:

生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!

新博客 https://www.VuejsDev.com 用于梳理知识点



标签:info,console,js,mock,rurl,mockjs,Mock
From: https://blog.51cto.com/u_15770151/6149999

相关文章