若從功能的角度談到 CRUD，就不單只有資料操作，還會包括畫面顯示與其他內部的邏輯。打造 CRUD 功能是後端工程師日常生活裡的主線任務，絕大多數的使用者需求都可以先解析成不同的 CRUD 功能，再各個擊破。

本篇筆記將解決以下問題：

• 深入「應用程式 CRUD 功能的底層邏輯」
• 剖析「伺服器內部運作的所有程序」
• 縱覽「路由設計的核心觀念」

誰適合閱讀：

• 想迅速掌握「後端開發精髓」的人

執行細節案例請參考：

• 資料操作 CRUD 功能：實作新增、讀取——經典全端實務 III
• 資料操作 CRUD 功能：實作修改、刪除——經典全端實務 IV
• 強化功能：排序 sort、篩選 filter——經典全端實務 V
   

為什麼要掌握網路運作機制圖

網路運作機制 from Alpha Camp's material

簡言之，在各個應用程式中，大部分的功能都是透過 CRUD 來完成的！經過反覆的練習，我發現 CRUD 雖然都是不同的功能，但背後卻反映了同樣的流程與邏輯。在著手實作前，先建立這一系列的基礎認知，可以避免迷失在各種新方法的程式碼中、同時提高功能開發的掌控權。

而這一切背後的唯一流程就是 全端開發者必懂的「網路觀念」 中的伺服器處理機制圖。掌握這張圖的運行邏輯，就能掌握後端開發的精髓！也就是在 全端開發者必懂的「產品搭建程序」 中提到的「地基」與「結構」。

這篇筆記也不再花俏，只會有這一張圖。一起把它烙印在腦海中吧！

後端處理機制設計的核心流程

只要能掌握以下五大流程，必並且在刻意練習中熟悉，未來遇到什麼新的功能或需求，應該是難不倒的！

1. 客戶端 Client：觸發請求的機制
2. 路由 Route：接收請求的路由
3. Controller：分派工作的程序
4. Model：處理的資料及方式
5. View：渲染的頁面及資訊

規劃觸發請求的機制

通常觸發請求的網頁元件，不外乎：

• <a href="#">Link</a> 連結
• <form action="/" method="POST"></form> 表單
  • 表單內又包含各種的 <input> 輸入元件。

讓使用者能連至某個頁面或網站、傳送某些資訊或完成某個行動。

以 Todo List 的首頁為例，就是一個能連到 "/" 的觸發機制，可以是 Navbar 上的按鈕或直接輸入網址列的行動。

安排接收請求的路由

在 Restful 路由設計 中，使用下列 HTTP method：

• GET 用以讀取（read）
• POST 用以新增（create）
• PUT 用以更新（update）
• PATCH 用以修改（modify）
• DELETE 用以刪除（delete）

並搭配特定的 URL 以處理對應的資料，如 "/"、"/todos/new"、"/todos/:id" 等。

設計分派工作的程序

收到 Request 後，首先就由 Controller 來管理所有內部流程及任務分派，包含與 Model 及 View 的溝通、 if/else 流程控制、請求處理的先後順序及錯誤處理等。

基本上就是功能成敗的主要邏輯！

定義處理的資料及方式

每個 Request 對應特定資料的處理，由 Model 負責與資料庫進行溝通，以查詢、存取、更新、修改、刪除選定的資料，並回報給 Controller。

選定渲染的頁面及資訊

View 負責組裝得到的資料及提取來的模板，用以生成回應客戶端的畫面呈現，以完成客戶端期待的結果！

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。