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

更新 發佈閱讀 4 分鐘

※ 什麼是Web API

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

API流程:

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


vocus|新世代的創作平台


※ 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 溝通文件的範例,「登入功能」:

vocus|新世代的創作平台

這條規格講定了後端的輸出格式,以及前端必須傳入的參數。在講定文件之後,後端去開發 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 取得所有資料。

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

vocus|新世代的創作平台
  • 從使用角度看 API:後端工程師會將現有的資料開成 API 選項,前端需要使用時就自己拼湊。

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

以下圖為例:

  1. 一個元件取一支 API,如元件 1 對應一支 API。
  2. 也可能一個元件取多支 API,像元件 2 需要拿兩支 API 資料。
  3. 有些元件會重複出現,像元件 2 在頁面 1、頁面 2、頁面 3 皆有出現,即會重複使用 API 3 與 API 4。
vocus|新世代的創作平台

※ RESTful 風格

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

vocus|新世代的創作平台


留言
avatar-img
奧莉薇走在成為後端工程師之路上
28會員
171內容數
全端網頁開發專業知識分享
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
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
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
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
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
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News