為什麼你的網頁一重新整理，資料就不見了？

恭喜你！如果你已經看過我們前面的 HTML、CSS、與 React 課程，你現在應該已經具備了「畫出一個漂亮網站」的能力。你可能會做一個精美的待辦事項 (To-Do List) 網站，可以新增、刪除、打勾完成。

但是，當你把這個網頁傳給朋友看，他滿心歡喜地輸入了「明天要買牛奶」，然後不小心按到了瀏覽器的「重新整理 (F5)」... 登愣！剛剛輸入的資料全部消失了！

為什麼會這樣？因為純粹的前端網頁（HTML/JavaScript）就像是一個患有「失憶症」的超級天才。它的計算能力很強、畫面可以畫得很美，但它的記憶只有「短暫記憶（存在瀏覽器的記憶體中）」。只要你一關掉網頁或是重新整理，它的記憶就會瞬間被清空。

如果你想要做一個真正的「商業級應用程式」——例如：用戶可以註冊帳號、發文可以讓全世界看到、購物車裡的商品明天還在——你就必須給這個天才安裝一個「長期記憶硬碟」。

這個長期記憶硬碟，在軟體工程的世界裡，就叫做 「資料庫 (Database)」。

認識關聯式資料庫王者：PostgreSQL

資料庫有很多種，就像車子有分房車、跑車、卡車一樣。在現代軟體工業中，最主流、最被各大企業（包括 Apple、Instagram、Uber）廣泛使用的，就是所謂的 「關聯式資料庫 (Relational Database)」。

你可以把「關聯式資料庫」想像成是一個「極度嚴格、絕對不允許出錯的超級 Excel 試算表」。

而目前全世界最受歡迎、效能最強大的開源關聯式資料庫，就是我們這堂課的主角：PostgreSQL (通常被工程師暱稱為 Postgres)。

為什麼我們選擇 PostgreSQL 而不是 MySQL 或 MongoDB？

  1. 嚴謹的資料一致性：如果你在做電商網站，客戶的扣款絕對不能出錯。Postgres 對於這種類型的「交易」保護得最嚴格。
  2. 極致的擴充能力：它可以存純文字、可以存經緯度地圖資料 (PostGIS)、甚至可以存 AI 最需要的向量資料 (pgvector)。這也是為什麼現在的 AI 公司全部都在用 Postgres！
  3. Vercel 與 Supabase 的首選：在現代的無伺服器 (Serverless) 開發流中，最大的雲端資料庫供應商 Supabase 底層就是純血的 PostgreSQL。

SQL (Structured Query Language)：與資料庫溝通的魔法咒語

如果資料庫是一個堅不可摧的圖書館，那麼 SQL 就是你唯一能跟圖書館館員溝通的語言。

所有的關聯式資料庫（不管是 Postgres, MySQL 還是 Oracle），都聽得懂這套名為 SQL 的標準語言。它是由一連串的英文單字組成的句子，用來命令資料庫「新增、查詢、修改、刪除」資料（工程師簡稱為 CRUD）。

讓我們來看看幾個最經典的 SQL 範例：

1. 查詢資料 (Read / SELECT)

假設你想從「會員表 (users)」中，找出所有「年紀大於 18 歲」的會員姓名與信箱。 在傳統的 Excel 裡，你要開啟篩選器、點選年紀欄位、設定大於 18。 在 SQL 的世界裡，你只要對資料庫詠唱這段咒語：

SELECT name, email 
FROM users 
WHERE age > 18;

資料庫就會在 0.01 秒內，把幾百萬筆資料過濾完畢並丟給你！

2. 新增資料 (Create / INSERT)

當有一個新用戶在你的網站上註冊時，你的後端程式會對資料庫下達這樣的指令：

INSERT INTO users (name, email, age) 
VALUES ('王大明', 'ming@example.com', 25);

3. 更新資料 (Update / UPDATE)

如果王大明想要改名字變成「王小明」：

UPDATE users 
SET name = '王小明' 
WHERE email = 'ming@example.com';

4. 刪除資料 (Delete / DELETE)

如果王大明想要註銷帳號（注意：在真實商業世界中，我們很少用 DELETE，通常是用一個標籤標示為已停權）：

DELETE FROM users 
WHERE email = 'ming@example.com';

在 Vibe Coding 時代，你還需要死背 SQL 語法嗎？

看到這裡，你可能會開始感到焦慮：「天啊！我連 JavaScript 都還沒學好，現在又要我背一套全新的 SQL 語言？」

請放心，這就是 Vibe Coding (詠唱開發) 發揮絕對宰制力的時候了。

現代的 AI（如 ChatGPT、Claude）堪稱是世界上最偉大的 SQL 翻譯機。因為 SQL 的語法已經存在了四十年，網路上有數十億篇關於 SQL 的教學，AI 的神經網路早就把 SQL 訓練得爐火純青了。

你完全不需要去背 JOIN, GROUP BY, HAVING 這些複雜的高階語法。你只需要：

  1. 用中文跟 AI 描述你的「表格長什麼樣子」。
  2. 用中文告訴 AI 你「想要什麼結果」。

【請看這個不可思議的 Vibe Prompt 範例】 我有一個名為 orders 的訂單資料表（欄位有：訂單編號、會員ID、總金額、訂單日期）。 我還有一個名為 users 的會員資料表（欄位有：會員ID、會員姓名）。

請幫我寫一段 PostgreSQL 的查詢語法，幫我找出：「在 2024 年，總消費金額加總超過 10,000 元的『前 5 名 VIP 會員』，並且印出他們的姓名與總消費金額，由大到小排序」。

只要這段咒語一發出，AI 就會瞬間幫你寫出即使是資深工程師也要想一下才能寫出來的複雜 JOIN 與 GROUP BY 語法：

SELECT u.name, SUM(o.total_amount) as total_spent
FROM users u
JOIN orders o ON u.user_id = o.user_id
WHERE EXTRACT(YEAR FROM o.order_date) = 2024
GROUP BY u.user_id, u.name
HAVING SUM(o.total_amount) > 10000
ORDER BY total_spent DESC
LIMIT 5;

你只需要把這段程式碼複製，貼到資料庫的執行框裡，按下 Enter，老闆要的 VIP 報表就瞬間跑出來了！

準備進入實戰：免費雲端資料庫 Supabase

過去，要在自己的電腦上安裝 PostgreSQL 是一個非常痛苦的過程，甚至可能導致電腦崩潰。 但現在，我們有 Supabase —— 一個提供免費、一鍵開通 PostgreSQL 資料庫的超強雲端平台。

在下一章中，我們將會手把手帶您註冊 Supabase 帳號，並教您如何結合 Cursor AI，直接在您的 React 網站中連線到這個真實的資料庫，徹底治好網頁的「失憶症」！準備好了嗎？我們繼續往下走！