mockjs在項目中的使用方法詳解

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官方文檔

二、語法規範

1. 數據模板
2. 數據佔位符

1. 數據模板

‘name|rule’:value

• name: 屬性值
• rule: 屬性規則
• value: 屬性值

rule規則如下：

注意：生成規則需要根據屬性值才能確定，屬性值可以包含@佔位符，可以指定最終值的初始值和類型

1. ‘name|min-max’: value

2. ‘name|count’: value

3. ‘name|mix-max.dmix-dmax’: value

4. ‘name|min-max.dcount’: value

5. ‘name|count.dmin-dmax’: value

6. ‘name|count.dcount’: value

7. ‘name|+step’: value

規則詳細介紹：
屬性值是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() // 單獨使用可以返回一個郵箱字符串
// => "[email protected]"
Mock.mock('@email') // 作爲佔位符使用
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }

類型type	方法名method，方法名可直接作爲佔位符
basic	boolean,natural,integer,float,character,string,range,date,time,datetime,now
Image	image, dateImage
Color	color
Text	paragraph,sentence,word,title,cparagraph,scentence,cword,ctitle(c開頭表示中文)
Name	first,last,name,cfirst,clast,cname(name時可傳一個布爾值，表示是否生成中間名字)
Web	url,domain,email,ip,tId
Address	area,region
Helper	capitalize,upper,lower,pick,shuffle方法，需要傳入一個參數
Miscellaneous	guid,id

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?) // 生成全局的自增整數