sell分類
account_tree

整合實戰

把前端、後端(Workers)與資料庫串起來的實作教學——完整 CRUD、認證、檔案上傳、架構藍圖與請求流程圖。

認識每個產品只是第一步,真正的重點是把它們串起來。這些教學示範網頁如何呼叫 Worker、Worker 如何讀寫資料庫,以及怎麼把整套系統組起來——每篇都搭配大量 mermaid 圖解。

folder_open全端串接基礎 7

account_tree

前端、後端、資料庫是怎麼串起來的

用一張大局觀地圖,看懂 Cloudflare 上的全端應用——以及一個請求是怎麼穿過每一層的

開始學 arrow_forward
sync_alt

前端 ↔ Worker ↔ D1:完整 CRUD 串接

把網頁串到 Worker API,再接上 SQL 資料庫

開始學 arrow_forward
api

用 Workers 設計 REST API

在單一個 Worker 上打造乾淨的 HTTP 後端:用「方法 + 路徑」做路由、解析請求、回傳帶正確狀態碼的 JSON,並用 CORS 讓瀏覽器前端可以直接呼叫它。

開始學 arrow_forward
dynamic_form

HTML 表單 → Worker → 資料庫

最經典的流程:送出表單、存起來、再顯示出來——搭配真正的伺服器端驗證

開始學 arrow_forward
lock_person

前後端認證串接

在 Cloudflare 串接登入的兩種做法:零信任 Access,或自己用 KV 管 session

開始學 arrow_forward
upload_file

檔案上傳:前端 → Worker → R2

讓使用者從網頁上傳圖片與文件,存進 R2,再提供下載,並把中繼資料(檔案的描述資料)記在 D1。

開始學 arrow_forward
web

用 Pages + Functions 部署全端應用

用同一個 Cloudflare Pages 專案,同時放前端網頁、跑後端 API

開始學 arrow_forward

folder_open資料庫與儲存 6

alt_route

我該用哪種儲存?KV / D1 / R2 / Durable Objects / Hyperdrive 選型

一份選型指南:把你資料的「形狀」對應到最適合的 Cloudflare 儲存

開始學 arrow_forward
schema

設計 D1 資料庫綱要(資料表與 migration)

用 SQLite 設計 users 與 posts 資料表,再用 migration 安全地讓綱要隨時間演進

開始學 arrow_forward
share

D1 的關聯與 JOIN 查詢

在 D1 裡建立一對多與多對多資料模型,再用 JOIN 查詢與批次交易把它們串起來

開始學 arrow_forward
bolt

用 KV 在資料庫前面加一層快取

在 D1 前面擺一層快速的鍵值快取,替「讀多寫少」的資料降低延遲與成本

開始學 arrow_forward
hub

用 Durable Objects 管理強一致狀態

讓單一 Durable Object 成為計數器、鎖、即時房間的唯一真相來源

開始學 arrow_forward
database

用 Hyperdrive 讓 Worker 連既有的 Postgres

對你的區域 Postgres 做連線池與查詢快取,讓 Workers 維持飛快

開始學 arrow_forward

folder_open架構藍圖 7

rss_feed

架構藍圖:部落格 / CMS

一套完全建在 Cloudflare 上的部落格/CMS 參考架構

開始學 arrow_forward
shopping_cart

架構藍圖:線上商店

在 Cloudflare 上打造電商的參考架構:商店前台、API、資料庫、購物車、圖片,再接上金流。

開始學 arrow_forward
apartment

架構藍圖:多租戶 SaaS

一套參考架構:用同一個應用程式服務很多客戶,而且每個客戶的資料都安全地彼此隔離

開始學 arrow_forward
neurology

架構藍圖:AI 問答應用(RAG)

Cloudflare 上檢索增強生成(RAG)的參考架構

開始學 arrow_forward
forum

架構藍圖:即時聊天室

即時聊天的參考架構:WebSocket + Durable Objects + D1

開始學 arrow_forward
image

架構藍圖:圖片上傳與處理流水線

先即時收下上傳,再用 R2、Queues、Images 與 D1 在背景把圖片最佳化

開始學 arrow_forward
link

架構藍圖:短網址服務(你的第一個全端應用)

一個表單、一個 Worker、加上 KV——從頭到尾做出迷你短網址服務

開始學 arrow_forward

folder_open流程圖解 4

timeline

一個請求在 Cloudflare 上的完整生命週期

跟著一個 HTTP 請求,從瀏覽器出發,走過 DNS、邊緣、WAF、快取、Worker、儲存,再一路回到使用者眼前

開始學 arrow_forward
key

各種登入授權流程圖解

用一張張循序圖,一步步看懂四種常見的登入與授權流程到底是怎麼運作的。

開始學 arrow_forward
cached

快取是怎麼運作的(命中、未命中、重新驗證)

跟著一個請求走過 Cloudflare 快取——命中、未命中、儲存、過期與重新驗證

開始學 arrow_forward
conveyor_belt

用 Queues 打造事件驅動應用

接下請求、幾毫秒內回覆,再把慢工作交給佇列稍後處理——還帶批次、重試、死信佇列與冪等性。

開始學 arrow_forward