【前端】vue项目中mock数据

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

【前端】vue项目中mock数据

猜你喜欢