2.8k字3 分鐘

# 問題 直接先看問題，原本照下方程式碼這樣子去調用 fetchCustomerData() 的話，會出現 React Hook useEffect has a missing dependency: 'fetchCustomerData'. Either include it or remove the dependency array. 的警告訊息 ... useEffect(() => { fetchCustomerData(); }, [customerId]); const fetchCust
5.1k字5 分鐘

# 前言 本篇著重在從開發環境切換至 uWSGI 正式環境需改動的地方，而不是從 0 開始，所以會更精簡，詳細從開始部署以及更詳細的參數解釋可參考 透過 Nginx 部署 Django 至私有主機 # Django 開發伺服器轉向 uWSGI 的優點 Django 的 python manage.py runserver 是一個開發伺服器，而 uWSGI 是生產級別(Production Deployment)的應用伺服器 使用 uWSGI 而不是開發伺服器的原因： 性能優化：uWSGI 可生成多個工作進程來將傳入的請求並行化到多個 CPU 核心，才能處理高流量網站。 安全性更高：Djang
5.5k字5 分鐘

# 自訂上傳圖片目的地 透過 imgur 來管理專案圖片是不理想的且 imgur 的圖片連結也會隨著時間而失效 MARTOR_UPLOAD_PATH : 儲存圖片的資料夾路徑目的地 MARTOR_UPLOAD_URL : 上傳圖片的 API URL(views) # backend/settings.py ... # Upload to locale storage MARTOR_UPLOAD_PATH = 'images/uploads/{}'.format(time.strftime("
1.7k字2 分鐘

# 問題 GSAP target .page-title not found. https://gsap.com Error Component Stack at BlogPostList (blog-post-list.tsx:15:19) at div (<anonymous>) at div (<anonymous 以上這類錯誤發生的主因是 GSAP 嘗試在 DOM 元素完全渲染到頁面之前對其進行動畫處理 原本會導致錯誤發生的程式碼： useGSAP(() => &#123; // 頁面載入時的
9k字8 分鐘

# 前言 像這種郵件發送的功能，通常會在後端處理，前端只需提供表單內容，這樣做的原因有幾個： 安全性：郵件發送需要 SMTP 憑證，這些不應暴露在前端程式碼 可靠性：Django 有成熟的郵件發送模塊（django.core.mail） 擴展性：後期可以輕鬆添加更多功能，如記錄表單歷史、自動回覆等 防濫用：可以實現速率限制、驗證碼等防護機制 # 後端 針對此專案我會額外建立一個 django app 來專門放所有與郵件相關的功能 # settings 配置郵件設定 EMAIL_HOST 是用中華電信的 SMTP 郵件伺服器，通常 TLS 連接使用的是端口 587 # settings.py
3.1k字3 分鐘

# 前言 本專案選擇 martor 作為後台的文章內文 Markdown 編輯器，比 ckeditor 更輕量化且支援 Markdown 語法，還有提供預覽、支援圖片上傳...功能等功能 # martor 編輯器套件設定 安裝套件 pip install martor 然後在 settings.py 進行基本設定 # settings.py INSTALLED_APPS = [ # ... 'martor', # ... ] # Martor 配置 MARTOR_ENABLE_CONFIGS = &#123; &#
8.5k字8 分鐘

# 後端 整體後端大致工作流程為 ORM 模型設計 serializer 開發 View 開發 URL 路由配置 API 測試與驗證（Postman / DRF） # ER Model 因為已經有文章標籤(TAG)的關係，這邊將文章(POST)和分類(CATEGORY)之間的關係從多對多改為一對多，更好的去區別 # ORM 模型 程式碼就不全部列出來，先只顯示 Post 跟 PostTag 兩個表重點說明 在 tag 欄位中用 Django 的 through 參數明確定義了多對多關係的中間表模型 添加了 unique_together 確保一篇文章不會重複關聯同一個分類或標
12k字11 分鐘

# 後端 整體後端大致工作流程為 ORM 模型設計 serializer 開發 View 開發 URL 路由配置 API 測試與驗證（Postman / DRF） # ER Model ✅ Product 與其他表的關聯： ProductImage（產品圖片） → 一對多 (One-to-Many) Specification（產品規格） → 一對多 (One-to-Many) ProductTag（產品標籤關聯表） → 多對多 (Many-to-Many) Tag（標籤） → 透過 ProductTag 建立多對多關係 2️⃣ ProductImage（產品圖片表） Pr
4.9k字4 分鐘

# 目錄結構 由於大多數網路上及教學，專案大都只含一個 app，而實際上多數商用專案及實際情況都會需多管理多個 apps，這邊就來看看多個 app 的整個專案結構會變如何 先看一開始還沒有拆分多個 Apps 前的 Django 專案結構： my_project/ │ ├── manage.py # Django CLI 入口 ├── requirements.txt # Python 依賴套件 │ ├── backend/ # Django 專案設定 │ ├── _