使用Mockjs模拟（假数据）接口(axios)

news2024/12/22 10:32:26

 一、什么是MockJs

Mock.js官网

Mock.wiki.git 

mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。

 二、安装mockjs

npm install mockjs

三、 MockJs使用

简单使用：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

项目目录如下： 

 

 具体步骤：

【1】新建一个mock文件夹，定义一个index.js文件：

在 src下面创建一个mock目录，创建一个index.js文件，其它模拟的数据都放在和index.js文件同级，遍历所有mock下面的文件然后注册mock服务。

import Mock from 'mockjs'
// //开启mock
// window.EVN_CONFIG.baseApiUrl = "http://127.0.0.1:8080"
// window.EVN_CONFIG.ssoApiUrl = "http://127.0.0.1:8080"
// window.EVN_CONFIG.baseApiRoot = "/api"
// window.EVN_CONFIG.mock = true

// 设置响应延时
Mock.setup({
  // 可以是整数，也可以是‘-’字符串
  timeout: '200-600'
})

// const evnConfig = window.EVN_CONFIG
const evnConfig = {
  baseApiUrl: 'http://127.0.0.1:8080',
  ssoApiUrl: 'http://127.0.0.1:8080',
  baseApiRoot: '',
  // baseApiRoot: '/api',
  mock: true
}
  
let configArray = []

if (evnConfig.mock) {
  // 使用webpack的require.context()遍历所有的mock文件
  const files = require.context('.', true, /\.js$/)
  files.keys().forEach((key) => {
    // console.log("🚀 ~ file: index.js:43 ~ files.keys ~ key:", key)
    if (key === './index.js') return
    // configArray = configArray.concat(files(key).default)
    configArray = configArray.concat(files(key))
    // console.log("🚀 ~ file: index.js:43 ~ files.keys ~ files(key):", files(key))
    // console.log("🚀 ~ file: index.js:43 ~ files.keys ~ files(key).default:", files(key).default)
    // console.log("🚀 ~ file: index.js:43 ~ files.keys ~ configArray:", configArray)
  })

  // 注册所有的mock服务
  configArray.forEach((item) => {
    console.log("🚀 ~ file: index.js:45 ~ configArray.forEach ~ item:", item)
    let url = evnConfig.baseApiUrl
    url += item.url
    /**
     * RegExp(url + '.*') 使用正则匹配URL
     * item.method 请求的方法 POST/GET/PUT/DELETE
     * (options) => {} 返回的函数
     * options 可以获取到 body, type, url
     */
    Mock.mock(RegExp(url + '.*'), item.method, (options) => {
      console.debug(url, options)
      return Mock.mock(item.response)
    })
  })
}

【2】在main.js文件内引入：

import './mock/index'

【3】新建页面的mockjs文件，如tableLinkage.js：

const Mock = require('mockjs')
// 对表格数据分页
const getSelectList = (data, pageNum, pageSize) => {
  const start = Math.ceil(((pageNum - 1) * pageSize).toFixed(0)),
        end = Math.ceil((start + pageSize).toFixed(2))
  const list = data.slice(start >= 0 ? start : 0, end)
  return list
}
Mock.mobile_prefix = [
  "134",
  "135",
  "136",
  "137",
  "138",
  "139",
  "150",
  "151",
  "152",
  "157",
  "158",
  "159",
  "130",
  "131",
  "132",
  "155",
  "156",
  "133",
  "153"
]
Mock.bank_prefix = [
  "4367",
  "6227",
  "6228",
  "9559",
  "6222",
  "9558",
  "6216",
  "4563",
  "6013",
  "6221",
  "6210",
  "6014",
  "5218",
  "6282",
  "3568",
  "6226",
  "4218",
  "6229",
  "4864",
  "6029",
  "9988"
]
Mock.numeric = "0123456789"
Mock.random = (len, list) => {
  if (len <= 1) {
    len = 1
  }
  var s = ""
  var n = list.length
  if (typeof list === "string") {
    while (len-- > 0) {
      s += list.charAt(Math.random() * n)
    }
  } else if (list instanceof Array) {
    while (len-- > 0) {
      s += list[Math.floor(Math.random() * n)]
    }
  }
  return s
}
Mock.getMobile = () => {
  return Mock.random(1, Mock.mobile_prefix) + Mock.random(8, Mock.numeric)
}
Mock.getBank = () => {
  return Mock.random(1, Mock.bank_prefix) + Mock.random(15, Mock.numeric)
}
const Random = Mock.Random
const tableLinkageData = Mock.mock({
    //输出数据
    //还可以自定义其他数据
    // code: 200,
    // msg: '操作成功',
    // total: 75,
    "data|75": [{
      // 'id': "@increment",
      'id|+1': 1,
      'bankAccountId': '@id()',
      'companyCode|+1': 1,
      // 'companyName': `公司${'@increment(1)'}`,
      'accountType|1': ['1', '2'],
      // 'accountTypeDesc|1': ['银行帐号', '虚拟子户'],
      'no': '@string(3,50)', // 生成3-50位的保养合同号
      'subBranch': Random.cword(2,4)+'银行',
      'cardNum': /^([1-9]{1})(\d{14}|\d{18})$/, // 随机生成银行卡卡号
      // 'cardNum': Mock.getBank(), // 随机生成银行卡卡号（统一19位）
      'phone': Mock.getMobile(), // 手机号
      // 'phone': /^1[358][1-9]\d{8}/,
      'name': `${Random.first()} ${Random.last()}`, // 人员姓名
      'groups': Random.integer(), // 组织编号
      'groupNames': `${Random.first()} ${Random.last()}`, // 组织名称
      // 'idCard': Random.integer(), // 身份证
      'desc': Random.cparagraph(),
      'avatar': Random.image('250x250', Random.color()),
      'qrCode': Random.image('720x300', Random.color(), 'bg-img'), //二维码
      'address': Random.city(true),
      'status|1': ['0', '1'],
      'type|1': ['0', '1'],
      // 'statusDesc|1': ['启用', '禁用'],
      'jobType|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
      'preview': Random.ctitle(3, 5),
      'email': '@email',
      'remark': "@csentence(50)",
      'createdBy': "@cname()",
      'createdAt': "@date(yyyy-MM-dd)",
      'updatedBy': "@cname()",
      'updatedAt': "@date(yyyy-MM-dd hh:mm:ss)",
    }]
})

Mock.mock('/vue-table-list/tableLinkage/list', 'post', (option) => {
  // console.log("🚀 ~ file: tableLinkage.js:66 ~ Mock.mock ~ option:", option)
  const params = JSON.parse(option.body)
  const paramsKeyArr = Object.keys(params)
  // console.log("🚀 ~ file: tableLinkage.js:47 ~ Mock.mock ~ paramsKeyArr:", paramsKeyArr)
  // console.log("🚀 ~ file: tableLinkage.js:46 ~ Mock.mock ~ params:", params)
  // console.log("🚀 ~ file: tableLinkage.js:140 ~ queryList ~ tableLinkageData:", tableLinkageData)
  const paramsMap = {
    'companyCodeList': 'companyCode'
  }
  const multipleArr = tableLinkageData.data.filter(item => {
    let key = 'companyCodeList'
    if (params[key].length === 0) {
      return true
    } else {
      let flag = false
      params[key].map(value => {
        if (value && (item[paramsMap[key]] + '') === (value + '')) {
          flag = true
        }
      })
      return flag
    }
  })
  // console.log("🚀 ~ file: tableLinkage.js:149 ~ multipleArr ~ multipleArr:", multipleArr)
  const queryList = multipleArr.filter(item => {
    // const queryList = tableLinkageData.data.filter(item => {
    let flag = true
    paramsKeyArr.map(key => {
      if (key !== 'companyCodeList') {
        if (params[key] && item[key]?.indexOf(params[key]) === -1) {
          flag = false
        }
      }
    })
    return flag
  })
  // console.log("🚀 ~ file: tableLinkage.js:61 ~ queryList ~ queryList:", queryList)
  const list = getSelectList(queryList, params.pageNum, params.pageSize)
  // console.log("🚀 ~ file: tableLinkage.js:48 ~ Mock.mock ~ list:", list)
  return {
    code: 200,
    msg: '操作成功',
    total: tableLinkageData.data.length,
    data: null,
    rows: [...list]
  }
})

可配合axios，封装使用，具体见这篇文章：简单封装axios(可配合mockjs使用)对请求方法进行二次封装-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1303525.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java SPI机制学习

Java SPI机制学习

最近阅读源码时看到了SPI加载类的方式 这里学习一下 SPI Service Provider Interface 服务提供接口 API和SPI区别 API是接口和实现类均有服务提供方负责 服务调用方更多是一种主动调用 只是调用SDK来实现某个功能&#xff1b;接口的归属权在于服务提供方 SPI是接口在调用方…
阅读更多...
【UE5】监控摄像头效果（下）

【UE5】监控摄像头效果（下）

目录 效果 步骤 一、多摄像机视角切换 二、摄像头自动旋转巡视 三、摄像头跟踪拍摄 效果 步骤 一、多摄像机视角切换 1. 打开玩家控制器“MyPlayerController”&#xff0c;添加一个变量&#xff0c;命名为“BP_SecurityCameraArray”&#xff0c;类型为“BP_SecurityCa…
阅读更多...
【JVM从入门到实战】（二）字节码文件的组成

【JVM从入门到实战】（二）字节码文件的组成

一、Java虚拟机的组成 二、字节码文件的组成 字节码文件的组成 – 应用场景 字节码文件的组成部分-Magic魔数 什么是魔数&#xff1f; Java字节码文件中的魔数 文件是无法通过文件扩展名来确定文件类型的&#xff0c;文件扩展名可以随意修改&#xff0c;不影响文件的内容。…
阅读更多...
新能源汽车生产污废水需要哪些工艺及设备

新能源汽车生产污废水需要哪些工艺及设备

新能源汽车的快速发展带来了许多环境问题&#xff0c;其中之一就是生产过程中产生的污废水。由于新能源汽车的生产过程与传统汽车有所不同&#xff0c;因此需要采用特定的工艺和设备来处理和处理这些废水。 首先&#xff0c;新能源汽车生产过程中产生的污废水主要来自洗涤和冷却…
阅读更多...
[排序篇] 冒泡排序

[排序篇] 冒泡排序

目录 一、概念 二、冒泡排序 2.1 冒泡降序(从大到小排序) 2.2 冒泡升序(从小到大排序) 三、冒泡排序应用 总结 一、概念 冒泡排序核心思想&#xff1a;每次比较两个相邻的元素&#xff0c;如果它们不符合排序规则&#xff08;升序或降序&#xff09;则把它们交换过来。…
阅读更多...
.NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试（准备篇）

.NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试（准备篇）

WebAppDbTest 项目准备 项目准备1、.net cli 创建项目2、nuget 包引用和项目结构2.1、项目添加相关 nuget 包2.2、WebAppDbTest 项目结构 3、项目代码说明3.1、CSharp/C# 类文件说明3.2、json 配置文件说明 4、项目运行预览 数据库 .db 文件准备1、创建 SQLite 数据库1.1、在 W…
阅读更多...
赛宁网安多领域亮相第三届网络空间内生安全发展大会

赛宁网安多领域亮相第三届网络空间内生安全发展大会

2023年12月8日&#xff0c;第三届网络空间内生安全发展大会在宁开幕。两院院士、杰出专家学者和知名企业家相聚南京&#xff0c;围绕数字经济新生态、网络安全新范式进行广泛研讨&#xff0c;为筑牢数字安全底座贡献智慧和力量。 大会围绕“一会、一赛、一展”举办了丰富多彩的…
阅读更多...
【华为数据之道学习笔记】3-11元数据管理

【华为数据之道学习笔记】3-11元数据管理

1. 产生元数据 &#xff08;1&#xff09;明确业务元数据、技术元数据和操作元数据之间的关系&#xff0c;定义华为公司元数据模型。 &#xff08;2&#xff09;针对找数据及获取数据难的痛点&#xff0c;明确业务元数据、技术元数据、操作元数据的设计原则。 1&#xff09;业务…
阅读更多...
虚拟化逻辑架构：KVM虚拟机通过OVS端口组实现网络连接

虚拟化逻辑架构：KVM虚拟机通过OVS端口组实现网络连接

目录 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包&#xff09; 2.KVM虚拟机通过OVS端口组实现网络连接 二、问题 1.安装openvswitch-2.5.10报错 2.virt-install未找到命令 3.如何删除自定义网络 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包&#xff…
阅读更多...
蓝桥杯周赛 第 1 场 强者挑战赛 6. 小球碰撞【算法赛】(思维题/最长上升子序列LIS)

蓝桥杯周赛 第 1 场 强者挑战赛 6. 小球碰撞【算法赛】(思维题/最长上升子序列LIS)

题目 https://www.lanqiao.cn/problems/9494/learning/?contest_id153 思路来源 Aging代码 题解 二分时间t&#xff0c;第i个小球对应一个起点pi、终点pit*vi的区间&#xff0c;问题转化为&#xff0c; 选最多的区间&#xff0c;使得不存在区间包含&#xff08;即li<l…
阅读更多...
不同路径dp问题

不同路径dp问题

1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 从上往下填写每一行 每一行从左往右 5.返回值 dp[m][n] ------------------------------------------------------------------------------------------------------------------------------ 1.状态表示 2.状态转移方程 3…
阅读更多...
每日一题，头歌平台c语言题目

每日一题，头歌平台c语言题目

任务描述 题目描述:输入一个字符串&#xff0c;输出反序后的字符串。 相关知识&#xff08;略&#xff09; 编程要求 请仔细阅读右侧代码&#xff0c;结合相关知识&#xff0c;在Begin-End区域内进行代码补充。 输入 一行字符 输出 逆序后的字符串 测试说明 样例输入&…
阅读更多...
DevOps：自动化、持续交付和持续集成实践

DevOps：自动化、持续交付和持续集成实践

DevOps&#xff1a;自动化、持续交付和持续集成实践 一、DevOps 简介1.1 DevOps 模式定义1.2 DevOps 的工作原理1.3 DevOps 的优势1.4 DevOps 的意义1.5 DevOps 最佳实践 二、持续集成简介2.1 持续集成的意义2.2 持续集成的工作原理2.3 持续集成的优势 三、持续交付简介3.1 持续…
阅读更多...
解决夜神模拟器与Android studio自动断开的问题

解决夜神模拟器与Android studio自动断开的问题

原因&#xff1a;夜神模拟器的adb版本和Android sdk的adb版本不一致 解决办法&#xff1a; 1.找到android的sdk &#xff08;1&#xff09;File--->Project Structure (2)SDK Location:记下sdk的位置 2.找到sdk中的adb文件 SDK-->platform-tools-->adb.exe 3.复制…
阅读更多...
单片机(STM32,GD32,NXP等)中BootLoader的严谨实现详解

单片机(STM32,GD32,NXP等)中BootLoader的严谨实现详解

Bootloader(引导加载程序)的主要任务是引导加载并运行应用程序&#xff0c;我们的软件升级逻辑也一般在BootLoader中实现。本文将详细介绍BootLoader在单片机中的实现&#xff0c;包括STM32、GD32、NXP Kinetis等等的所有单片机&#xff0c;因为无论是什么样的芯片&#xff0c;…
阅读更多...
大模型应用_ChatGPT-Next-Web

大模型应用_ChatGPT-Next-Web

1 用后感 这个工具&#xff0c;我也是用了好长时间&#xff0c;就是感觉如果不点亮一颗星&#xff0c;自己就不是人了的那种。 一开始在国内用 ChatGPT 非常麻烦&#xff0c;就买了一个套壳的服务&#xff0c;他使用的界面就是 ChatGPT-Next-Web&#xff0c;我和朋友们都觉得这…
阅读更多...
深度学习 Day13——P2彩色图片分类

深度学习 Day13——P2彩色图片分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…
阅读更多...
基于JavaWeb+BS架构+SpringBoot+Vue图书个性化推荐系统的设计和实现

基于JavaWeb+BS架构+SpringBoot+Vue图书个性化推荐系统的设计和实现

基于JavaWebSpringBootVue图书个性化推荐系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图 源码获取入口 Lun文目录 目 录 摘 要 I 1 绪论 1 1.1研究背景 1 1.2研究现状 1 1.3研究内容 2 2 系统关键技术 3 2.1 Spring Boot框架 3 2.2 JAVA技术 3 2.3 MY…
阅读更多...
实现安装“自由化”！在Windows 11中如何绕过“您尝试安装的应用程序未通过微软验证”

实现安装“自由化”！在Windows 11中如何绕过“您尝试安装的应用程序未通过微软验证”

这篇文章描述了如果你不能安装应用程序，而是当你在Windows 11中看到消息“您尝试安装的应用程序未通过微软验证”时该怎么办。完成这些步骤将取消你安装的应用程序必须经过Microsoft验证的要求。 使用设置应用程序 “设置”应用程序提供了绕过此警告消息的最简单方法，以便你…
阅读更多...
051：vue项目webpack打包后查看各个文件大小

051：vue项目webpack打包后查看各个文件大小

第050个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023