前端後端資料庫差在哪？看懂才敢叫 AI 改網站
文 / Coolkid發布：2026-08-21閱讀約 8 分鐘
短答給趕時間的人：AI 幫你做的網站通常是 3 塊拼起來的。看得到的畫面叫前端，背後跑事情的程式叫後端，記東西的地方叫資料庫。這邊修好那邊壞，多半不是 AI 亂改，是交代的人沒圈範圍。開工前先要 AI 畫地圖：「這個網站分哪幾塊？我要改的東西住在哪一塊？」改完再要一份動過的檔案清單，兩張對照，誤傷當場現形。
7 月底的一個晚上，我叫 AI 改網站上的一段預設文字。
檔案真的改了，部署也成功。打開網站，還是舊的那句。
我的第一個念頭是 AI 在騙我。
查出來的真相比較尷尬：那段文字同時住在兩個地方。
我改的是程式碼裡的那份，網站上顯示的是資料庫裡的那份，而我的網站規則是資料庫優先，所以 AI 沒做錯，是我根本不知道自己的網站分幾塊。
4 個月前第一次用 AI 做網站的時候，我連前端後端是什麼都講不出來。現在回頭看，把網站改壞的那幾次，幾乎都跟「不知道有幾塊」有關。
這篇把網站的三塊講成一張看得懂的地圖，再給你 4 句可以照抄的交代方式。
網站的 3 塊，各自管什麼？
把網站想成一間小吃店，三塊就分得開了。
前端是店面。菜單、桌椅、招牌，客人看得到的全部。對網站來說，就是你打開瀏覽器看到的畫面：文字、圖片、按鈕。
後端是廚房。客人在店面點餐，真正做菜的是廚房。
你在網站上按「訂閱」，背後收下信箱、寄出確認信的那段程式就是後端，平常看不到，但沒有廚房就出不了菜。
資料庫是帳本加倉庫。誰訂閱過、後台改過哪些字、紀錄累積了多少，全記在這裡。資料庫不做事，只負責記得。
想知道自己的網站有幾塊，把這句照抄丟給 AI：「這個專案分哪幾塊？前端、後端、資料庫各自在哪個資料夾或哪個服務上？」AI 會列一張清單給你，這就是你的地圖。
那你的網站有幾塊？很多新手網站其實只有前端一塊。
純頁面、沒廚房、沒帳本，那種站怎麼改都不太會連環壞。
會互相牽連，是從長出第二塊開始的。加了訂閱表單、加了後台、加了自動化，線就開始變多。我的網站就是這樣一路長出三塊的。
兩次真實事故：改了沒效果，跟少一個檔案整站卡住
開頭那次「改了沒效果」，後來查清楚的全貌是這樣。
我的網站有個後台，可以直接在網頁上改字。
後台改過的字會存進資料庫，顯示的時候蓋過程式碼裡的預設值，這個設計本身很合理，因為改幾個字不應該動到程式。
問題出在我忘了它的存在。
叫 AI 改程式碼裡的預設值，改得再對，畫面上永遠是資料庫那份。這種事故最消耗信心，因為每一步看起來都成功，就是沒效果。
教訓一句話：同一個東西可能同時住在兩塊裡。改之前先問「這段文字的最終來源是哪個檔案、還是資料庫？」，再決定改哪一份。
第二次事故在 7 月 23 日深夜，同一個晚上連兩起。
AI 加新功能時建了一個新檔案，主程式一開跑就要讀那個檔案。上傳的時候，檔案沒跟著上去。
結果是後端一啟動就停，整個網站卡在舊版，後面每一次更新都跟著失敗。一個檔案，卡住全部。
怎麼一步步查出來的，我寫過完整的一篇：部署失敗這樣查。
這裡要說的是架構那一面的教訓：三塊不是各過各的，一塊斷了會拖住另外兩塊。
兩次事故的共通點：出事的位置，都不在我以為的那一塊。地圖不是工程師的裝飾品，是交代之前就要攤開的東西。
怎麼交代，AI 才不會誤傷另外兩塊？
我現在改網站前後，固定用 4 句話。全部可以照抄。
- 開工先畫地圖。「這個網站分哪幾塊？我要改 X，會動到哪幾塊？」讓 AI 先講，你再放行。
- 圈範圍。「這次只改畫面上的文字，不要動後端程式跟資料庫。」想更保險就指名檔案：「只准改這 2 個檔案，要動其他檔案先問我。」
- 改完要清單。「列出這次動過的每個檔案，各自屬於哪一塊。」拿清單對照第 1 句的地圖，超出範圍的就問理由。
- 常用的規矩寫成常駐。「動資料庫之前要先問我」這種話，寫進 CLAUDE.md 就不用每次重講（寫法見 CLAUDE.md 那篇）。大改動先開計畫模式，看 AI 打算動哪幾塊再放行（計畫模式那篇）。
那出事的時候怎麼判斷是哪一塊？附一張症狀對照表，先猜位置，再丟對的第一句。
| 出事的樣子 | 多半是哪一塊 | 丟給 AI 的第一句 |
|---|---|---|
| 改了文字，網站沒變化 | 前端改對了，被另一份蓋過（資料庫或瀏覽器暫存） | 這段文字的最終來源是哪個檔案、還是資料庫？ |
| 按鈕按了沒反應 | 前端跟後端之間斷線 | 按下這顆按鈕時背後發生什麼事？錯誤訊息是什麼？ |
| 資料不見或亂掉 | 資料庫 | 先不要改任何東西，列出最近動過資料庫的每個操作。 |
| 自己電腦正常，上線就壞 | 部署漏了東西 | 對照線上版本跟我電腦上的版本，少了哪些檔案？ |
最後是誠實的邊界：如果你的站只有一塊，這整套都用不太到，直接改就好。
地圖是給開始長出第二塊的網站用的。等訂閱表單、後台、自動化加進來的那一天，再回來拿也不遲。
AI 幫你做的網站通常是 3 塊拼起來的：前端是看得到的畫面（店面）、後端是背後跑事情的程式（廚房）、資料庫負責記東西（帳本加倉庫）。很多新手網站只有前端一塊，那種怎麼改都不太會連環壞，會互相牽連是從長出第二塊開始的。我自己兩次真實事故：一次是叫 AI 改程式碼裡的預設文字，改對了卻沒效果，因為後台改過的字存在資料庫、顯示時蓋過預設值，同一個東西同時住在兩塊裡。另一次是 7 月 23 日深夜，新檔案沒跟著上傳，後端一啟動就停，整個網站卡在舊版，一個檔案卡住全部。交代 AI 的 4 句話：開工先畫地圖（這個網站分哪幾塊、我要改的會動到哪幾塊）、圈範圍（只改畫面，不動後端跟資料庫，或指名只准改哪 2 個檔案）、改完要動過的檔案清單對照地圖、常用規矩寫進 CLAUDE.md 常駐。出事時按症狀猜位置：改了沒變化多半是被資料庫或暫存蓋過、按鈕沒反應是前後端斷線、本機正常上線壞是部署漏東西。
名詞解釋
- 前端（frontend）
- 網站裡你看得到的那一塊：畫面、文字、圖片、按鈕。用小吃店比喻就是店面，瀏覽器打開看到的全部都算前端。
- 後端（backend）
- 網站裡在背後跑事情的程式：收表單、寄信、算資料都在這層。平常看不到，像小吃店的廚房，沒有它就出不了菜。
- 資料庫（database）
- 專門儲存、查詢大量資料的系統。網站的會員、留言、紀錄都放這裡。
- 部署（deploy）
- 把做好的網站或程式「推上線」讓所有人用得到的動作。
如果內容對你有用就太好了
隨喜斗內
▸ 常見問題
前端、後端、資料庫，一句話差在哪？
前端是你看得到的畫面，後端是背後跑事情的程式，資料庫是記東西的地方。用小吃店比喻：店面、廚房、帳本。很多新手網站只有前端一塊，那種站怎麼改都不太會連環壞，開始加訂閱表單、後台、自動化之後，三塊才會互相牽連。
不會寫程式，需要懂網站架構嗎？
不用懂到會寫，但要懂到能指名。我兩次把網站改出問題，都不是 AI 亂改，是我交代的時候不知道要改的東西住在哪一塊。只要能問出「這個網站分哪幾塊、我要改的會動到哪幾塊」，AI 就會把地圖畫給你，交代的品質馬上不一樣。
為什麼叫 AI 改網站會越改越亂？
多半是交代時沒圈範圍。AI 看到問題會用自己覺得合理的方式修，可能順手動到另外一塊，你下次再修那塊，又動回這塊。解法是固定三個動作：開工先要地圖、動工前圈範圍（只改哪一塊或只准改哪幾個檔案）、改完要一份動過的檔案清單來對照。
改了文字網站卻沒變，是 AI 騙我嗎？
我遇過一模一樣的狀況，不是騙。同一段文字可能同時存在程式碼跟資料庫兩個地方，很多網站的顯示規則是資料庫那份優先，所以程式碼改對了畫面也不會動。先問 AI「這段文字的最終來源是哪個檔案、還是資料庫」，確認來源再改，一次就中。
我的網站很小，也要分前端後端資料庫嗎？
不用。只有頁面的站就是一塊，直接改就好。這張地圖是給網站開始長出第二塊的人用的，像是加了訂閱表單、會員、後台或自動化，那時候層跟層才會互相牽連，先畫地圖再交代就變得重要。
看完這篇之前先確認:
- 叫 AI 改網站，常常這邊修好那邊壞的人
- 聽過前端後端，但講不出自己網站哪部分是哪塊
- 想在交代 AI 之前，先知道這次會動到什麼
- 還沒有自己的網站，想從零做一個（先看 5 階段上線法那篇）
- 已經分得清三塊，在找部署失敗的排查步驟（那是部署失敗那篇）
- 想系統性學網站架構的工程師（這篇是白話地圖，不是課本）
做到要給別人用的時候，註冊、登入、資料庫這些會一次冒出來。想有人陪你把這段做到能上線，可以看產品上線陪跑（試營運價 NT$ 16,800）。