mockjs的基本使用和演示案例

李公子丶

已于 2022-02-12 16:58:35 修改

阅读量1.9k

点赞数 1

分类专栏：项目中的小知识

于 2022-02-12 16:57:58 首次发布

本文链接：https://blog.csdn.net/qq_54527592/article/details/122898108

版权

MockJS 接口模拟 axios 数据生成前端开发

关键词由CSDN通过智能技术生成

项目中的小知识专栏收录该内容

17 篇文章

订阅专栏

MockJS是一个用于模拟数据的库，它可以让你在不依赖后端的情况下，快速开发前端代码。通过配置，MockJS能拦截axios请求，返回预设的模拟数据，保持业务流程完整性。本文介绍了MockJS的基本使用步骤，包括安装、配置、模拟接口和生成随机数据。通过实例展示了如何模拟/my/test接口，返回随机名字的数据。这种方式提高了开发效率，尤其在接口未开发完成时非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是mockjs

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。

当然模拟数据有一定的规则请参考： http://mockjs.com/

基本使用步骤

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

// 在入口文件mian.js中使用mockjs
 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

demo案例模拟接口

下面我们通过模拟 /my/test 接口，随机返回点数据，来学习使用。

首先我们安装mockjs

安装完成后在项目src目录下创建了一个mock目录在目录中创建了一个js文件

在js文件中导入了mockjs并进行相关的配置，配置了需要拦截的请求

// 导入mockjs
import Mock from 'mockjs'

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

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {
  const arr = []
  for (let i = 0; i <= 4; i++) {
    arr.push(Mock.mock({
      // 生成唯一id 和 name
      id: '@id',
      name: '@cname'
    }))
  }
  return { msg: '获取数据成功', result: arr }
})

在main.js中使用

到这里接口就配置完成了，下面我们请求这个接口

    // 向mockjs发起请求
    request('/my/test', 'get').then(res => {
      console.log(res)
    })

在控制台中我们可以看到mock的数据获取成功了