iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
1
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 15

資料操作 CRUD 功能〔思維流程篇〕——經典全端實務 II

CRUD

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

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

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

誰適合閱讀:

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

執行細節案例請參考:

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

網路運作機制

網路運作機制 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> 表單

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

以 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 負責組裝得到的資料及提取來的模板,用以生成回應客戶端的畫面呈現,以完成客戶端期待的結果!

 


閱讀更多

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


上一篇
用 Mongoose 迅速架設資料庫伺服器——經典全端實務 I
下一篇
資料操作 CRUD 功能:實作新增、讀取——經典全端實務 III
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言