以一個簡單的 todo list 專案為例，這個網站會有對 待辦事項( todos ) 進行 CRUD 的功能。

RESTful 風格強調:

• HTTP 狀態語意化:

  • HTML 的 FORM 表單只有 GET POST 兩種方法
  • RESTful 風格 HTTP status 則定義了 GET POST PUT DELETE 四種狀態

• 從路由結構(網址)就能看出要對: 何種 資料(資源) 進行何種 操作

• 此種網址稱為 RESTful API (application programming interface); 因網址也是應用程式

  「介面」的一種

例如我們的 todo list 專案有以下路由:

• 進入新增一筆 todo 的表單頁
  • RESTFUL HTTP status: GET
  • URL: /todos/new
• 新增一筆 todo (送出新增表單):
  • POST
  • /todos
• 瀏覽全部 todo (此功能做在首頁)
  • GET
  • ' / '
• 瀏覽特定 todo 資訊
  • GET
  • /todos/:id
• 進入該筆 todo 的編輯表單頁
  • GET
  • /todos/:id/edit
• 編輯該筆 todo (送出修改後的編輯表單)
  • PUT
  • /todos/:id
• 刪除該筆 todo
  • DELETE
  • /todos/:id

根據以上，可以看得出來，有很多重複的路由，比如 /todos/:id，

就同時擔任:

• 瀏覽特定 todo 資訊
  • status code: GET
• 修改該筆 todo (送出修改後的編輯表單)
  • status code: PUT
• 刪除該筆 todo
  • status code: DELETE

以上功能的路由，但因為搭配了 HTTP Status CODE，我們就可以很清楚的知道是在對 todo/id: 這個

資源 進行 CRUD (POST, GET, PUT, DELETE) 的操作，這就是 RESTful 語意化 風格 API 的精神所在。

Method-override npm RESTful語意化套件

現在問題來了，因為 HTML 表單只有 GET POST 兩種方法，目前需要用到 PUT 或 DELETE 的表單請求我們都是透過 POST 來實作；並且HTTP狀態也沒有 PUT 和 DELETE ，就算把對同資源進行操作的路由都改成了同樣網址也無法分辨對同一個資源的不同 CRUD操作狀態; 那該怎麼樣來實現 RESTful 語意化呢?

這時候就需要 import 一個 'method-override' 套件來實現了(先 npm install method-override ):