Mock.js的使用（Vue项目）

原创已于 2022-10-09 11:00:38 修改 · 710 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #npm #node.js

于 2022-08-25 10:33:13 首次发布

本文介绍了Mock.js在Vue项目中的使用，包括安装、配置两种方法。在方法一中，详细说明了在不同场景下的使用步骤。而在方法二中，强调了Mock.js设置的请求地址应与真实请求地址一致，以便于数据的切换。通过在main.js中引入和在需要的地方调用，可以方便地获取和控制Mock数据。

一、安装

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数据？mockjs.com)

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 中定义一个正常的接口

/**
 * 获取收藏列表(真实接口没数据)
 * @param {Number} page - 当前页
 * @param {Number} pageSize - 每页数据条数
 * @param {Number} collectType - 收藏类型，1为商品，2为专题，3为品牌
 * @returns Promise
 */
export const getCollect = ({ page = 1, pageSize = 10, collectType = 1 }) => {
  return request('/member/collect', 'get', { page, pageSize, collectType })
}

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

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