mockjs的常用方法

Dear 丶 2021-09-15 02:52 835阅读 0赞

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

![20180328110142945][]

[查看官网列子][Link 1]

二.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? )返回一个整型数组。

[查看官网][Link 2]

(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高’。默认从下面的数组中随机读取一个：

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

[20180328110142945]: /images/20210813/011a7324617e4192ac1436085d102e3b.png
[Link 1]: https://github.com/nuysoft/Mock/wiki/Mock.mock%28%29
[Link 2]: https://github.com/nuysoft/Mock/wiki/Basic