「我是一個前端工程師，每次要進行頁面套版時，都要等後端工程師寫好 API 才能測試，我覺得很痛苦，但公司的後端我又叫不動，有沒有甚麼方法可以簡單的設計出 RESTful API，讓我可以立即套版使用？我不想每次都苦苦哀求後端工程師快點生出 API 給我！」這是之前某位學生告訴我的一段話，也想必是許多前端工程師的痛，現在，你可以不一樣！  直播網址: https://www.facebook.com/will.fans/videos/1702264796469324/

1. 進擊的前端工程師：今天就自己打造 API 吧！
使用 JSON Server 快速建置 Fake REST API 服務
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. 快速上手
Quick Start

3. 30 秒搞定 JSON Server
• 安裝套件
– npm install -g json-server
• 啟動服務
– json-server --watch db.json
※ 此步驟會自動建立 JSON 資料庫：db.json
※ 這份 JSON 資料庫須以物件開始：{ "users": [ ] }
• 測試 API
– http://localhost:3000/ 預設首頁/文件
– GET http://localhost:3000/db 取得完整資料庫
– GET http://localhost:3000/posts/1 取得單筆資料

4. 支援的 HTTP 操作方法
• GET 取得資源
• DELETE 刪除資源
• POST 建立資源
• PUT 更新資源(完整)
• PATCH 更新資源(部分)
4

5. 使用 JSON Server 注意事項
• 僅接受 application/json 內容類型 (Content-Type) 傳入
• 回傳內容類型 (Content-Type) 僅支援 application/json
• 所有 POST, PUT, PATCH, DELETE 操作都會自動回存 db.json
– 請事先備份好完整的原始 JSON 資料
– 預設支援 CORS 與 JSONP 協定 (對所有來源開放)
• 每筆資料都會有個 "id" 屬性，而且建立後就無法更新此屬性
• 在命令提示字元輸入 s 並按下 Enter 可儲存當前資料庫快照
5

6. 資料庫快照
• 在命令提示字元輸入 s 並按下 Enter 可儲存當前資料庫快照
6

7. 進階技巧
Advanced Tips

8. 網頁伺服器
• 只要建立 public 資料夾，將所有靜態檔案置入即可
– 預設首頁檔名：index.html
• 在 Angular CLI 自動建立 Production Build 預覽與 API
– json-server --watch srcapidata.json --static dist
• 指定不同的 Port 顯示網頁
– json-server --watch db.json --port 3004
8

9. 資料操作方式
• 全文檢索
– http://localhost:3000/books?q=Discovery
• 資料篩選 (完整比對)
– http://localhost:3000/books?author=Will+Huang
– http://localhost:3000/comments?author.name=typicode
• 資料分頁
– http://localhost:3000/books?_page=3
– http://localhost:3000/books?_page=3&_limit=10
– http://localhost:3000/books?_start=21&_end=30
– http://localhost:3000/books?_start=21&_limit=10
• 資料排序
– http://localhost:3000/books?_sort=rating&_order=DESC
9

10. 進階資料篩選
• 常見的篩選運算子
• 綜合篩選範例
– get /books?rating_gte=1990&rating_lte=2016
10
運算子 說明 範例
_like 相似於 (字串) GET /posts?author_like=will
_gte 大於等於 (數值) GET /books?rating_gte=4
_lte 小於等於 (數值) GET /books?id_lte=99
_ne 不等於 (數值) GET /books?id_ne=1

11. 快速建立大量假資料
11
// index.js
module.exports = () => {
const data = {
users: []
}
// Create 1000 users
for (let i = 0; i < 1000; i++) {
data.users.push({
id: i,
name: `user${i}`
})
}
return data
}
$ json-server index.js

12. 自訂網址路由
• 建立路由定義檔 ( routes.json )
{
"/api/": "/",
"/blog/:resource/:id/show": "/:resource/:id",
"/blog/:category": "/posts?category=:category"
}
• 啟動路由
$ json-server db.json --routes routes.json
• 使用範例
– /api/posts → /posts
– /api/posts/1 → /posts/1
– /blog/posts/1/show → /posts/1
– /blog/javascript → /posts?category=javascript 12

13. 其他實用技巧
• 載入外部 JSON 資料來源
– json-server http://jsonplaceholder.typicode.com/db
• 變更預設 "id" 屬性的名稱
– json-server --id _id --watch db.json
• 僅提供 GET 方法 (唯讀的 API 存取)
– json-server --ro --watch db.json
• 模擬較慢的 API 回應時間 ( 延遲 500ms 之後才回應 )
– json-server --delay 500 db.json
• 啟用 HTTPS
– 最簡單可透過 hotel 來建立 SSL 加密網站
13

14. 相關連結
• typicode/json-server: Get a full fake REST API with zero coding in less
than 30 seconds (seriously)
• JSON-Server as a Fake REST API in Frontend Development ― Scotch
• How to Use json-server to Create Mock APIs | Codementor
• JSONPlaceholder - Fake Online REST API for Testing and Prototyping
14

15. 聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang