上一篇文章詳細介紹了下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，幾乎支援全部常用的資料格式，而且還有多語言，但是正如網上很多人所說那樣，他的中文資料是以西方文字為基礎，並不能很好的模擬中文 。
比如我隨機生成一個使用者資訊（城市、街道、公司、月份、郵箱、電話）：
可以明顯看到通過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'))
複製程式碼
可以看到這次生成資料可讀性很好，而且圖片的提供商還是國內的（不用爬梯子訪問了）
生成真實合理的資料
在你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 [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…