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.
進擊的前端工程師:今天就自己打造 API 吧!
使用 JSON Server 快速建置 Fake REST API 服務
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格:http://blog.miniasp.com/
快速上手
Quick Start
30 秒搞定 JSON Server
• 安裝套件
– npm install -g json-server
• 啟動服務
– json-server --watch db.json
※ 此步驟會自動建立 JSON 資料庫:db.json
※ ...
支援的 HTTP 操作方法
• GET 取得資源
• DELETE 刪除資源
• POST 建立資源
• PUT 更新資源(完整)
• PATCH 更新資源(部分)
4
使用 JSON Server 注意事項
• 僅接受 application/json 內容類型 (Content-Type) 傳入
• 回傳內容類型 (Content-Type) 僅支援 application/json
• 所有 POST, ...
資料庫快照
• 在命令提示字元輸入 s 並按下 Enter 可儲存當前資料庫快照
6
進階技巧
Advanced Tips
網頁伺服器
• 只要建立 public 資料夾,將所有靜態檔案置入即可
– 預設首頁檔名:index.html
• 在 Angular CLI 自動建立 Production Build 預覽與 API
– json-server --watc...
資料操作方式
• 全文檢索
– http://localhost:3000/books?q=Discovery
• 資料篩選 (完整比對)
– http://localhost:3000/books?author=Will+Huang
– ht...
進階資料篩選
• 常見的篩選運算子
• 綜合篩選範例
– get /books?rating_gte=1990&rating_lte=2016
10
運算子 說明 範例
_like 相似於 (字串) GET /posts?author_like...
快速建立大量假資料
11
// index.js
module.exports = () => {
const data = {
users: []
}
// Create 1000 users
for (let i = 0; i < 1000...
自訂網址路由
• 建立路由定義檔 ( routes.json )
{
"/api/": "/",
"/blog/:resource/:id/show": "/:resource/:id",
"/blog/:category": "/posts?...
其他實用技巧
• 載入外部 JSON 資料來源
– json-server http://jsonplaceholder.typicode.com/db
• 變更預設 "id" 屬性的名稱
– json-server --id _id --wa...
相關連結
• typicode/json-server: Get a full fake REST API with zero coding in less
than 30 seconds (seriously)
• JSON-Server a...
聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebo...
Upcoming SlideShare
Loading in …5
×

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

9,278 views

Published on

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

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

Published in: Technology
  • Be the first to comment

使用 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

×