# 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
# 線上商城資料庫設計

## 使用者