Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用 JSON Server 快速建置 Fake REST API 服務

11,930 views

Published on

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

直播網址: https://www.facebook.com/will.fans/videos/1702264796469324/

Published in: Technology
  • Sex in your area is here: www.bit.ly/sexinarea
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

使用 JSON Server 快速建置 Fake REST API 服務

  1. 1. 進擊的前端工程師:今天就自己打造 API 吧! 使用 JSON Server 快速建置 Fake REST API 服務 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. 快速上手 Quick Start
  3. 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. 4. 支援的 HTTP 操作方法 • GET 取得資源 • DELETE 刪除資源 • POST 建立資源 • PUT 更新資源(完整) • PATCH 更新資源(部分) 4
  5. 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. 6. 資料庫快照 • 在命令提示字元輸入 s 並按下 Enter 可儲存當前資料庫快照 6
  7. 7. 進階技巧 Advanced Tips
  8. 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. 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. 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. 快速建立大量假資料 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. 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. 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. 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. 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

×