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 專案設定 │ ├── _
3k字3 分鐘

# 問題 由於此專案使用 GSAP 而非 framer motion 導致 shadcn/ui 的 accordion 元件在此專案中是沒有展開/收起動畫的，因此需用 GSAP 自行製作動畫效果 # GSAP 動畫建構重點 以下 shadcn/ui 官方的寫法，若專案有 framer motion 應能直接使用 return ( <Accordion type='single' collapsible className='w-full'> <AccordionIt
1.6k字1 分鐘

# 設置 @ 路徑別名 到 tsconfig.json 加入 compilerOptions 的 paths 設定： baseUrl：設定為 .，確保路徑別名從此目錄開始計算。 paths：定義別名，@components/_ 代表 src/components/_。 { "compilerOptions": { "baseUrl": ".", // 設定為專案根目錄 "paths": { &
2.2k字2 分鐘

# 前言 這次開發 OEM 代工網站用 Vite作為開發伺服器 ，而非傳統的 Create React App (CRA)，來縮短前端建構、開發與部署時間，不用每次修改都要等數十秒才能看到新的畫面，讓開發體驗更好。 前端以 React + TypeScript + Vite 為核心，結合 Tailwind CSS 及 UI 元件庫（如 shadcn/ui, lucide-react） 後端則用 Django + DRF 快速開發 API 服務，在已瞭解 Redux 底層原理及為了在開發速度取得優勢的情況下，用 TanStack Query 來管理 Server Data 的狀態。
6.3k字6 分鐘

# 前言 先不用實際去後端寫 API Endpoint，直接用 Dummy data 來熟悉整套 Workflow，以列出 Dummy data 產品列表為例，這樣可以更快熟悉整套開發流程，並且可以先把前端的畫面先做出來，等到後端準備好後再直接接上 API Endpoint # 後端 setup 建立 Django 專案 建立、啟用虛擬環境 下載並輸出此專案的套件清單(corsheaders、JWT、drf...) django-admin startproject backend pip install ... pip freeze > requirements.txt # 前
6.1k字6 分鐘

# 在 React + TypeScript 專案中導入 Swiper JS Swiper 官方 Demo 能看到所有種類的 swiper npm i swiper # 與傳統 HTML + JS 專案的差異 在傳統 HTML/JS 中，需要使用： const swiper = new Swiper(".swiper", { ...options }); 但在 React 內部，Swiper 是以 組件方式封裝，它的行為是由 props 控制的： <Swiper modules=&#
6.6k字6 分鐘

# CSR 原理及常見問題 用純 React 開發 CSR(Client-Side Rendering)、SPA(Single Page Application) Web APP 時，儘管在頁面切換速度、性能上有卓越的優勢，但最麻煩的地方莫過於 SEO。 CSR 之所以快，原理就是 瀏覽器收到的 HTML 只有一個根元件 <div id="root"></div> 和一個打包好的 JS 檔，之後所有內容會由 JS 在 client 端瀏覽器執行後動態渲染出來 雖然 Google 現在有支援 CSR 渲染，但因爬蟲的 Crawl