進擊的前端工程師：今天就用 JSON Server 自己打造 API 吧！
0 likes947 views
「我是一個前端工程師，每次要進行頁面套版時，都要等後端工程師寫好 API 才能測試，我覺得很痛苦，但公司的後端我又叫不動，有沒有甚麼方法可以簡單的設計出 RESTful API，讓我可以立即套版使用？我不想每次都苦苦哀求後端工程師快點生出 API 給我！」這是之前某位學生告訴我的一段話，也想必是許多前端工程師的痛，現在，你可以不一樣！ 我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務，讓前端工程師可以在完全沒有後端開發能力的情況下，自行設計出任意格式的 API 讓自己使用。本次直播完全免費，當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API！
![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/85/JSON-Server-API-3-320.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/85/JSON-Server-API-11-320.jpg)
![[네전따] 네트워크 엔지니어에게 쿠버네티스는 어떤 의미일까요](https://cdn.slidesharecdn.com/ss_thumbnails/kubernetesfornetworkengineer-211127091518-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to 進擊的前端工程師：今天就用 JSON Server 自己打造 API 吧！ (20)
![[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式](https://cdn.slidesharecdn.com/ss_thumbnails/building-multiplaftorm-application-using-kotlin-and-compose-multiplatform-231127165717-6bee7d0b-thumbnail.jpg?width=560&fit=bounds)
More from Will Huang (20)
Recently uploaded (7)
![[GDG Build with AI] 善用現代 AI 科技：打造專屬行銷工具箱 @ GDG Changhua 彰化](https://cdn.slidesharecdn.com/ss_thumbnails/ai-250526054018-7cb05c2e-thumbnail.jpg?width=560&fit=bounds)
進擊的前端工程師：今天就用 JSON Server 自己打造 API 吧！
- 1. 進擊的前端工程師：今天就自己打造 API 吧！ 使用 JSON Server 快速建置 Fake REST API 服務 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/
- 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
- 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