~/VibeHandbook
免費 PDF

03 · 09

這一切如何對應到你的應用

現在,把這整幅畫面鋪到一個用氛圍編碼做出來的應用之上,因為你將要構建的每一塊,都住在這支舞的某一側:

  • 前端是執行在瀏覽器裡的一切——使用者看到並點選的按鈕、表單和佈局。它就是客戶端。它主要負責傳送請求、顯示響應。
  • 後端是執行在伺服器上的你的程式碼——決定如何處理一個請求、與資料庫對話、並組裝出響應的那套邏輯。它就是伺服器。

把整個註冊之旅放進一幅圖裡就是這樣——本章每一個加粗的詞都各就各位:

   前端 (瀏覽器 = 客戶端)                      後端 (伺服器)
   ┌────────────────────────┐                 ┌────────────────────────┐
   │  使用者點選"註冊"        │  POST /signup   │  建立賬戶              │
   │                        │ ──────────────▶ │  設定 cookie           │
   │                        │   經由 HTTPS    │                        │
   │  顯示歡迎介面 ◀──      │ ─────────────── │ ◀── 返回  200 OK       │
   └────────────────────────┘                 └────────────────────────┘

一次真實的互動會把這一切縫在一起。使用者點選“註冊”(前端)。瀏覽器帶著表單資料,向一個像 /api/signup 這樣的 path、通過 傳送一個 POST 請求。你的後端收到它,建立賬戶,設定一個 cookie 讓使用者保持登入,然後送回一個 200。前端看到成功,於是展示一個歡迎頁面。那裡每一個加粗的詞,都是你剛剛學過的東西——而那,就是你將要構建的幾乎一切的整體形狀。

你不必把這一切一次性全都裝在腦子裡。但當後面某一章說“請求打到了伺服器,卻以 500 返回”,或者“設定這個頭部”,又或者“這個路由處理那個 POST”時,你現在就能確切地知道它指的是這支舞的哪一部分。那個心智模型,才是真正的先決條件——而你已經擁有它了。

想離線閱讀?

免費下載整本書的 PDF 或 EPUB。