在react中使用mockjs的方法你知道嗎

更新時間：2022年03月10日 11:36:32 作者：新生代農(nóng)民工官方認證碼農(nóng)小拽

這篇文章主要為大家詳細介紹了在react中使用mockjs的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

介紹

mock意為“模仿”或"模擬"，簡單來說，就是造數(shù)據(jù)，造你想要的幾乎任何數(shù)據(jù)，包括api和通過api返回的數(shù)據(jù)。

在寫完項目進行自測，或者寫頁面需要數(shù)據(jù) 但是又不想單獨開個后端，這時候就可以用mockjs來實現(xiàn)返回隨機數(shù)據(jù)。

官網(wǎng)：http://mockjs.com/

官方文檔：https://github.com/nuysoft/Mock/wiki

示例文檔：http://mockjs.com/examples.html

安裝 & 卸載 & 引入

// 安裝
npm i mockjs
// 卸載
npm uninstall mockjs
// 項目中引入
import Mock from 'mockjs'

基礎(chǔ)語法 & 規(guī)范

Mock.mock

造數(shù)據(jù)，需要使用到mock方法：

Mock.mock(xxx)
// 這里面的xxx就是要通過mock來模擬的數(shù)據(jù)

每個被偽造的數(shù)據(jù)，都包含3部分：

屬性名 name
生成規(guī)則 rule
屬性值 value

比如：

const data = Mock.mock({
    code: '0',
    msg: 'success',
    'list|5': [{ name: '@name', age: '@integer(18, 25)'}]
})

這里的code , msg , list 都是屬性名，其中l(wèi)ist和msg都是字符串，list是數(shù)組

code和msg的數(shù)據(jù)過于簡單，所以生成規(guī)則在這里省略了，

而list對應(yīng)的生成規(guī)則是|5，意思是生成一個數(shù)組，里面包含5個元素

這里的'0' , 'success' 和 [{ name: '@name', age: '@integer(18, 25)'}]就是他們各自對應(yīng)的值。

打印一下生成的結(jié)果看看：

console.log(data)
/*********結(jié)果如下*************/
{
    "code": "0",
    "msg": "success",
    "list": [
        {
            "name": "Nancy Lewis",
            "age": 18
        },
        {
            "name": "Gary Wilson",
            "age": 25
        },
        {
            "name": "Shirley Gonzalez",
            "age": 22
        },
        {
            "name": "Mark Moore",
            "age": 24
        },
        {
            "name": "Richard Gonzalez",
            "age": 22
        }
    ]
}
// 另外，多次打印可以看出，每次結(jié)果都是不一樣的，數(shù)據(jù)是隨機的。

從上面的例子可以得知，生成規(guī)則是可選的，非必須的

如果存在生成規(guī)則，那么屬性名和生成規(guī)則之間需要用|隔開

7種生成規(guī)則

'name|min-max': value

// 表示value值重復(fù)的次數(shù)，最少min次，最多max次
const data = Mock.mock({
    'list|1-5': ['hello-']
})
// 得到的結(jié)果可能是：
[
    "hello-",
    "hello-",
    "hello-",
    "hello-",
    "hello-"
]
// 也可能是：
[
    "hello-",
    "hello-",
    "hello-"
]
// hello-隨機重復(fù)1-5次作為結(jié)果

'name|count': value

// value固定重復(fù)count次
const data = Mock.mock({
    'list|2': ['hello-']
})
// 得到的結(jié)果是：
[
    "hello-",
    "hello-"
]

'name|min-max.dmin-dmax': value

// 當(dāng)value 是數(shù)字型時，生成一個浮點數(shù)，
// 浮點數(shù)的整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留 dmin 到 dmax 位。
// 生成的值和初始寫的value值的大小無關(guān)，value的初始值只是用來確定數(shù)據(jù)類型
const data = Mock.mock({
    'num1|1-100.1-3': 1
})

生成的結(jié)果可能是：

在這里插入圖片描述

也可能是：

在這里插入圖片描述

'name|min-max.dcount': value

// 當(dāng)value 是數(shù)字型時，生成一個浮點數(shù)，
// 浮點數(shù)的整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留dcount位。
// 生成的值和初始寫的value值的大小無關(guān)，value的初始值只是用來確定數(shù)據(jù)類型

'name|count.dmin-dmax': value

// 當(dāng)value 是數(shù)字型時，生成一個浮點數(shù)，
// 浮點數(shù)的整數(shù)部分等于count，小數(shù)部分保留 dmin 到 dmax 位。
// 生成的值和初始寫的value值的大小無關(guān)，value的初始值只是用來確定數(shù)據(jù)類型

'name|count.dcount': value

// 當(dāng)value 是數(shù)字型時，生成一個浮點數(shù)，
// 浮點數(shù)的整數(shù)部分是count，小數(shù)部分保留dcount位。
// 生成的值和初始寫的value值的大小無關(guān)，value的初始值只是用來確定數(shù)據(jù)類型

'name|+step': value

// 當(dāng)value為數(shù)字時，初始值為value，每次得到的結(jié)果會自增1

生成規(guī)則和屬性值value的關(guān)系

屬性值是布爾值

'name|1': value
// 當(dāng)value是true或者false時
// 最終結(jié)果會返回一個布爾值，返回true的概率是1/2，返回false的概率也是1/2
'name|min-max': value
// 當(dāng)value是一個表示布爾值的結(jié)果時，
// 會隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，
// 值為 !value 的概率是 max / (min + max)

屬性值是對象 Object

'name|count': object
// 從屬性值 object 中隨機選取 count 個屬性
'name|min-max': object
// 從屬性值 object 中隨機選取 min 到 max 個屬性

屬性值是數(shù)組 Array

'name|1': array
// 從屬性值 array 中隨機選取 1 個元素，作為最終值。
'name|+1': array
// 從屬性值 array 中順序選取 1 個元素，作為最終值。
'name|min-max': array
// 通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 min，小于等于 max。
// 'name|count': array
通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)為 count。

屬性值是正則表達式 RegExp

// 根據(jù)正則表達式 regexp 反向生成可以匹配它的字符串。用于生成自定義格式的字符串
Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// 結(jié)果可能是：
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

占位符@

占位符引用的是 Mock.Random 中的方法，

這跟vue中的v-on:click省略成@click很像?？梢院唵卫斫鉃镸ock.Random的縮寫。

@后面跟上Mock.Random的一些固定方法，用來生成隨機數(shù)據(jù)。

用法示例：

// 比如我們現(xiàn)在要隨機生成一個中文人名
const data = Mock.Random.cname()
// 結(jié)果：
// data: 趙麗

改成占位符的方法就是：

const data = Mock.mock('@cname')
// 結(jié)果：
// data:  張秀蘭

這里的cname就是Mock.Random的一個方法，表示獲取隨機的中文人名。

這里有一張表格，包含了Mock.Random的方法，并進行了簡單的分類：

在這里插入圖片描述

方法名前面帶c的，都是用來獲取中文相關(guān)的數(shù)據(jù)的。比如@name用來生成隨機的英文名，而@cname就是用來生成隨機的中文名。

另外，這些方法還可以帶參數(shù)，以下有一些例子：

import Mock from 'mockjs'
let basicData = Mock.mock({
    'list|1-100': [{
        'id|+1': 1,
        'isBoolean': '@boolean(10, 0, true)',//百分之百的true
        'naturalNumber': '@natural(1, 1000)', //大于等于零的整數(shù)
        'integer': '@integer(0)', //隨機整數(shù)
        'float': '@float(1, 100, 3, 6)', //隨機浮點數(shù), 
        'character': '@character("upper")', //一個隨機字符
        'string': '@string("lower", 5, 20)', //一串隨機字符串
        'range': '@range(1, 10, 2)', //一個整形數(shù)組，步長為2
    }]
});
// console.log(basicData);
let Date = Mock.mock({
    'dateList|10': [{
        'date': '@date',
        'date-yyyy-MM-dd': '@date(yyyy-MM-dd)',
        'date-yy-MM-dd': '@date(yy-MM-dd)',
        'date-y-MM-dd': '@date(y-MM-dd)',
        'date-y-M-d': '@date(y-M-d)',
        'line-through': '------------------------------------------------',
        'timessss': '@time', //隨機的時間字符串,
        'time-format': '@time()', //指示生成的時間字符串的格式, default: 'HH: mm: ss',
        'time-format-1': '@time("A HH:mm:ss")',
        'time-format-2': '@time("a HH:mm:ss")',
        'time-format-3': '@time("HH:mm:ss")',
        'time-format-4': '@time("H:m:s")',
        'datetime': '@datetime("yyyy-MM-dd A HH:mm:ss")', //返回一個隨機的日期和時間字符串
        'dateNow': '@now("second")' //獲取當(dāng)前完整時間
    }]
});
// console.log(Date);
let imageList = Mock.mock({
    'imageList|5': [{
        'id|+1': 1,
        'img': '@image',//生成一個隨機的圖片地址,
        'img-1': '@image("200x100", "#000", "#fff", "png", "Mock.js")', //生成一個200*100, 背景色#000，前景色#fff, 格式png, 文字mock.js的圖片
    }]
})
// console.log(imageList);
let paragraph = Mock.mock({
    'paragraphList|5': [{
        'id|+1': 1,
        'paragraph1': '@cparagraph(2)', //生成一段2句話的中文文本,
        'paragraph2': '@paragraph(3)', //生成一個3句話的英文文本
        'title': '@title', //隨機生成一個英文標題
        'ctitle': '@ctitle', //隨機生成一個中文標題
    }]
})
// console.log(paragraph);
let name = Mock.mock({
    'nameList|5': [{
        'id|+1': 1,
        'name': '@name', //英文名,
        'cname': '@cname', //中文名
    }]
})
// console.log(name);
let webList = Mock.mock({
    'webList|5': [{
        'id|+1': 0,
        'url': '@url("http", "baidu.com")', //url: http://www.baidu.com
        'protocol': '@protocol', //隨機生成一個url協(xié)議
        'domain': '@domain', //隨機生成一個域名,
        'email': '@email', //隨機生成一個郵箱地址,
        'ip': '@ip' //隨機生成一個ip地址
    }]
})
// console.log(webList);
let address = Mock.mock({
    'addressList|5': [{
        'id|+1': 1,
        'region': '@region', //生成一個大區(qū)
        'province': '@province', //生成一個省份
        'city': '@city', //生成一個市
        'country': '@country', //一個縣
        'zip': '@zip', //郵政編碼
    }]
})
console.log(address)

此外，有完整的官方示例文檔：http://mockjs.com/examples.html

哪個方法不知道怎么用了，就可以直接去示例文檔中查看。

模擬接口

Mock.mock( rurl, rtype, data)

介紹以下三個參數(shù)：

rurl：請求路徑，可以是相對路徑，也可以是絕對路徑
rtype：請求方式，比如get post put delete等
data：要返回的模擬數(shù)據(jù)

舉例：

import React, {useEffect} from 'react'
import Mock from 'mockjs'
import axios from 'axios'
Mock.mock('/mock/usermsg', 'get', {
    code: '0',
    msg: 'success',
    'list|5': [{ name: '@name', age: '@integer(18, 25)'}]
})
const DemoMock = () => {
    useEffect(async () => {
        const res = await axios('/mock/usermsg')
        console.log(res.data)
    })
    return <h3>hello react</h3>
}
export default DemoMock

返回的結(jié)果：

在這里插入圖片描述