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 # 前
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.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
3.6k字3 分鐘

# 問題說明 前陣子看到同事 A 與老闆不斷爭執一個內部系統的其中一個問題，一問才知道這個問題已經卡了好幾個月還無解。 問題之所以困難是因為它是偶發性的，可能今天突然正常，沒幾天後又死當且發生機率在每個人的電腦也不一樣，日誌上卡這個 Task 卡了好幾個月，問題描述也只能掛著各種臆測造成死當的工作流程以及錯誤訊息 很難觸發問題，也很難去解決問題，打開 console 看也始終只能看到 Uncaught TypeError: Cannot read property 'xxx' of undefined 錯誤，但是卻不知道是哪裡的 xxx 會是 undefined。 # 解決方法
8k字7 分鐘

# 後端 在 UserProfile 模型中加入 avatar 欄位 建立 API 讓用戶能上傳/更新頭像 設定 Django 的 MEDIA_URL 讓圖片可存取 確保未登入用戶無法上傳頭像 # model(新增用戶頭貼欄位) 透過擴展 User 模型(資料表) 加入 avatar 欄位，這樣可以不影響現有的 User 模型(資料表)，而是額外增加一個 UserProfile 模型(資料表)來存放用戶的頭像圖片 在 Django ORM 物件關聯映射（Object-Relational Mapping）中，在 UserProfile 模型(資料表)內這樣定義： class Us
12k字11 分鐘

# Tech Stack Linux(Ubuntu 20.04+) 主機：本專案不使用雲端 PaaS 服務(Heroku、Azure、GCP)，而是自行架設 Linux 主機進行多個專案的維護 systemd：管理多個系統服務 SSH：遠端連線管理，如 OpenSSH） Nginx：Web Server，反向代理 uWSGI：Django WSGI 伺服器，Django 與 Web Service 之間的接口 網路上部署教學非常多，但 95%都是教怎麼透過第三方部署平台例如 Heroku,Azure,GCP...等，但我就是想架在自己架設的 Ubuntu 主機上阿!而關於各式部署方法及各自
858字1 分鐘

# 為何需要 Hash Route？ 解決 React Router 在部署到伺服器上時，重新整理會出現 404 的問題。因為 React Router 是使用 navigate 在內部進行頁面的切換，而這個功能是由瀏覽器提供的，所以當我們重新整理時，瀏覽器會向伺服器發送請求，但是伺服器並沒有這個路由，所以會出現 404 的問題。 也就是目前的狀況是，儘管能在網站內透過點擊連結進行頁面切換，但是一旦重新整理頁面或是透過直接輸入網址的方式進入網站，就會出現錯誤： // App.js import &#123; HashRouter, Routes, Route &a
2.9k字3 分鐘

# 流程 首先將 frontend 資料夾直接移動至 backend 資料夾內，因為最終是用後端的 Django 來 serve 前端的 React，所以目前整個專案的檔案結構應該會變成如下所示： # 前端 bundle 首先要讓前端程式不再處於開發模式，而是將其打包(bundle)成靜態檔，直接讓後端的 Django 讀取 ❯ cd frontend ... ❯ npm run build 基本上成功後就能看到以下回傳： > frontend@0.1.0 build > react-scripts build Creating an optimized production
3.6k字3 分鐘

# 後端 # view(篩選+排序高評分產品) gte: greater than or equal to，只抓取評分 >= 4 的產品 排序方式為 rating 由高到低，只取前 5 個產品 # product_views.py @api_view(['GET']) def getTopProducts(request): products = Product.objects.filter(rating__gte=4).order_by('-rating')[:5] serializer = P