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请求类型。例如GETPOSTPUTDELETE等。
  • 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 ):记录数据模板。当拦截到匹配rurlrtype的 Ajax 请求时,将根据数据模板template生成模拟数据,并作为响应数据返回。
  • Mock.mock( rurl, rtype, function(options) ):记录用于生成响应数据的函数。当拦截到匹配 rurlrtype 的 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文档

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT quick基础:组件Canvas

参考《QT quick 核心编程》 使用qml画图。以下面的代码段为例&#xff0c;记录画图方法。 一、基本用法 Canvas {// 画布id:canvas;width: parent.width; // 画布宽度height: parent.height;// 画布高度onPaint: {var ctx canvas.getContext("2d"); // 使用画布类…

Scala基础知识

scala 1、scala简介 ​ scala是运行在JVM上的多范式编程语言&#xff0c;同时支持面向对象和面向函数式编程。 2、scala解释器 要启动scala解释器&#xff0c;只需要以下几步&#xff1a; 按住windows键 r输入scala即可 在scala命令提示窗口中执行:quit&#xff0c;即可退…

深度学习笔记(九)——tf模型导出保存、模型加载、常用模型导出tflite、权重量化、模型部署

文中程序以Tensorflow-2.6.0为例 部分概念包含笔者个人理解&#xff0c;如有遗漏或错误&#xff0c;欢迎评论或私信指正。 本篇博客主要是工具性介绍&#xff0c;可能由于软件版本问题导致的部分内容无法使用。 首先介绍tflite: TensorFlow Lite 是一组工具&#xff0c;可帮助开…

Java21 + SpringBoot3集成easy-captcha实现验证码显示和登录校验

文章目录 前言相关技术简介easy-captcha 实现步骤引入maven依赖定义实体类定义登录服务类定义登录控制器前端登录页面实现测试和验证 总结附录使用Session缓存验证码前端登录页面实现代码 前言 近日心血来潮想做一个开源项目&#xff0c;目标是做一款可以适配多端、功能完备的…

Android.mk和Android.bp的区别和转换详解

Android.mk和Android.bp的区别和转换详解 文章目录 Android.mk和Android.bp的区别和转换详解一、前言二、Android.mk和Android.bp的联系三、Android.mk和Android.bp的区别1、语法&#xff1a;2、灵活性&#xff1a;3、版本兼容性&#xff1a;4、向后兼容性&#xff1a;5、编译区…

鸿蒙开发笔记(二十三):图形展示 Image,Shape,Canvas

1. Image 在应用中显示图片需要使用Image组件实现&#xff0c;Image支持多种图片格式&#xff0c;包括png、jpg、bmp、svg和gif&#xff0c;具体用法请参考Image组件。 Image通过调用接口来创建&#xff0c;接口调用形式如下&#xff1a; Image(src: string | Resource | me…

力扣第92题——反转链表 II(C语言题解)

题目描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1…

精品基于Uniapp+springboot智慧农业环境监测App

《[含文档PPT源码等]精品基于Uniappspringboot智慧农业环境监测App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm …

Android双指缩放ScaleGestureDetector检测放大因子大图移动到双指中心点ImageView区域中心,Kotlin

Android双指缩放ScaleGestureDetector检测放大因子大图移动到双指中心点ImageView区域中心&#xff0c;Kotlin 在 Android双击图片放大移动图中双击点到ImageView区域中心&#xff0c;Kotlin-CSDN博客 基础上&#xff0c;这次使用ScaleGestureDetector检测两根手指的缩放动作&a…

一起玩儿物联网人工智能小车(ESP32)——44. 利用红外测距模块GP2Y0E03实现避障小车

摘要&#xff1a;本文介绍使用红外测距模块GP2Y0E03实现避障小车 在前边已经介绍了两种非接触测距的办法&#xff0c;分别是超声波测距和激光测距&#xff0c;在这里&#xff0c;再介绍另一种常用的测距传感器——红外测距传感器。红外测距的工作原理是&#xff0c;利用红外信号…

HuoCMS|免费开源可商用CMS建站系统HuoCMS 2.0下载(thinkphp内核)

HuoCMS是一套基于ThinkPhp6.0Vue 开发的一套HuoCMS建站系统。 HuoCMS是一套内容管理系统同时也是一套企业官网建设系统&#xff0c;能够帮过用户快速搭建自己的网站。可以满足企业站&#xff0c;外贸站&#xff0c;个人博客等一系列的建站需求。HuoCMS的优势: 可以使用统一后台…

数学建模--Radar图绘制

1.Radar图简介 最近在数学建模中碰见需要绘制Radar图(雷达图)的情况来具体分析样本的各个特征之间的得分与优劣关系&#xff0c;这样的情况比较符合雷达图的使用场景&#xff0c;一般来说&#xff0c;雷达图适用于展示多个维度的数据&#xff0c;并在一个平面上直观地呈现出不同…

前端每日一练 “文字穿透效果”

前言 我都不知道用什么样的词来描述这个效果&#xff0c;反正你看吧&#xff01;这个效果看上去很简单&#xff0c;但是一旦实现起来你会发现也不复杂&#xff0c;废话不多说直接上源码&#xff0c;喜欢的点个关注、留个免费的 html源码 <!DOCTYPE html> <html>&…

13.8.1异步、异步、异步 Page720~721

#include <iostream> #include <thread> #include <future>using namespace std;///定时炸弹第一波 void sync_sleep(int s) {cout << "sync_sleep----不使用异步" << endl;///启动定时this_thread::sleep_for(chrono::seconds(s)); /…

《WebKit 技术内幕》学习之十(2): 插件与JavaScript扩展

2 Chromium PPAPI插件 2.1 原理 插件其实是一种统称&#xff0c;表示一些动态库&#xff0c;这些动态库根据定义的一些标准接口可以跟浏览器进行交互&#xff0c;至于这个标准接口是什么都可以&#xff0c;重要的是大家都遵循它们&#xff0c;NPAPI接口标准只是其中的一种&a…

FastDFS分布式文件存储

为什么会有分布式文件系统&#xff1f; 分布式文件系统是面对互联网的需求而产生。因为互联网时代要对海量数据进行存储。很显然靠简单的增加硬盘个数已经满足不了我们的要求。因为硬盘传输速度有限但是数据在急剧增长&#xff0c;另外我们还要要做好数据备份、数据安全等。采用…

初识k8s(概述、原理、安装)

文章目录 概述由来主要功能 K8S架构架构图组件说明ClusterMasterNodekubectl 组件处理流程 K8S概念组成PodPod控制器ReplicationController&#xff08;副本控制器&#xff09;ReplicaSet &#xff08;副本集&#xff09;DeploymentStatefulSet &#xff08;有状态副本集&#…

6 时间序列(不同位置的装置如何建模): GRU+Embedding

很多算法比赛经常会遇到不同的物体产生同含义的时间序列信息&#xff0c;比如不同位置的时间序列信息&#xff0c;风力发电、充电桩用电。经常会遇到该如此场景&#xff0c;对所有数据做统一处理喂给模型&#xff0c;模型很难学到区分信息&#xff0c;因此设计如果对不同位置的…

【Linux】常见指令(一)

前言: Linux有许多的指令&#xff0c;通过学习这些指令&#xff0c;可以对目录及文件进行操作。 文章目录 一、基础指令1. ls—列出目录内容2. pwd—显示当前目录3. cd—切换目录重新认识指令4. touch—创建文件等5. mkdir—创建目录6. rmdir指令 && rm 指令7. man—显…

linux源码编译安装llvm

目录 1 建立文件夹llvm 2 下载源码到llvm文件夹 3 解压上述文件 4 将解压后的3个文件夹改名&#xff0c;并移动到llvm-9.0.0.src中&#xff1a; 5 在llvm文件夹内建立build文件夹&#xff0c;并进入该文件夹&#xff1a; 6 执行cmake命令 7 make 8 安装 9 安装成功后…