vue模拟接口--mock的基本使用

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。当然模拟数据有一定的规则请参考：mockjs

基本使用步骤：

1. 安装

npm i mockjs

2. 配置 src/mock/index.js

import Mock from 'mockjs'

// mock的配置
Mock.setup({
  // 随机延时500-1000毫秒
  timeout: '500-1000'
})

3. 使用 src/main.js

import 'normalize.css'
import '@/assets/styles/common.less'
+ import './mock'

4. 模拟接口，拦截请求

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(//my/test/, 'get', () => {
  return { msg: '请求测试接口成功', result: [] }
})

5. 生成随机数据

// 单个数据
Mock.mock('@integer(0,7)')
// 对象数据
Mock.mock({
    id: '@id',
    name: '@ctitle(2,4)'
})

具体规则：mockjs.com/examples.ht…

例子： 比如要模拟一个收藏商品的接口数据， 真正后台接口请求参数和返回参数如下：

大致步骤：

• 定义API接口函数
• 准备mock的接口拦截
• 获取数据渲染

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的接口拦截

// 模拟 我的收藏
import qs from 'qs'
Mock.mock(//member/collect/, 'get', config => {
  const queryString = config.url.split('?')[1]  //截取请求的query参数
  const queryObject = qs.parse(queryString)  //转换成对象
  const items = []
  for (let i = 0; i < +queryObject.pageSize; i++) {
    items.push(Mock.mock({
      id: '@id',  //随机id
      name: '@ctitle(10,20)', //随机文字 10-20个字
      desc: '@ctitle(4,10)',
      price: '@float(10,200,2,2)',//随机浮点数 10-200之间，2为小数
      // http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg
      picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`
    }))
  }
  return {
    msg: '获取收藏商品成功',
    result: {
      counts: 35,
      pageSize: +queryObject.pageSize,
      page: +queryObject.page,
      items
    }
  }
})

发起请求 xxx.vue

import {findCollect} from 'xxx/index.js'

    // 调用模拟的接口
    const collectGoods = ref([])
    findCollect({
      page: 1,
      pageSize: 4
    }).then(data => {
      collectGoods.value = data.result.items
    })

发起请求后的结果