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

 一、什么是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.mfbz.cn/a/237719.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

企业使用APP自动化测试工具的重要因素

企业使用APP自动化测试工具的重要因素

随着移动应用市场的蓬勃发展&#xff0c;企业对高质量、高效率的软件交付提出了更高的要求。在这个背景下&#xff0c;APP自动化测试工具成为了企业不可或缺的一部分。以下是企业采用APP自动化测试工具的关键因素&#xff1a; 1. 快速且可重复的测试执行 自动化测试工具能够快速…
阅读更多...
KUKA机器人如何隐藏程序或程序段？

KUKA机器人如何隐藏程序或程序段？

KUKA机器人如何隐藏程序或程序段？ 如下图所示，新建一个示例程序进行说明， 如下图所示，如果红框中的动作指令不想让别人看到，想隐藏起来，如何做到？ 如下图所示，在想要隐藏的程序或程序段的前后，分别添加 ;fold 和 endfold指令（这里要注意是英文状态下的输入法）， 如…
阅读更多...
基于查表法的水流量算法设计与实现

基于查表法的水流量算法设计与实现

写在前面 本文分享的是一种基于查表法的水流量的算法方案设计与实现&#xff0c;算法简单易懂&#xff0c;主要面向初学者&#xff0c;有两个目的&#xff1a;一是给初学者一些算法设计的思路引导&#xff1b;二是引导初学者学习怎样用C语言编程实现。 一、设计需求 基于“19…
阅读更多...
c/c++ 柔性数组

c/c++ 柔性数组

在C99新增特性中&#xff0c;结构体的 最后一个元素 允许是 未知大小的数组 &#xff0c;这样就叫做柔性数组成员。 struct stu{ int i&#xff1b; char c; int arr[ ]; //未知大小数组&#xff0c;并且是整个结构体最后一个成员 } 这个时候结构体所占字节空间是多少&#xf…
阅读更多...
FPGA高端项目：UltraScale GTH + SDI 视频解码，SDI转DP输出，提供2套工程源码和技术支持

FPGA高端项目：UltraScale GTH + SDI 视频解码，SDI转DP输出，提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图3G-SDI摄像头LMH0384均衡EQUltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale…
阅读更多...
人工智能的技术演进与未来趋势

人工智能的技术演进与未来趋势

人工智能的技术演进与未来趋势 一、引言 人工智能&#xff08;AI&#xff09;已经成为当今科技领域的热门话题&#xff0c;其在各个行业的应用越来越广泛。从智能语音助手到自动驾驶汽车&#xff0c;从智能家居系统到医疗诊断&#xff0c;AI技术已经深入到我们的日常生活。在…
阅读更多...
Arrays.asList() 和 Collections.singletonList()

Arrays.asList() 和 Collections.singletonList()

Arrays.asList() 和 Collections.singletonList() 概述 List 是我们使用Java时常用的集合类型。众所周知&#xff0c;我们可以轻松地在一行中初始化列表。例如&#xff0c;当我们想要初始化一个只有一个元素的List时&#xff0c;我们可以使用Arrays.asList&#xff08;&#…
阅读更多...
Spring 的缓存机制【记录】

Spring 的缓存机制【记录】

一、背景 在最近的业务需求开发过程中遇到了“传说中”的循环依赖问题&#xff0c;在之前学习Spring的时候经常会看到Spring是如何解决循环依赖问题的&#xff0c;所谓循环依赖即形成了一个环状的依赖关系&#xff0c;这个环中的某一个点产生不稳定变化都会导致整个链路产生不…
阅读更多...
6_CSS布局之浮动的应用

6_CSS布局之浮动的应用

day06_CSS布局之浮动的应用 本课目标&#xff08;Objective&#xff09; 理解什么是浮动掌握浮动的三种机制掌握浮动的案例应用 1 CSS 布局的三种机制 CSS 提供了 3 种机制来设置盒子的摆放位置&#xff0c;分别是普通流&#xff08;标准流&#xff09;、浮动和定位。 普通流…
阅读更多...
MySQL 教程 2.1.1

MySQL 教程 2.1.1

MySQL 插入数据 MySQL 表中使用 INSERT INTO 语句来插入数据。 你可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者通过PHP脚本来插入数据。 语法 以下为向MySQL数据表插入数据通用的 INSERT INTO SQL语法&#xff1a; INSERT INTO table_name (colu…
阅读更多...
110. 平衡二叉树（Java）

110. 平衡二叉树（Java）

给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;t…
阅读更多...
基于conda环境使用mamba/conda安装配置QIIME 2 2023.9 Amplicon扩增子分析环境，q2cli主要功能模块介绍及使用

基于conda环境使用mamba/conda安装配置QIIME 2 2023.9 Amplicon扩增子分析环境，q2cli主要功能模块介绍及使用

QIIME 2 2023.9 Amplicon Distribution介绍&#xff1a; 概述 qiime团队专门针对高通量扩增子序列分析退出的conda集成环境&#xff0c;包括了主要和常见的扩增子分析模块&#xff0c;用户可以单独使用各个模块&#xff0c;也可以使用各模块组成不同的分析流程。从2023.09版本…
阅读更多...
Linux——Web网站服务（二）

Linux——Web网站服务（二）

一、httpd服务的访问控制 1、客户机地址限制 通过Require配置项&#xff0c;可以根据主机的主机名或P地址来决定是否允许客户端访问。在 httpd服务器的主配置文件的<Location>&#xff0c;<Directory>、<Files>、<Limit>配置段中均可以使用Require配置…
阅读更多...
MQ-Det: Multi-modal Queried Object Detection in the Wild

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章&#xff1a;https://arxiv.org/abs/2305.18980 代码&#xff1a;https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det&#xff0c;一种高效的架构和预训练策略&#xff0c;它利用文本描述的…
阅读更多...
【LeetCode刷题-树】-- 103.二叉树的锯齿形层序遍历

【LeetCode刷题-树】-- 103.二叉树的锯齿形层序遍历

103.二叉树的锯齿形层序遍历 方法&#xff1a;广度优先搜索 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int …
阅读更多...
单片机(STM32,GD32,NXP等)中BootLoader的严谨实现详解

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

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

​pathlib --- 面向对象的文件系统路径​

3.4 新版功能. 源代码 Lib/pathlib.py 该模块提供表示文件系统路径的类&#xff0c;其语义适用于不同的操作系统。路径类被分为提供纯计算操作而没有 I/O 的 纯路径&#xff0c;以及从纯路径继承而来但提供 I/O 操作的 具体路径。 如果以前从未用过此模块&#xff0c;或不确定…
阅读更多...
07.仿简道云公式函数实战-逻辑函数-AND

07.仿简道云公式函数实战-逻辑函数-AND

1.AND函数 AND 函数可用于表示&#xff1a;当所有参数逻辑值为 true 时&#xff0c;返回 true&#xff1b;只要有任何一个参数逻辑值为 false&#xff0c;则返回false。 2. 函数用法 AND(语文成绩>90,数学成绩>90,英语成绩>90) 3.函数示例 1&#xff09;AND(A,B)&a…
阅读更多...
Ruff智慧路灯方案让城市管理更智慧，物联网助力城市数智化运营

Ruff智慧路灯方案让城市管理更智慧，物联网助力城市数智化运营

随着5G、物联网、人工智能等新一代信息技术的发展&#xff0c;路灯管理也被赋予了更多可能&#xff0c;路灯已经从简单的照明工具逐步成为智慧城市发展的新入口。 据了解&#xff0c;当前我国路灯照明耗电量约占总量的15%。传统路灯存在耗能大、设备故障无法定位、路灯状态难以…
阅读更多...
安装LLaMA-Factory微调chatglm3，修改自我认知

安装LLaMA-Factory微调chatglm3，修改自我认知

安装git clone https://github.com/hiyouga/LLaMA-Factory.git conda create -n llama_factory python3.10 conda activate llama_factory cd LLaMA-Factory pip install -r requirements.txt 之后运行 CUDA_VISIBLE_DEVICES0 python src/train_web.py&#xff0c;按如下配置…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站