前端開發中,在做前後端分離的時候,經常需要手寫json數據,有3個問題特別揪心: 1,數據是寫死的,不能按一定的條件隨機生成長度不一,內容不一的數據 2,寫數組的時候,如果有很多條,需要一條一條地寫,費時費力 3,mock圖片特別困難 randomjson用來根據模型隨機生成json,mock js ...
前端開發中,在做前後端分離的時候,經常需要手寫json數據,有3個問題特別揪心:
1,數據是寫死的,不能按一定的條件隨機生成長度不一,內容不一的數據
2,寫數組的時候,如果有很多條,需要一條一條地寫,費時費力
3,mock圖片特別困難
randomjson用來根據模型隨機生成json,mock json數據的時候特別有用
先來個例子:http://zhoushengfe.com/random/example/randomjson.html
github地址:
https://github.com/finance-sh/randomjson
如何使用
# randomjson
根據條件生成json對應的隨機json
## 如何使用
### 安裝
npm install randomjson
或者直接引用產出文件:<script src="dist.js"></script>
### 用法
// 用法
// amd或cmd環境中引用包,瀏覽器中無需引用
var randomjson = require('randomjson');
// 模型
var modelJson = {
"code": "00",
"numberCode": "<@[10000,20000]>",
"msg": "<@chinese{12,50}>",
"msg2": "<@string{2,3}>",
"logo": "<@image{100,100}>",
"result": {
"pList<@{1,3}>":[
{
"indexToString": "<@index><@>",
"index": "<@index>",
"id": "<@[1-5]>",
"price": "<@float>",
"name": "公司名稱<@index>",
"person": "李文武<@index>",
"address": "北京市海澱區西三旗",
"mobile": "1<@number{10}>",
"tel": "<@number{4}>-<@number{8}>",
"list": [
{
"auditKey": 1,
"auditValue": "<@[0,1,2]>"
},
{
"auditKey": 2,
"auditValue": "<@[0,1,2]>"
}
]
}
]
}
}
// 根據模型生成json
var myJson = randomjson(modelJson);
根據上邊模型生成的json可能是這樣:
{
"code": "00",
"numberCode": 10000,
"msg": "加義為邊平壓你治提用根治問求只或程乾立農資特",
"msg2": "dv",
"logo": "https://dummyimage.com/100x100",
"result": {
"pList": [
{
"indexToString": "1",
"index": 1,
"id": 2,
"price": 93.78,
"name": "公司名稱1",
"person": "李文武1",
"address": "北京市海澱區西三旗",
"mobile": "17929438781",
"tel": "1148-56055642",
"list": [
{
"auditKey": 1,
"auditValue": 0
},
{
"auditKey": 2,
"auditValue": 1
}
]
},
{
"indexToString": "2",
"index": 2,
"id": 5,
"price": 29.49,
"name": "公司名稱2",
"person": "李文武2",
"address": "北京市海澱區西三旗",
"mobile": "17826945504",
"tel": "7298-46226026",
"list": [
{
"auditKey": 1,
"auditValue": 0
},
{
"auditKey": 2,
"auditValue": 0
}
]
}
]
}
}
## 詞法
以<@開始,以>結束,中間內容是randomjson的詞法
## 模型定義
### 數據類型
"<@number>": number類型
"<@string>": string類型
"<@null>": null
"<@boolean>": boolean類型
"<@chinese>": 中文字元串
"<@float{number1,number2}>": 浮點數 number1代表整數位數,number2代表小數位數,預設都為2
"<@image{width,height}>": 生成圖片 width為生成圖片寬度,height為生成圖片高度,預設為400,400
"<@index>": 元素在數組中的位置,從1開始
### 量詞
{minNumber, maxNumber}: minNumber到maxNumber個
{minNumber,}: 最少minNumber
{number}: number個
如果是float,minNumber, maxNumber表示整數部分和小數部分的位數
如果是imgae,minNumber, maxNumber表示圖片寬度高度
### 隨機生成其中之一
你可以使用“|” 分離多個選項,隨機值是其中之一,值為字元串
### 數字範圍
[1,2,3] 表示1,2,3中的一個,值為數字
[1-90] 表示1到90中的一個int值,值為數字
### 數字轉字元串
在number類型後加空的占位符
"indexToString": "<@index><@>"
### 量詞定義註意點
值為非數組時,長度在value字元串里,例如:"ret": "<@number{4}>"
值為數組時,長度在key里,例如:
"p11<@{2,5}>": [{
"p8": "12312",
"p9": ["<@string{4,7}>"],
"p10": "<@string>"
}]
github地址:
https://github.com/finance-sh/randomjson