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请求

参考文献：

  1. 官网
  2. mockjs文档

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

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

相关文章

2019年认证杯SPSSPRO杯数学建模C题(第二阶段)保险业的数字化变革全过程文档及程序

2019年认证杯SPSSPRO杯数学建模C题(第二阶段)保险业的数字化变革全过程文档及程序

2019年认证杯SPSSPRO杯数学建模 基于统计建模的车险业数字变革研究 C题 保险业的数字化变革 原题再现&#xff1a; 车险&#xff0c;即机动车辆保险。保险自身是一种分散风险、消化损失的经济补偿制度&#xff0c;车险即为分散机动车辆在行驶过程中可能发作的未知风险和损失…
阅读更多...
【Unity游戏开发入门】游戏资源商店资源导入

【Unity游戏开发入门】游戏资源商店资源导入

在专业的游戏开发环境中&#xff0c;游戏资源&#xff0c;主要包括游戏模型和材质&#xff0c;通常由专业的建模师制作。这些建模师负责创造游戏中的视觉元素&#xff0c;然后将它们交给游戏开发团队以整合到游戏中。 对于个人开发者来说&#xff0c;制作这些资源可能既困难又…
阅读更多...
使用WAF防御网络上的隐蔽威胁之命令注入攻击

使用WAF防御网络上的隐蔽威胁之命令注入攻击

命令注入攻击是网络安全领域的一种严重威胁&#xff0c;它允许攻击者在易受攻击的应用程序上执行恶意命令。 这种攻击通常发生在应用程序将用户输入错误地处理为操作系统命令的情况下。 什么是命令注入攻击 定义&#xff1a;命令注入攻击发生在攻击者能够在易受攻击的应用程…
阅读更多...
服务器自动拉取git代码运行脚本

服务器自动拉取git代码运行脚本

# 1.场景分析 工作中常常会遇到本地编辑shell脚本或者python脚本完成后需要在服务器上运行的情况&#xff0c;每次进行拷贝费时费力。下面介绍下通过git管理器&#xff0c;实现本地与服务器代码同步的方式。选择公司搭建的gitlab为例&#xff1a; 2.gitlab配置服务器ssh密钥 …
阅读更多...
JS执行顺序

JS执行顺序

众所周知&#xff0c;JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程&#xff0c;称之为main thread-主线程) 1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈)&#xff0c;所有的任务都会被放到调用栈等待主线程执行。 2.Javascript 任…
阅读更多...
【期末不挂科-C++考前速过系列P4】大二C++实验作业-继承和派生（3道代码题）【解析，注释】

【期末不挂科-C++考前速过系列P4】大二C++实验作业-继承和派生（3道代码题）【解析，注释】

前言 大家好吖&#xff0c;欢迎来到 YY 滴C考前速过系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《…
阅读更多...
飞书修改不了名称？飞书如何修改名称，修改昵称

飞书修改不了名称？飞书如何修改名称，修改昵称

飞书如何修改名称 点击编辑信息 在这里修改姓名就可以啦
阅读更多...
uniapp 微信小程序 内嵌H5网页办法

uniapp 微信小程序 内嵌H5网页办法

uniapp 微信小程序 内嵌H5网页办法 如图所示 1.新建webView页面 <template><web-view v-ifhttpUrl :srchttpUrl></web-view> </template><script>export default {data() {return {httpUrl: "",};},onLoad(options) {options.http…
阅读更多...
PHP+MySQL组合开发：微信小程序万能建站源码系统 附带完整的搭建教程

PHP+MySQL组合开发：微信小程序万能建站源码系统 附带完整的搭建教程

随着移动互联网的快速发展&#xff0c;微信小程序已成为企业进行移动营销的重要工具。然而&#xff0c;对于许多中小企业和个人开发者来说&#xff0c;开发一个功能完善、用户体验良好的小程序是一项复杂的任务。罗峰给大家分享一款微信小程序万能建站源码系统。该系统采用PHPM…
阅读更多...
pycharm配置远程开发环境原则与具体步骤

pycharm配置远程开发环境原则与具体步骤

pycharm配置远程环境与映射路径基本原则和具体步骤。 pycharm远程环境基本就是两个事。 远程同步远程解释器 目的是为了解决一下这种麻烦的操作&#xff1a;将本地代码上传到服务器之后&#xff0c;用远程服务器的解释器运行服务器上的代码。 远程同步-一键上传到服务器远程解释…
阅读更多...
计算用3种颜色为6个格子着色的所有可能方法

计算用3种颜色为6个格子着色的所有可能方法

“有六个条幅&#xff08;等宽&#xff09;&#xff0c;每个着以红色、白色或蓝色&#xff0c;把这些条幅连成一面长条旗&#xff0c;这种旗子有多少种&#xff1f;”* 1 1 1 1 1 2 2 1 1 1 1 1 如果旗子的颜色镜像对称视为同一种 按照“&#xff08;伯恩赛德引理…
阅读更多...
【算法Hot100系列】字母异位词分组

【算法Hot100系列】字母异位词分组

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023