需求:最近活太忙了,实在是联调没有时间了,无奈又拾起来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 用于梳理知识点