mockjs使用（2）

已于 2024-01-22 15:16:44 修改
阅读量1k 收藏 17
点赞数 17
分类专栏： mockjs 文章标签： 前端 vue.js html5 css3 mock
于 2024-01-19 18:13:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45618535/article/details/135654994
版权

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文档
伊昂呀
关注
  • 17
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
关于 vue2 后台管理系统构建 vue2+mock.js 的经典案例
hulei19900322的博客
06-13 2478
vue2 mock.js
Mock安装及应用
qq_27474555的博客
09-22 234
7、在组件中发送mock请求（譬如调用调用 reqgetBannerList 函数）该属性是一个工具类，用于生成各种随机数据。在mock文件夹下创建json文件和mock服务器。5、新建网络请求 mockRequests.js。创建mock服务器，设置响应体，就用数据。banner.json：（轮播图数据）2、Mock.Random属性。4、引用mock服务。6、创建网络请求函数。
接口挂了？没事，我在vue.js中实现自动生成数据的网络请求，拷贝即用，速来围观！
花森酱JioJio
05-07 527
封装了一个轻量化、自由拓展、低耦合的网络模块，无需后端服务，直接响应字符串、数字、布尔值、数组、图片等随机数据，支持取消请求、配置覆盖、请求状态提示、文件上传、下载等功能，极大地提升前端的开发体验。
Mock.js介绍及使用总结
哆啦A瑶的博客
03-05 896
Mock.js用于生成随机的模拟数据，拦截 Ajax 请求，返回伪造的数据。因此在前端开发阶段就可以通过这个工具进行沉浸式开发，实现数据自产自销，降低和后端的沟通成本，实现真正意义上的前后端开发解耦合。相信我，使用这个工具，一定能够提高你的工作效率。那么Mock.js有哪些特点呢？前后端分离：让前端攻城师独立于后端进行开发。增加单元测试的真实性：通过随机数据，模拟各种场景。开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单：符合直觉的接口。数据类型丰富。
mockJs文档（二）
热门推荐
Start2019
12-21 1万+
mockJs官方文档 1. Mock.mock()：根据数据模板生成模拟数据。 2. Mock.setup()：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。 3. Mock.Random：是一个工具类，用于生成各种随机数据。 4. Mock.valid(template, data)：校验真实数据 data 是否与数据模板 template 匹配。 5. Mock.toJSONSchema()：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
vue中使用mock.js（二）优雅的使用
陈小陈的博客
07-03 471
mock
mockjs的使用案例
03-27
mockjs 的使用步骤，模拟各种数据
vue-cli项目中使用Mockjs详解
10-18
主要介绍了vue-cli项目中使用Mockjs详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vite+vue3使用模块化批量发布Mockjs接口
最新发布
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
quasar-mockjs-example:Quasar 使用 Mock.js
05-29
不过Element-UI最近似乎很少维护了，在被网友安利了Quasar后看来其官方文档 Datamock-server，十分的好用，于是像移植过来，至于为什么不直接使用Mockjs呢，vue-element-admin已经讲的很清楚了： 由于 是一个纯前端...
mockjs-demo
05-10
接下来，`demo1.html`、`demo2.html`和`demo3.html`是演示页面，它们可能包含了如何在实际项目中调用MockJS模拟的接口的示例代码。这些HTML文件通常会使用JavaScript（如jQuery，这里是`jquery-2.0.3.min.js`）来...
mockjs的入门 基本用法
12-27
适用于前后端分离，往往在后端同学接口还没有做好的时候，前端同学不能干等着呀，所以就需要虚拟接口上场啦^-^
Mock.js使用
灰色头像@的博客
03-17 895
Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的urlmockjs可以拦截ajax请求，返回设定好的数据。
前端mock数据之mockjax和mockjson
weixin_30300225的博客
08-17 130
用处 在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费了很多时间, 现在有个利器可以解决这个问题, 即使不用后台,只要提前制定好接口的报文,那么前端就可以自己模拟接口来进行接口测试了, 今天要讲的东西就是mockjax和mockJSON 简介 mo...
Mock.js数据生成器2_入门案例
grow_的博客
04-13 395
需求：生成4条列表数据 编码实现： 1.创建项mock-demo，初始化项目 npm init -y //y是yes的意思，生成默认的package.json 2.Mock.js安装 npm install mockjs 3.创建mock.js const Mock=require('mockjs') const data=Mock.mock({ 'list|4':[ { 'id':1, 'name':'红红' } ] }) con...
前端 Mock 系列二：Mock.js 使用
csdn姚宏波
04-16 598
继续上篇内容 Mock.js 可以随机生成数据，省区人工制造虚假数据的时间 要想掌握 Mock.js 生成数据的方法，重点要掌握如下两点 模板定义语法 占位符的使用 1. 模板定义语法 'name|rule': value name 就是属性名称 rule 是规则 value 是值 比如下面代码 { name: '李白' } 上面就定义了一套模板 其中包含属性名称和值，并不包含规则 所以请求时，会原样返回 规则的作用就是规定如何生成属性的值 比如 ...
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 721
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
mockjs详细介绍
m0_68907098的博客
10-24 3864
官网: https://github.com/nuysoft/Mock/wiki/Getting-Started在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口,.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查1.前后端分离， 2.可随机生成大量的数据 3.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。 2，回到我们项目的main.js文件下 3，在我们的utils文件夹下面新建一个
使用Mock.js进行独立于后端的前端开发
weixin_33805992的博客
08-12 443
概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器： <!-- （必选）加载 Mock --> <script src="http://mockjs.com/dist/mock.js"></script> <...
vue2中使用mockjs
05-17
在 Vue2 中使用 Mock.js 可以模拟数据，方便前端开发调试。 首先，需要安装 Mock.js： ``` npm install mockjs --save-dev ``` 然后在 main.js 中引入并配置 Mock.js： ```javascript import Mock from 'mockjs'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伊昂呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值