mockjs的常用方法

最新推荐文章于 2024-09-04 16:13:30 发布
最新推荐文章于 2024-09-04 16:13:30 发布
阅读量5.7k 收藏 8
点赞数 1
分类专栏： Vue+Element+axios+store(vuex) 文章标签： mockjs的常用方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gao_xu_520/article/details/79723613
版权

一.mock.mock()

根据数据模板生成模拟数据。更关键的是，我们发起Ajax请求的时候要能够接收到这些数据。这就是Mock.mock()的作用啦！

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

(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 选项集。

(2).方法

	
2.Mock.mock( template )   根据数据模板生成模拟数据

3.Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

4.Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

5.Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

7.Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

(3).基本语法

生成字符串

  • 生成指定次数字符串

    const data = Mock.mock({
    "string|4": "yx！"
})
console.log(data)

  • 生成指定范围长度字符串

    const data = Mock.mock({
    "string|1-8": "yx"
})
console.log(data)

生成文本

  • 生成一个随机字符串

    const data = Mock.mock({
    "string": "@cword"
})
console.log(data)

  • 生成指定长度和范围

    const data = Mock.mock({
    string: "@cword(1)",
    str: '@cword(10,15)'
})
console.log(data)

生成标题和句子

  • 生成标题和句子

    const data = Mock.mock({
    title: "@ctitle",
    sentence: '@csentence'
})
console.log(data)

  • 生成指定长度的标题和句子

    const data = Mock.mock({
    title: "@ctitle(8)",
    sentence: '@csentence(50)'
})

  • 生成指定范围的

    const data = Mock.mock({
    title: "@ctitle(5,8)",
    sentence: '@csentence(50,100)'
})
console.log(data)

生成段落

  • 随机生成段落

    const data = Mock.mock({
    content: '@cparagraph()' 
})
console.log(data)

生成数字

  • 生成指定数字

    const data = Mock.mock({
    "number|80": 1
})
console.log(data)

  • 生成范围数字

    const data = Mock.mock({
    "number|1-999": 1
})
console.log(data)

生成增量id

  • 随机生成标识

    const data = Mock.mock({
    id: '@increment()'
})
console.log(data)

生成姓名-地址-身份证号

  • 随机生成姓名-地址-身份证号

    const data = Mock.mock({
    name: '@cname()',
    idCard: '@id()',
    address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
})​
console.log(data)

指定数组返回的条数

  • 指定长度：'data|5'

  • 指定范围：'data|5-10'

    const data = Mock.mock({
    'list|50-99':[
        {
            name: '@cname()',
            address: '@city(true)',
            id: '@increment(1)' // 每次都增加1
        }
    ]
})

 

(4).列子

var data8 = Mock.mock(/\.json/,"get",{
  "name":"@name",
  "isTrue|1":true,
  "color":"@color"
})

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')
})

 

查看官网列子

 

二.Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据

(1).基本使用

1.Mock.Random.boolean() 返回一个随机的布尔值。

2.Random.natural() 返回一个随机的自然数（大于等于 0 的整数）

3.Random.integer()返回一个随机的整数。

4.Random.float()返回一个随机的浮点数。

5.Random.character()返回一个随机字符。

6.Random.string()返回一个随机字符串

7.Random.range( start?, stop, step? )返回一个整型数组。

查看官网

(2).日期+时间

1.日期
Random.date()  "2002-10-23"
Random.date('yyyy-MM-dd')  // "1975-04-27"
Random.date('yy-MM-dd')    //   "00-01-08"

2.时间：
Random.time()   // "05:06:06"

3.日期和时间
Random.datetime('yyyy-MM-dd A HH:mm:ss') 

4.当前的日期和时间 Ranndom.now()

(3).模拟Web数据

生成随机域名(每次运行结果不同)：

var Random = Mock.Random
Random.domain()  //   "nhou.org.cn"
生成随机IP(每次运行结果不同)

var Random = Mock.Random
Random.ip()   //  "74.97.41.159"
生成随机URL(每次运行结果不同)

Random.url()  //   "news://wrmt.na/rbcgbws"

(4).模拟地理位置数据

生成随机省份：

var Random = Mock.Random
Random.province()  //"海南省"
生成随机城市：

var Random = Mock.Random
Random.city()   // "澳门半岛"
生成在某个省份的某个城市：

var Random = Mock.Random
Random.city(true) // "广东省 广州市"

(5).随机图片地址的返回

Random.image( size?, background?, foreground?, format?, text? )

说明：

  1. size（可选），图片的宽高，格式为 ‘宽x高’。默认从下面的数组中随机读取一个：
[
    '300x250', '250x250', '240x400', '336x280', 
    '180x150', '720x300', '468x60', '234x60', 
    '88x31', '120x90', '120x60', '120x240', 
    '125x125', '728x90', '160x600', '120x600', 
    '300x600'
]
  1. background（可选），图片的背景色。默认值为 '#000000'。
  2. foreground（可选），图片的前景色（文字）。默认值为 '#FFFFFF'。
  3. format（可选），图片的格式。默认值为 'png'，可选值包括：'png'、'gif'、'jpg'。
  4. text（可选），图片上的文字。默认值为参数 size。

一段随机Base64图片编码的返回

Random.dataImage( size?, text? )

说明：

  1. size（可选），图片的宽高，格式为 ‘宽x高’。默认从下面的数组中随机读取一个：
[
    '300x250', '250x250', '240x400', '336x280', 
    '180x150', '720x300', '468x60', '234x60', 
    '88x31', '120x90', '120x60', '120x240', 
    '125x125', '728x90', '160x600', '120x600', 
    '300x600'
]

2. text（可选），图片上的文字。默认值为参数 size。

(6).生成一个有吸引力的颜色

Random.color()
Random.hex()

随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
Random.rgb()

随机生成一个有吸引力的颜色，格式为'rgb(r, g, b)'。
Random.rgba()

随机生成一个有吸引力的颜色，格式为 ‘rgba(r, g, b, a)’。
Random.hsl()

随机生成一个有吸引力的颜色，格式为 ‘hsl(h, s, l)’。、

(7).随机生成一段文本

Random.paragraph( min?, max? )

Random.paragraph()
Random.paragraph( len )
Random.paragraph( min, max )

说明：

  1. len（可选），文本中句子的个数。默认值为 3 到 7 之间的随机数。
  2. min（可选），文本中句子的最小个数。默认值为 3。
  3. max（可选），文本中句子的最大个数。默认值为 7。
  4. var Random = Mock.Random
Random.cparagraph()  
// "电力速率离老五准东其引是外适只王。体区先手天里己车发很指一照委争本。
   究利天易里根干铁多而提造干下志维。级素一门件一压路低表且太马。"
【注意】

cparagraph可以看作是多条csentence以逗号连接后的字符串，默认条数为 3 到 7条csentence

通过Random.cparagraph(length )指定句子的个数

Random.cparagraph(2) 

// “而易除应精基还主局按选际复格从导。天第们国分比积造业王该回过白亲。”
通过Random.cparagraph(min?, max?）指定句子的个数的范围：

Random.cparagraph(1, 3)

// "作养装军头确应当号天革来人车号把文。证细专物转民相解状律极或经较把马。其省级支际标业强龙算建物况。"

     

 

（8）.模拟文本数据

生成一条随机的中文句子：

var Random = Mock.Random
Random.csentence()   //  "会候权以解包党心要按总场火义国而片精。"
【注意】

1、默认一条句子里的汉字个数在12和18之间

2、通过Random.csentence( length )指定句子的汉字个数：

Random.csentence(5)  // "文斗领拉米。"
3.通过Random.csentence( min, max)指定句子汉字个数的范围： 

Random.csentence(3, 5)  // "住验住"

(9)模拟姓名数据

模拟全名：

Random.cname()   // "黄秀英"
模拟姓氏：

Random.cfirst()   // "龙"
模拟名字

Random.clast()  // "秀英"

 

三.Mock.valid( template, data )

校验真实数据 data 是否与数据模板 template 匹配。

template 必选。  表示数据模板，可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。
data   必选。 表示真实数据。

eg:
var template = {
    name: 'value1'
}
var data = {
    name: 'value2'
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
    }
]

四.Mock.toJSONSchema( template )

把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

五.Mock.setup()

Mock.setup( settings ) 配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

1.参数的含义和默认值
    settings  必选。配置项集合。
    timeout   可选。
     指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

 

面条请不要欺负汉堡
关注
专栏目录
mockjs在项目中的使用方法详解
haoyanyu_的博客
02-29 1693
Mockjs是一个模拟数据生成器，用于帮助前端开发，使其独立于后端进程，并减少一些单调性，特别是在编写自动化测试时。 一、项目实战 1. 安装mockjs npm install mockjs --save-dev 2. 引入mockjs，模拟数据 // 新建一个mock.js文件 import Mock from 'mockjs'; const { Random } = Mock; cons...
2022-07-01 mockjs学习笔记:mock的下载和引入,在vue项目中引入mock
GAARA
07-01 331
文章目录 1.简介 2.安装和官网 3.文件结构 4.语法规范 5.如何在vue项目中引入mockjs? 6.另一种写法:单独写一个接口文件:mock/users.js 1.简介 Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据, 模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开发。 Mockjs支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等 2.安装和官网 安装命令:npm install mockjs -D 官网:htt
MockJs常见用法总结
qq_45044074的博客
05-06 1180
属性值是字符串 String console.log( Mock.mock({ ​ 'data1|1-4': '陈学辉', *//随机重复1-4次* ​ 'data2|3': '好帅', *//固定重置3次* }) ); 属性值是数字 Number console.log( Mock.mock({ ​ 'number1|+1': 100, *//整数，自动加1并且初始值为100* ​ 'number2|1-100': 12, *//整数，1-10
学习使用 mockjs
青蛙king的博客
11-21 2005
mock.js 官网生成随机数据，拦截 Ajax 请求。属性名（必选）、属性值（必选）和生成规则（可选）。属性名 和 生成规则 之间必须用竖线|分隔。
Mock测试详细教程入门这一篇就够了
最新发布
nhb687095的博客
09-04 1171
mock测试1.pngMock测试就是在测试活动中，对于某些不容易构造或者不容易获取的比较复杂的数据/场景，用一个虚拟的对象(Mock对象)来创建用于测试的测试方法。
mock.js学习之Mock.mock()&Mock.setup()使用_篇3
风如也的博客
07-17 6505
mmmm
mockjs语法基础，前端岗面试
2301_77118221的博客
04-04 819
background（可选），图片的背景色。默认值为 ‘#000000’。foreground（可选），图片的前景色（文字）。默认值为 ‘#FFFFFF’。format（可选），图片的格式。默认值为 ‘png’，可选值包括：‘png’、‘gif’、‘jpg’。text（可选），图片上的文字。默认值为参数 size。一段随机Base64图片编码的返回。
mock的基本使用-------axios篇
m0_60899441的博客
07-29 1152
mock
ElementUI和Mockjs数据模拟
qq_41618026的博客
12-31 773
ElementUI–01 前后端分离 什么是前后端分离： ​ 在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。 前后端分离不仅仅是前端和后端的分工开发,而是架构的模式 前后端分离的理解 交互形式 在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用...
Vue项目中常见问题(19)mockjs模拟数据
qq_46368050的博客
05-16 1388
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 1.对于ListContainer组件与Floor组件数据服务器没有提供数据(接口),怎么办? 2.mock数据是什么? 3.安装mockjs 4.mockjs使用的步骤 4.1在项目当中的src文件夹当中创建一个mock文件夹 4.2准备JSON数据(在mock文件夹中创建相应的JSON文件) 4.3把mock数据需要的图...
全面掌握mockjs语法：简化前后端开发模拟数据
MockJS 是一款在前后端分离开发中常用的前端开发工具，主要用于模拟数据，确保前端与后端开发之间相互独立，减少依赖和耦合。它通过简单的语法规则提供强大的数据伪造能力，使得开发者可以在开发过程中快速生成并...
Golang编程模式：函数式编程（function options）
Moniicoo的博客
04-02 929
Golang编程模式：函数式编程（function options） 1.配置选项问题 1.golang编程时 我们经常需要对一个对象或者业务实体进行相关的配置 对相应的结构体进行初始化,下面是结构题例子 type Server struct { Addr string Port int Protocol string Timeout time.Duration MaxConns int TLS *tls.Config } 1.
mock,js 文档
weixin_45801321的博客
09-24 2311
目录 String 生成字符串 Number 数字 boolean 判断 object 随机出现对象数据个数 array 随机生成数组内对象、元素 占位符 @boolean @integer(60, 100) 随机min - max Mock.mock('@string(长度)') 随机生成乱码、可用token 。支持最大值最小值 时间占位符 随机颜色 Mock.mock('@color()') 随机生成句子 Mock.mock('@sentence(3)') 随机标题 Moc.
Mock.js 的使用
weixin_34010566的博客
06-11 247
Mock.js （基于 Vue 项目中演示） 参考自 （mockjs官网） 安装 npm install mockjs 复制代码新建一个 mock.js 文件 import Mock from 'mockjs' export const list = Mock.mock({ 'foods|10-50': [{ 'id|+1': 1, // id++ 'name': '@cti...
Mock.Random的运用
Embrace924的博客
01-04 3960
模拟Web数据： 生成随机域名(每次运行结果不同)： var Random = Mock.Random Random.domain() // "nhou.org.cn" 生成随机IP(每次运行结果不同) var Random = Mock.Random Random.ip() // "74.97.41.159" 生成随机URL(每次运行结果不同) Random.url...
mock大法好
weixin_33997389的博客
07-17 1720
mock大法好 mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。mock有如下功能 根据数据模板生成模板数据 模拟ajax请求，生成请求数据 基于html模板生成模拟数据 下载安装 npm install mockjs //使用mock var Mock = require('mockjs'); va...
Mock的基本使用方法
热门推荐
zzzz121380的博客
12-20 7万+
Mock的基本使用方法 一、mock解决的问题 开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集 二、mock优点 1、前后端分离 让前端工程师独立于后端进行开发。 2、增加测试的真实性 通过随机数据，模拟各种场景。 3、开发无侵入 不需要修改既有代码，就可以拦截Ajax请求，返回
Mock常用方法
祭夏的专栏
10-16 1万+
http://www.tuicool.com/articles/J7BFr2AMock 测试是单元测试的重要方法之一。Mockito是基于Java的Mock测试框架。 什么是 Mock 测试 Mock 测试就是在测试过程中，对于某些不容易构造（如 HttpServletRequest 必须在Servlet 容器中才能构造出来）或者不容易获取比较复杂的对象（如 JDBC 中的ResultS
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值