使用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.baseApiUrlurl += 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.lengthif (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 = falseparams[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 = trueparamsKeyArr.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.mzph.cn/news/215747.shtml

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

相关文章

JFrog----常见的开源协议以及应用注意点

JFrog----常见的开源协议以及应用注意点

文章目录 1. MIT 许可证2. GPL&#xff08;通用公共许可证&#xff09;3. LGPL&#xff08;较宽松的通用公共许可证&#xff09;4. Apache 许可证 2.05. BSD 许可证开源协议的选择和注意点结论 开源软件近年来在软件开发中变得越来越流行。使用开源软件可以节省时间和资源&…
阅读更多...
Unity优化——加速物理引擎1

Unity优化——加速物理引擎1

大家好&#xff0c;这里是七七&#xff0c;今天开始更新物理引擎相关的优化部分了&#xff0c;本文介绍的是物理引擎内部工作情况。 Unity技术有两种不同的物理引擎&#xff1a;用于3D物理的Nvidia的PhysX和用于2D物理的开源项目Box2D。然而&#xff0c;Unity对它们的实现是高…
阅读更多...
Nginx rewrite 参数

Nginx rewrite 参数

目录 常用的Nginx 正则表达式 rewrite 和 location的区别 location location 大致分三类&#xff1a; location 常用的匹配规则&#xff1a; location 优先级&#xff1a; rewrite rewrite跳转实现 rewrite 执行顺序如下 语法格式 flag标记说明 rewrite实际操作 基…
阅读更多...
【虹科干货】使用Netropy广域网模拟器测试简化SD-WAN测试

【虹科干货】使用Netropy广域网模拟器测试简化SD-WAN测试

文章速览&#xff1a; 为什么需要WAN模拟器&#xff1f;什么是WAN模拟器&#xff1f;用WAN模拟器测试SD-WANSD-WAN损伤测试 现如今大家都在使用SD-WAN产品节省网络成本&#xff0c;但是也面临着一些复杂的算发问题&#xff0c;那么如何简化SD-WAN系统的测试和评估&#xff1f;…
阅读更多...
Ubuntu部署EMQX开源版MQTT服务器-Orange Pi部署-服务器部署

Ubuntu部署EMQX开源版MQTT服务器-Orange Pi部署-服务器部署

一、前言 作为全球最具扩展性的 MQTT 消息服务器&#xff0c;EMQX 提供了高效可靠海量物联网设备连接&#xff0c;能够高性能实时移动与处理消息和事件流数据&#xff0c;本文将介绍如何在Ubuntu 22.04上部署MQTT服务器。我们本次选择开源版&#xff0c;使用离线安装方式部署。…
阅读更多...
总结6种@Transactional注解的失效场景

总结6种@Transactional注解的失效场景

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 引言 昨天有粉丝咨询了…
阅读更多...
超卓航科引领冷喷涂增材制造革新，推动先进核反应堆发展

超卓航科引领冷喷涂增材制造革新，推动先进核反应堆发展

近日&#xff0c;超卓航科凭借其卓越的冷喷涂增材制造技术&#xff0c;成为推动核能领域创新的重要力量。该公司利用冷喷涂工程技术&#xff0c;或为核反应堆的制造和修复开辟了全新的道路。 冷喷涂技术是一种颇具前景的固态粉末沉积方法&#xff0c;可用于涂层制造、增材制造和…
阅读更多...
GNSS - PPP软件 - GAMP 在VS2019/2022下完成调试、跑通程序（超详细！）

GNSS - PPP软件 - GAMP 在VS2019/2022下完成调试、跑通程序（超详细！）

目录 一、前期准备 二、调试详细步骤 1.VS中新建项目 2.复制源码至项目文件夹 3.将源码中“.c”文件和“.h”文件添加至项目指定位置 4.修改项目属性&#xff1a; (1)【 配置属性 -> C/C ->预处理器 ->预处理器定义】添加如下 (2)【配置属性->链接器->调…
阅读更多...
《C++ Primer》第12章 动态内存（二）

《C++ Primer》第12章 动态内存（二）

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 12.1.5 unique_ptr&#xff08;P417&#xff09; unique “拥有”它所指向的对象&#xff0c;某个时刻只能有一个 unique_ptr 指向一个给定对象。 当我们定义一个 unique_ptr 时&#xff0c;需要将其绑定到…
阅读更多...
游戏中小地图的制作__unity基础开发教程

游戏中小地图的制作__unity基础开发教程

小地图的制作 Icon标识制作制作摄像机映射创建地图UI效果“不一样的效果” 在游戏中经常可以看到地图视角的存在&#xff0c;那么地图视角是如何让实现的呢&#xff1f; 这一期教大家制作一个简易的小地图。 &#x1f496;点关注&#xff0c;不迷路。 老样子&#xff0c;我们还…
阅读更多...
Leetcode 131 分割回文串

Leetcode 131 分割回文串

题意理解&#xff1a; 分割回文子串&#xff0c;可以看作是划分连续的字幕组合——所以也可以用回溯的方法来解决 每个位置选与不选——该位置切割|不切割 对于每一段子串——>判断是否是回文串&#xff1a; 是&#xff1a; 继续切割 不是&#xff1a; 剪枝 解题方法…
阅读更多...
Ubuntu Destktop 22.04 设置 ssh 超时时间

Ubuntu Destktop 22.04 设置 ssh 超时时间

Ubuntu Destktop 22.04 使用 ssh 连接服务器时&#xff0c;发现一段时间不操作就会自动断开连接&#xff0c;解决方法如下&#xff1a; 打开 /etc/ssh/ssh_config 文件&#xff1a; sudo vim /etc/ssh/ssh_config在文件最后添加&#xff1a; # ssh 客户端会每隔 30 秒发送一…
阅读更多...
在线免费制作各种证件照，有需要的收藏

在线免费制作各种证件照，有需要的收藏

现在很多场合都需要一寸证件照&#xff0c;比如办理身份证、出国签证等。以往&#xff0c;我们都需要到专门的照相馆拍摄&#xff0c;但是现在&#xff0c;有了随时照微信小程序&#xff08;抖音和支付搜索亿鸣证件照哦&#xff09;&#xff0c;你可以足不出户就能够制作一寸证…
阅读更多...
MySQL InnoDB Replication部署方案与实践

MySQL InnoDB Replication部署方案与实践

1. 概述 MySQL Innodb ReplicaSet 是 MySQL 团队在 2020 年推出的一款产品&#xff0c;用来帮助用户快速部署和管理主从复制&#xff0c;在数据库层仍然使用的是主从复制技术。 ReplicaSet 主要包含三个组件&#xff1a;MySQL Router、MySQL Server 以及 MySQL Shell 高级客户…
阅读更多...
12 位多通道国产芯片ACM32F403/F433 系列，支持 MPU 存储保护功能，应用于工业控制，智能家居等产品中

12 位多通道国产芯片ACM32F403/F433 系列，支持 MPU 存储保护功能，应用于工业控制，智能家居等产品中

ACM32F403/F433 芯片的内核基于 ARMv8-M 架构&#xff0c;支持 Cortex-M33 和 Cortex-M4F 指令集。芯片内核 支持一整套DSP指令用于数字信号处理&#xff0c;支持单精度FPU处理浮点数据&#xff0c;同时还支持Memory Protection Unit &#xff08;MPU&#xff09;用于提升应用的…
阅读更多...
PyTorch张量：内存布局

PyTorch张量：内存布局

你可能对 torch 上的某些函数感到困惑&#xff0c;它们执行相同的操作但名称不同。 例如&#xff1a; reshape()、view()、permute()、transpose() 等。 这些函数的做法真的不同吗&#xff1f; 不&#xff01; 但为了理解它&#xff0c;我们首先需要了解一下张量在 pytorch 中…
阅读更多...
1 CPU实现的基本框图

1 CPU实现的基本框图

汇编语言 && 指令格式 CPU设计的框架&#xff1a;三级流水线 ROM存放指令和数据&#xff0c;大端模式&小端模式&#xff0c;地址对齐 取指 译码&#xff1a; 执行&#xff1a; 汇编语言 & 指令格式 流水线实现工作机制 模块功能划分&接口信号 参考…
阅读更多...
strict-origin-when-cross-origin

strict-origin-when-cross-origin

严格限制同源策略 &#xff08;1&#xff09;允许服务器的同源IP地址访问 &#xff08;2&#xff09;允许Referer --- 后端服务器要配置
阅读更多...
linux sed命令删除一行/多行_sed删除第一行/linux删除文件某一行

linux sed命令删除一行/多行_sed删除第一行/linux删除文件某一行

sed系列文章 linux常用命令(9)&#xff1a;sed命令(编辑/替换/删除文本)linux sed命令删除一行/多行_sed删除第一行/linux删除文件某一行 文章目录 sed系列文章一、sed删除某一行内容/删除最后一行二、sed删除多行三、扩展3.1、-i命令 本文主要讲解如何删除txt文件中的某一行内…
阅读更多...
企业使用APP自动化测试工具的重要因素

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

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

Copyright @ 2022~2023