mockjs语法基础

时间：2022-10-09 13:11:27

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

常用方法

Type Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id
方法 说明
Mock.Random.boolean() 返回一个随机的布尔值
Random.natural() 返回一个随机的自然数（大于等于 0 的整数）
Random.integer() 返回一个随机的整数
Random.float() 返回一个随机的浮点数
Random.character() 返回一个随机字符
Random.string() 返回一个随机字符串
Random.range( start?, stop, step? ) 返回一个整型数组

示例

//日期
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? )

说明：

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

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：属性值 其中：
  • 属性名和规则之间用 “|” 进行分割
  • 规则是可选的，一共有七种规则 规则的含义具体要根据属性值来进行确定，不同的属性值对应的规则含义是不同的；

示例：

1. 'name|min-max': value 
2. 'name|count': value 
3. 'name|min-max.dmin-dmax': value 
4. 'name|min-max.dcount': value 
5. 'name|count.dmin-dmax': value
6. 'name|count.dcount': value 7. 'name|+step': 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 结果 mockjs语法基础

标签：

相关文章