json-server進階

遊魂Andy發表於2018-07-20
JSONServer

​ 上一篇文章詳細介紹了下json-server的基礎使用，完成了簡單的增刪改查操作，但是如果有時候我們需要大量並且合理的資料，之前的操作似乎就很雞肋了，或者亦又想自定義api訪問地址等等。那麼這篇文章正是你所需要的。

動態資料

使用js動態生成資料

建立db.js檔案

module.exports = function() {
  let data = { list: [] }
  // Create 1000 datas
  for (let i = 0; i < 1000; i++) {
    data.list.push({ id: i, name: 'user' + i,link:'www.'+ i + '.com' })
  }
  return data
}
複製程式碼

在該目錄下執行

json-server db.js
複製程式碼

現在訪問http://localhost:3000/list會看到動態生成了1000條資料，這跟我們們手動在json檔案裡寫1000條資料效果一樣，但肯定沒有這麼方便。還好json-server支援使用js動態生成的json格式資料。

Mockjs生成資料

雖然我們使用js動態生成了一些資料，但是這似乎不太符合常理。既然要模擬，那我們就模擬一些比較合理的資料，這裡推薦使用Mockjs一款很好的資料模擬第三方庫。

上篇文章我留下了一個思考：mockjs是可以作為一個獨立的mock server存在，但為什麼不單獨用它？

  • 不能跨域使用
  • 與某些框架中的路由處理邏輯衝突
  • 無法定義複雜的資料結構
  • 無法自定義較為複雜的路由

其實資料生成器有很多，在這裡必須提一下faker，幾乎支援全部常用的資料格式，而且還有多語言，但是正如網上很多人所說那樣，他的中文資料是以西方文字為基礎，並不能很好的模擬中文 。

比如我隨機生成一個使用者資訊（城市、街道、公司、月份、郵箱、電話）：

json-server進階

可以明顯看到通過faker生成的資料可讀性真的很差，再來看下mockjs

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

console.log(Random.city());  
console.log(Random.cname()); 
console.log(Random.date());  
console.log(Mock.mock({      
  "stars|1-10": "★"
}));
console.log(Random.image('200x100', '#4A7BF7', 'hello'))
複製程式碼

json-server進階

可以看到這次生成資料可讀性很好，而且圖片的提供商還是國內的（不用爬梯子訪問了）

生成真實合理的資料

在你db.js檔案所在目錄下安裝mockjs

npm install mockjs --save
複製程式碼

在這裡不重複說mockjs的使用方法，文件都有。mockjs官網：mockjs.com/

改造下db.js

let Mock  = require('mockjs');
let Random = Mock.Random;
module.exports = function() {
  let data = { list: [] }
  // Create 1000 datas
  for (let i = 0; i < 1000; i++) {
    data.list.push({ id: i, name: Random.cname(),link:Random.url() })
  }
  return data
}
複製程式碼

可以看到這次生成的資料

json-server進階

配置項

上篇文章列過json-server的配置項，再看下。

json-server [options] <source>

Options:
  --config, -c       指定 config 檔案                  [預設: "json-server.json"]
  --port, -p         設定埠號                                   [default: 3000]
  --host, -H         設定主機                                   [預設: "0.0.0.0"]
  --watch, -w        監控檔案                                           [boolean]
  --routes, -r       指定路由檔案
  --static, -s       設定靜態檔案
  --read-only, --ro  只允許 GET 請求                                    [boolean]
  --no-cors, --nc    禁止跨域資源共享                                   [boolean]
  --no-gzip, --ng    禁止GZIP                                          [boolean]
  --snapshots, -S    設定快照目錄                                     [預設: "."]
  --delay, -d        設定反饋延時 (ms)
  --id, -i           設定資料的id屬性 (e.g. _id)                     [預設: "id"]
  --quiet, -q        不輸出日誌資訊                                     [boolean]
  --help, -h         顯示幫助資訊                                       [boolean]
  --version, -v      顯示版本號                                         [boolean]
複製程式碼

直接在命令列配置，例如

json-server db.js -d 500 -q -r ./routes.json
複製程式碼

也可以建立json-server.json檔案進行配置

{
    "watch": true,
    "delay": 500,
    "quiet": true,
    "routes": "./routes.json"
}

複製程式碼

然後直接執行

json-server db.js
複製程式碼

當然也可以使用npm啟動

自定義路由

自定義路由通俗的講就是給api請求地址起了個別名，而且和後臺商量好後就避免後期了修改介面地址的麻煩。

在mock目錄下建立router.json檔案，注意每個路由檔案應該以/開頭。

{
  "/api": "/list",
  "/api/list/:id": "/list/:id",
  "/api/users?name=:name":"/users?name=:name"
}

複製程式碼

在這個json檔案裡key就是真實部署時要訪問的api路徑，對應的value就是我們開發時虛擬的api路徑。 現在訪問 /api/list/1和訪問/list/1 都返回/list/1的內容

高階查詢

Filter(過濾)

使用.操作 物件屬性值，比如訪問更深層次的屬性

GET /list?name.length=2&id=888
GET /list?name.age=18
複製程式碼

Paginate(分頁)

使用 _page 和可選的 _limit來對返回資料定製（不設定預設返回10條）。 在返回的Response Headers 中，有一個屬性Link，裡面會有first, prev, next and last links。 而且還有X-Total-Count

GET /list?name.length=2&id=888
GET /list?name.age=18
複製程式碼

Sort(排序)

使用 _sort 和 _order （預設是ascending)

GET /list?_sort=id&_order=asc
複製程式碼

對於多欄位的排序， 可以這樣

GET /list?_sort=id,name.length&_order=desc,asc
複製程式碼

Slice(分隔)

使用 _start 和 _end 或者 _limit

GET /list?_start=2&_end=5
GET /list?_start=10&_limit=5
複製程式碼

Operators(運算)

使用 _gte 或 _lte 選取一個範圍

# 選取id在2-5之間的資料
GET /list?id_gte=2&id_lte=5
複製程式碼

使用 _ne 排除一個值

GET /list?name_ne=遊魂
複製程式碼

使用 _like 進行模糊查詢 (支援正規表示式)

GET /list?name_like=遊魂
複製程式碼

Full-text search(全文檢索)

使用 q，在物件全部value中遍歷查詢包含指定值的資料

GET /list?q=張
複製程式碼

Relationships(關係圖譜)

獲取包含下級資源的資料, 使用 _embed

GET /parents?_embed=children
複製程式碼

獲取包含上級資源的資料, 使用 _expand

GET /children?_expand=parents
複製程式碼

還有很多沒說到，但是這些已經足夠用了。

json-server官網：github.com/typicode/js…

相關文章