Rumah > hujung hadapan web > tutorial js > mockjs的常用方法分享

mockjs的常用方法分享

小云云
Lepaskan: 2018-03-28 17:02:32
asal
2917 orang telah melayarinya

本文主要和大家分享mockjs的常用方法,结合文字和代码和大家讲解,希望能帮助到大家。

一.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).列子

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) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})  
  
$.ajax({  
    url: &#39;hello.json&#39;,  
    type: &#39;post&#39;,  
    dataType: &#39;json&#39;  
}).done(function (data, status, jqXHR) {  
    $(&#39;<pre class="brush:php;toolbar:false">&#39;).text(JSON.stringify(data, null, 4))  
        .appendTo(&#39;body&#39;)  
})
Salin selepas log masuk

查看官网列子

二.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数据

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

(5).颜色+文本+姓氏(名字)

请查看官网

三.Mock.valid( template, data )

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

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

eg:

var template = {
    name: &#39;value1&#39;
}
var data = {
    name: &#39;value2&#39;
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name&#39;value is equal to value1, but is value2"
    }
]
Salin selepas log masuk

四.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 的其他行为。

Atas ialah kandungan terperinci mockjs的常用方法分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan