mockjs
推薦文章：
mockjs 可以在不修改既有代碼的情況下攔截請求，模擬后端接口返回數據，可以根據一定的規則生成測試數據
可以通過攔截請求，模擬網絡響應時間等，返回指定規則的數據，從而實現前后端獨立開發（即前端工程師不需要等待后端工程師接口寫好后再進行開發，也可以通過模擬數據來避免固定加數據帶來的情況考慮不周）
- 默認為只有這幾項、默認為文本只有這么長，導致后續布局需要跟着數據變
開始 & 安裝
- 需要 Node 環境
# 安裝
npm install mockjs
基本使用
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
'list|1-10': [{
// 屬性 id 是一個自增數，起始值為 1，每次增 1
'id|+1': 1
}]
})
// 輸出結果
console.log(JSON.stringify(data, null, 4))
模擬數據案例
- 參照這個快速創建模擬數據，可能來的更快一些，相比去對照規則找
// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
// 屬性 list 的值是一個數組，其中含有 1 到 3 個元素
'list|1-3': [{
// 屬性 sid 是一個自增數，起始值為 1，每次增 1
'sid|+1': 1,
// 屬性 userId 是一個5位的隨機碼
'userId|5': '',
// 屬性 sex 是一個bool值
"sex|1-2": true,
// 屬性 city對象 是對象值中2-4個的值
"city|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
},
//屬性 grade 是數組當中的一個值
"grade|1": [
"1年級",
"2年級",
"3年級"
],
//屬性 guid 是唯一機器碼
'guid': '@guid',
//屬性 id 是隨機id
'id': '@id',
//屬性 title 是一個隨機長度的標題
'title': '@title()',
//屬性 paragraph 是一個隨機長度的段落
'paragraph': '@cparagraph',
//屬性 image 是一個隨機圖片 參數分別為size, background, text
'image': "@image('200x100', '#4A7BF7', 'Hello')",
//屬性 address 是一個隨機地址
'address': '@county(true)',
//屬性 date 是一個yyyy-MM-dd 的隨機日期
'date': '@date("yyyy-MM-dd")',
//屬性 time 是一個 size, background, text 的隨機時間
'time': '@time("HH:mm:ss")',
//屬性 url 是一個隨機的url
'url': '@url',
//屬性 email 是一個隨機email
'email': '@email',
//屬性 ip 是一個隨機ip
'ip': '@ip',
//屬性 regexp 是一個正則表達式匹配到的值 如aA1
'regexp': /[a-z][A-Z][0-9]/,
}]
})
官網測試數據模版（待后續補充）
- 【示例】
- 可以通過正則表達式生成數據（批量生成測試手機號）
幾種類型的應用
| 類型 | 可能的應用 |
|---|---|
| Object | 隨機選擇對象的幾個屬性 |
| Function | 可以自定義函數，根據函數返回值返回（this.foo,this可以直接訪問已有規則） |
| Path | 可以根據相對路徑，絕對路徑，使用已有規則來生成新的數據項 |
| Date | 可以生成各種格式的時間 |
| Image | 可以生成各種測試圖片（可以用的在線地址，圖片的自定義程度還挺高，用來占位布局再好不過了） |
| Color | 可以生成隨機顏色，rgb、rgba、hex 類型的顏色值都可以 |
| Text | 可以隨機生成文本段落、指定單詞數（中文、英文的都支持），在指定單詞里按規則隨機組合 |
| Name | 可以隨機生成名字、姓、名（中英文都支持） |
| Web | 可以生成一系列的網址等 |
| Address | 可以生成郵編、地址、省份、國家等，還可以指定是否攜帶上級（哪個省的什么市） |
| Miscellaneous | 可以生成id |
題外話
不一定要用它來攔截請求
在我看來，mockjs 的數據生成還是挺好用的
在后端接口未實現，或者數據庫沒有相對完善的數據時，可以使用 mockjs 的規則來生成一些測試數據，來檢驗邊緣情況（也可以用在后端作為測試數據）
- 就反正比你自己去寫代碼生成復雜的測試數據來的可能更快些，而且更加隨機些
新創建一個 html 文件，來生成隨機測試數據（每次需要數據了，改下規則，打開網頁讓他自動生成一下就好了，從 chrome 控制台把新的測試數據復制出來）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://mockjs.com/dist/mock.js"></script>
<title>測試mockjs生成測試數據</title>
</head>
<body>
</body>
<script type="text/javascript">
// 拓展mockjs
Mock.Random.extend({
phone: function () {
var phonePrefixs = ['132', '135', '189'] // 自己寫前綴哈
return this.pick(phonePrefixs) + Mock.mock(/\d{8}/) //Number()
}
})
// 使用 Mock
// var Mock = require('mockjs')
// var data = Mock.mock({
// // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
// 'list|1-10': [{
// // 屬性 id 是一個自增數，起始值為 1，每次增 1
// 'id|+1': 1,
// 'cname': '@cname',
// 'phoneNum': '@phone'
// }]
// })
// // console.log(Mock.mock('@cname'))
// // 輸出結果
// 如果是相關聯的幾組數據，最好讓項目經理/產品經理給一組假數據（可以更加體現專業性，不至於很不合理的數據），並不是說一定要用隨機假數據
// - 比如水位可能和雨量有關聯（雨量大水位高）
var data = Mock.mock({
'sw|7': ['@float(20, 29, 2, 2)'],
'yl|7': ['@integer(0, 249)'],
'll|7': ['@integer(0, 799)'],
'ph|7': ['@float(1, 13, 1, 1)'],
'zd|7': ['@float(0, 0.9, 2, 2)'],
// zl 的范圍是 0-0.5，因為 mockjs 的 @float(0, 0.5, 2, 2) 隨機出來的結果其實是 0 - 1 直接的，所以要自己處理一下
'zl|7': ['@natural(0, 50)']
})
// js 批量對那個小數數組做處理
for(var i = 0; i < data.zl.length; i++) {
data.zl[i] = data.zl[i] / 100
}
console.log(data)
/** 數據
{
"sw": [25.18, 25.19, 26.68, 27.26, 23.29, 29.76, 28.57],
"yl": [49, 125, 230, 171, 138, 35, 240],
"ll": [566, 435, 132, 199, 309, 789, 176],
"ph": [12.8, 6.4, 12.8, 13.7, 6.1, 11.8, 7.2],
"zd": [0.02, 0.87, 0.24, 0.36, 0.53, 0.37, 0.06],
"zl": [0.39, 0.05, 0.15, 0.45, 0.01, 0.05, 0.1]
}
*/
console.log(JSON.stringify(data))
// console.log(JSON.stringify(data, null, 4))
// Mock.Random.natural(0, 100) / 100
// console.log(Mock.Random.province())
// 生成省：@mock=@province()
// 生成市：@mock=@city()
// 生成縣：@mock=@county()
// 生成url：@mock=@url()
// 生成姓名：@mock=@cname()
// 生成漢字：@mock=@cword(2,5)
// 生成句子：@mock=@csentence(2,5)生成段落：@mock=@cparagraph(3)
// 生成圖片：@mock=@img(100x100)
// 生成顏色：@mock=@imgcolor()
// 生成日期：@mock=@date(yy-mm-dd)
// 生成時間：@mock=@time(hh-mm-ss)
// 生成自增：@mock=@increment(1)
// 生成自然數：@mock=@natural(1,100)
// 生成整數：@mock=@integer(1,100)
// 生成小數：@mock=@float(1,100,2,3)
var data = Mock.mock({'data|7': [{
'sw': '@float(20, 29, 2, 2)',
'yl': '@integer(0, 249)',
'll': '@integer(0, 799)',
'ph': '@float(1, 13, 1, 1)',
'zd': '@float(0, 0.9, 2, 2)',
// zl 的范圍是 0-0.5，因為 mockjs 的 @float(0, 0.5, 2, 2) 隨機出來的結果其實是 0 - 1 直接的，所以要自己處理一下
'zl': '@natural(0, 50)'
}]}).data
// js 批量對那個小數數組做處理
for(var i = 0; i < data.length; i++) {
data[i].zl = data[i].zl / 100
}
console.log(data)
/** 數據
[
{"sw":27.27,"yl":2,"ll":379,"ph":11.7,"zd":0.65,"zl":0.09},
{"sw":25.65,"yl":117,"ll":665,"ph":10.7,"zd":0.38,"zl":0.41},
{"sw":23.16,"yl":234,"ll":386,"ph":2.1,"zd":0.84,"zl":0.42},
{"sw":21.08,"yl":137,"ll":797,"ph":9.2,"zd":0.74,"zl":0.4},
{"sw":21.22,"yl":222,"ll":381,"ph":6.7,"zd":0.97,"zl":0.16},
{"sw":25.28,"yl":93,"ll":278,"ph":5.7,"zd":0.89,"zl":0.17},
{"sw":24.13,"yl":69,"ll":463,"ph":5.7,"zd":0.46,"zl":0.5}
]
*/
console.log(JSON.stringify(data))
</script>
</html>
其他推薦
后續可以考慮用網易雲的 NEI 平台（接口管理平台，有點類似 Yapi）
-
網易開源的，可以本地部署
-
【官網】