mockjs在项目中的使用方法详解

一时失言乱红尘 2023-07-10 08:05 22阅读 0赞

Mockjs是一个模拟数据生成器，用于帮助前端开发，使其独立于后端进程，并减少一些单调性，特别是在编写自动化测试时。

# 一、项目实战 #

### 1. 安装mockjs ###

npm install mockjs --save-dev

### 2. 引入mockjs，模拟数据 ###

// 新建一个mock.js文件
    import Mock from 'mockjs';
    const {  Random } = Mock;
    const ApiPrefix = '/api/v1'; // 自定义的访问路径常量
    const arr = [1,2,3];
    
    Mock.mock(`${ ApiPrefix}/test2`, 'post', Mock.mock({ 
      'items|1-5': [
        { 'id|+1': 1, title: Random.string(),'array|+1': arr}
      ]
    }))

### 3. 引入mock.js, 定义ajax请求 ###

// service.js
    import {  axios } from 'axios';
    import 'mock.js';
    
    export function getTestList () { 
      return axios.post('/api/v1/test2')
    }

### 4. 页面调用ajax方法 ###

// react page
    import {  getTestList } from 'services.js'
    componentDidMount () { 
        getTestList().then(res => { 
          console.log(res.data)
        })
      }

--------------------

以下内容从官方文档整理而来[mockjs官方文档][mockjs]

# 二、语法规范 #

1.  数据模板
2.  数据占位符

#### 1. 数据模板 ####

‘name|rule’:value

*  name: 属性值
 *  rule: 属性规则
 *  value: 属性值

**rule规则如下：**

注意：生成规则需要根据属性值才能确定，属性值可以包含@占位符，可以指定最终值的初始值和类型

**规则详细介绍：**  
属性值是string

'name|1-3': 'a' // 生成1-3个a
    'name2|2': 'b' // 生成bb

属性值是number

'name|+1': 4 // 生成次，每次+1
    'name2|1-7': 2 // 生成一个1到7的数字
    'name3|1-4.5-8': 1 // 生成一个小数，整数1-4，小数部分保留5-8位
    Mock.mock({ 
        'number1|1-100.1-10': 1, // 整数1-100之间，小数随机生成1-10位
        'number2|123.1-10': 1, // 整数123，小数随机生成1-10位
        'number3|123.3': 1, // 整数123，小数随机生成三位
        'number4|123.10': 1.123 // 整数123， 小数随机生成10位
    })
    // =>
    { 
        "number1": 12.92,
        "number2": 123.51,
        "number3": 123.777,
        "number4": 123.1231091814
    }

属性值是Boolean

'name|1': true // 生成一个布尔值，true和false各一半
    'name2|1-7': true // 值位true的概率是1/（1+7）， 7/8是false

属性值是Object

var obj = { 
        a: 1,
        b: 2,
        c: 3,
        d: 4
    }
    'name|1-3': obj // obj里随机找到1-3个属性显示
    'name2|1': obj // 随机选择1个属性显示

属性值是Array

var arr = [1,2,3,4]
    'name|count': arr // count是1时，从数组里随机取一个值，大于1表示数组里的内容重复count次生成的一个新数组
    'name|+1': arr // 从数组中顺序选取一个值
    'name2|1-3': arr // 数组重复1-3遍

属性值是Function

var fun = function (x) { 
        return x + 10
    }
    'name|fun(10)': fun // 执行函数取其返回值作为最终值，函数上下文位属性name所在的对象

属性值是RegExp

'name': /\d{ 1,3}/ // 生成一个满足正则的表达式

#### 2. 数据占位符 ####

**占位符格式如下两种：**

@占位符
    @占位符(参数，[参数])

注意

1.  跟在@后的字符串就是占位符
2.  占位符引用的是从Mock.Random中的方法
3.  通过Mock.Random.extend()来扩展自定义占位符
4.  占位符可以引用数据模板中的属性
5.  占位符优先引用数据模板中的属性
6.  占位符支持相对路径和绝对路径

demo:

Mock.mock({ 
        name: { 
            first: '@FIRST', // 通过Random方法生成一个值
            middle: '@FIRST',
            last: '@LAST',
            full: '@first @middle @last'
        }
    })
    // =>
    { 
        "name": { 
            "first": "Charles",
            "middle": "Brenda",
            "last": "Lopez",
            "full": "Charles Brenda Lopez"
        }
    }
    // 扩展
    Random.extend({ 
        constellation: function(date) { 
            var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
            return this.pick(constellations)
        }
    })
    Random.constellation()
    // => "水瓶座"
    Mock.mock('@CONSTELLATION')
    // => "天蝎座"

--------------------

# 三、常用方法 #

### Mock.mock() ###

生成模拟数据 Mock.mock(rurl?,rtype?,template|function(options)\{return object\})

rurl可以是正则或者字符串

Mock.mock( template ) // 根据数据模板生成模拟数据
    Mock.mock( rurl, template ) // 拦截到rurl时根据模板生成模拟数据
    Mock.mock( rurl, function( options ) ) // 拦截到rurl时，执行方法，用方法的返回值作为模拟数据
    Mock.mock( rurl, rtype, template )
    Mock.mock( rurl, rtype, function( options ) ) // options是本次请求ajax的选项集，含有url, type, body三个属性

### Mock.setup(setting) ###

配置拦截请求的行为，支持的配置项有timeout，指定响应时间默认值是‘10-100’,可以是整数或者一个范围

### Mock.toJSONShema(template) ###

template风格的模板转成JSON Schema

### Mock.Random() ###

一个工具类，用于生成各种类型的数据

它的方法在数据模板中叫做‘占位符’， 格式是@占位符(参数\[,参数\])

var Random = Mock.Random
    Random.email() // 单独使用可以返回一个邮箱字符串
    // => "n.clark@miller.io"
    Mock.mock('@email') // 作为占位符使用
    // => "y.lee@lewis.org"
    Mock.mock( {  email: '@email' } )
    // => { email: "v.lewis@hall.gov" }

<table> 
 <thead> 
  <tr> 
   <th>类型type</th> 
   <th>方法名method，方法名可直接作为占位符</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>basic</td> 
   <td>boolean,natural,integer,float,character,string,range,date,time,datetime,now</td> 
  </tr> 
  <tr> 
   <td>Image</td> 
   <td>image, dateImage</td> 
  </tr> 
  <tr> 
   <td>Color</td> 
   <td>color</td> 
  </tr> 
  <tr> 
   <td>Text</td> 
   <td>paragraph,sentence,word,title,cparagraph,scentence,cword,ctitle(c开头表示中文)</td> 
  </tr> 
  <tr> 
   <td>Name</td> 
   <td>first,last,name,cfirst,clast,cname(name时可传一个布尔值，表示是否生成中间名字)</td> 
  </tr> 
  <tr> 
   <td>Web</td> 
   <td>url,domain,email,ip,tId</td> 
  </tr> 
  <tr> 
   <td>Address</td> 
   <td>area,region</td> 
  </tr> 
  <tr> 
   <td>Helper</td> 
   <td>capitalize,upper,lower,pick,shuffle方法，需要传入一个参数</td> 
  </tr> 
  <tr> 
   <td>Miscellaneous</td> 
   <td>guid,id</td> 
  </tr> 
 </tbody> 
</table>

demo：

var Random = Mock.Random
    
    Random.boolean() // true false 各一半
    Random.boolean(1,2, false) // 1/3false, 2/3true
    Random.natural() // 生成一个自然数
    Random.natural(4,9) // 4-9的自然数，如果只有一个参数，则为最小值
    Random.integer() // 整数，可以是负数，使用同natural
    Random.float() //浮点数， 四个参数分别是： 整数的最小最大值，小数的最小最大值
    Random.character(pool?) // 字符串， 参数如果是upper, lower, number, sympol(!@#$%^&*()[])，则从指定的内置字符池选取，否则以提供的字符串作为字符池。未提供则从所有内置字符池选取
    Random.string(pool?,min?,max?) // 字符串，pool字符池，同上；不传参随机生成任意长度字符串；一个数字表示长度，两个数字表示长度范围；一个字符串一个数字表示字符池和长度，三个都传表示字符池和长度范围
    Random.range(start?, stop, step?) // 不包含stop的整型数组stop| start，stop|start，stop，step
    
    ///
    Random.date(format?) //日期 默认值为 yyyy-MM-dd
    Random.time(format?) // 时间 默认值为 HH:mm:ss
    Random.datetime(format?) // 默认值为 yyyy-MM-dd HH:mm:ss
    Random.now()
    
    
    Random.image(size?,background?, foreground?, format?, text?)// 宽*高， 背景色， 文字前景色， 格式， 默认文字 Random.image('200x100', '#ffcc33', '#FFF', 'png', '!')
    Random.dataImage(size?, text?) // base64编码的
    /
    Random.color() // 还有hex(), rgb(), rgab(), hsl()
    ///
    Random.paragraph(min?, max?, len?) //一段文字, 
    Random.sentence(min?, max?, len?) //句子
    Random.word(min?, max?, len?) // len | min,max
    Random.cword(pool?,min?,max?) // 生成中文，pool字符池
    Random.title(min?,max?,len?) // 英文标题，首字母大写
    /
    Random.url(protocol?, host?) //url
    Random.protocol()
    Random.tId() // 顶级域名
    Random.email(domain？) // domain指定域名的邮箱
    Random.ip()
    //
    Random.region() // 大区 华北华中
    Random.province()
    Random.city(prefix?是否显示所在省) // prefix是布尔值
    Random.country(prefix?)
    Random.zip() // 邮政编码
    ///
    Random.capitlize(word) //首字母转成大写
    Random.lower(str) // 转成小写
    Random.upper(str) // 转成大写
    Random.pick(arr) // 从数组中随机选取一个数
    Random.shuffle(arr) // 打乱数组顺序
    ///
    Random.guid() //随机生成一个GUID
    Random.id() // 随机生成一个18位身份证ID
    Random.increment(step?) // 生成全局的自增整数

[mockjs]: https://github.com/nuysoft/Mock/wiki/Syntax-Specification