mockjs语法基础

傷城~ 2023-01-21 02:29 2阅读 0赞

[mockjs官网][mockjs]

## mock.mock() ##

Mock.mock( url?, type?, template|function( options ) )  
根据数据模板生成模拟数据。参数说明：

*  url：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则表达式。例如 `/\/domain\/list.json/、'/domian/list.json'`。
 *  type：可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
 *  template：可选。表示数据模板，可以是对象或字符串。例如 `{ 'data|1-10':[{}] }、'@EMAIL'`。
 *  function(options)：可选。表示用于生成响应数据的函数。
 *  options：指向本次请求的 Ajax 选项集。

示例：

*  Mock.mock( template )  
    根据数据模板生成模拟数据
 *  Mock.mock(url, template )  
    当拦截到匹配 url 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
 *  Mock.mock(url, function( options ) )  
    当拦截到匹配 url 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
 *  Mock.mock(url, type, template )  
    当拦截到匹配 url 和 type 的 Ajax 请求时，根据数据模板 template 生成模拟数据，并作为响应数据返回。
 *  Mock.mock(url, type, function( options ) )  
    当拦截到匹配 url 和 type 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

## Mock.toJSONSchema( template ) ##

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

## Mock.setup() ##

Mock.setup( settings )  
配置拦截 Ajax 请求时的行为。参数的含义和默认值:

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

## 常用方法 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Type</th> 
   <th align="left">Method</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Basic</td> 
   <td align="left">boolean, natural, integer, float, character, string, range, date, time, datetime, now</td> 
  </tr> 
  <tr> 
   <td align="left">Image</td> 
   <td align="left">image, dataImage</td> 
  </tr> 
  <tr> 
   <td align="left">Color</td> 
   <td align="left">color</td> 
  </tr> 
  <tr> 
   <td align="left">Text</td> 
   <td align="left">paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle</td> 
  </tr> 
  <tr> 
   <td align="left">Name</td> 
   <td align="left">first, last, name, cfirst, clast, cname</td> 
  </tr> 
  <tr> 
   <td align="left">Web</td> 
   <td align="left">url, domain, email, ip, tld</td> 
  </tr> 
  <tr> 
   <td align="left">Address</td> 
   <td align="left">area, region</td> 
  </tr> 
  <tr> 
   <td align="left">Helper</td> 
   <td align="left">capitalize, upper, lower, pick, shuffle</td> 
  </tr> 
  <tr> 
   <td align="left">Miscellaneous</td> 
   <td align="left">guid, id</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Mock.Random.boolean()</td> 
   <td align="left">返回一个随机的布尔值</td> 
  </tr> 
  <tr> 
   <td align="left">Random.natural()</td> 
   <td align="left">返回一个随机的自然数（大于等于 0 的整数）</td> 
  </tr> 
  <tr> 
   <td align="left">Random.integer()</td> 
   <td align="left">返回一个随机的整数</td> 
  </tr> 
  <tr> 
   <td align="left">Random.float()</td> 
   <td align="left">返回一个随机的浮点数</td> 
  </tr> 
  <tr> 
   <td align="left">Random.character()</td> 
   <td align="left">返回一个随机字符</td> 
  </tr> 
  <tr> 
   <td align="left">Random.string()</td> 
   <td align="left">返回一个随机字符串</td> 
  </tr> 
  <tr> 
   <td align="left">Random.range( start?, stop, step? )</td> 
   <td align="left">返回一个整型数组</td> 
  </tr> 
 </tbody> 
</table>

### 示例 ###

//日期
    Random.date()  // "2012-10-23"
    Random.date('yyyy-MM-dd')  // "2275-04-27"
    Random.date('yy-MM-dd')    // "20-01-08"
    
    //时间
    Random.time()   // "05:06:06"
     
    //日期和时间
    Random.datetime('yyyy-MM-dd HH:mm:ss') 
     
    //当前的日期和时间 
    Ranndom.now()
    
    // 生成随机域名
    Random.domain()  // "nurou.org.cn"
    
    //生成随机URL
    Random.url()  // "news://wrmt.na/rbcgbws"
    
    //生成随机IP
    Random.ip()   // "74.97.41.159"
    
    //生成随机省份：
    Random.province()  //"海南省"
    
    //生成随机城市：
    Random.city()   // "澳门半岛"
    
    //生成在某个省份的某个城市：
    Random.city(true) // "广东省 广州市"
    
    //随机生成颜色，格式为 '#RRGGBB'
    Random.color()
    Random.hex()
     
    //随机生成颜色，格式为'rgb(r, g, b)'
    Random.rgb()
     
    //随机生成颜色，格式为 ‘rgba(r, g, b, a)’
    Random.rgba()
     
    //随机生成颜色，格式为 ‘hsl(h, s, l)’
    Random.hsl()
     
    //生成一条随机的中文句子：
    Random.csentence()   // "会候句子解包党心要按总场火义字个片精。"
    Random.csentence(5)  // "文斗领拉米。"
    Random.csentence(3, 5)  // "住验住"
    注意:
    1、默认一条句子里的汉字个数在12和18之间
    2、通过Random.csentence( length )指定句子的汉字个数：
    3.通过Random.csentence( min, max)指定句子汉字个数的范围： 
     
    //模拟姓氏： 
    Random.cfirst()   // "龙"
    //模拟名字
    Random.clast()  // "秀英"
    //模拟全名：
    Random.cname()   // "黄秀英"
    
    //随机生成一段文本
    Random.paragraph()
    Random.paragraph( len )
    Random.paragraph( min, max )
    说明：
    cparagraph可以看作是多条csentence以句号连接后的字符串，默认条数为 3 到 7条
    len（可选），文本中句子的个数。默认值为 3 到 7 之间的随机数。
    min（可选），文本中句子的最小个数。默认值为 3。
    max（可选），文本中句子的最大个数。默认值为 7。

## 随机图片地址的返回 ##

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

说明：

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

### Random.dataImage( size?, text? ) ###

说明：

## Mock.valid( template, data ) ##

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

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

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"
        }
    ]

## 数据模板 ##

数据模板中的每个属性由 **属性名、规则、属性值**三部分组成。格式：`'name|rule':value`  
说明：

*  name：属性名
 *  rule：生成规则：(可选)
 *  value：属性值  
    其中：
 *  属性名和规则之间用 “|” 进行分割
 *  规则是可选的，一共有七种规则  
    规则的含义具体要根据属性值来进行确定，不同的属性值对应的规则含义是不同的；

示例：

属性值的类型其实就是s 中数据的类型：string、number、boolean、object、array、function以及正则reg：

*  string  
    ’ name| min-max’ : string ; //通过重复string生成一个字符串，string的重复次数 大于等于min，小于等于max ;  
    ’ name| count’ : string; //通过重复string生成一个字符串，重复次数为 count ;
 *  number  
    ’ name| min-max’ : number ; //生成一个大于等于min 小于等于 max 的整数；  
    ’ name| +1’ : number ; //属性值自动加1，初始值为 number ;  
    ‘ name| min-max.dmin-dmax’ : number ; //生成一个浮点数，整数部分大于等于min，小于等于max； 小数部分保留 dmin 到 dmax 位；
 *  boolean  
    ’ name| 1’ : boolean ; //随机生成一个布尔值，值为 true 和 false 的概率均为 50%；  
    ’ name| min-max’ : boolean ; //随机生成一个布尔值，值为 true 的概率为 min/( min + max) ； 值为 false 的概率为 max/( min + max)；
 *  object  
    ’ name| count’ : object ; //从object中随机抽取count 个属性；  
    ’ name| min-max’ : object; //从object中随机抽取 min 到 max 个属性；
 *  array  
    ’ name| 1’: array ; //从array中随机选取一个值最为最终值；  
    ’ name| +1’ : array; //从array 中顺序选择一个元素，最为最终值；  
    ’ name| min-max’ : array ; //通过重复array 生成一个新数组，重复的次数大于等于min, 小于等于max ;  
    ’ name| count’ : array; //通过重复array 生成一个新数组，重复的次数为 count ;
 *  function  
    ’ name’ : function ; // 执行function，使其最终的返回值最为 最终的属性值；函数的上下文为 name 所在的对象；
 *  RegExp  
    ’ name’ : reg ; //根据正则去生成一个符合这个正则表达式规则的属性值；

属性值中可以包含 @占位符，并且属性值可指定最终值的初始值以及类型；  
数据占位符只是在属性值字符串中占据一个位置，最终并不出现在属性值中，占位符的格式为 `@占位符 || @占位符（参数 [，参数]）`;  
使用数据占位符的时候需要注意的是：

*  用@来标识的其后的是占位符；
 *  占位符应用的是Mock.random的方法；
 *  通过Mock.random.extend()来扩展自定义占位符；
 *  占位符也可以引用数据模板中的数据而且会优先引用；
 *  占位符支持相对路径也支持绝对的路径；

### 示例 ###

//生成指定次数字符串
    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)
    
    //随机生成标识
    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)
    
    const data = Mock.mock({ 
        'list|50-99':[
            { 
                name: '@cname()',
                address: '@city(true)',
                id: '@increment(1)' // 每次都增加1
            }
        ]
    })

### 综合示例 ###

假设已经安装了axios、mockjs

1.  api接口

export const findPage = (data: any) => { 
        return postJson('user/list', data)
    }

1.  mock接口

import Mock from 'mockjs' // 引入mockjs
    const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
    
    Mock.setup({ //设置请求延时时间
        timeout: 1000
    })
    
    let userList = []
    for (let i = 0; i < 10; i++) { 
        const o = { 
            title: Mock.mock("@ctitle"),
            idCard: Mock.mock('@id()'),
            addr: Mock.mock('@city(true)'),
            name: Mock.mock({ "string|1-8": "yx"})
        }
        userList.push(o)
    }
    Mock.mock(constant.test_baseUrl + '/user/list', 'post', (config: any) => { 
        //获取前端传递过来的数据
        console.info(config.body)
        return userList
    })

1.  vue页面

<template>
      <el-button type="danger" @click="fun">危险按钮</el-button>
    </template>
    
    <script lang="ts"> import $api from '../apis/api' import '../mock/mock.ts' export default { setup(): any { let fun = () => { $api.findPage("{\"name\":\"zhangsan\",\"gender\",1}").then(res => { console.info(res) }) } return { fun } } } </script>

4 结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

[mockjs]: http://mockjs.com/examples.html#Path
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221021/0b6aec562e21405e92f2665f5cd90e27.png