溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“在react中如何使用mockjs方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“在react中如何使用mockjs方法”吧!
mock意為“模仿”或"模擬"，簡單來說，就是造數據，造你想要的幾乎任何數據，包括api和通過api返回的數據。
在寫完項目進行自測，或者寫頁面需要數據 但是又不想單獨開個后端，這時候就可以用mockjs來實現返回隨機數據。
// 安裝 npm i mockjs // 卸載 npm uninstall mockjs // 項目中引入 import Mock from 'mockjs'
Mock.mock
造數據，需要使用到mock方法：
Mock.mock(xxx) // 這里面的xxx就是要通過mock來模擬的數據
每個被偽造的數據，都包含3部分：
屬性名 name
生成規則 rule
屬性值 value
比如：
const data = Mock.mock({
code: '0',
msg: 'success',
'list|5': [{ name: '@name', age: '@integer(18, 25)'}]
})這里的code , msg , list 都是屬性名，其中list和msg都是字符串，list是數組
code和msg的數據過于簡單，所以生成規則在這里省略了，
而list對應的生成規則是|5，意思是生成一個數組，里面包含5個元素
這里的'0' , 'success' 和 [{ name: '@name', age: '@integer(18, 25)'}]就是他們各自對應的值。
打印一下生成的結果看看：
console.log(data)
/*********結果如下*************/
{
"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
}
]
}
// 另外，多次打印可以看出，每次結果都是不一樣的，數據是隨機的。從上面的例子可以得知，生成規則是可選的，非必須的
如果存在生成規則，那么屬性名和生成規則之間需要用|隔開
'name|min-max': value
// 表示value值重復的次數，最少min次，最多max次
const data = Mock.mock({
'list|1-5': ['hello-']
})
// 得到的結果可能是：
[
"hello-",
"hello-",
"hello-",
"hello-",
"hello-"
]
// 也可能是：
[
"hello-",
"hello-",
"hello-"
]
// hello-隨機重復1-5次作為結果'name|count': value
// value固定重復count次
const data = Mock.mock({
'list|2': ['hello-']
})
// 得到的結果是：
[
"hello-",
"hello-"
]'name|min-max.dmin-dmax': value
// 當value 是數字型時，生成一個浮點數，
// 浮點數的整數部分大于等于 min、小于等于 max，小數部分保留 dmin 到 dmax 位。
// 生成的值和初始寫的value值的大小無關，value的初始值只是用來確定數據類型
const data = Mock.mock({
'num1|1-100.1-3': 1
})生成的結果可能是：
也可能是：
'name|min-max.dcount': value
// 當value 是數字型時，生成一個浮點數， // 浮點數的整數部分大于等于 min、小于等于 max，小數部分保留dcount位。 // 生成的值和初始寫的value值的大小無關，value的初始值只是用來確定數據類型
'name|count.dmin-dmax': value
// 當value 是數字型時，生成一個浮點數， // 浮點數的整數部分等于count，小數部分保留 dmin 到 dmax 位。 // 生成的值和初始寫的value值的大小無關，value的初始值只是用來確定數據類型
'name|count.dcount': value
// 當value 是數字型時，生成一個浮點數， // 浮點數的整數部分是count，小數部分保留dcount位。 // 生成的值和初始寫的value值的大小無關，value的初始值只是用來確定數據類型
'name|+step': value
// 當value為數字時，初始值為value，每次得到的結果會自增1
屬性值是布爾值
'name|1': value // 當value是true或者false時 // 最終結果會返回一個布爾值，返回true的概率是1/2，返回false的概率也是1/2 'name|min-max': value // 當value是一個表示布爾值的結果時， // 會隨機生成一個布爾值，值為 value 的概率是 min / (min + max)， // 值為 !value 的概率是 max / (min + max)
屬性值是對象 Object
'name|count': object // 從屬性值 object 中隨機選取 count 個屬性 'name|min-max': object // 從屬性值 object 中隨機選取 min 到 max 個屬性
屬性值是數組 Array
'name|1': array // 從屬性值 array 中隨機選取 1 個元素，作為最終值。 'name|+1': array // 從屬性值 array 中順序選取 1 個元素，作為最終值。 'name|min-max': array // 通過重復屬性值 array 生成一個新數組，重復次數大于等于 min，小于等于 max。 // 'name|count': array 通過重復屬性值 array 生成一個新數組，重復次數為 count。
屬性值是正則表達式 RegExp
// 根據正則表達式 regexp 反向生成可以匹配它的字符串。用于生成自定義格式的字符串
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// 結果可能是：
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}占位符 引用的是 Mock.Random 中的方法，
這跟vue中的v-on:click省略成@click很像。可以簡單理解為Mock.Random的縮寫。
@后面跟上Mock.Random的一些固定方法，用來生成隨機數據。
用法示例：
// 比如我們現在要隨機生成一個中文人名 const data = Mock.Random.cname() // 結果： // data: 趙麗
改成占位符的方法就是：
const data = Mock.mock('@cname')
// 結果：
// data: 張秀蘭這里的cname就是Mock.Random的一個方法，表示獲取隨機的中文人名。
這里有一張表格，包含了Mock.Random的方法，并進行了簡單的分類：
方法名前面帶c的，都是用來獲取中文相關的數據的。比如@name用來生成隨機的英文名，而@cname就是用來生成隨機的中文名。
另外，這些方法還可以帶參數，以下有一些例子：
import Mock from 'mockjs'
let basicData = Mock.mock({
'list|1-100': [{
'id|+1': 1,
'isBoolean': '@boolean(10, 0, true)',//百分之百的true
'naturalNumber': '@natural(1, 1000)', //大于等于零的整數
'integer': '@integer(0)', //隨機整數
'float': '@float(1, 100, 3, 6)', //隨機浮點數,
'character': '@character("upper")', //一個隨機字符
'string': '@string("lower", 5, 20)', //一串隨機字符串
'range': '@range(1, 10, 2)', //一個整形數組，步長為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")' //獲取當前完整時間
}]
});
// 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,
'paragraph2': '@cparagraph(2)', //生成一段2句話的中文文本,
'paragraph3': '@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協議
'domain': '@domain', //隨機生成一個域名,
'email': '@email', //隨機生成一個郵箱地址,
'ip': '@ip' //隨機生成一個ip地址
}]
})
// console.log(webList);
let address = Mock.mock({
'addressList|5': [{
'id|+1': 1,
'region': '@region', //生成一個大區
'province': '@province', //生成一個省份
'city': '@city', //生成一個市
'country': '@country', //一個縣
'zip': '@zip', //郵政編碼
}]
})
console.log(address)Mock.mock( rurl, rtype, data)
介紹以下三個參數：
rurl：請求路徑，可以是相對路徑，也可以是絕對路徑
rtype：請求方式，比如get post put delete等
data：要返回的模擬數據
舉例：
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 <h4>hello react</h4>
}
export default DemoMock返回的結果：
到此，相信大家對“在react中如何使用mockjs方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
