![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 取得單筆資料](https://image.slidesharecdn.com/jsonserver-210802064258/75/JSON-Server-API-3-2048.jpg)
![快速建立大量假資料 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](https://image.slidesharecdn.com/jsonserver-210802064258/75/JSON-Server-API-11-2048.jpg)
Uploaded byWill Huang
進擊的前端工程師：今天就用 JSON Server 自己打造 API 吧！
本文介绍了如何使用 json-server 快速构建假 REST API 服务。包括安装、启动服务器、基本的 API 测试、数据操作和高级技巧等内容。用户可以创建、删除和更新资源，同时提供数据筛选和排序功能。
進擊的前端工程師：今天就用 JSON Server 自己打造 API 吧！
- 1. 進擊的前端工程師：今天就自己打造 API 吧！ 使用JSON Server 快速建置 Fake REST API 服務 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/
- 2.
- 3. 30 秒搞定 JSONServer • 安裝套件 – 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.
- 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: Geta 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 WillWill 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