摘要：上一篇演示了如何安裝并運(yùn)行在這里將使用第三方庫讓模擬的數(shù)據(jù)更加豐滿和實(shí)用。使用動(dòng)態(tài)數(shù)據(jù)上一篇演示時(shí)，使用了作為數(shù)據(jù)載體，雖然方便，但是如果需要大量的數(shù)據(jù)，則顯得力不從心。

上一篇演示了如何安裝并運(yùn)行 json server , 在這里將使用第三方庫讓模擬的數(shù)據(jù)更加豐滿和實(shí)用。

上一篇演示時(shí)，使用了 db.json 作為數(shù)據(jù)載體，雖然方便，但是如果需要大量的數(shù)據(jù)，則顯得力不從心。
幸好 json server 可以通過js動(dòng)態(tài)生成json格式數(shù)據(jù)，官方例子為生成1000組user數(shù)據(jù)：

# /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 下運(yùn)行

json-server db.js -p 3003

我們?cè)L問 http://localhost:3003/news/ 看到的數(shù)據(jù)是

[
  {"id": 0,"name": "user0"},
  {"id": 1,"name": "user1"},
  {"id": 2,"name": "user2"},
  {"id": 3,"name": "user3"},
  ...
  {"id": 999,"name": "user999"}
]

但是在開發(fā)環(huán)境中，name 這個(gè)屬性應(yīng)該是諸如 “李鐵蛋”， “張艷華” 或者是 “Brenda Thomas”，
“Daniel Wilson” 這樣接地氣的名字，而不是 “user0”, “user1” 這樣讓人望而生畏的名字，對(duì)于用戶的
年齡，性別，籍貫，也應(yīng)該有比較合理的數(shù)據(jù)展示。

數(shù)據(jù)生成器有很多，比較出名的有 faker ,chance ,mockjs 等，其中最為強(qiáng)大的非 faker 莫屬，不但擁有幾乎全部常用的數(shù)據(jù)格式，而且還有中英德法等多種語言的數(shù)據(jù)。但是在實(shí)際測試中發(fā)現(xiàn)，faker 對(duì)中文數(shù)據(jù)的支持還是以西方文字為基礎(chǔ)，并不能很好的模擬中文，例如：

let faker = require("faker");

faker.locale = "zh_CN";

console.log(faker.address.city());          => 南 羅
console.log(faker.address.streetName());    => 陳 橋
console.log(faker.company.companyName());   => 靜琪 - 越澤
console.log(faker.date.month());            => May
console.log(faker.internet.email());        => [email protected]
console.log(faker.phone.phoneNumber());     => 922-61957652

這些看起來有些怪異的中文格式，多半是不能用于國內(nèi)的數(shù)據(jù)模擬的，我們?cè)倏纯?mockjs 的表現(xiàn)：

let Mock  = require("mockjs");
let Random = Mock.Random;

console.log(Random.city());          => 珠海市
console.log(Random.cname());         => 韓桂英
console.log(Random.date());          => 2007-08-05
console.log(Mock.mock({              => {stars: "★★★★★"}
  "stars|1-10": "★"
}));
Random.image("200x100", "#4A7BF7", "hello")
  =>  見下圖

雖然 mockj s可以模擬的數(shù)據(jù)不如 faker 那么多，但是由于其對(duì)中文的良好支持，并且使用了位于國內(nèi)的
隨機(jī)圖片提供商，顯然是更適合國情的選擇。

請(qǐng)先用15分鐘閱讀 mockjs官方文檔

在 /mock 目錄下安裝

npm install mockjs --save

我知道有些人不會(huì)去認(rèn)真的閱讀官方文檔，所以在此摘抄一些官方文檔中的例子作為示范：

// repeat 方法（部分）

Mock.mock({
  "string|5": "★"       =>   "string": "★★★★★"
  "string|1-10": "★"    =>   "string": "★★"
  "number|1-100": 100    =>   "number": 85
  "number|1-100.2": 100  =>   "number": 25.69
})

我知道有些人不會(huì)去認(rèn)真的閱讀官方文檔，所以在此摘抄一些官方文檔中的例子作為示范：

// 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"  (默認(rèn)使用hex顏色)
Random.county(true)        => "浙江省 舟山市 岱山縣"

通過閱讀 mockjs 的官方文檔可以發(fā)現(xiàn)，它其實(shí)是作為一個(gè)獨(dú)立的 mock server 存在的，就算沒有json server，一樣可以反饋數(shù)據(jù)，但是由于以下一些缺點(diǎn)，讓我只能把它作為一個(gè)數(shù)據(jù)構(gòu)造器來使用：

不能跨域使用

與某些框架中的路由處理邏輯沖突

無法定義復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，比如下面的數(shù)據(jù)結(jié)構(gòu)，images 將會(huì)是字符串 [object object]， 而非預(yù)想中的數(shù)組：

Mock.mock({
    "list|1-10": [
      "id|+1": 1,
      "images": [1,2,3]
    ] 
  })

無法自定義較為復(fù)雜的路由

下面是一個(gè)使用 mockjs 構(gòu)造的比較復(fù)雜的數(shù)據(jù)格式,對(duì)象是一個(gè)新聞列表，其中有100條新聞，每條新聞?dòng)袑?duì)應(yīng)的id，標(biāo)題，內(nèi)容，簡介，標(biāo)簽，瀏覽量，和一個(gè)圖片數(shù)組：

# /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 下運(yùn)行

json-server db.js -p 3003

訪問 http://localhost:3003/news 看到的數(shù)據(jù)是:

[
    {
        "id": 0,
        "title": "元小總小把清保住影辦歷戰(zhàn)資和總由",
        "desc": "共先定制向向圓適者定書她規(guī)置斗平相。要廣確但教金更前三響角面等以白。眼查何參提適",
        "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": "物器許條對(duì)越復(fù)術(shù)",
        "desc": "方江周是府整頭書生權(quán)部部條。始克識(shí)史但給又約同段十子按者感律備。關(guān)長廠平難山從合",
        "tag": "分七眼術(shù)保",
        "views": 4673,
        "images": [
        "http://dummyimage.com/200x100/79f2a5&text=別角置"
        ]
    },
    {
        "id": 2,
        "title": "但學(xué)卻連質(zhì)法計(jì)性想般最",
        "desc": "以群親它天即資幾行位具回同務(wù)度。場養(yǎng)驗(yàn)快但部光天火金時(shí)內(nèi)我。任提教毛辦結(jié)論感看還",
        "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": "則群起然線部其深我位價(jià)業(yè)紅候院",
        "desc": "為高值務(wù)須西生型住斷況里聽。志置開用她你然始查她響元還。照員給門次府此據(jù)它后支越",
        "tag": "何你",
        "views": 2952,
        "images": [
            "http://dummyimage.com/200x100/79f2a5&text=別角置"
        ]
    }
]

json-server源碼 ： json-server
mockjs源碼 ： mockjs
demo ： 示例代碼