mockjs使用（2）

news2024/11/23 17:18:40

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.coloradmin.cn/o/1406542.html

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

相关文章

解决方案 | 基于SFTP协议的文件传输断点续传Java实现方案

解决方案 | 基于SFTP协议的文件传输断点续传Java实现方案

背景 因项目需要&#xff0c;我们服务每天都需要通过SFTP协议来对接上下游进行文件传输&#xff0c;但是对于一些大文件&#xff0c;在与第三方公司的服务器对接过程中很可能会因为网络问题或上下游服务器性能问题导致文件上传或者下载被中断&#xff0c;每次重试都需要重新对…
阅读更多...
【Python进阶编程】python编程高手常用的设计模式（持续更新中）

【Python进阶编程】python编程高手常用的设计模式（持续更新中）

Python编程高手通常熟练运用各种设计模式&#xff0c;这些设计模式有助于提高代码的可维护性、可扩展性和重用性。 以下是一些Python编程高手常用的设计模式&#xff1a; 1.单例模式&#xff08;Singleton Pattern&#xff09; 确保一个类只有一个实例&#xff0c;并提供全局…
阅读更多...
PLC协议转BACnet网关BA107

PLC协议转BACnet网关BA107

随着通讯技术和控制技术的发展&#xff0c;为了实现楼宇的高效、智能化管理&#xff0c;集中监控管理已成为楼宇智能管理发展的必然趋势。在此背景下&#xff0c;高性能的楼宇暖通数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于楼宇自控和暖通空调系统应用中…
阅读更多...
静态分析C语言生成函数调用关系的利器——cflow（二）

静态分析C语言生成函数调用关系的利器——cflow（二）

大纲 环境准备选择项目分析代码简单分析高级分析坑&#xff1a;不能显示main函数所有调用函数的调用栈坑2&#xff1a;重定义错误坑3&#xff1a;缺失编译时产生的文件坑4&#xff1a;缺失工程的头文件包含路径指定坑5&#xff1a;操作系统的坑只存在于windows操作系统上的文件…
阅读更多...
大型语言模型 (LLM)全解读

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

一、大型语言模型&#xff08;Large Language Model&#xff09;定义 大型语言模型 是一种深度学习算法&#xff0c;可以执行各种自然语言处理 (NLP) 任务。 大型语言模型底层使用多个转换器模型&#xff0c; 底层转换器是一组神经网络。 大型语言模型是使用海量数据集进行训练…
阅读更多...
服务器数据恢复—EVA存储raid5硬盘离线的数据恢复案例

服务器数据恢复—EVA存储raid5硬盘离线的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌EVA某型号存储&#xff0c;底层是RAID5阵列&#xff0c;划分了若干lun。 服务器故障&分析&#xff1a; 该存储设备中raid5阵列有两块硬盘掉线&#xff0c;存储中的lun丢失。 将故障服务器存储中的所有磁盘编号后取出&#xff0c;硬件…
阅读更多...
web安全思维导图(白帽子)

web安全思维导图(白帽子)

web安全思维导图(白帽子) 客户端脚本安全 服务端应用安全 白帽子讲web安全 安全运营体系建设
阅读更多...
外网ssh远程连接服务器

外网ssh远程连接服务器

文章目录 外网ssh远程连接服务器一、前言二、配置流程1. 在服务器上安装[cpolar](https://www.cpolar.com/)客户端2. 查看版本号&#xff0c;有正常显示版本号即为安装成功3. token认证4. 简单穿透测试5. 向系统添加服务6. 启动cpolar服务7. 查看服务状态8. 登录后台&#xff0…
阅读更多...
Unity之Cinemachine教程

Unity之Cinemachine教程

前言 Cinemachine是Unity引擎的一个高级相机系统&#xff0c;旨在简化和改善游戏中的相机管理。Cinemachine提供了一组强大而灵活的工具&#xff0c;可用于创建令人印象深刻的视觉效果&#xff0c;使开发人员能够更轻松地掌控游戏中的摄像机行为。 主要功能和特性包括&#x…
阅读更多...
JAVA算法—排序

JAVA算法—排序

目录 *冒泡排序&#xff1a; *选择排序&#xff1a; 插入排序&#xff1a; 快速排序&#xff1a; 总结&#xff1a; 以下全部以升序为例 *冒泡排序&#xff1a; 引用&#xff1a; 在完成升序排序时&#xff0c;最大的元素会经过一轮轮的遍历逐渐被交换到数列的末尾&#…
阅读更多...
网络安全的使命：守护数字世界的稳定和信任

网络安全的使命：守护数字世界的稳定和信任

在数字化时代&#xff0c;网络安全的角色不仅仅是技术系统的守护者&#xff0c;更是数字社会的信任保卫者。网络安全的使命是保护、维护和巩固数字世界的稳定性、可靠性以及人们对互联网的信任。本文将深入探讨网络安全是如何履行这一使命的。 第一部分&#xff1a;信息资产的…
阅读更多...
Flink编程——最小程序MiniProgram

Flink编程——最小程序MiniProgram

最小程序MiniProgram 前面我们已经搭建起了Flink 的基础环境&#xff0c;这一节我们就在上一节的基础上&#xff0c;进行编写我们的第一个Flink 程序&#xff0c;开始之前我们先看一下一个完整的Flink 程序是什么样的 Flink 程序结构 为了演示Flink 程序结构&#xff0c;我们…
阅读更多...
【TEE论文】Confidential Serverless Made Efficient with Plug-In Enclaves （2021 ISCA）

【TEE论文】Confidential Serverless Made Efficient with Plug-In Enclaves （2021 ISCA）

Confidential Serverless Made Efficient with Plug-In Enclaves ipads.se.sjtu.edu.cn/chinasys21/vedios/Confidential Serverless Made Efficient with Plug-In Enclaves-李明煜.mp4 问题&#xff1a;在SGX飞地中运行现有的无服务器应用程序&#xff0c;并观察到性能下降可…
阅读更多...
【ASOC全解析（一）】ASOC架构简介和欲解决的问题

【ASOC全解析（一）】ASOC架构简介和欲解决的问题

【ASOC全解析&#xff08;一&#xff09;】ASOC架构简介和欲解决的问题 一、什么是ASOC以及ASOC解决的三个问题二、ASOC的组成与功能解决第一个问题解决第二个问题解决第三个问题 三、ASOC基本工作原理 /********************************************************************…
阅读更多...
使用Sobel算子把视频转换为只剩边缘部分

使用Sobel算子把视频转换为只剩边缘部分

效果展示 原始视频 修改后的视频 整体代码 import cv2vc cv2.VideoCapture(test.mp4)if vc.isOpened():open, frame vc.read() else:open Falsei 0 while open:ret, frame vc.read()if frame is None:breakif ret True:i 1# 转换为灰度图gray cv2.cvtColor(frame, cv…
阅读更多...
RabbitMQ进阶篇【理解➕应用】

RabbitMQ进阶篇【理解➕应用】

&#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于RabbitMQ的相关操作吧 目录 &#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 一.什么是交换机 1.概念释义 2.例…
阅读更多...
聚观早报 | 苹果将开放第三方NFC支付；华为P70系列参数曝光

聚观早报 | 苹果将开放第三方NFC支付；华为P70系列参数曝光

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 1月23日消息 苹果将开放第三方NFC支付 华为P70系列参数曝光 Celestiq已正式开始量产 岚图汽车官宣与华为合作 美…
阅读更多...
LLM + RecSys 初体验（上）

LLM + RecSys 初体验（上）

最近在逛小红书的时候&#xff0c;发现了一个新的GPU算力租赁平台&#xff0c;与AutoDL和恒源云等平台类似。正巧&#xff0c;官网有活动&#xff0c;注册即送RTX 4090三个小时&#xff0c;CPU 5 小时。正巧最近在测试 LLM推荐系统的 OpenP5 平台&#xff0c;果断入手测试! 用…
阅读更多...
力扣精选算法100道——x的平方根(二分查找专题)

力扣精选算法100道——x的平方根(二分查找专题)

x的平方根 首先看到这个题目的时候&#xff0c;我们需要对上一个二分查找专题的题目进行深度理解&#xff0c;然后了解模板&#xff0c;这题是完全利用的上一题的模板知识进行&#xff0c;如果直接看这个题目可能是有点懵的&#xff0c;因为我这里直接利用模板进行解题。力扣…
阅读更多...
nexus清理docker私库

nexus清理docker私库

下载nexus-cli客户端&#xff0c;并非必须下载到服务器&#xff0c;理论上只要能访问到nexus就行 wget https://s3.eu-west-2.amazonaws.com/nexus-cli/1.0.0-beta/linux/nexus-cli这个链接下载不了了&#xff0c;末尾有资源下载&#xff0c;里面包含了完整包和脚本&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023