官網(wǎng)
https://github.com/nuysoft/Mock/wiki/Getting-Started
一、為什么使用mockjs
在做開發(fā)時(shí)您觉,當(dāng)后端的接口還未完成拙寡,前端為了不影響工作效率,手動(dòng)模擬后端接口琳水,
1.我們可以使用json文件來(lái)模擬后臺(tái)數(shù)據(jù)肆糕,但比較局限般堆,無(wú)法模擬數(shù)據(jù)的增刪改查
2.使用json-server模擬,但不能隨機(jī)生成所需數(shù)據(jù)
3.使用mockjs模擬后端接口诚啃,可隨機(jī)生成所需數(shù)據(jù)淮摔,可模擬對(duì)數(shù)據(jù)的增刪改查
二、mock優(yōu)點(diǎn)
1.前后端分離始赎,
2.可隨機(jī)生成大量的數(shù)據(jù)
3.用法簡(jiǎn)單
4.數(shù)據(jù)類型豐富
5.可擴(kuò)展數(shù)據(jù)類型
6.在已有接口文檔的情況下和橙,我們可以直接按照接口文檔來(lái)開發(fā),將相應(yīng)的字段寫好造垛,在接口完成 之后魔招,只需要改變url地址即可。
三五辽、mock使用
npm install mockjs --save-dev
// 引入 Mock
var Mock = require('mockjs')
// 定義數(shù)據(jù)類型
var data = Mock.mock({
// 20條數(shù)據(jù)
"data|20": [{
// 商品種類
"goodsClass": "女裝",
// 商品Id
"goodsId|+1": 1,
//商品名稱
"goodsName": "@ctitle(10)",
//商品地址
"goodsAddress": "@county(true)",
//商品等級(jí)評(píng)價(jià)★
"goodsStar|1-5": "★",
//商品圖片
"goodsImg": "@Image('100x100','@color','小甜甜')",
//商品售價(jià)
"goodsSale|30-500": 30
}]
})
// 輸出結(jié)果隨機(jī)生成的數(shù)據(jù)(node index.js)
console.log(data);
四办斑、mockjs的數(shù)據(jù)類型 及 語(yǔ)法規(guī)范
1、Mock.Random
Mock.Random是一個(gè)工具類奔脐,用于生成各種隨機(jī)數(shù)據(jù)俄周。
Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』,書寫格式為 @占位符(參數(shù) [, 參數(shù)])
2Mock.Random 提供的完整方法(占位符)如下
類型 | 方法 |
---|---|
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 |
3.定義數(shù)據(jù)類型髓迎,詳情見(jiàn)官方文檔
// 引入 Mock
var Mock = require('mockjs')
// 定義數(shù)據(jù)類型
var data = Mock.mock({
// 20條數(shù)據(jù)
"data|3": [{
// 商品種類
"goodsClass": "女裝",
// 商品Id
"goodsId|+1": 1,
//商品名稱
"goodsName": "@ctitle(10)",
//商品地址
"goodsAddress": "@county(true)",
//商品等級(jí)評(píng)價(jià)★
"goodsStar|1-5": "★",
//商品圖片
"goodsImg": "@Image('100x100','@color','小甜甜')",
//商品售價(jià)
"goodsSale|30-500": 30,
// 郵箱:
"email": "@email",
// 顏色
"color": "@color",
// name
"name": "@name",
//img,參數(shù)1:背景色峦朗,參2:前景色,參3:圖片的格式排龄,默認(rèn)png波势,參4:圖片上的文字
"img": "@image('100*100','@color')",
//英文文本(句子)參1:句子的個(gè)數(shù),參2:句子的最小個(gè)數(shù) 參3:句子的最大個(gè)數(shù)橄维,沒(méi)有參1時(shí)尺铣,參2參3才會(huì)生效
"Etext":"@paragraph(1,1,3)",
//中文文本(句子)參1:句子的個(gè)數(shù),參2:句子的最小個(gè)數(shù) 參3:句子的最大個(gè)數(shù)争舞,沒(méi)有參1時(shí)凛忿,參2參3才會(huì)生效
"Ctext":"@cparagraph(1,1,3)",
//中國(guó)大區(qū)
"cregion":"@region",
// 省
"cprovince":"@province",
//市
"ccity":"@city",
//省 + 市
"ss":"@city(true)",
//縣
"country":"@county",
//省市縣
"countrysx":"@county(true)",
//郵政編碼
"code":"@zip"
}]
})
// 輸出結(jié)果
// console.log(data);
4.mockjs語(yǔ)法規(guī)范
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成:屬性名、生成規(guī)則竞川、屬性值:
// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
注意:
屬性名 和 生成規(guī)則 之間用豎線 | 分隔店溢。
生成規(guī)則 是可選的。
生成規(guī)則 有 7 種格式: 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value
//屬性值自動(dòng)加 1委乌,初始值為 `number` 'name|+step': value
生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定床牧。
屬性值 中可以含有 @占位符。
屬性值 還指定了最終值的初始值和類型遭贸。
---------------------------------------------
1. 屬性值是字符串 String
-
'name|min-max': string
通過(guò)重復(fù)
string
生成一個(gè)字符串戈咳,重復(fù)次數(shù)大于等于min
,小于等于max
。 -
'name|count': string
通過(guò)重復(fù)
string
生成一個(gè)字符串著蛙,重復(fù)次數(shù)等于count
删铃。
2. 屬性值是數(shù)字 Number
-
'name|+1': number
屬性值自動(dòng)加 1,初始值為
number
册踩。 -
'name|min-max': number
生成一個(gè)大于等于
min
泳姐、小于等于max
的整數(shù),屬性值number
只是用來(lái)確定類型暂吉。 -
'name|min-max.dmin-dmax': number
生成一個(gè)浮點(diǎn)數(shù)胖秒,整數(shù)部分大于等于
min
、小于等于max
慕的,小數(shù)部分保留dmin
到dmax
位阎肝。
3. 屬性值是布爾型 Boolean
-
'name|1': boolean
隨機(jī)生成一個(gè)布爾值,值為 true 的概率是 1/2肮街,值為 false 的概率同樣是 1/2风题。
-
'name|min-max': value
隨機(jī)生成一個(gè)布爾值,值為
value
的概率是min / (min + max)
嫉父,值為!value
的概率是max / (min + max)
沛硅。
4. 屬性值是對(duì)象 Object
-
'name|count': object
從屬性值
object
中隨機(jī)選取count
個(gè)屬性。 -
'name|min-max': object
從屬性值
object
中隨機(jī)選取min
到max
個(gè)屬性绕辖。
5. 屬性值是數(shù)組 Array
-
'name|1': array
從屬性值
array
中隨機(jī)選取 1 個(gè)元素摇肌,作為最終值。 -
'name|+1': array
從屬性值
array
中順序選取 1 個(gè)元素仪际,作為最終值围小。 -
'name|min-max': array
通過(guò)重復(fù)屬性值
array
生成一個(gè)新數(shù)組,重復(fù)次數(shù)大于等于min
树碱,小于等于max
肯适。 -
'name|count': array
通過(guò)重復(fù)屬性值
array
生成一個(gè)新數(shù)組,重復(fù)次數(shù)為count
成榜。
6. 屬性值是函數(shù) Function
-
'name': function
執(zhí)行函數(shù)
function
框舔,取其返回值作為最終的屬性值,函數(shù)的上下文為屬性'name'
所在的對(duì)象赎婚。
7. 屬性值是正則表達(dá)式 RegExp
-
'name': regexp
根據(jù)正則表達(dá)式
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.setup()
Mock.setup( settings )
配置攔截 Ajax 請(qǐng)求時(shí)的行為。支持的配置項(xiàng)有:timeout
指定被攔截的 Ajax 請(qǐng)求的響應(yīng)時(shí)間饺窿,單位是毫秒歧焦。
值可以是正整數(shù),例如 400,表示 400 毫秒 后才會(huì)返回響應(yīng)內(nèi)容绢馍;
也可以是橫杠 '-' 風(fēng)格的字符串向瓷,例如 '200-600',表示響應(yīng)時(shí)間介于 200 和 600 毫秒之間舰涌。默認(rèn)值是'10-100'猖任。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
目前,接口 Mock.setup( settings ) 僅用于配置 Ajax 請(qǐng)求瓷耙,將來(lái)可能用于配置 Mock 的其他行為朱躺。
五、Mock.Random 擴(kuò)展方法
// 引入 Mock
var Mock = require('mockjs')
var random = Mock.Random;
//擴(kuò)展數(shù)據(jù)模板
random.extend({
type: function (index:number) {
const types = ['products', 'industryApp', 'solution', 'experts'];
return this.pick(types[index])
}
});
// 定義數(shù)據(jù)類型
const menuSource:Array<any> = [];
menuSource[0] = Mock.mock({
"type": "@type(0)",
'data|3-4':[{
'id|+1': 1,
name: "@ctitle( 4,6)",
"childs|5-10": [{
'id|+1': 1,
name: "@ctitle(4,6)",
}]
}]
});
// 輸出結(jié)果
console.log(data);
六搁痛、mockjs獲取前端傳遞的數(shù)據(jù)
axios({
method: "get",
url: "/getGoods",
data: {
id:2
}
}).then(data => {
//成功的回調(diào)函數(shù)长搀,返回的是增加的數(shù)據(jù)
console.log(data.data.data);
this.url = data.data.data[0].goodsImg
});
}
Mock.mock("/getGoods", "get", (config) => {
console.log(config);
return data;
})
###mockjs可以通過(guò)option.body獲取前端傳遞的數(shù)據(jù)