mockjs
可以模拟可更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度。
模拟数据有一定的规则请参考: http://mockjs.com/
1.模拟一个我的收藏列表的接口
定义API接口函数
准备mock的接口拦截
获取数据API函数
- API函数
src/api/index.js
import request from '@/utils/request'
/**
* 获取收藏分页数据
* @param {Integer} collectType - 收藏类型,1为商品,2为专题,3为品牌
* @returns
*/
export const findCollect = ({ page = 1, pageSize = 10, collectType = 1 }) => {
return request('/member/collect', 'get', { page, pageSize, collectType })
}
- mock拦截
去main.js引入mock
// 引用mock
import './mock'
src\mock\index.js
import qs from 'qs' //node里的qs模块,是可以用来将字符串解析和序列化字符串的库。node提供的,webpack又运行在node上 所以不用下载,直接引用
src\mock\index.js
import Mock from 'mockjs'
import qs from 'qs'// node提供的,webpack又运行在node上 所以不用下载
// mock的配置
Mock.setup({
// 随机延时500-1000毫秒,模拟网络延时
timeout: '500-1000'
})
// 模拟 我的收藏 后端接口
Mock.mock(/\/member\/collect/, 'get', (config) => {
// config前端传来的参数,里面有
// body:params post请求时候前端传的参数
// type:请求方式
// url:请求地址上面带参数,解析出前端传来的参数 需要用到node提供的一个包 qs
const queryStr = config.url.split('?')[1] // 以?分割 取出第二项目 也就是 ?后的参数,类似name=lisa&age=18&height=180
const queryObj = qs.parse(queryStr) // 转换成对象,{ name: 'lisa', age: '18', height: '180' }
const items = []
for (let i = 0; i < queryObj.pageSize; i++) {
items.push(Mock.mock({
id: '@id',
name: '@ctitle(10,20)', // 10-20之间的中文
desc: '@ctitle(4,10)',
price: '@float(100,200,2,2)', // ( min, max, dmin, dmax ) 最小大几位
// http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg 有8张图片 只是数不同
picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`
}))
}
return { // 这些数据给前端返回去
counts: 35,
pageSize: +queryObj.pageSize, // 前端传来的
page: +queryObj.pageSize, // 前端传来的
items
}
})
// 模拟调用 我的收藏接口
const collectGoods = ref(null)
getCollect({ page: 1, pageSize: 4 }).then(data => {
console.log(data)
})