Express專案建置流程—RESTful說明(Javascript版)

更新 發佈閱讀 4 分鐘

※ 路由語義化:RESTful 風格應用

什麼是 RESTful:

運用 HTTP 來表達語義的路由設計風格稱為 RESTful API。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為 API。

RESTful 風格的網址設計強調從路由結構就能看出要對什麼資料、進行什麼操作。舉例來說,如果資料是 todos,那麼 RESTful 風格的 CRUD 路由就會這樣寫:

raw-image

從網址上,你會看出要操作的資源叫做 todos,這邊習慣用複數名詞。然後固定結構是:

  • 瀏覽全部資料:GET + 資源名稱
  • 瀏覽特定資料:GET + 資源名稱 + :id
  • 新增一筆資料:POST + 資源名稱
  • 修改特定資料:PUT + 資源名稱 + :id
  • 刪除特定資料:DELETE + 資源名稱 + :id

總之,如果需要處理特定資料,就需要加上 :id,其他情況都用 HTTP 動詞來做變化。從網址上的複數名詞可以看出操作的對象,這就是 RESTful 的精神。

下圖對照了「完全採用 RESTful 風格」 和實際的路由規劃做對照,用 * 標記出了不同的地方。

raw-image
  • new 頁面和 edit 頁面這兩條路由並不是「對 todos 進行資料操作」,但也是很常出現的頁面。因為本質仍然是瀏覽,所以動詞用 GET,另外在 URL 加上 new 和 edit 來表達功能屬性。
  • 首頁 v.s. 瀏覽全部路由:在這裡我們選擇著重了首頁的語義,因此只配置路由 GET /,而沒有配置 GET /todos

※ Method-override介紹:

method-override 是一個 Express 的 middleware,也就是「中介軟體」。關於 middleware 現在先簡單理解重點:

raw-image
  • 從 request 進來到 response 回去會經過一系列的流程
  • 這個流程會按照路由清單由上而下執行
  • 可以用 app.use 來對所有的 request 進行前置處理
  • 只要是會發生在這個 request-response 流程裡的程序,都叫做 middleware

我們用 app.use 來掛載 method-override,意思是我們要對所有的 request 進行前置處理,處理好了以後,才讓 request 繼續往下進入特定路由。

設定參數:_method

設定時我們傳入了一個參數 _method,這個是 method-override 幫我們設計的路由覆蓋機制,只要我們在網址上使用 query string (也就是 ?) 帶入這組指定字串,就可以把路由覆蓋掉:

raw-image

經過 method-override 處理後,這筆 request 就可以成功導入由 app.put 或 app.delete 設定的路由函式。

為什麼需要 method-override

在 RESTful 架構中,我們常用:

  • GET:讀取資料
  • POST:新增資料
  • PUT:更新資料
  • DELETE:刪除資料

但 HTML 表單只能送出 GETPOST,不能直接送出 PUTDELETE。這時就需要 method-override 來「偽裝」成其他方法。






















留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
25會員
171內容數
全端網頁開發專業知識分享
2025/10/30
※ 什麼是靜態檔案: 指的是不需要再經過伺服器額外處理的檔案。常見的有,在網頁中載入的 CSS、JavaScript 或圖片檔,這些檔案通常不需要再經過伺服器額外處理,伺服器只需要提供一個連結,讓瀏覽器直接抓取這些檔案即可。 ※ 建立一個名為 public 的資料夾: 把所有網頁上需要使用到的
Thumbnail
2025/10/30
※ 什麼是靜態檔案: 指的是不需要再經過伺服器額外處理的檔案。常見的有,在網頁中載入的 CSS、JavaScript 或圖片檔,這些檔案通常不需要再經過伺服器額外處理,伺服器只需要提供一個連結,讓瀏覽器直接抓取這些檔案即可。 ※ 建立一個名為 public 的資料夾: 把所有網頁上需要使用到的
Thumbnail
2025/10/26
※ 安裝 express-handlebars: npm install express-handlebars ※ 建立第一個頁面: 製作共用 Layout: 先建立整個網站共用的主要佈局 (layout)。把共用 layout 檔案路徑設定為:views/layouts/main.hbs,
Thumbnail
2025/10/26
※ 安裝 express-handlebars: npm install express-handlebars ※ 建立第一個頁面: 製作共用 Layout: 先建立整個網站共用的主要佈局 (layout)。把共用 layout 檔案路徑設定為:views/layouts/main.hbs,
Thumbnail
2025/10/26
※ 應用程式跟資料庫連線: 在開發的過程中,你會有一個終端機視窗負責運行 Node.js,也就是你的 web server。我們眼前的電腦就是「網路伺服器 (web server)」,而我們可以在電腦上打開瀏覽器,就能跟自己撰寫的應用程式進行互動。在資料庫伺服器方面 (database serve
Thumbnail
2025/10/26
※ 應用程式跟資料庫連線: 在開發的過程中,你會有一個終端機視窗負責運行 Node.js,也就是你的 web server。我們眼前的電腦就是「網路伺服器 (web server)」,而我們可以在電腦上打開瀏覽器,就能跟自己撰寫的應用程式進行互動。在資料庫伺服器方面 (database serve
Thumbnail
看更多
你可能也想看
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
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News