当前位置： 首页 > news >正文

Mock.js初步使用（浏览器端）

news 文章来源：https://blog.csdn.net/qq_42881421/article/details/128990990 2025/1/29 10:53:21

Mock.js：生成随机数据，拦截 Ajax 请求。官方地址：http://mockjs.com/

第一个demo

demo.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>mockjs demo</title>
</head>
<body></body>
<!-- 引入jquery和mock，这里用在线引入，也可以先下载对应js文件然后本地引入 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// 使用 Mock
var data = Mock.mock({'list|1-10': [{'id|+1': 1}]
});
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')</script>
</html>

浏览器访问效果

这里的核心是

Mock.mock({'list|1-10': [{'id|+1': 1}]
});

语法格式：Mock.mock( template )

作用：根据数据模板生成模拟数据。

template:数据模板，数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

案例中：

// list为属性名
// 1-10为生成规则
// 冒号后面为属性值
'list|1-10': [{'id|+1': 1}]

注意：

  • 属性名 和 生成规则 之间用 | 分隔。

  • 生成规则 是可选的。

  • 生成规则 有 7 种格式：

  1. 'name|min-max': value

  1. 'name|count': value

  1. 'name|min-max.dmin-dmax': value

  1. 'name|min-max.dcount': value

  1. 'name|count.dmin-dmax': value

  1. 'name|count.dcount': value

  1. 'name|+step': value

  • 生成规则 的 含义 需要依赖 属性值 才能确定。

  • 属性值 中可以含有 @占位符。

  • 属性值 还指定了最终值的初始值和类型。

发起ajax请求

发起ajax请求demo

ajax-demo1.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>mockjs demo</title>
</head>
<body><button onclick="getData()">点我</button>
</body>
<!-- 引入jquery和mock -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};// Mock响应模板var data = Mock.mock('http://test.com', {"user|1-3": [{   // 随机生成1到3个数组元素'name': '@cname',  // 中文名称'id|+1': 88,    // 属性值自动加 1，初始值为88'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型'birthday': '@date("yyyy-MM-dd")',  // 日期'city': '@city(true)',   // 中国城市'color': '@color',  // 16进制颜色'isMale|1': true,  // 布尔值'isFat|1-2': true,  // true的概率是1/3'fromObj|2': obj,  // 从obj对象中随机获取2个属性'fromObj2|1-3': obj,  // 从obj对象中随机获取1至3个属性'brother|1': ['jack', 'jim'], // 随机选取 1 个元素'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组},{'gf': '@cname'}]});    
</script>
<script>function getData(){$.ajax({url: 'http://test.com',type: 'get',dataType: 'json'}).done(function(data, status, xhr) {console.log(JSON.stringify(data, null, 4));});    }
</script></html>

浏览器访问，点击按钮，查看控制台效果

控制台看到生成了数据。

参考：

https://blog.51cto.com/u_15127591/3844430?articleABtest=1

完成！enjoy it!

相关文章：

Mock.js初步使用（浏览器端）

Mock.js&#xff1a;生成随机数据&#xff0c;拦截 Ajax 请求。官方地址&#xff1a;http://mockjs.com/第一个demodemo.html<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>mockjs demo</title> </head> <…...

编程日记 2023/2/12 16:46:38

opencv保存图片

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…...

编程日记 2023/2/12 16:45:30

【c++】数据类型

文章目录整型实型科学计数法sizeof关键字字符型字符串类型转义字符bool布尔类型c规定在创建一个变量或者常量时&#xff0c;必须要指定出相应的数据类型&#xff0c;否则无法给变量分配内存。 整型 作用&#xff1a;整型变量表示的是整数类型的数据。 实型 float f3.14; //默…...

编程日记 2023/2/12 16:44:23

Elasticsearch的写的底层原理

前面有一篇文章讲解了Elasticsearch的读写搜索过程&#xff0c;有的人感觉不太理解&#xff0c;今天我们再来看看这些过程的原理 写数据底层原理 首先是将数据写入到内存buffer中&#xff0c;在这里的时候&#xff0c;数据是搜索不到。他同时会将数据写入到translog日志文件中…...

编程日记 2023/2/12 16:43:16

【网络编程】Java中的Socket

文章目录前言socket是什么&#xff1f;Java中的SocketJava实现网络上传文件前言 所谓Socket&#xff08;套接字&#xff09;&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端&#xff0c;提供了应用层进程利用…...

编程日记 2023/2/12 16:42:08

有趣的Hack-A-Sat黑掉卫星挑战赛——跟踪卫星

国家太空安全是国家安全在空间领域的表现。随着太空技术在政治、经济、军事、文化等各个领域的应用不断增加&#xff0c;太空已经成为国家赖以生存与发展的命脉之一&#xff0c;凝聚着巨大的国家利益&#xff0c;太空安全的重要性日益凸显[1]。而在信息化时代&#xff0c;太空安…...

编程日记 2023/2/12 16:41:01

Ubuntu安装配置Cuda和Pytorch gpu

前言 在Ubuntu中操作系统中，通过Anconda安装对应的虚拟环境以及软件包，一般都需要适配Cuda、Pytorch版本等 以下安装配置都是在Ubuntu操作系统下 1. 安装Cuda 通过Ubuntu操作系统查看cuda适配的版本：nvidia-smi 截图如下： 查看Ubuntu版本可如下方式 (1)cat /proc/ver…...

编程日记 2023/2/12 16:39:52

三、Java面向对象

1 . 方法 方法(method)是程序中最小的执行单元方法就是一些代码的打包 需要的时候可以直接调用方法之间是平级的关系 不能在方法里面定义方法方法不调用就不执行 方法的定义 // 方法的定义 /* [修饰符] 返回值类型 方法名称([参数 1],[参数 2]){语句A;return 返回值; } *///…...

编程日记 2023/2/12 16:38:45

pygame7 弹球游戏2

上节课我们做到当球静止下来后在第0号球上画一个球杆 本节课我们将会让这个球杆将球打出来 1、鼠标事件 pygame.mouse.get_pressed():返回鼠标左键&#xff0c;中间&#xff0c;右键的情况 2、键盘事件&#xff1a; pygame.key.get_pressed(): 返回所有键盘的情况 3、pyg…...

编程日记 2023/2/12 16:37:39

计算机网络4：计算机网络体系结构

目录计算机网络体系结构1.网络模型2.每一层的代表含义2.1 OSI7层模型2.2 五层协议2.3 TCP/IP 四层协议3.数据在各层之间的传输过程4.为什么要进行分层计算机网络体系结构 1.网络模型 2.每一层的代表含义 2.1 OSI7层模型 &#xff08;1&#xff09;物理层&#xff1a;比特流–…...

编程日记 2023/2/12 16:36:31

1630_GNU的二进制分析工具nm简单使用探索

全部学习汇总&#xff1a; GreyZhang/toolbox: 常用的工具使用查询&#xff0c;非教程&#xff0c;仅作为自我参考&#xff01; (github.com) GNU有一套二进制的分析工具&#xff0c;之前是用过objdump的&#xff0c;但是也没有系统掌握。如果做底层软件的设计&#xff0c;这些…...

编程日记 2023/2/12 16:35:25

【Redis】Redis高可用之Redis Cluster集群模式详解（Redis专栏启动）

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建工设优化。文章内容兼具广度深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于知名金融公…...

编程日记 2023/2/12 16:34:14

1.8 正则表达式

正则表示式是用来匹配与查找字符串的&#xff0c;从网上爬取数据不可避免的会用到正则表达式。 Python 的表达式要先引入 re 模块&#xff0c;正则表达式以 r 引导。Re库主要功能函数函数说明re.search()在一个字符串中搜索匹配正则表达式的第一个位置&#xff0c;返回match对象…...

编程日记 2023/2/12 16:33:09

Postgresql 根据单列或几列分组去重row_number() over() partition by

Postgresql 根据单列或几列分组去重row_number() over() partition by 一般用于单列或者几列需要去重后进行计算值的 count(distinct(eid)) 可以 比如有个例子&#xff0c;需要根据名称&#xff0c;城市去筛选覆盖的道路长度&#xff0c;以月因为建立了唯一索引是ok的&#…...

编程日记 2023/2/12 16:32:02

基于蒙特卡洛法的规模化电动车有序充放电及负荷预测（PythonMatlab实现）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f389;作者研究&#xff1a;&#x1f3c5;&#x1f3c5;&#x1f3c5;主要研究方向是电力系统和智能算法、机器学…...

编程日记 2023/2/12 16:30:55

Selenium常用API详解，从入门到进阶（全套）

目录 1、打开页面 2、查找页面元素 3、输入文本 4、点击操作 5、提交操作 6、清除文本 7、获取文本、属性 8、获取页面的标题和URL 9、窗口 9.1、设置窗口大小 9.2、窗口切换 9.2.1、为什么需要窗口切换&#xff1f; 9.2.2、获取句柄的方式 9.2.3、切换句柄 10、…...

编程日记 2023/2/12 16:29:48

自从学会了Python，我实现了壁纸自由(6)

小朋友们好&#xff0c;大朋友们好&#xff01;我是猫妹&#xff01;哈哈哈&#xff0c;又到周末啦&#xff01;这周过得怎么样&#xff1f;马上就要开学了&#xff0c;寒假作业早已写好了吧&#xff1f;开学让人兴奋&#xff0c;上了很久网课都要吐啦&#xff01;开学也让人有…...

编程日记 2023/2/12 16:28:42

Ruby 发送邮件 - SMTP

SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。 Ruby提供了 Net::SMTP 来发送邮件&#xff0c;并提供了两个方法 new 和 start: new 方法有两个参数&am…...

编程日记 2023/2/12 16:27:34

Python爱心代码

前言 Python漂浮爱心&#xff0c;具体源码见&#xff1a;Python动态爱心代码_爱心代码-Python文档类资源-CSDN下载 爱心类 class Heart(): #每个爱心&#xff08;爱心类&#xff09; def __init__(self): self.r ra.randint(10,15) #爱心的半径 …...

编程日记 2023/2/12 16:26:29

【二分查找法及其应用】

文章目录一. 前提二. 基本思路三. 代码实现四. 封装在STL中的二分查找算法五. 浮点数二分一. 前提 待查找的序列是有序的&#xff1b;待查找的 a 采取顺序存储结构。 二. 基本思路 设在升序序列 a [ low…high ] 查找的 k &#xff0c; 首先找中间值 mid a [ ( lowhigh )/2 …...

编程日记 2023/2/12 16:25:22

Android 进阶——Framework核心 之Binder Java成员类详解（三）

文章大纲引言一、Binder Java家族核心成员关系图二、Binder Java家族核心成员源码概述1、android.os.IBinder1.1、boolean transact(int code, Parcel data, Parcel reply, int flags) send a call to an IBinder object1.2、String getInterfaceDescriptor()1.3、boolean ping…...

编程日记 2023/2/12 16:24:16

Maven

Maven 1.什么是Maven 官方网站 https://maven.apache.org/ Maven是一款服务于Java平台的自动化构建工具&#xff0c;它可以帮助我们更方便的对项目进行构建、管理项目jar包 &#xff0c;包括: bulid 项目&#xff0c;切换 jar 版本&#xff0c;添加 jar, 删除 jar 包等 1.…...

编程日记 2023/2/12 16:23:10

1947抓住那头牛（队列 广度优先搜索）

目录 题目描述 解析 解题思路 代码部分 代码部分 运行结果 看看len数组中各个位置的标记值 为什么这样做一定是最短路径&#xff1a; 题目描述 农夫知道一头牛的位置&#xff0c;想要抓住它。农夫和牛都位于数轴上&#xff0c;农夫起始位于点N(0<N<100000)&…...

编程日记 2023/2/12 16:22:01

基于linux5.15.5的IMX 参考手册 ---21

基于linux5.15.5的IMX 参考手册 — 21 10.5.2高清多媒体接口&#xff08;HDMI&#xff09;和显示端口&#xff08;DP&#xff09;概述 10.5.2.1测试名称 •mxc_cec_test.out 10.5.2.1.1位置 /unit_tests/HDMI/ 10.5.2.1.2功能 验证HDMI CEC功能并向HDMI接收器发送断电命令。 1…...

编程日记 2023/2/12 16:19:46

Android Dalvik虚拟机 堆初始化流程

前言 上篇文章介绍了dalvik虚拟机启动流程&#xff0c;在dalvik虚拟机启动时调用了dvmGcStartup来启动堆。 本文介绍我们在日常开发使用Java时的堆创建流程。 Dalvik堆介绍 Dalvik虚拟机中&#xff0c;堆是由heap[0] Active堆和heap[1] Zygote堆两部分组成的。其中&#xff…...

编程日记 2023/2/12 16:18:39

0讲（补）——开发前必备基本常识

前言 专栏内容持续补充更新，目前正在进行优惠活动 目录 前言 一、函数的声明和定义 二、预编译 三、串口打印中的printf函数的使用...

编程日记 2023/2/12 16:17:30

JS学习笔记

1.WebAPIs简介导读Web APIs 和JS 基础关联性JS 基础阶段以及 Web APIs 阶段JS基础学习 ECMAScript 基础语法为后面作铺垫&#xff0c;Web APIs 是JS 的应用&#xff0c;大量使用JS基础语法做交互效果①JS 基础阶段我们学习的是ECMAScript 标准规定的基本语法要求同学们掌握JS 基…...

编程日记 2023/2/12 16:16:22

linux005之用户、组管理

linux用户管理简介&#xff1a; 任何使用linux系统的用户&#xff0c;都必须使用一个合法的账号和密码&#xff0c;账号和密码一般都是超级管理员创建&#xff0c;当然普通用户也可以创建用户&#xff0c;前提是必须拥有创建用户权限。 root是linux系统中默认创建的超级用户 创…...

编程日记 2023/2/12 16:15:14

列线图工具_Nomogram

定义 列线图是一种相对传统的分析方法&#xff0c;用于展示自变量和因变量的线性关系&#xff0c;及其特征的重要程度。 现在用SHAP&#xff0c;和机器学习库中的 Feature importance 工具可以实现类似甚至更好效果。不过很多传统的研究领域比较认这种方法。 列线图工具建立在…...

编程日记 2023/2/12 16:14:07

【C++】类和对象（一）

目录一、面向过程和面向对象初步认识二、类的引入三、类的定义四、类的访问限定符及封装4.1、访问限定符4.2、封装五、类的作用域六、类的实例化七、类对象的大小八、this指针8.1、this指针的引出8.2、this指针的特性8.3、C语言和C实现Stack的对比一、面向过程和面向对象初步认…...

编程日记 2023/2/12 16:13:00

2017最新网站icp备案/专业软文代写

一、pom.xml报错 类似&#xff1a;Missing artifact org.springframework:spring-jdbc:jar:3.2.4.RELEASE 这样的错误&#xff0c;提示某个jar包没有了。 这个问题之前碰见好几次了&#xff0c;每次解决了下一次又忘了&#xff0c;特意记下来。 解决办法是&#xff1a;右键项…...

编程日记 2025/1/29 4:59:12

云虚拟主机建设网站一定要域名/全自动引流推广软件免费

ProxySQL作为一款强大的中间件为MySQL的架构提供了有力的支持。目前可以很好的支持 Master Slave MGR PXC等&#xff0c;并提供连接池、读写分离、日志记录等功能&#xff0c;当然还有很多其他实用功能&#xff0c;这里不一一列举了。本文都是基础概念&#xff0c;基本出自官方…...

编程日记 2025/1/29 4:09:04

html网页制作代码加图/网站外链优化方法

mysql 忘记密码&#xff1a; 1、首先service mysql stop mysqld --skip-grant-tables & 开启数据库 然后就可以mysql -uroot 直接进数据库&#xff0c; update mysql.user set PasswordPASSWORD(xxxxxxx) where Userroot; flush privileges; exit; 然后再重启数据库&…...

编程日记 2025/1/29 3:48:46

学校做网站需要多少钱/百度关键词热度

大家好&#xff0c;我是小弗。虽然陆陆续续的写了 OSPF 状态机、OSPF 名词、OSPF LSA &#xff0c;如果没看过&#xff0c;或者有兴趣看的话&#xff0c;可以点击 汇总 查看。但还是有内容没讲到&#xff0c;下面我们就讲讲 OSPF 协议的一些特性吧。 路由汇总 网络规模越大&am…...

编程日记 2025/1/28 22:56:29

点样做网站/软文广告素材

绝对已经是Java的一个月了&#xff0c;GitLab绝对不会错过派对&#xff01; 完成工作仍然是GitLab的主要原则&#xff0c;最新的Gitlab版本11.3带有内置的Maven存储库和许多其他功能&#xff0c;这些功能将使Java开发人员的编码比以往任何时候都更加高效。 让我们仔细看看新的…...

编程日记 2025/1/28 22:30:43

做网站怎样备案/广州网站优化服务

标识符是指在F#里值的名称&#xff0c;可以在程序的后面引用的标识符定义的值。定义一个标识符&#xff0c;使用关键字let指定名称&#xff0c;等号符号&#xff0c;和一个表达式。表达式是任何一块代码&#xff0c;返回一个值的计算。 示例&#xff1a;let pi 3.14 从命令式编…...

编程日记 2025/1/28 21:21:47