使用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.hqwc.cn/news/265771.html

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

相关文章

HTML面试题---专题二

HTML面试题---专题二

文章目录 一、前言二、解释input标签中占位符属性的用途三、如何在 HTML 中设置复选框或单选按钮的默认选中状态&#xff1f;四、表单输入字段中必填属性的用途是什么&#xff1f;五、如何使用 HTML 创建表格&#xff1f;六、解释a标签中目标属性的用途七、如何创建一个点击后会…
阅读更多...
小程序嵌套H5

小程序嵌套H5

小程序嵌套H5 使用Hbuild x开发H5页面项目里面使用了js-sdk工具包H5发布完成之后生成URL。新建一个小程序空项目&#xff0c;填写小程序的appid。本地调试的时候如果报错无法打开该网页&#xff0c;那么需要勾选先的不校验。发布体验版本需要注意下面的两个配置点。 使用Hbuild…
阅读更多...
Java简易版 TCP协议一对一聊天

Java简易版 TCP协议一对一聊天

客户端 package 二十一章;import java.io.*; import java.net.Socket; import java.util.Date; import javax.swing.*;public class Server {private JFrame jf;private JButton jBsend;private JTextArea jTAcontent;private JTextField jText;private JLabel JLcontent;priv…
阅读更多...
操作系统内部机制学习

操作系统内部机制学习

切换线程时需要保存什么 函数需要保存吗&#xff1f;函数在Flash上&#xff0c;不会被破坏&#xff0c;无需保存。函数执行到了哪里&#xff1f;需要保存吗&#xff1f;需要保存。全局变量需要保存吗&#xff1f;全局变量在内存上&#xff0c;无需保存。局部变量需要保存吗&am…
阅读更多...
每日一练 | 华为认证真题练习Day146

每日一练 | 华为认证真题练习Day146

1、某台路由器OSPFv3接口信息如下&#xff0c;下列说法正确的是&#xff1f;&#xff08;多选&#xff09; A. 本接口网络类型为P2P B. 本接口的Router-ID为10.0.6.6 C. 本接口没有建立邻接关系 D. 本接口区域号为1 2、OSPFv3在以下哪种类型网络中需要选举DR&#xff1f; A…
阅读更多...
tp5 rewrite nginx重写

tp5 rewrite nginx重写

tp框架,默认的访问路径是 www.xxxx.com/index.php/admin/shop/index格式的&#xff0c;为了方便和更规范&#xff0c;也看起来有逼格一些&#xff0c;需要将index.php去掉 无index.php就会报404 我这里是宝塔 #地址重写if (!-e $request_filename) {rewrite ^(.*)$ /index.…
阅读更多...
基于单个参数线性回归的机器学习代码

基于单个参数线性回归的机器学习代码

本文为学习吴恩达版本机器学习教程的代码整理&#xff0c;使用的数据集为https://github.com/fengdu78/Coursera-ML-AndrewNg-Notes/blob/f2757f85b99a2b800f4c2e3e9ea967d9e17dfbd8/code/ex1-linear%20regression/ex1data1.txt 将数据集和py代码放到同一目录中&#xff0c;使…
阅读更多...
Dijkstra求最短路 I（Dijkstra算法）

Dijkstra求最短路 I（Dijkstra算法）

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点走到 n 号点&#xff0c;则输出 −1。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含三个整…
阅读更多...
使用JLink仿真器实现调试打印的N种方法

使用JLink仿真器实现调试打印的N种方法

方法一&#xff1a;使用MCU的串口 这是最古老也是最简单的方法。 电脑上面插一个USB转TTL&#xff0c;然后与MCU的UART_RX/UART_TX/GND连接起来。PC端再打开一个串口调试助手。两边的波特率一致&#xff0c;就可以收到MCU发过来的打印信息了。 方法二&#xff1a;使用JLink仿…
阅读更多...
低代码开发平台通常提供哪些功能？发挥什么作用？

低代码开发平台通常提供哪些功能？发挥什么作用？

目录 一、低代码助力开发 二、低代码核心功能 1.业务建模&#xff1a; 2.表单建模&#xff1a; 3.页面建模&#xff1a; 4.流程建模&#xff1a; 5.报表建模&#xff1a; 6.门户建模&#xff1a; 7.大屏建模&#xff1a; 8.移动建模&#xff1a; 三、解放程序员的双…
阅读更多...
使用人工智能优化常见业务流程

使用人工智能优化常见业务流程

在现代商业环境中&#xff0c;人工智能(AI)正在改变企业的运营方式。将人工智能集成到业务流程中可以提高效率和准确性&#xff0c;从而节省大量时间和成本。 这使员工能够专注于更具战略性的任务。人工智能在商业中的应用范围从自动化日常任务到提供高级分析&#xff0c;以做…
阅读更多...
【实用】sklearn决策树怎么导出规则

【实用】sklearn决策树怎么导出规则

目录 一、什么是决策树模型 0.1 什么是决策树 02.决策树模型有哪些 二、在sklearn中怎么训练一棵决策树 三、什么是决策树的规则 0.1决策树的决策规则 02. 决策树的决策规则是怎么存储的 四、怎么导出决策树的规则 4.1 导出决策树文本规则 4.2 导出可视化决策树 4.3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023