Mock 基本使用

mock解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集
痛痛痛 Mock横空出世来解决这个痛点，没有后端，咱前端也能活得很滋润

mock的优点

1、前后端分离 让前端工程师独立于后端进行开发。

2、增加测试的真实性 通过随机数据，模拟各种场景。

3、开发无侵入 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

4、用法简单 符合直觉的接口。

5、数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6、方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。

7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

8、不涉及跨域问题

简单基本使用

Mock官网mock官网

开始命令：
npm init -y
npm i mockjs -D

简单示例

mock返回的模拟数据都是一个对象类型
| 左右不要有空格
数据模板定义规范： ‘属性名|生成规则’：属性值

let data = Mock.mock({/!*随机生成一个长度为5的数组*!/'list|5-10': [/!*从1开始，每次+1*!/{'id|+1': 1}]
})
console.log(data.list)

生成字符串和数组

console.log('==============随机生成字符串=============')
let data = Mock.mock({'a': '#','b|3': '#','c|7-9': '#'
})
console.log(data)
console.log('==============随机生成数zi=============')
data = Mock.mock({'a': 1,'b|1-100': 0
})
console.log(data)==============随机生成字符串=============
{ a: '#', b: '###', c: '#########' }   
==============随机生成数组=============
{ a: 1, b: 91 }

boolean 、对象、数组

const Mock = require("mockjs");
console.log('==============随机生成boolean=============')
let data = Mock.mock({'a': true,'b|1-2': false
})
console.log(data)
==============随机生成boolean=============
{ a: true, b: true }console.log('==============随机生成对象=============')
const cities = {'zhengzhou': '郑州','hangzhou': '杭州','wuhan': '武汉','guangzhou': '广州','shanghai': '上海','beijing': '北京'
}
data = Mock.mock({'a|2': cities,'b|2-5': cities
})
console.log(data)
==============随机生成对象=============
{a: { guangzhou: '广州', hangzhou: '杭州' },b: { wuhan: '武汉', beijing: '北京', guangzhou: '广州' }
}console.log('==============随机生成数组=============')
const arr = ['北京', '郑州', '上海', '厦门']
data = Mock.mock({'a|1': ['北京', '郑州', '上海', '厦门'],'b|2-5': ['北京', '郑州', '上海', '厦门', '武汉', '南京', '杭州', '福州'],'c|2': arr
})
console.log(data)
==============随机生成数组=============
{a: '郑州',b: ['北京', '郑州', '上海','厦门', '武汉', '南京','杭州', '福州', '北京','郑州', '上海', '厦门','武汉', '南京', '杭州','福州', '北京', '郑州','上海', '厦门', '武汉','南京', '杭州', '福州'],c: ['北京', '郑州','上海', '厦门','北京', '郑州','上海', '厦门']
}

随机生成字符串、布尔、自然数、整数、浮点数、range、日期、文本

/*随机生成篇*/
const Mock = require('mockjs')
/*三种生成方式
* Mock.Random.xxxx()
* Mock.mock('@xxx')
* Mock.mock('@xxx()')
* */
console.log('=========随机生成字符串=========')
// console.log(Mock.Random.string('pool'?, min?, max?));
console.log(Mock.Random.string());
let data = Mock.mock({'a': Mock.Random.string('number', 4),'b': Mock.Random.string('upper', 4),'c': Mock.Random.string('lower', 4),'d': Mock.Random.string('simple', 4, 10),'e': Mock.Random.string('booasdfsadlean', 4, 10),'f': Mock.mock('@string'),'g': Mock.mock('@string()')
})
console.log(data)console.log('=========boolean==========')
/*Boolean就俩值，这一个操作足以*/
console.log(Mock.Random.boolean())console.log('==============natural============')
// natural(min?, max?)
data = Mock.mock({'a': Mock.Random.natural(),'b': Mock.mock('@natural'),'c': Mock.mock('@natural()'),'d': Mock.mock('@natural(10000)'),'e': Mock.mock('@natural(100, 200)'),
})
console.log(data)console.log('==========integer============')
// integer(min?, max?)console.log('===============float===================')
// float(min?, max?, dmin?, dmax?)
data = Mock.mock({'a': Mock.Random.float(),'b': Mock.mock('@float'),'c': Mock.mock('@float(900)'),'d': Mock.mock('@float(900, 1000)'),'e': Mock.mock('@float(900, 1000, 3)'),'f': Mock.mock('@float(900, 1000, 1, 3)'),
})
console.log(data)console.log('================获取数字类型数组 range===============')
// range(start?, stop, step?)
// 默认从0开始，start包括， stop不包括
data = Mock.mock({'a': Mock.Random.range(5),'c': Mock.mock('@range(0, 10)'),'d': Mock.mock('@range(1, 100, 2)'),
})
console.log(data)console.log('==============获取随机日期================')
// date( format? )
data = {'a': Mock.Random.date(),'b': Mock.mock('@date'),'c': Mock.mock('@date(yyyy-mm-dd)'),'d': Mock.mock('@date(yy-mm-dd)'),'e': Mock.mock('@date(y-m-d)'),// 单个 m / d : 小于10 没有0
}
console.log(data)console.log('===========获取随机文本============')
// paragraph, sentence, word, title, cparagraph, csentence, cword(pool?, min?, max?), ctitle
// 带有c的是随机生成中文入参除了cword 均为(min?, max?)
data = Mock.mock({'a': Mock.Random.paragraph(),'b': Mock.mock('@paragraph(3, 9)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.sentence(),'b': Mock.mock('@sentence(3, 9)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.word(),'b': Mock.mock('@word(3, 9)'),'c': Mock.mock('@cword("爱上了的看法no暗示法", 3, 5)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.cparagraph(),'b': Mock.mock('@cparagraph(3, 9)')
})
console.log(data)

生成图片、颜色

/**/
const Mock = require('mockjs')/*获取随机图片*/
console.log('=============获取随机图片============')
// image( size?, background?, foreground?, format?, text?)
let data = Mock.mock({'a': Mock.Random.image(),'b': Mock.mock('@image'),'c': Mock.mock('@image()'),'d': Mock.Random.image('700x300', '#FF6600', '#ffffff', 'png', 'hello')
})
console.log(data)
=============获取随机图片============
{a: 'http://dummyimage.com/728x90',b: 'http://dummyimage.com/88x31',c: 'http://dummyimage.com/300x600',d: 'http://dummyimage.com/700x300/FF6600/ffffff.png&text=hello'
}console.log('=========获取随机颜色========')
data = Mock.mock({'a': Mock.Random.color(),'b': Mock.mock('@color'),'c': Mock.mock('@color()')
})
console.log(data)data = Mock.mock({'a': Mock.Random.rgb(),'b': Mock.mock('@rgb'),'c': Mock.mock('@rgb()')
})
console.log(data)data = Mock.mock({'a': Mock.Random.rgba(),'b': Mock.mock('@rgba'),'c': Mock.mock('@rgba()')
})
console.log(data)
=========获取随机颜色========
{ a: '#8079f2', b: '#95f279', c: '#f279b8' }
{a: 'rgb(121, 219, 242)',b: 'rgb(242, 229, 121)',c: 'rgb(193, 121, 242)'
}
{a: 'rgba(121, 242, 158, 0.66)',b: 'rgba(242, 123, 121, 0.18)',c: 'rgba(121, 154, 242, 0.09)'
}

随机生成名字、地址、web相关

/*生成名字*/
const Mock = require('mockjs')console.log('============随机生成名字============')
/*first: 生成英文姓
* last: 生成英文名
* cfirst: 生成中文姓
* clast: 生成中文名
* name(middle? ): 生成英文名字 middle: true、false (为true时，名字是3个字)
* cname(): 生成中文名字*/
let data = Mock.mock({'a': Mock.Random.first(),'b': Mock.mock('@last'),'c': Mock.mock('@name(true)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.cfirst(),'b': Mock.mock('@clast'),'c': Mock.mock('@cname()')
})
console.log(data)
============随机生成名字============
{ a: 'Angela', b: 'Allen', c: 'Eric Mark Lopez' }
{ a: '袁', b: '芳', c: '丁静' }console.log('=============随机生成地址============')
/*区域：region
* 省份：province
* 城市：city(prefix?) 是否固定前缀，也就是是否带有 省市
* 区县：county(prefix?)*/
data = Mock.mock({'a': Mock.Random.region(),'b': Mock.mock('@province'),'c': Mock.mock('@city(true)'),'d': Mock.mock('@county(true)')
})
console.log(data)
=============随机生成地址============
{ a: '西南', b: '广西壮族自治区', c: '台湾 苗栗县', d: '西藏自治区 山南地区 琼结县' }/*web相关 生成 url(protocol?, domain?)(网址)protocol(协议)domain(域名)tld(顶级域名) email(domain?) ip zip(邮编)*/
console.log('===========随机生成web相关===============')
data = Mock.mock({'a': Mock.Random.url(),'b': Mock.mock('@url(https, www.baidu.com)'),'h': Mock.mock('@url(https)'),'c': Mock.mock('@protocol'),'d': Mock.mock('@domain'),'e': Mock.mock('@tld'),'f': Mock.mock('@email'),'i': Mock.mock('@email(qq.com)'),'g': Mock.mock('@ip'),'k': Mock.mock('@zip'),
})
console.log(data)
===========随机生成web相关===============
{a: 'mid://jmwxcdbcrz.st/mnhs',b: 'https://www.baidu.com/smkdeb',h: 'https://kfcd.cx/zlvvdohs',c: 'mid',d: 'fkxfnotusd.museum',e: 'bh',f: 's.qjkkopngb@wjyojntjo.cz',i: 'j.sejdmq@qq.com',g: '192.229.68.65',k: '767870'
}

helper

helper   了解使用capitalize 首字母大写
* upper 转大写字母
* lower 转小写字母
* pick 从数组中随机选出一个
* shuttle 将数组打乱
* guid 获取一个gu id  "d34AdCff-Ad1e-ecAF-9929-41DA36dc4B76"
* id 随机生成一个18位身份证id "140000199305223398"

启动本地服务

数据有了，但要模拟访问和响应你模拟的数据，这个时候要用到@shymean/mock-server

为开发环境快速搭建koa服务器，只需要一个mock模板文件即可。
脚本启动本地服务器，然后匹配mock模板内的url返回对应的数据

# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js
port：1024-65535之间
参数说明port，服务器端口号，默认7654，简写 -p
file，mock模板文件路径，默认./_mock.js，简写 -f基础使用其使用方式与mockjs基本类似
Mock.mock(url, 返回的数据)
Mock.mock(url, method, 返回的数据)

简单示例

// _mock.js
// 对应的rurl会被中间件拦截，并返回mock数据
// ANY localhost:9999/
Mock.mock('/home', {data: [{'city': Mock.mock('@city(true)')}],msg: "hello mock","code": Mock.mock('@integer(200, 300)'),
})// 可以mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {data: [],msg: "hello mock","code|1-4": 1,
})

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

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

相关文章

【pytest】tep环境变量、fixtures、用例三者之间的关系

【pytest】tep环境变量、fixtures、用例三者之间的关系

tep是一款测试工具，在pytest测试框架基础上集成了第三方包，提供项目脚手架，帮助以写Python代码方式，快速实现自动化项目落地。 在tep项目中，自动化测试用例都是放到tests目录下的，每个.py文件相互独立&…
阅读更多...
Jmeter的自动化测试实施方案

Jmeter的自动化测试实施方案

前言： Jmeter是目前最流行的一种测试工具，基于此工具我们搭建了一整套的自动化方案，包括了脚本添加配置、本地配置和运行、服务器配置等内容，完成了自动化测试闭环，通过这种快捷简便高效的方式，希望可以解…
阅读更多...
Java反序列化漏洞复现（weblogic和s2）

Java反序列化漏洞复现（weblogic和s2）

文章目录 weblogic启动环境漏洞扫描漏洞复现 S2-045启动环境漏洞复现 前提条件： 1.安装docker docker pull medicean/vulapps:j_joomla_22.安装docker-compose docker run -d -p 8000:80 medicean/vulapps:j_joomla_23.下载vulhub weblogic 启动环境 到下面路径下…
阅读更多...
PHP8内置函数中的变量函数-PHP8知识详解

PHP8内置函数中的变量函数-PHP8知识详解

在php8中，与变量相关的内置函数比较多，本文说一些比较重要的、常见的内置函数。今日着重讲解了5个，分别是：检测变量是否为空的函数empty()、判断变量是否定义过的函数isset()、销毁指定的变量的函数unset()、获取变量的类型的函数…
阅读更多...
数学建模--三维图像绘制的Python实现

数学建模--三维图像绘制的Python实现

目录 1.绘制三维坐标轴的方法 2.绘制三维函数的样例1 3.绘制三维函数的样例2 4.绘制三维函数的样例3 5.绘制三维函数的样例4 6.绘制三维函数的样例5 1.绘制三维坐标轴的方法 #%% #1.绘制三维坐标轴的方法 from matplotlib import pyplot as plt from mpl_toolkits.mplot3…
阅读更多...
Linux之修改服务端口号

Linux之修改服务端口号

本次演示以SSH服务为例，SSH默认监听端口是22,先保留了22端口，所以我们要进入ssh的配置文件添加新端口并注释或删掉原有端口。 1、使用vi编辑器修改文件 sshd_config,路径是/etc/ssh/sshd_config,找到“#Port 22”,添加新的端口号10086。 2、如果你关闭了…
阅读更多...
2019CVPR Semantic Graph Convolutional Networks for 3D Human Pose Regression

2019CVPR Semantic Graph Convolutional Networks for 3D Human Pose Regression

基于语义图卷积网络的三维人体姿态回归 源码 https://github.com/garyzhao/SemGCN 摘要 在本文中，我们研究了学习图卷积网络（GCN）回归的问题。GCN的当前体系结构受限于卷积滤波器和共享的变换矩阵为的小感受野。为了解决这些限制&#xff…
阅读更多...
时序预测 | MATLAB实现PSO-LSSVM粒子群算法优化最小二乘支持向量机时间序列预测未来

时序预测 | MATLAB实现PSO-LSSVM粒子群算法优化最小二乘支持向量机时间序列预测未来

时序预测 | MATLAB实现PSO-LSSVM粒子群算法优化最小二乘支持向量机时间序列预测未来 目录 时序预测 | MATLAB实现PSO-LSSVM粒子群算法优化最小二乘支持向量机时间序列预测未来预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现PSO-LSSVM时间序列预测未…
阅读更多...
GPT引领前沿与应用突破之GPT-4科研实践技术与AI绘图

GPT引领前沿与应用突破之GPT-4科研实践技术与AI绘图

查看原文>>>GPT引领前沿与应用突破之GPT4科研实践技术与AI绘图 目录 专题一、AIGC概述 专题二、人工智能算法介绍 专题三、大语言模型Prompt提示词使用技巧 专题四、让GPT成为你的生活助理（动手练习） 专题五、让GPT成为你的工作秘书&…
阅读更多...
【Redis专题】Redis持久化、主从与哨兵架构详解

【Redis专题】Redis持久化、主从与哨兵架构详解

目录 前言课程目录一、Redis持久化1.1 RDB快照（Snapshot）：二进制文件基本介绍开启/关闭方式触发方式bgsave的写时复制（COW，Copy On Write）机制优缺点 1.2 AOF（append-only file）&…
阅读更多...
成都瀚网科技有限公司：抖店怎么开通直播？

成都瀚网科技有限公司：抖店怎么开通直播？

随着互联网和移动支付的快速发展，越来越多的人选择开设自己的抖音商店。抖音作为国内最受欢迎的短视频平台之一，拥有庞大的用户基础，成为众多创业者青睐的平台。那么，如何经营自己的抖音店铺呢？下面将从几个方面为您介…
阅读更多...
算法训练day36|贪心算法 part05(重叠区间三连击：LeetCode435. 无重叠区间763.划分字母区间56. 合并区间)

算法训练day36|贪心算法 part05(重叠区间三连击：LeetCode435. 无重叠区间763.划分字母区间56. 合并区间)

文章目录 435. 无重叠区间思路分析 763.划分字母区间思路分析代码实现思考总结 56. 合并区间思路分析 435. 无重叠区间 题目链接🔥🔥 给定一个区间的集合，找到需要移除区间的最小数量，使剩余区间互不重叠。 注意: 可以认为区间的…
阅读更多...
JVM基础面试题

JVM基础面试题

JDK、JRE、JVM的关系 JVM Java虚拟机，它只识别.class类型文件，它能将class文件中的字节码指令进行识别并调用操作系统向上的API完成动作。 JRE Java运行时环境。它主要包含两部分：Jvm的标准实现和Java的一些基本类库。相对于JVM来说,JRE多出来…
阅读更多...
风向变了！智能汽车何以「降本」

风向变了！智能汽车何以「降本」

随着软件定义汽车的概念逐步落地，以及底盘、动力、座舱、智驾、车身等不同域（分布式或者混合式）的功能更新迭代和融合，汽车行业正在意识到：底层硬件架构重构的迫切性。 事实上，早在2016年，作为传…
阅读更多...
go web之一：hello world快速上手+handle（http.Handle和http.HandleFunc的区别与联系）

go web之一：hello world快速上手+handle（http.Handle和http.HandleFunc的区别与联系）

前情提要： 需要安装好go的环境和VSCode的go插件。 hello world快速上手 1、创建go.mod 在项目根目录下打开命令行，或者直接用VSCode中的终端。输入命令 go mod init github.com/solenovex/web-tutorial 然后就能看到项目结构中多了一个go.mod 2、…
阅读更多...
ChatGPT可以生成Windows密钥

ChatGPT可以生成Windows密钥

ChatGPT 可以回答许多问题、生成和修改代码，最近还可以生成 Windows 10 和 Windows 11 的许可证密钥。自从 OpenAI 的 ChatGPT 推出以来，人工智能已成为许多用户面临的挑战。 他们不断地试图削弱这种智力，或者想尝试它的局限性和可能性。例如…
阅读更多...
类和对象（Java）

类和对象（Java）

目录 一、面向对象的初步认知1、什么是面向对象2、面向对象与面向过程 二、类和类的实例化1、什么是类2、类的实例化3、类和对象的说明 三、this引用1、为什么要有this引用2、什么是this引用3、this引用的特性 四、对象的构造及初始化1、如何初始化对象2、构造方法 五、封装1、…
阅读更多...
Oracle 遍历变量游标

Oracle 遍历变量游标

背景 由于我们的数据库系统中的游标特别多，DBA让我们优化，减少游标的使用。 电脑系统：windows数据库：Oracle数据库图形化界面工具：Toad，DBeaver(我測試的時候用的)记录日期：2023-09-04 具体实…
阅读更多...
华为云API对话机器人CBS的魅力—实现简单的对话操作

华为云API对话机器人CBS的魅力—实现简单的对话操作

云服务、API、SDK，调试，查看，我都行 阅读短文您可以学习到：人工智能AI智能的问答管理、全面的对话管理、高效训练部署 1.IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts …
阅读更多...
keepalived 主备都存在vip， keepalived主备跨网段配置；keepalived主备服务器不在同一个网段怎么配置

keepalived 主备都存在vip， keepalived主备跨网段配置；keepalived主备服务器不在同一个网段怎么配置

keepalived 主备都有vip问题；主备服务器不在同一个网段怎么配置 主机：128.192.10.10 备机：128.192.11.11 备机：128.192.22.22 # keepalived的配置文件增加如下配置即可实现 # 主机：128.192.10.10 vrrp_instance VI_1 {…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023