mockjs使用（2）

mockjs使用（1）

4、Mock

4.1 Mock.mock()

根据数据模版生成模拟数据

Mock.mock( rurl?, rtype?, template|function(options) )

问号代表该参数不必填

4.1.1 各参数及其默认值
  • rurl: 不必填。表示需要拦截的URL，可以使URL字符串或URL正则。
    例如 /\/domain\/list\.json/、'/domian/list.json'。
  • rtype：不必填。表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE等。
  • template：不必填。表示数据模板，可以是对象或字符串。
    例如：{'data|1-10':[{}]}、@EMAIL 。
  • function(options)：不必填。表示用于生成响应数据的函数。
  • options：只想本次请求的Ajax选项集
4.1.2 方法使用参数所生成
  • Mock.mock( template )：根据数据模板生成模拟数据。
  • Mock.mock( rurl, template )：记录数据模板。当拦截到匹配rurl的 Ajax 请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
  • Mock.mock( rurl, function(options) )：记录用于生成响应数据的函数。当拦截到匹配rurl的 Ajax 请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。
  • Mock.mock( rurl, rtype, template )：记录数据模板。当拦截到匹配rurl和rtype的 Ajax 请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
  • Mock.mock( rurl, rtype, function(options) )：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
4.1.3 示例
<!-- （必选）加载 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>
1、Mock.mock( template )
// Mock.mock(template)
var template = {'title': 'Syntax Demo','string1|1-10': '★','string2|3': 'value','number1|+1': 100,'number2|1-100': 100,'number3|1-100.1-10': 1,'number4|123.1-10': 1,'number5|123.3': 1,'number6|123.10': 1.123,'boolean1|1': true,'boolean2|1-2': true,'object1|2-4': {'110000': '北京市','120000': '天津市','130000': '河北省','140000': '山西省'},'object2|2': {'310000': '上海市','320000': '江苏省','330000': '浙江省','340000': '安徽省'},'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],'array2|1-10': ['Mock.js'],'array3|3': ['Mock.js'],'function': function() {return this.title}
}
var data = Mock.mock(template)$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
2、Mock.mock( rurl, template )
// Mock.mock(rurl, template)
Mock.mock(/\.json/, {'list|1-10': [{'id|+1': 1,'email': '@EMAIL'}]
})
$.ajax({url: 'hello.json',dataType: 'json'
}).done(function(data, status, jqXHR){$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})
3、Mock.mock( rurl, function(options) )
// Mock.mock(rurl, function(options))
Mock.mock(/\.json/, function(options) {return options
})
$.ajax({url: 'hello.json',dataType: 'json'
}).done(function (data, status, jqXHR) {$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})
4、Mock.mock( rurl, rtype, template )
// Mock.mock( rurl, rtype, template )
Mock.mock(/\.json/, 'get', {type: 'get'
})
Mock.mock(/\.json/, 'post', {type: 'post'
})
$.ajax({url: 'hello.json',type: 'get',dataType: 'json'
}).done(function (data, status, jqXHR) {$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})$.ajax({url: 'hello.json',type: 'post',dataType: 'json'
}).done(function (data, status, jqXHR) {$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})
5、Mock.mock( rurl, rtype, function(options) )
// Mock.mock( rurl, rtype, function(options) )
Mock.mock(/\.json/, 'get', function(options) {return options.type
})
Mock.mock(/\.json/, 'post', function(options) {return options.type
})$.ajax({url: 'hello.json',type: 'get',dataType: 'json'
}).done(function (data, status, jqXHR) {$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})$.ajax({url: 'hello.json',type: 'post',dataType: 'json'
}).done(function (data, status, jqXHR) {$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})

4.2 Mock.mockjax(library)

覆盖（拦截） Ajax 请求，目前内置支持 jQuery、Zepto、KISSY。

对 jQuery Ajax 请求的拦截和响应，通过覆盖前置过滤器、选项 dataFilter 以及数据转换器实现，实现代码请问这里。

对 KISSY Ajax 请求的拦截和响应，则通过粗鲁地覆盖 KISSY.io(options) 实现，实现代码请问这里。

因为第三库 Ajax 的实现方式不尽相同，故目前只内置支持了实际开发中（开发者和所服务的阿里） 常用的 jQuery、Zepto 和 KISSY。如果需要拦截其他第三方库的 Ajax 请求，可参考对jQuery、Zepto 和 KISSY的实现，覆盖 Mock.mockjax(library)。

通过方法 Mock.mock( rurl, rtype, template|function(options) ) 设置的 URL 和数据模板的映射，均记录在属性Mock._mocked中，扩展时可从中获取 URL 对应的数据模板，进而生成和响应模拟数据。Mock._mocked 的数据结构为：

{(rurl + rtype): {rurl: rurl,rtype: rtype,template: template},...
}

4.3 Mock.tpl(input, options, helpers, partials)

4.3.1 参数及其默认值
  • input：必选。可以是 HTML 模板，或者经过 Handlebars 解析的语法树（Handlebars.parse(input)）。将基于该参数生成模拟数据。
  • options：可选。对象。称为“数据模板”，用于配置生成模拟数据的规则。例如 { ‘email’: ‘@EMAIL’ }，在生成模拟数据时，所有 email 属性对应的值将是一个邮件地址。
  • helpers：可选。对象。表示局部 helper。全局 helper 会自动从 Handlebars.helpers 中读取。
  • partials：可选。对象。表示局部子模板。全局子模板会自动从 Handlebars.partials 中读取。
4.3.2 各参数生成
  • Mock.tpl(input)
  • Mock.tpl(input, options)
  • Mock.tpl(input, options, helpers)
  • Mock.tpl(input, options, helpers, partials)
    基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。
4.3.3 示例

使用示例如下所示：

// 基于 HTML 模板生成模拟数据
Mock.tpl('this is {{title}}!')
// => {title: "title"}// 基于 HTML 模板和数据模板生成模拟数据
Mock.tpl('this is {{title}}!', {title: '@TITLE'
})
// => {title: "Guhwbgehq Isuzssx Ywvwt Dkp"}// 基于 HTML 模板生成模拟数据，传入了局部命令。
Mock.tpl('this is {{title}}!', {}, {title: function(){return 'my title'}
})
// => {title: "title"}// 基于 HTML 模板生成模拟数据，传入了局部子模板。
Mock.tpl('{{> "sub-tpl"}}', {}, {}, {'sub-tpl': '{{title}}'
})
// => {title: "title"}

数据模板 options 可以在调用Mock.tpl(input, options, helpers, partials)时传入，也可以在 HTML 模板中通过 HTML 注释配置（为了避免侵入现有的代码和开发模式），格式为<!-- Mock {} -->。

下面的 2 个示例演示了通过 HTML 注释配置数据模板的两种方式：集中配置、分散配置。

示例1：在 HTML 模板中通过一个 HTML 注释集中配置数据模板。
var tpl = Mock.heredoc(function() {/*!
{{email}}{{age}}
<!-- Mock { email: '@EMAIL',age: '@INT(1,100)'
} -->*/
})
var data = Mock.tpl(tpl)
console.log(JSON.stringify(data, null, 4))
// =>
{"email": "t.lee@clark.net","age": 33
}
示例2：在 HTML 模板中通过多个 HTML 注释分散配置数据模板。
var tpl = Mock.heredoc(function() {/*!
{{email}}{{age}}
<!-- Mock { email: '@EMAIL'
} -->
<!-- Mock { age: '@INT(1,100)' } -->*/
})
var data = Mock.tpl(tpl)
console.log(JSON.stringify(data, null, 4))
// =>
{"email": "j.walker@brown.edu","age": 83
}

4.4 Mock.xtpl(input, options, helpers, partials)

Mock.xtpl(input)
Mock.xtpl(input, options)
Mock.xtpl(input, options, helpers)
Mock.xtpl(input, options, helpers, partials)
基于 KISSY XTempalte 的 HTML 模板生成模拟数据。

参数的含义和默认值如下所示：

参数 input：必选。可以是 HTML 模板，或者经过 KISSY XTempalte 解析的语法树（XTemplate.compiler.parse(input)）。将基于该参数生成模拟数据。
参数 options：可选。对象。称为“数据模板”，用于配置生成模拟数据的规则。例如 { ‘email’: ‘@EMAIL’ }，在生成模拟数据时，所有 email 属性对应的值将是一个邮件地址。
参数 helpers：可选。对象。表示局部命令。全局命令会自动从 XTemplate.RunTime.commands 中读取。
参数 partials：可选。对象。表示局部子模板。全局子模板会自动从 XTemplate.RunTime.subTpls 中读取。

4.4.3 使用示例如下所示：
// 基于 HTML 模板生成模拟数据
Mock.xtpl('this is {{title}}!')
// => {title: "title"}// 基于 HTML 模板和数据模板生成模拟数据
Mock.xtpl('this is {{title}}!', {title: '@TITLE'
})
// => {title: "Guhwbgehq Isuzssx Ywvwt Dkp"}// 基于 HTML 模板生成模拟数据，传入了局部命令。
Mock.xtpl('this is {{title}}!', {}, {title: function(){return 'my title'}
})
// => {title: "title"}// 基于 HTML 模板生成模拟数据，传入了局部子模板。
Mock.xtpl('{{include "sub-tpl"}}', {}, {}, {'sub-tpl': '{{title}}'
})
// => {title: "title"}

数据模板 options 可以在调用 Mock.xtpl(input, options, helpers, partials) 时传入，也可以在 HTML 模板中通过 HTML 注释配置（为了避免侵入现有的代码和开发模式），格式为 。下面的 2 个示例演示了通过 HTML 注释配置数据模板的两种方式：集中配置、分散配置。

示例1：在 HTML 模板中通过一个 HTML 注释集中配置数据模板。

var tpl = Mock.heredoc(function() {/*!
{{email}}{{age}}
<!-- Mock { email: '@EMAIL',age: '@INT(1,100)'
} -->*/
})
var data = Mock.xtpl(tpl)
console.log(JSON.stringify(data, null, 4))
// =>
{"email": "t.lee@clark.net","age": 33
}

示例2：在 HTML 模板中通过多个 HTML 注释分散配置数据模板。

var tpl = Mock.heredoc(function() {/*!
{{email}}{{age}}
<!-- Mock { email: '@EMAIL'
} -->
<!-- Mock { age: '@INT(1,100)' } -->*/
})
var data = Mock.xtpl(tpl)
console.log(JSON.stringify(data, null, 4))
// =>
{"email": "j.walker@brown.edu","age": 83
}

4.5 Mock.heredoc(fn)

Mock.heredoc(fn)
以直观、舒适、安全的方式书写（多行）HTML 模板。

使用示例如下所示：

var tpl = Mock.heredoc(function() {/*!
{{email}}{{age}}
<!-- Mock { email: '@EMAIL',age: '@INT(1,100)'
} -->*/
})
console.log(tpl)
// =>
"{{email}}{{age}}
<!-- Mock { email: '@EMAIL',age: '@INT(1,100)'
} -->"

5、模拟请求

这个部分主要是使用Mock.mock()，通过调整rurl(需要拦截的URL)、rtype(接口请求类型)以及function(options):生成响应数据的函数

5.1 模拟get请求

const openListTemplate={'list|10-100':[{// 'statusName|1':'即将开场','status|1':[0,1,2],'startTime':'@DATE','endTime':'@NOW()','img':'@IMAGE','sessionName|2':'sessionName','number|1-100':100,'id':'@INTEGER'}]
}
const openingList=Mock.mock(openListTemplate)
//Mock模拟请求
Mock.mock(`${api.order}treasures/session/list`,'get',()=>{return {code:100,data:openingList.list,message:'success'}
})
export function getOpeningList(params){return axios.request({url:`${api.order}treasures/session/list`,method:'get',params})
}

正常调用getOpeningList即可。代码得到结果如下：
在这里插入图片描述

5.2 模拟post请求

const favoriteListTemplate={'list|10-20':[{'status|1':[0,1],'startTime':'@DATE','endTime':'@NOW()','img':'@IMAGE','sessionName|2':'sessionName','number|1-100':100,'id':'@INTEGER','favorite_flag|1':[0,1],'guaidPrice|1-100.2':100,'price|1-100.2':100,'description|2':'description','name|2':'name'}]
}
const favoriteList=Mock.mock(favoriteListTemplate)
Mock.mock(`${api.order}treasures/favorite/addFavorite`,'post',(req)=>{return {code:100,message:'success',data:favoriteList.list}
})
export function addFavorite(params){return axios.request({url:`${api.order}treasures/favorite/addFavorite`,method:'post',params})
}

在这里插入图片描述
tips
put/delete与上面的差不多

5.3 模拟put/delete请求

Mock.mock(`${api.order}treasures/shopList/cancelOrder`,'put',(req)=>{return {code:100,message:'success',data:req}
})
export function deleteShop(params){return axios.request({url:`${api.order}treasures/shopList/cancelOrder`,method:'put',params})
}Mock.mock(`${api.order}treasures/shopList/delete`,'delete',(req)=>{return {code:100,message:'success',data:req}
})
export function deleteShop(data){return axios.request({url:`${api.order}treasures/shopList/delete`,method:'delete',data})
}

参考文献：

  1. 官网
  2. mockjs文档

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

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

相关文章

Java-SPI机制

Java-SPI机制

SPI基本概念 SPI&#xff08;Service Provider Interface&#xff09;是一种服务发现机制&#xff0c;为某个接口寻找服务实现的机制。这有点类似 IoC 的思想&#xff0c;将装配的控制权移交到了程序之外。SPI 将服务接口和具体的服务实现分离开来&#xff0c;将服务调用方和服…
阅读更多...
Linux 强大的网络命令：nc命令操作方法

Linux 强大的网络命令：nc命令操作方法

Netcat&#xff08;或简称nc&#xff09;是一个强大的网络工具&#xff0c;它在Linux系统中广泛使用&#xff0c;可用于创建各种网络连接。它被描述为"网络的瑞士军刀"&#xff0c;因为它的功能非常灵活&#xff0c;可以在网络中执行多种任务。 在大多数Linux发行版中…
阅读更多...
速锐得解码匹配吉利枫叶80V/60S远程控制汽车应用B端市场

速锐得解码匹配吉利枫叶80V/60S远程控制汽车应用B端市场

吉利枫叶80V/60S这两款车平时是不多见的&#xff0c;因为吉利枫叶的定位就的B端市场&#xff0c;包括了公务用车、共享出行、网约车、大客户定制&#xff0c;所以&#xff0c;好风凭借力&#xff0c;送我上青云&#xff0c;吉利在默默地发着一笔小财&#xff0c;或者说拓宽了更…
阅读更多...
Go 复合数据类型

Go 复合数据类型

1. 数组&#xff08;array&#xff09;&#xff08;OK&#xff09; 数组数组的概念数组是具有固定长度且拥有零个或多个相同数据类型元素的序列 i. 元素的数据类型相同 ii. 长度固定的序列 iii. 零个或多个元素的序列 与 slice 对比 由于数组的长度固定&#xff0c;所以在 G…
阅读更多...
2023年春秋杯网络安全联赛冬季赛 Writeup

2023年春秋杯网络安全联赛冬季赛 Writeup

文章目录 Webezezez_phppicup Misc谁偷吃了外卖modules明文混淆 Pwnnmanagerbook Reupx2023 CryptoCF is Crypto Faker 挑战题勒索流量Ezdede 可信计算 Web ezezez_php 反序列化打redis主从复制RCE&#xff1a;https://www.cnblogs.com/xiaozi/p/13089906.html <?php c…
阅读更多...
教育大模型浪潮中，松鼠Ai的“智适应”故事好讲吗？

教育大模型浪潮中，松鼠Ai的“智适应”故事好讲吗？

“计算机对于学校和教育产生的影响&#xff0c;远低于预期&#xff0c;要改变这一点&#xff0c;计算机和移动设备必须致力于提供更多个性化的课程&#xff0c;并提供有启发性的反馈。” 这是2011年5月份乔布斯与比尔盖茨最后一次会面时的记录&#xff0c;当时的电脑还十分落后…
阅读更多...
Buy One Carton of Milk（AtCoder abc331B）

Buy One Carton of Milk（AtCoder abc331B）

阅读更多...
大型语言模型 (LLM)全解读

大型语言模型 (LLM)全解读

一、大型语言模型&#xff08;Large Language Model&#xff09;定义 大型语言模型 是一种深度学习算法&#xff0c;可以执行各种自然语言处理 (NLP) 任务。 大型语言模型底层使用多个转换器模型&#xff0c; 底层转换器是一组神经网络。 大型语言模型是使用海量数据集进行训练…
阅读更多...
Yuliverse：引领区块链游戏新篇章！

Yuliverse：引领区块链游戏新篇章！

数据源&#xff1a;Yuliverse Dashboard 作者&#xff1a;lesleyfootprint.network 什么是 Yuliverse Yuliverse 是一款元宇宙游戏的先锋&#xff0c;是一款主打 Explore to earn 和 Social to earn 的链游。 这是一款能让你边玩边赚钱的免费区块链游戏&#xff0c;得到 LI…
阅读更多...
如何在WordPress中使用 AI 进行 SEO(12 个工具)

如何在WordPress中使用 AI 进行 SEO(12 个工具)

您想在 WordPress 中使用 AI 进行 SEO 吗&#xff1f; 人工智能正在对 SEO 行业产生重大影响。已经有优秀的人工智能 SEO 工具&#xff0c;您可以使用它们来提高您的 SEO 排名&#xff0c;而无需付出太多努力。 在本文中&#xff0c;我们将向您展示如何通过我们精心挑选的工具…
阅读更多...
代码随想录第十八天 513 找树左下角的值 112 路径之和 106 从中序与后序遍历序列构造二叉树

代码随想录第十八天 513 找树左下角的值 112 路径之和 106 从中序与后序遍历序列构造二叉树

LeetCode 513 找树左下角的值 题目描述 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 思路 1.确定递…
阅读更多...
MySQL用户管理

MySQL用户管理

1.用户 1.1 用户信息 mysql> use mysql; Database changed mysql> select host,user,authentication_string from user; --------------------------------------------------------------------- | host | user | authentication_string | --…
阅读更多...
ubuntu 20.04 aarch64 平台交叉编译 libffi 库

ubuntu 20.04 aarch64 平台交叉编译 libffi 库

前言 由于打算交叉编译 python&#xff0c;但是依赖 libffi 库&#xff0c;也就是 libffi 库也需要交叉编译 环境&#xff1a; ubuntu 20.04 交叉编译工具链&#xff1a;这里使用 musl libc 的 gcc 交叉编译工具链&#xff0c;aarch64-linux-musleabi-gcc&#xff0c;gcc 版本…
阅读更多...
智谱AI官网再升级，GLM-4，智能体，AI作图长文档全部搞定

智谱AI官网再升级，GLM-4，智能体，AI作图长文档全部搞定

创建智能体 智能体体验中心 可以看到智谱AI也推出了自己的智能体&#xff0c;并且官方内置了丰富多样的智能体供大家免费体验。 GLM-4 原生支持自动联网、图片生成、数据分析等复杂任务&#xff0c;现开放体验中&#xff0c;快来开启更多精彩。写一篇《繁花》的影评&#xf…
阅读更多...
[每日一题] 01.23 - 画矩形

[每日一题] 01.23 - 画矩形

画矩形 height,width,c,d input().split() height,width,d int(height),int(width),int(d) lis [c * width if d else c * (width - 2) c for i in range(height) ]lis: ##### # # # # ##### 或 # # # # # # # #if not d:print(c * width)for i in lis[1:-1…
阅读更多...
1986-Minimum error thresholding

1986-Minimum error thresholding

1 论文简介 《Minimum error thresholding》是由 Kittler 和 Illingworth 于 1986 年发布在 Pattern Recognition 上的一篇论文。该论文假设原始图像中待分割的目标和背景的分布服从高斯分布&#xff0c;然后根据最小误差思想构建最小误差目标函数&#xff0c;最后取目标函数最…
阅读更多...
JAVAEE初阶 网络编程(三)

JAVAEE初阶 网络编程(三)

TCP回显服务器 一. TCP的API二. TCP回显服务器的代码分析三. TCP回显服务器代码中存在的问题四. TCP回显服务器代码五. TCP客户端的代码六.TCP为基准的回显服务器的执行流程 一. TCP的API 二. TCP回显服务器的代码分析 这的clientSocket并不是表示用户端的层面东西&#xff0c;…
阅读更多...
kubernets集群搭建

kubernets集群搭建

集群搭建 1.准备工作(所有节点都执行)1.1配置/etc/hosts文件1.2关闭防火墙1.3关闭selinux1.4关闭交换分区&#xff0c;提升性能1.5修改机器内核参数1.6配置时间同步1.7配置阿里云镜像源 2.安装docker服务(所有节点都执行)2.1安装docker服务2.2配置docker镜像加速和驱动 3.安装配…
阅读更多...
【分布式技术】消息队列Kafka

【分布式技术】消息队列Kafka

目录 一、Kafka概述 二、消息队列Kafka的好处 三、消息队列Kafka的两种模式 四、Kafka 1、Kafka 定义 2、Kafka 简介 3、Kafka 的特性 五、Kafka的系统架构 六、实操部署Kafka集群 步骤一&#xff1a;在每一个zookeeper节点上完成kafka部署 ​编辑 步骤二&#xff1a…
阅读更多...
【GitHub项目推荐--微软开源的课程（Web开发课程/机器学习课程/物联网课程/数据科学课程）】【转载】

【GitHub项目推荐--微软开源的课程（Web开发课程/机器学习课程/物联网课程/数据科学课程）】【转载】

微软在 GitHub 开源了四大课程&#xff0c;面向计算机专业或者入门编程的同学。分别是 Web 开发课程、机器学习课程、物联网课程和数据分析课程。 四大课程在 GitHub 上共斩获 90K 的Star&#xff0c;每一课程包含 20 多小节&#xff0c;完成课程大约需要 12 周。每小节除了视…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023