[GitHub Global] Translate Vibe Coding 零基础教程/20 项目实战/04 Vibe Coding 全栈应用开发.md to zh-TW

2026-02-05 13:23:18 +00:00
parent cd165e6459
commit 60d87a0d11
1 changed files with 395 additions and 0 deletions
@@ -0,0 +1,395 @@
+# Vibe Coding 全棧應用開發
+
+
+你好，我是魚皮。
+
+這篇文章，我會帶你做 3 個完整的全棧專案：個人部落格系統、簡易問答社群、線上商城（Mini 版）。
+
+什麼是全棧應用？
+
+簡單來說，就是既有前端界面，又有後端服務，還有資料庫儲存的完整應用。使用者在前端操作，資料通過後端處理，最終儲存到資料庫中。這些專案會讓你學習如何用 Vibe Coding 的方式開發前後端，處理使用者認證、資料庫操作等真實場景。
+
+需要先說明的是，本節教學更多的是做一個思路和專案開發流程的指導，目的是引導大家學會使用 Vibe Coding 開發專案的方法，需要大家自行動手實踐。如果你需要更完整的 Vibe Coding 圖文和影片教學，可以看看魚皮的原創專案實戰部分。
+
+
+
+## 一、全棧開發基礎知識
+
+在開始做專案之前，先了解一下全棧開發的基本概念。
+
+全棧開發包括三個部分：前端（使用者看到的界面）、後端（處理業務邏輯）、資料庫（儲存資料）。
+
+前端負責展示資料和接收使用者輸入，後端負責處理請求和業務邏輯，資料庫負責持久化儲存。三者通過 API 接口進行通信。
+
+![](https://pic.yupi.icu/1/fullstackarchitecture%E5%A4%A7.jpeg)
+
+舉個例子，當使用者在部落格網站上發佈一篇文章時，前端會收集文章的標題、內容等資訊，然後發送 HTTP 請求給後端。後端收到請求後，會驗證資料是否合法，然後調用資料庫接口把文章儲存到資料庫中。儲存成功後，後端返回成功響應給前端，前端顯示 “發佈成功” 的提示。
+
+主流的全棧技術棧有很多選擇。對於 Vibe Coding 來說，我推薦使用現代化的、AI 友好的技術棧。前端可以用 React 或 Vue，後端可以用 Node.js（Express、Nest.js）或 Python（FastAPI），資料庫可以用 MySQL、PostgreSQL 或 MongoDB。
+
+但其實，具體用什麼技術不是最重要的，重要的是理解全棧開發的思路。掌握了思路，換個技術棧也能很快上手。
+
+用 Vibe Coding 開發全棧應用有個巨大的優勢：你不需要精通前端和後端的所有細節，只需要知道要實現什麼功能，AI 會幫你生成程式碼。
+
+比如，你只需要告訴 AI：“創建一個使用者註冊接口，接收使用者名稱、信箱、密碼，驗證後儲存到資料庫。”
+
+AI 就能幫你生成完整的後端程式碼，包括參數驗證、密碼加密、資料庫操作等。這大大降低了全棧開發的門檻，讓你可以專注於業務邏輯，而不是糾結於技術細節。
+
+
+
+## 二、專案實戰 - 個人部落格系統
+
+部落格系統是最經典的全棧專案之一，涉及文章發佈、分類管理、評論互動等功能。通過這個專案，你可以學習如何處理 CRUD（增刪改查）操作，以及使用者認證等基礎功能。
+
+這個部落格系統要支援文章的發佈、編輯、刪除和查看。文章可以分類，支援標籤。使用者可以註冊登入，發佈自己的文章。訪客可以瀏覽文章，但不能發佈。文章支援 Markdown 格式，可以添加封面圖。首頁顯示文章列表，支援分頁和搜尋。
+
+![](https://pic.yupi.icu/1/demoweb10.png)
+
+技術選型上，前端使用 React + TypeScript + Vite，樣式用 Tailwind CSS。後端使用 Node.js + Express，資料庫用 MySQL。使用者認證用 JWT（JSON Web Token）。文章編輯器可以複用之前做過的 Markdown 編輯器。
+
+
+
+### 開發步驟
+
+1）設計資料庫
+
+開發的第一步是設計資料庫。在開始寫程式碼之前，先設計資料庫結構。創建一個 `database.md` 文件，定義需要哪些表，每個表有哪些欄位。
+
+比如使用者表需要：id（主鍵）、username（使用者名稱，唯一）、email（信箱，唯一）、password（密碼，加密儲存）、avatar（頭像 URL）、created_at（創建時間）。
+
+文章表需要：id、title（標題）、content（內容，Markdown 格式）、cover（封面圖 URL）、category（分類）、tags（標籤，JSON 陣列）、author_id（作者 ID，外鍵關聯 users）、views（瀏覽次數）、created_at、updated_at。
+
+分類表需要：id、name（分類名稱）、description（分類描述）。
+
+2）寫需求文檔
+
+設計好資料庫後，就可以寫需求文檔了。創建 `PRD.md` 文件：
+
+```markdown
+# 個人部落格系統 PRD
+
+## 核心功能
+
+### 使用者功能
+- 註冊：使用者名稱、信箱、密碼
+- 登入：返回 JWT token
+- 個人中心：查看和編輯個人資訊
+
+### 文章功能
+- 發佈文章：標題、內容、分類、標籤、封面
+- 編輯文章：修改已發佈的文章
+- 刪除文章：只能刪除自己的文章
+- 查看文章：顯示文章詳情，瀏覽次數 +1
+- 文章列表：支援分頁、分類篩選、搜尋
+
+### 前端頁面
+- 首頁：文章列表
+- 文章詳情頁
+- 寫文章頁（需要登入）
+- 個人中心頁（需要登入）
+- 登入/註冊頁
+```
+
+3）與 AI 對話開發後端
+
+有了文檔，就可以和 AI 對話開發後端了。打開 Cursor，開始和 AI 對話。
+
+第一步，初始化後端專案：
+
+```
+請創建一個 Node.js + Express 後端專案：
+1. 初始化專案，安裝 express、mysql2、jsonwebtoken、bcrypt 等依賴
+2. 創建基本的專案結構：src/routes（路由）、src/controllers（控制器）、src/models（資料模型）、src/middleware（中介軟體）、src/config（配置）
+3. 配置資料庫連接
+```
+
+這個提示詞說明了要創建什麼專案，安裝哪些依賴，專案結構是什麼樣的。
+
+第二步，創建資料庫表：
+
+```
+根據 database.md 中的設計，創建資料庫表的 SQL 語句。然後創建一個初始化腳本，自動創建這些表。
+```
+
+AI 會根據你的資料庫設計，生成創建表的 SQL 語句。
+
+第三步，實現使用者註冊和登入：
+
+```
+實現使用者註冊和登入功能：
+
+註冊接口（POST /api/auth/register）：
+- 接收 username、email、password
+- 驗證參數（使用者名稱 3-20 字元，信箱格式正確，密碼至少 6 位）
+- 檢查使用者名稱和信箱是否已存在
+- 密碼用 bcrypt 加密
+- 儲存到資料庫
+- 返回成功資訊
+
+登入接口（POST /api/auth/login）：
+- 接收 username、password
+- 驗證使用者是否存在
+- 驗證密碼是否正確
+- 生成 JWT token（有效期 7 天）
+- 返回 token 和使用者資訊
+```
+
+這個提示詞詳細說明了兩個接口的功能要求。AI 會實現完整的註冊和登入邏輯，包括參數驗證、密碼加密、JWT 生成等。
+
+第四步，實現文章 CRUD：
+
+```
+實現文章的增刪改查功能：
+
+創建文章（POST /api/posts）：
+- 需要登入（驗證 JWT token）
+- 接收 title、content、category、tags、cover
+- author_id 從 token 中獲取
+- 儲存到資料庫
+- 返回文章資訊
+
+獲取文章列表（GET /api/posts）：
+- 支援分頁（page、pageSize）
+- 支援分類篩選（category）
+- 支援搜尋（keyword，搜尋標題和內容）
+- 返回文章列表和總數
+
+獲取文章詳情（GET /api/posts/:id）：
+- 返回文章詳情
+- 瀏覽次數 +1
+
+更新文章（PUT /api/posts/:id）：
+- 需要登入
+- 只能更新自己的文章
+- 更新指定欄位
+
+刪除文章（DELETE /api/posts/:id）：
+- 需要登入
+- 只能刪除自己的文章
+```
+
+這個提示詞包含了文章的所有操作。AI 會實現完整的 CRUD 功能，包括權限驗證、資料查詢等。
+
+4）與 AI 對話開發前端
+
+後端開發完成後，就可以開發前端了。建議先用 Postman 或類似工具測試後端接口，確保接口正常工作後再開發前端。這樣可以避免前後端同時出問題，不知道問題出在哪裡。
+
+第一步，創建前端專案：
+
+```
+創建 React + TypeScript + Vite 前端專案，安裝 react-router-dom、axios、react-markdown 等依賴。配置路由：
+- / 首頁（文章列表）
+- /post/:id 文章詳情
+- /write 寫文章（需要登入）
+- /profile 個人中心（需要登入）
+- /login 登入
+- /register 註冊
+```
+
+第二步，實現使用者認證：
+
+```
+實現使用者認證功能：
+1. 創建 AuthContext，管理登入狀態和使用者資訊
+2. Token 儲存在 localStorage
+3. 封裝 axios，自動在請求頭添加 token
+4. 創建 ProtectedRoute 元件，保護需要登入才能訪問的頁面
+5. 實現登入和註冊頁面
+```
+
+這個提示詞說明了使用者認證的實現方式。AuthContext 用來管理全域的登入狀態，ProtectedRoute 用來保護需要登入才能訪問的頁面。
+
+第三步，實現文章列表頁：
+
+```
+實現首頁文章列表：
+1. 獲取文章列表，顯示標題、封面、分類、作者、時間
+2. 支援分頁，每頁 10 條
+3. 支援分類篩選（頂部分類標籤）
+4. 支援搜尋（搜尋框）
+5. 點擊文章跳轉到詳情頁
+```
+
+第四步，實現文章詳情頁：
+
+```
+實現文章詳情頁：
+1. 根據 ID 獲取文章詳情
+2. 使用 react-markdown 渲染文章內容
+3. 顯示作者資訊、發佈時間、瀏覽次數
+4. 如果是自己的文章，顯示編輯和刪除按鈕
+```
+
+第五步，實現寫文章頁：
+
+```
+實現寫文章頁：
+1. 使用之前做的 Markdown 編輯器
+2. 輸入標題、選擇分類、添加標籤、上傳封面
+3. 左側編輯，右側即時預覽
+4. 保存按鈕，調用創建文章接口
+5. 如果是編輯模式，加載已有文章資料
+```
+
+
+
+### 開發技巧
+
+在開發全棧應用時，有幾個技巧可以提高效率。首先，使用環境變數管理配置。資料庫連接資訊、JWT 密鑰等敏感資訊不要硬編碼在程式碼裡，要用環境變數。創建 `.env` 文件，把配置放進去，然後在程式碼中通過 `process.env` 讀取。
+
+其次，要做好錯誤處理。API 調用可能失敗，資料庫操作可能出錯，要捕獲這些錯誤並返回友好的提示。可以讓 AI 幫你創建一個統一的錯誤處理中介軟體。
+
+最後，開發時可以使用 nodemon 自動重啟後端服務，使用 Vite 的熱更新功能自動刷新前端頁面，這樣修改程式碼後不需要手動重啟，大大提高開發效率。
+
+
+
+### 擴展思路
+
+基礎版完成後，可以繼續擴展功能。比如添加評論系統，使用者可以評論文章；添加點讚功能，給喜歡的文章點讚；支援文章草稿，保存未發佈的文章；集成圖片上傳，上傳到雲端儲存；添加文章歸檔，按月份歸檔；支援 RSS 訂閱，方便讀者訂閱；優化 SEO，讓文章更容易被搜尋引擎收錄。
+
+
+
+## 三、專案實戰 - 問答社群
+
+完成了部落格系統後，讓我們來挑戰一個更複雜的專案 —— 問答社群。問答社群比部落格系統更複雜一些，涉及問題、回答、點讚、採納等互動功能。通過這個專案，你可以學習如何處理更複雜的資料關係和使用者互動。
+
+這個問答社群要支援使用者提問和回答。使用者可以發佈問題，其他使用者可以回答。問題和回答都支援點讚。提問者可以採納最佳答案。首頁顯示問題列表，支援按熱度、最新、未解決等排序。每個問題有標籤，可以按標籤篩選。使用者有積分系統，提問、回答、被採納都會獲得積分。
+
+![](https://pic.yupi.icu/1/demoweb11.png)
+
+技術棧和部落格系統類似，前端用 React + TypeScript + Vite，後端用 Node.js + Express，資料庫用 MySQL。
+
+
+
+### 開發步驟
+
+1）設計資料庫
+
+開發的第一步是設計資料庫。創建 `database.md` 文件：
+
+```markdown
+# 問答社群資料庫設計
+
+## 使用者表（users）
+- id、username、email、password、avatar
+- points: 積分
+- created_at
+
+## 問題表（questions）
+- id、title、content（Markdown）
+- tags: 標籤（JSON 陣列）
+- author_id: 提問者 ID
+- views: 瀏覽次數
+- answers_count: 回答數
+- votes: 點讚數
+- is_solved: 是否已解決
+- created_at、updated_at
+
+## 回答表（answers）
+- id、content（Markdown）
+- question_id: 問題 ID
+- author_id: 回答者 ID
+- votes: 點讚數
+- is_accepted: 是否被採納
+- created_at、updated_at
+
+## 點讚表（votes）
+- id、user_id、target_type（question/answer）
+- target_id: 目標 ID
+- created_at
+```
+
+2）與 AI 對話開發
+
+設計好資料庫後，就可以和 AI 對話開發了。開發流程和部落格系統類似，但要注意幾個關鍵點。
+
+第一個關鍵點是積分系統：
+
+```
+實現積分系統：
+- 發佈問題：-5 積分
+- 回答問題：+10 積分
+- 回答被採納：+30 積分
+- 問題被點讚：+5 積分
+- 回答被點讚：+10 積分
+
+在相應的操作中自動更新使用者積分。
+```
+
+這個提示詞說明了積分的規則。AI 會在實現功能時自動處理積分變化，比如使用者回答問題後，自動給使用者加 10 積分。
+
+第二個關鍵點是點讚功能：
+
+```
+實現點讚功能：
+- 使用者可以點讚問題和回答
+- 每個使用者對同一個目標只能點讚一次
+- 點讚後目標的 votes 數量 +1
+- 取消點讚後 votes 數量 -1
+- 返回使用者是否已點讚的狀態
+```
+
+點讚功能要防止重複點讚，所以需要記錄使用者的點讚行為。返回資料時要告訴前端使用者是否已點讚，這樣前端才能正確顯示點讚按鈕的狀態。
+
+第三個關鍵點是採納答案：
+
+```
+實現採納答案功能：
+- 只有提問者可以採納答案
+- 每個問題只能採納一個答案
+- 採納後問題狀態變為已解決
+- 回答者獲得積分獎勵
+```
+
+這個邏輯要在後端實現，確保權限控制正確。
+
+第四個關鍵點是問題列表排序：
+
+```
+實現問題列表的多種排序：
+- 最新：按創建時間倒序
+- 熱門：按點讚數倒序
+- 未解決：篩選 is_solved = false 的問題
+支援按標籤篩選。
+```
+
+
+
+### 開發技巧
+
+在開發問答社群時，有幾個需要注意的地方。首先是資料一致性，比如點讚時，要同時更新點讚表和目標的 votes 數量，這兩個操作要麼都成功，要麼都失敗。可以讓 AI 幫你實現資料庫事務，確保資料一致性。
+
+其次是性能優化。問題列表可能有很多資料，要做好分頁。可以讓 AI 幫你實現分頁查詢，每次只返回一頁的資料，避免一次性加載太多資料導致頁面卡頓。
+
+另外，點讚狀態的判斷也很重要。在返回問題或回答列表時，要告訴前端當前使用者是否已點讚，這樣前端才能正確顯示點讚按鈕的狀態（已點讚顯示紅色，未點讚顯示灰色）。
+
+
+
+### 擴展思路
+
+基礎版完成後，可以繼續擴展功能。比如添加評論功能，對回答進行評論；添加關注功能，關注感興趣的問題或使用者；實現通知系統，有新回答時通知提問者；優化搜尋功能，使用全文搜尋提高搜尋質量；添加排行榜，展示積分排名；實現徽章系統，完成成就獲得徽章。
+
+
+
+## 四、專案實戰 - 線上商城
+
+掌握了使用者互動和積分系統後，讓我們來做一個涉及交易流程的專案。線上商城是最複雜的全棧專案之一，涉及商品管理、購物車、訂單處理等功能。通過這個專案，你可以學習如何處理電商業務邏輯。
+
+這個 Mini 版商城要實現基本的電商功能。商品展示（列表和詳情）、購物車（添加、刪除、修改數量）、訂單管理（創建訂單、查看訂單）、使用者地址管理。不需要實現支付功能，訂單創建後顯示為待支付狀態即可。這樣可以降低開發難度，專注於核心業務流程。
+
+![](https://pic.yupi.icu/1/demoweb12.png)
+
+技術棧和前面的專案類似，前端用 React + TypeScript + Vite，後端用 Node.js + Express，資料庫用 MySQL。
+
+
+
+### 開發步驟
+
+1）設計資料庫
+
+開發的第一步是設計資料庫。創建 `database.md` 文件：
+
+```markdown
+# 線上商城資料庫設計
+
+## 使用者