mockjs的功能:1.生成随机数;2.拦截 Ajax 请求
npm install mockjs
1.生成随机数
// 导入 Mock
import Mock from 'mockjs'
// 调用方法得到随机数据
const data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
`list|1-10`: [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})
// 将数据进行打印
console.log(JSON.stringify(data, null, 4))
// ==>
{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
JSON.stringify() 方法将 JavaScript 对象转换为字符串。
JSON.stringify(value[, replacer[, space]])
value:
必需, 要转换的 JavaScript 值(通常为对象或数组)。replacer:
可选。用于转换结果的函数或数组。如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
space:
可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。
2.拦截 Ajax 请求
当前端的静态页面铺设完成,而后端的接口还没有写好时,可以询问后端返回数据的格式,使用 mockjs 来模拟后端接口的调用
Mock.mock()拦截 Ajax 请求的三个参数:
第一个参数:要拦截的请求路径
第二个参数:要拦截的请求方式
第一个参数:拦截后的处理逻辑
// mock/index.js
import Mock from 'mockjs'
import mockServer from './mockServer'
/* 接口里的地址 请求方式 mock中对应的返回 */
/* 入库单列表 */
Mock.mock(/\/instock\/test/, 'post', mockServer.getInstockList)
// mock/mockServer.js
const list = {
"code": 10000,
"data": [
{
"num": "2000042812034758000007",
"createTime": "2022-08-28 17:18:14",
},
{
"num": "2000042812034758000008",
"createTime": "2022-08-28 17:18:14",
}
],
"msg": "success"
}
export default {
/* 入库单列表 */
getInstockList: () => {
return {
total: list.length,
data: list
}
}
}
//main.js
import '@/mock/index.js'
/* 封装mock接口 然后正常使用 */
export const instockListb= (data) => (
service({
url: '/instock/test',
method: 'post',
data,
})
)