Mock.js的使用（Vue项目）

一、安装

npm install mockjs

二、配置

方法一：

1.1 mockServe.js--配置请求地址和返回的数据

import Mock from mockjs

import banner from ./banner.json    // mock数据
import floor from ./floor.json    // mock数据

Mock.mock(/mock/banner, { code: 200, data: banner })
Mock.mock(/mock/floor, { code: 200, data: floor })

1.2 在 main.js 中使用

// 引入mockServe.js
import @/mock/mockServe

2.1 mock.js--重新封装Axios，因为baseURL不同了

// 模拟数据库mock

// 对axios进行配置(二次封装)
import axios from axios

const mockRequestor = axios.create({
    // 配置对象
    baseURL: /mock,
    timeout: 5000
})

// 请求拦截器
mockRequestor.interceptors.request.use((config) => {
    return config
})

// 响应拦截器
mockRequestor.interceptors.response.use((res) => {
    return res.data
}, (err) => {
    return new Error(err)
})



export default mockRequestor

2.2 在 api/index.js 中使用 mockRequestor

import mockRequestor from ./mock.js

/*
* mock数据接口1
*/
export const reqBannerList = () => {
    return mockRequestor({
        method: GET,
        url: /banner    // 对应配置mockServe时的URL，请求URL=baseRUL+url
    })
}

/*
* mock数据接口2
*/
export const reqFloorList = () => {
    return mockRequestor({
        method: GET,
        url: /floor    // 对应配置mockServe时的URL，请求URL=baseRUL+url
    })
}

方法二：

Mock.js设置的请求mock数据的请求地址，为了后续修改方便，请求地址应该与真实的请求地址保持一致，不需要重写axios，使用原来封装好的请求真实接口的axios，当请求的地址是mock数据的地址，Mock.js自动拦截，返回mock数据(如何mock数据？)

1.1 mock.js--配置mock数据请求地址、模拟数据

// 1.引入
// 2.配置选项
// 3.配置模拟接口
// 4.在main.js中使用
// 5.当真实接口可用时，在main.js中注释掉 import @/mock 即可

import Mock from mockjs

// qs：nodejs自带，不用安装，直接引入
import qs from qs

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

// 拦截请求
// Mock.mock(p1,p2,p3)
// p1: 要模拟(拦截)的接口，可以是正则，与真实接口保持一致
// p2: 请求方式
// p3: 返回的数据(写成函数，处理逻辑后返回数据)

Mock.mock(//member/collect/, get, (config) => {
  // config:请求时，前端携带的请求参数
  // console.log(config);

  // 将query参数(String)转换成对象(Object)

  // 拿到query参数
  const queryString = config.url.split(?)[1]
  // 转换
  const queryObject = qs.parse(queryString)
  // console.log(queryObject);

  const items = []

  for (let i = 0; i < parseInt(queryObject.pageSize); i++) {
    items.push(Mock.mock({
      id: @id,
      name: @ctitle(10,20),
      desc: @ctitle(4,10),
      price: @float(100,200,2,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: parseInt(queryObject.pageSize),
      page: parseInt(queryObject.page),
      items
    }
  }
})

1.2 在 main.js 中引入使用

// mockjs
import @/mock

2.1 需要在 api/index.js 中定义一个正常的接口

2.2 在需要的地方中直接使用 getCollect() 返回的就是mock数据；

2.3 若真实接口有数据了，在main.js中注释掉 import @/mock 即可