mock数据(模拟数据)

原创已于 2022-02-14 13:52:16 修改 · 4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#mock

于 2021-08-28 15:33:57 首次发布

vue项目专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用MockJS创建模拟数据，并拦截axios请求，以实现快速获取真实感的数据，保持业务流程完整性。通过配置src/mock/index.js，设置src/main.js，可以模拟特定接口如/my/test并生成随机数据。

目的：mockjs基本使用

在这里插入图片描述
mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。当然模拟数据有一定的规则请参考： http://mockjs.com/
mock.js官网

目标：模拟 /my/test 接口，随机返回点数据。

1. 基本使用步骤：

安装
npm i mockjs
或
yarn add 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)'
})

具体规则：http://mockjs.com/examples.html

简单使用

mock/index.js

import Mock, { Random } from 'mockjs'
// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {
  return {
    msg: '请求测试接口成功',
    result: [
      {
        id: Random.id(),
        name: Random.ctitle(2, 9),
        picture: Random.image(200 * 200),
        desc: Random.ctitle(6, 15),
        price: Random.float(60, 1000, 2, 2)
      }
    ]
  }
})

index.js

// 测试用的代码
    axios({ url: '/my/test', method: 'get' }).then(res => {
      console.log(res)
    })

在这里插入图片描述

项目中使用

// 模拟：获取收藏接口 - 参数字段按接口文档来定义
Mock.mock(/\/member\/collect/, 'get', ({ url }) => {
  const queryStr = url.split('?')[1]
  console.log(queryStr)
  const { page, pageSize } = qs.parse(queryStr)
  //   console.log(queryObj)
  return Mock.mock({
    msg: '操作成功',
    result: {
      counts: 35,
      pages: 4, // 总页数
      pageSize: Number(pageSize), // 页容量
      page: Number(page), // 当前页
      // 数据模板定义
      ['items|' + pageSize]: [{
        id: '@id()',
        name: '@ctitle(10, 15)', // 名称
        description: '@ctitle(12, 20)', // 描述
        picture: '@image(200 * 200)', // 图片
        collectType: '@integer(1, 3)', // 收藏类型，1为商品，2为专题，3为品牌
        price: '@float(60, 1000, 2, 2)', // 商品价格
        discount: '@float(1, 1, 1, 2)', // 折扣信息
        productionPlace: '@province()', // 品牌-产地，多字段通过/分割
        detailsUrl: '@url()' // 详情链接
      }]
    }
  })
})