json-server 和mock.js生成大量json數據

JSON-server和mock.js
mock文件夾下 db.json db.js
json-sever使用 安裝：npm install json-server -g
/mock 目錄下執行json-server db.json -p 3003
mock.js使用 安裝：npm install mockjs -g

/mock 下運行，db.js是文件名，3003是端口號 json-server db.js -p 3003

原文鏈接 https://segmentfault.com/a/1190000012170435#articleHeader2

 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” 這樣讓人望而生畏的名字，對於用戶的
年齡，性別，籍貫，也應該有比較合理的數據展示。

為什么選擇mockjs

數據生成器有很多，比較出名的有 faker ,chance ,mockjs 等，其中最為強大的非 faker 莫屬，不但擁有幾乎全部常用的數據格式，而且還有中英德法等多種語言的數據。但是在實際測試中發現，faker 對中文數據的支持還是以西方文字為基礎，並不能很好的模擬中文，例如：

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()); => [e-mail] console.log(faker.phone.phoneNumber()); => 922-61957652

這些看起來有些怪異的中文格式，多半是不能用於國內的數據模擬的，我們再看看 mockjs 的表現：

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可以模擬的數據不如 faker 那么多，但是由於其對中文的良好支持，並且使用了位於國內的
隨機圖片提供商，顯然是更適合國情的選擇。

mockjs用法示例

請先用15分鍾閱讀 mockjs官方文檔

安裝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=別角置" ] }]