上一篇演示時，使用了 db.json 作為數據載體，雖然方便，但是如果需要大量的數據，則顯得力不從心。
幸好 json server 可以通過js動態生成json格式數據，官方例子為生成1000組user數據：
# /mock/db.js
module.exports = function() {
var data = { users: [] }
// Create 1000 users
for (var i = 0; i < 1000; i++) {
data.users.push({ id: i, name: 'user' + i })
}
return data
}
/mock 下運行
json-server db.js -p 3003
我們訪問 http://localhost:3003/news/ 看到的數據是
[
{"id": 0,"name": "user0"},
{"id": 1,"name": "user1"},
{"id": 2,"name": "user2"},
{"id": 3,"name": "user3"},
...
{"id": 999,"name": "user999"}
]
但是在開發環境中，name 這個屬性應該是諸如 “李鐵蛋”， “張艷華” 或者是 “Brenda Thomas”，“Daniel Wilson” 這樣接地氣的名字，而不是 “user0”, “user1” 這樣讓人望而生畏的名字，對于用戶的年齡，性別，籍貫，也應該有比較合理的數據展示。
mocks
1.安裝mockjs
在 /mock 目錄下安裝
npm install mockjs --save
示范：
Mock.mock
// repeat 方法（部分）
Mock.mock({
"string|5": "★" => "string": "★★★★★"
"string|1-10": "★" => "string": "★★"
"number|1-100": 100 => "number": 85
"number|1-100.2": 100 => "number": 25.69
})
Mock.Random
// random 方法（部分）
Random.integer(60, 100) => 78
Random.float(60, 100) => 89.565475
Random.range(60, 100) => [60,61,62,...,99]
Random.date() => "2018-12-28"
Random.image('200x100','#396') => "http://dummyimage.com/200x100/396"
Random.color() => "#79d8f2" (默認使用hex顏色)
Random.county(true) => "浙江省 舟山市 岱山縣"
為什么不在瀏覽器中使用mockjs
通過閱讀 mockjs 的官方文檔可以發現，它其實是作為一個獨立的 mock server 存在的，就算沒有json server，一樣可以反饋數據，但是由于以下一些缺點，讓我只能把它作為一個數據構造器來使用：
- 不能跨域使用
- 與某些框架中的路由處理邏輯沖突
- 無法定義復雜的數據結構，比如下面的數據結構，images - - 將會是字符串 [object object]， 而非預想中的數組：
Mock.mock({
"list|1-10": [
"id|+1": 1,
"images": [1,2,3]
]
})
- 無法自定義較為復雜的路由
示例
下面是一個使用 mockjs 構造的比較復雜的數據格式,對象是一個新聞列表，其中有100條新聞，每條新聞有對應的id，標題，內容，簡介，標簽，瀏覽量，和一個圖片數組：
# /mock/db.js
let Mock = require('mockjs');
let Random = Mock.Random;
module.exports = function() {
var data = {
news: []
};
var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6)));
for (var i = 0; i < 100; i++) {
var content = Random.cparagraph(0,10);
data.news.push({
id: i,
title: Random.cword(8,20),
desc: content.substr(0,40),
tag: Random.cword(2,6),
views: Random.integer(100,5000),
images: images.slice(0,Random.integer(1,3))
})
}
return data
}
/mock 下運行
json-server db.js -p 3003
訪問 http://localhost:3003/news 看到的數據是:
[
{
"id": 0,
"title": "元小總小把清保住影辦歷戰資和總由",
"desc": "共先定制向向圓適者定書她規置斗平相。要廣確但教金更前三響角面等以白。眼查何參提適",
"tag": "值集空",
"views": 3810,
"images": [
"http://dummyimage.com/200x100/79f2a5&text=別角置",
"http://dummyimage.com/200x100/f28279&text=收面幾容受取",
"http://dummyimage.com/200x100/7993f2&text=做件"
]
},
{
"id": 1,
"title": "物器許條對越復術",
"desc": "方江周是府整頭書生權部部條。始克識史但給又約同段十子按者感律備。關長廠平難山從合",
"tag": "分七眼術保",
"views": 4673,
"images": [
"http://dummyimage.com/200x100/79f2a5&text=別角置"
]
},
{
"id": 2,
"title": "但學卻連質法計性想般最",
"desc": "以群親它天即資幾行位具回同務度。場養驗快但部光天火金時內我。任提教毛辦結論感看還",
"tag": "響六",
"views": 4131,
"images": [
"http://dummyimage.com/200x100/79f2a5&text=別角置",
"http://dummyimage.com/200x100/f28279&text=收面幾容受取",
"http://dummyimage.com/200x100/7993f2&text=做件"
]
},
...
{
"id": 99,
"title": "則群起然線部其深我位價業紅候院",
"desc": "為高值務須西生型住斷況里聽。志置開用她你然始查她響元還。照員給門次府此據它后支越",
"tag": "何你",
"views": 2952,
"images": [
"http://dummyimage.com/200x100/79f2a5&text=別角置"
]
}
]
