後端框架與API 開發(6-1) - Web API

更新於 發佈於 閱讀時間約 4 分鐘

※ 什麼是Web API

API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。

API流程:

  • 終端使用者用任何一種裝置進入瀏覽器。
  • 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。
  • 後端透過 API 收到前端的請求後,取得資料並回應給前端。
  • 前端渲染畫面,終端使用者看到頁面。


raw-image


※ API 溝通文件:

API 文件的主要目標是使開發人員能夠有效地使用 API,並為他們提供必要的訊息,以實現應用程序的相互操作性和功能。

 API 文件可能包含的內容如下:

  1. API 描述:對API的簡要概述,包括其功能、用途和重要性。
  2. 路由和請求:詳細描述 API 的各個路由以及可用的HTTP請求方法(如GET、POST、PUT、DELETE等)。這部分通常會包括路由的 URL 和所需的請求參數。
  3. 參數:對請求參數的描述,包括每個參數的名稱、類型、是否必填以及範例。
  4. 回應:對 API 回應的描述,包括成功回應的格式和可能的錯誤回應。這通常包括 HTTP 狀態碼和相關的錯誤消息。
  5. 身份驗證和授權:如果API需要身份驗證或授權,則文件通常會提供相關信息,例如需要 API 金鑰、token 或 OAuth 流程。
  6. 版本控制:如果 API 具有多個版本,則文件通常會指示如何指定所需的 API 版本。

※ API 溝通文件的範例,「登入功能」:

raw-image

這條規格講定了後端的輸出格式,以及前端必須傳入的參數。在講定文件之後,後端去開發 API 伺服器,按規格回傳資料,而前端則可以根據文件裡定義的 JSON 格式,自行模擬資料來開發畫面。

※ API 溝通文件常見格式:JSON

  • JSON: JavaScript Object Notation 的縮寫,它參考了 JavaScript 中物件結構的表示方式。
  • JSON的優點較為輕量、易於閱讀,幾乎所有網頁開發相關的語言都有解析 JSON 資料的函式庫。
  • JSON 的語法建立在 JavaScript 對於 Array 和 Object 的表示方式,資料結構中通常也會運用 array 和 object 的嵌套關係,例如:
  1. 外層是 array,裡頭包含其他 object
  2. 外層是 object,裡頭還有其他 object
  • JSON 還可以處理字串 (String)、數字、布林值 (Booleans) 以及空值 (null)。

※ 什麼是「後端負責回傳資料」?

前後分離的分工模式,主要差異在於,回傳 JSON v.s. 回傳 view template。後端的主要工作就是處理請求並回傳資料,而這些資料通常是以 JSON 格式回傳的。這種方式讓前端可以專注於處理使用者介面和使用者體驗,而後端則專注於資料處理和商業邏輯。這種分工模式提高了開發效率並使應用程式更易於維護。

※ 設計 Web API 

API 的設計中一般來說可以分為兩種切入點:使用者角度,以及需求角度。兩種角度在業界都很常被使用、有各自的優劣勢。

  • 從需求角度看 API:等同於從單一頁面來思考,比較像 MVC 開發所做的事情。

以下圖為例,當我們想取得某個頁面,會透過一支 API 直接取得所有頁面資料;同理,在另一個頁面,也有一支 API 取得所有資料。

這種設計方式隱含的意義,就是將資料組裝的任務交給後端工程師。前端工程師會開出頁面的資料需求,後端依照需求回傳資料,填充畫面上需要的資料。

raw-image
  • 從使用角度看 API:後端工程師會將現有的資料開成 API 選項,前端需要使用時就自己拼湊。

這種設計方式隱含的意義,是將組裝資料的責任放到前端身上。一開始後端工程師會從資料庫確定現有的資料,再針對資料作出增刪改查的 API,前端再拿這些 API 拼湊出頁面。

以下圖為例:

  1. 一個元件取一支 API,如元件 1 對應一支 API。
  2. 也可能一個元件取多支 API,像元件 2 需要拿兩支 API 資料。
  3. 有些元件會重複出現,像元件 2 在頁面 1、頁面 2、頁面 3 皆有出現,即會重複使用 API 3 與 API 4。
raw-image

※ RESTful 風格

先提供 API 再組裝,API 設計就會跟 RESTful 風格很有關。API 的設計中命名是很關鍵的事。好的命名會讓你的 API 更易於上手與使用,而 RESTful 風格的好處就在具備非常高的可讀性,例如,我們看到 get 就知道這支 API 要拿資料,不需要看文件。

raw-image


留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News