Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (14)
Similaire à 淺談後端概念
Similaire à 淺談後端概念 (20)
淺談後端概念
- 2. 我是誰？ • 經歷 • 資通行動科技 • 2018-09 ~ 至今 • 好想工作室 • 2016-01 - 2018-08 2 • 參加過 • 2018 iT 邦幫忙鐵人賽 - Node JS-Back end見聞錄 • 2017-Open Data創新應用 競賽 - 「runvis」- 優選
- 3. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • Restful-API又是什麼？ • 關於Node框架 - Express • 什麼是Token? • 什麼是API Doc? 3
- 4. 前端？後端？
- 8. 要怎麼拿資料？-> API 要跟誰拿資料？ -> Server
- 9. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 9
- 10. Client - Server 架構
- 12. Client端 任何可以呈現Server端所傳來的資訊，並提供使用者本地服 務的程式，都能視為是Client端。 12 Client Server DB 1. 撰寫新文章 2. 將新文章的內容存入DB 3. 回傳存入成功！ Request Response
- 13. Client - Server端架構 13 Client Server Request Response 主動方 被動方
- 14. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 14
- 15. 什麼是API？
- 17. 什麼是API？ 17 Facebook 登入 看Twitch實況 看Youtube影片
- 18. 剖析API
- 19. 以「餐廳」為例 19 Client Server Request Response 1. 點餐 2. 送菜單 3. 處理餐點 5. 送餐點 4. 處理完畢6. 開始品嚐
- 20. 以「google首頁」為例 20 Client (Chrome) Server (Google) Request Response 1. 發送request 2. 向server端送request 3. 接收request 5. 向client端送response 4. 傳送response6. 接收response 並呈現頁面
- 22. Request method Request method也稱之為「HTTP method」。它是用來表 示client端提出該request的目的，以及client端預期所收到 的訊息結果。分有： 22 GET POST PUT DELETE
- 23. GET method 23 Client Server GET Request 使用情境：Client端向Server端要資料。 目的：用來取得URL所標示目標的資源。
- 24. POST method 24 Client Server POST Request 使用情境：Client端向Server端傳送資料。 目的：向目標資源提交資料。
- 25. PUT method 25 Client Server PUT Request 使用情境：Client端向Server端傳送想修改的資料內容。 目的：向目標資源上傳其最新的內容。
- 26. DELETE method 26 Client Server DELETE Request 使用情境：Client端向Server端傳送想刪除的資料內容。 目的：用來刪除URL所標示目標的資源。
- 28. Response status code 為一種三位數的整數代碼。當server端收到來自client端的 request後，會附加在response中。主要分有： 28 1xx (Informational) 2xx (Successful) 3xx (Redirection) 4xx (Client Error) 5xx (Server Error)
- 29. 1xx(Informational) 29 Client Server 1. Request 目的：Server端告知client端有收到該request，但尚未處理。 2. Response(1xx) 那我下一步？
- 30. 2xx(Successful) 30 Client Server 1. Request 目的：Server端告知client端有收到該request，且已處理完畢。 2. Response(2xx) OK, 那正常！
- 31. 3xx(Redirection) 31 Client Server 1. Request 目的：Server端告知client端有收到該request，但這需求 client端需要去別的地方提取，才能得到想要的資料。 2. Response(3xx) 好，那我再去 別的地方拿。
- 32. 4xx(Client Error) 32 Client Server 1. Request 目的：Server端告知client端有收到該request，但這需求 所指向的URL server端是沒有對應到的。 或是client端在發request時，可能遺漏些資料而server端才 沒有接受處理。 2. Response(4xx) 咦！ 不是這樣嗎？
- 33. 5xx(Server Error) 33 Client Server 1. Request 目的：Server端告知client端有收到該request，但... Server發生不可預期或程式沒寫好的狀況。只能等 server正常才可以使用。 2. Response(5xx) 喔... Server爆炸了
- 34. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 34
- 35. 什麼是RESTful風格？
- 36. 什麼是RESTful風格？ • 為一種軟體架構的設計風格，目的在於將不同軟體或程序，使其 在網路中互相傳遞訊息的過程簡便化。其特點： • 清楚簡短的API URL： 命名簡短但更能顯示相關功能的API URL命名。 • 對資源的操作： 選擇適當的request method。 • 資源的傳輸 傳輸的資料格式一律使用統一的傳輸格式。（例如：JSON） 36
- 37. 什麼是RESTful風格？ • 功能：取得全部會員資料。 Method: GET。URL: /api/customerList • 功能：取得單筆會員資料。 Method: GET。 URL: /api/customer/?id=1 • 功能：新增會員。 Method: POST。URL: /api/customerAdd • 功能：修改會員。 Method: POST。URL: /api/customerEdit • 功能：刪除會員。 Method: POST。URL: /api/ customerDelete 37
- 38. 什麼是RESTful風格？ • 功能：取得全部會員資料。 Method: GET。URL: /api/customerList • 功能：取得單筆會員資料。 Method: GET。 URL: /api/customer/?id=1 • 功能：新增會員。 Method: POST。URL: /api/customerAdd • 功能：修改會員。 Method: POST。URL: /api/customerEdit • 功能：刪除會員。 Method: POST。URL: /api/ customerDelete 38 • 功能：取得全部會員資料。 Method: GET。URL: /api/customers • 功能：取得單筆會員資料。 Method: GET。 URL: /api/customers/:id • 功能：新增會員。 Method: POST。URL: /api/customers • 功能：修改會員。 Method: PUT。URL: /api/ customers/:id • 功能：刪除會員。 Method: DELETE。 URL: /api/customers/:id
- 39. 什麼是RESTful風格？ • 以「清楚簡短的API URL」為例。 • 功能：新增會員。 Method: POST。URL: /api/customerAdd • 功能：新增會員。 Method: POST。URL: /api/customers 39
- 40. 什麼是RESTful風格？ • 以「對資源的操作」為例。 • 功能：修改會員。 Method: POST。URL: /api/customerEdit • 功能：修改會員。 Method: PUT。URL: /api/customers/:id 40
- 42. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 42
- 44. Node.js的運行 44 Request Handler Function 1. Client request something 2. HTTP server hands request to your function 3. Your function hands response to HTTP server 4. HTTP server sends response Client Node JS HTTP Server reference by: Evan M. Hahn(2016). Express in action.
- 45. 實例操作
- 46. Express的運行 46 reference by: Evan M. Hahn(2016). Express in action. Middleware Stack 1. Client request something 2. HTTP server hands request to Express 4.Your function respond to the request 5. HTTP server sends response Client Node JS HTTP Server Express APP 3. Express adds feature to the request and response
- 47. 實例操作
- 48. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 48
- 49. 什麼是Token？
- 50. 什麼是Token？ •Token是藉由一串Base64編碼所組成，若client端在 request中夾帶token值。 •Server端就能藉由token得知是哪個使用者想要提取該 值。 50
- 52. 什麼是Token？ 52 Client Server 1. 使用者登入API (POST) Request （會員登入） 2. 回傳Token(JWT) Response （登入成功） 3. 將Token帶入需要是會員 才能使用的API Request （結帳） 1 3 2 4 4. 回傳對應服務的 Response （結帳成功） 情境：購物車系統
- 53. 什麼是JWT？
- 54. 什麼是JWT？ •JWT全名為(JSON Web Token)，它是由三個元素所組成分 別是：Header.Payload.Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJjdXN0b21lck5hbWUiOiJCb2IiLCJpYXQiOjE1NTg1NDA0MTR9. 0YsoQZq0sKEmOZ3alkXOPeZV5TT11Ne1RwiPtB4r8tQ •三個部分都藉由「.」來隔開。 54 reference by: RFC7519-JSON Web Token (JWT)
- 55. 什麼是JWT? • 值得一提的是Signature是由下列方式所組成： // signature algorithm data = base64urlEncode( header ) + “.” + base64urlEncode( payload ) hashedData = hash( data, secret ) signature = base64urlEncode( hashedData ) 55 reference by: 5 Easy Steps to Understanding JSON Web Tokens
- 56. 實例操作
- 57. 大綱 • 前端？後端？ • Client-Server端架構 • 什麼是API? • 什麼是RESTful風格？ • 關於Node框架語言 - Express • 什麼是Token? • 什麼是API Doc? 57
- 58. 什麼是API doc？
- 60. 什麼是API doc？ 60 其架構包含： • Request method • API URL • Request message • Response message • Response status code
- 61. 什麼是API doc？ 61 那...什麼時候撰寫API doc？ 訪談需求 -> 確定需求 -> 設計wireframe -> 撰寫編碼 -> 測試 -> 第一版發布 使用者操作流程
- 62. 後端工程師的價值？
- 64. Q & A