讓 Vibe Coding 網站能「記住資料」和「登入」：後端與資料庫入門

你可能遇過這種情況:網站做好了，使用者填了資料、按了送出，結果一重新整理就全部不見。或者你想做「會員登入」，卻不知道該怎麼開始。這背後其實是同一件事:你的網站需要「後端」和「資料庫」了。這兩個詞聽起來很工程師，但觀念其實不難。這篇用白話講清楚它們是什麼、什麼時候需要，以及怎麼請 AI 幫你加。

先分清楚:純前端 vs 有後端

用一個比喻:

• 純前端網站像一張「印好的傳單」——它能展示資訊、能有漂亮版面，但它不會「記住」任何人做了什麼。落地頁、作品集、介紹頁，純前端就夠。
• 有後端的網站像一間「有櫃台和倉庫的店」——它能記住訂單、記住會員、把資料收好存起來。只要你要「記住東西」，就需要後端。

判斷很簡單:你的網站需不需要「記住」使用者做的事? 需要，就要後端和資料庫。

什麼是資料庫?什麼是後端?

• 資料庫:就是網站的「倉庫／檔案櫃」，把資料(會員、訂單、留言)有條理地存起來，之後隨時能拿出來用。你重新整理資料還在，就是因為它被存進資料庫了。
• 後端:是「櫃台+倉庫管理員」——負責接收前端送來的請求、決定能不能做、去資料庫存取資料、再把結果回給前端。重要的判斷(有沒有付費、是不是本人、能不能改)都在後端做，因為後端使用者碰不到、比較安全。
• API:前端和後端之間「傳話的窗口」。前端跟 API 說「我要登入」，後端處理完再透過 API 回話。

不用背這些定義，有個大概畫面就好——重點是知道「資料要存哪、判斷在哪做」。

什麼情況需要資料庫

• 會員／登入:要記住誰是誰、密碼、個人資料。
• 訂單／預約／報名:要把每一筆收下來、之後查得到。
• 留言／評論／收藏:使用者產生的內容要留存。
• 後台管理:你要能看、能改這些累積的資料。

這些都是 會員系統、電商、預約系統的核心。

後端服務:不用自己架伺服器

好消息是，現在有很多「幫你把後端和資料庫都準備好」的現成服務(這類叫 BaaS，Backend as a Service)。它們通常一次給你資料庫 + 登入 + 檔案儲存，你不用自己架伺服器、管主機。像 Supabase 就是常見的一種。用 vibe coding 時，你只要請 AI 幫你接上這類服務即可，它會處理細節。台灣的登入場景，也常搭配 LINE 登入 讓使用者一鍵登入、免記密碼。

安全:金鑰一定放後端

只要開始有後端和資料庫，安全就變得很重要:

• 資料庫的連線金鑰、密碼、各種 API 金鑰，務必放在後端(環境變數)，絕不寫在前端網頁裡(見 安全底線)。前端的東西任何人都能看到原始碼，金鑰放前端等於公開。
• 重要判斷放後端:例如「這個人是不是會員、能不能看這筆資料」，一定在後端驗證，不能只靠前端擋。
• 只給使用者看他該看的:別讓一個人能撈到全部人的資料。

因為牽涉後端，這類專案務必用能好好處理後端的工具，例如 Cursor 或 Lovable。

怎麼請 AI 幫你加

我的網站需要記住資料和做會員登入。幫我接上一個後端服務(含資料庫和登入)，做出:使用者可以註冊／登入、登入後能看到自己的資料、資料存進資料庫重新整理也還在。所有金鑰放後端環境變數、不要放前端。重要權限判斷在後端做。做完用白話告訴我資料存在哪、怎麼備份。

常見問題

Q:我一定要懂資料庫才能做嗎? 不用懂細節。你要懂的是「觀念」——什麼要存、判斷在哪做、金鑰放哪。實作交給 AI，你負責描述需求和把關安全那幾點。想多懂一點名詞，看 名詞速查。

Q:純前端和有後端，做起來差很多嗎? 有後端會複雜一些(多了資料庫、登入、權限)，也更需要注意安全。所以建議:能純前端解決的(展示、落地頁)就純前端;真的需要記住資料再上後端。看需求選(可參考 vibe coding vs no-code)。

Q:後端服務要錢嗎? 像 Supabase 這類多有免費方案，小型專案通常夠用，用量大了再升級。部署一樣可用 免費方案 起步。

Q:AI 幫我接好了，我看不懂那些程式碼正常嗎? 正常。你不用看懂每一行(看 看不懂 AI 的程式碼怎麼辦)，但務必掌握「金鑰有沒有放後端、權限判斷是不是在後端」這幾個安全關鍵，這是你一定要顧的。

---

要「記住資料」和「登入」，就需要後端和資料庫——觀念不難，實作交給 AI，安全你把關。記住:金鑰放後端、判斷在後端 → 搭配 會員系統 →、安全底線 →，或回 挑個 Prompt 開始 →。