使用 Django + Tailwind + Alpine.js 實作「五顆星評分」功能教學

更新日期： 2025 年 1 月 7 日

本篇教學針對新手說明如何使用 Django 的 MTV 架構 (Models, Templates, Views)，並結合 Tailwind CSS 與 Alpine.js，建立一個互動式「五顆星評分」功能。

這個評分系統可用於各類型網站，協助用戶提交並顯示評分結果，並具備平均分數計算與互動視覺效果。

---

建立數據模型 (Models)

在 Django 中，數據模型 (Model) 用於定義資料庫的結構。

在這個案例中，需要建立一個用來儲存評分的 Rating 模型。

核心概念：

• 使用者關聯：評分記錄需要關聯到 Django 內建的 User 模型，以便辨識提交評分的用戶。
• 評分數值：分數限制為 1 到 5 之間的正整數，可透過 Django 提供的 PositiveSmallIntegerField 來達成。
• 時間戳記：記錄每次評分的時間，方便日後分析或顯示。

設計重點：

• 確保每位用戶僅能評分一次，或允許更新分數的邏輯。
• 建議使用 ORM 提供的數值範圍驗證功能，防止無效數據寫入資料庫。

---

建立表單 (Forms)

Django 的表單 (Form) 用於處理前端用戶提交的數據，並確保數據符合預期格式。

表單設計重點：

• 使用 ModelForm：可直接從數據模型生成表單，減少重複性程式碼。

表單的角色：

• 接收用戶提交的評分數值。
• 將有效數據傳遞給後端視圖進一步處理。

---

建立視圖邏輯 (Views)

視圖 (Views) 是處理用戶請求與伺服器之間互動的核心邏輯，包括讀取數據並呈現在網頁上。

視圖的兩種請求類型：

1. GET 請求 (顯示評分頁面)：
   • 讀取資料庫中目前的平均分數與用戶的個人評分狀態。
   • 將這些數據傳遞給前端範本進行顯示。
2. POST 請求 (處理分數提交)：
   • 接收用戶的分數提交並進行驗證。
   • 若用戶已經評分過，則更新原有的分數；否則新增新的評分記錄。
   • 可選擇重新導向回評分頁面，確保用戶看到最新的分數。

視圖的關鍵要點：

• 應使用 Django 內建的 @login_required 裝飾器，確保只有登入的用戶能提交評分。
• 保持視圖簡潔且符合 RESTful 風格，分別處理顯示 (GET) 與數據提交 (POST)。

---

設計範本 (Templates)

範本 (Templates) 用於負責網頁的視覺呈現，並與後端數據進行整合。

在這裡，範本的重點是透過 Tailwind CSS 與 Alpine.js 提供互動式的評分體驗。

使用 Tailwind CSS 進行 UI 設計

• 星星圖示設計：可使用 Tailwind CSS 提供的 flex 與 text-yellow-500 之類的樣式，實現五顆星的圖示呈現。
• 平均分數呈現：使用簡潔的文字樣式顯示目前的平均分數，並可用不同顏色呈現分數的高低差異。

使用 Alpine.js 增強前端互動性

Alpine.js 是一款輕量級的 JavaScript 框架，適合用於簡單的前端互動行為。

互動設計包含：

• 滑鼠懸停效果：當滑鼠移動到星星上時，星星會高亮顯示。
• 分數選擇與提交：點擊星星即可提交分數，無需額外的表單提交按鈕。
• 即時數據綁定：使用 x-data 和 x-model 讓前端狀態與用戶互動即時同步。

---

前端互動邏輯 (Alpine.js + Tailwind CSS)

前端互動的關鍵在於使用 Alpine.js 處理使用者行為，並透過 Tailwind CSS 控制視覺效果。

核心概念：

• Alpine.js：
  • x-data：用於定義前端的狀態變數。
  • x-on:click：偵測點擊事件並觸發對應的行為。
  • x-bind:class：根據狀態變更動態調整 CSS 樣式。
• Tailwind CSS：
  • text-yellow-500：控制星星的顏色。
  • flex 與 cursor-pointer：設計彈性排版與可點擊元素。

---

路由設定 (URLs)

Django 的路由負責將用戶請求導向正確的視圖函數。

基本路由規劃：

• GET /rating/：顯示評分頁面與目前的平均分數。
• POST /rating/submit/：處理分數提交，並返回更新後的評分頁面。

核心概念：

• 使用 path() 函數在 urls.py 中定義 URL 與對應的視圖函數。
• 可選擇將路由設計為 RESTful 風格，或透過 Django 的 include() 將評分系統作為獨立模組。

---

權限管理與驗證

為了確保只有已登入的用戶能提交評分，可以使用 Django 內建的權限管理功能。

常用方法：

• @login_required 裝飾器：自動檢查用戶是否登入，未登入則導向登入頁面。
• PermissionMixin：用於更進階的權限控管（如角色限制）。

---

平均分數計算邏輯

為了顯示即時的平均分數，可透過 Django ORM 的聚合函數進行計算。

計算邏輯：

• 使用 Avg 聚合函數計算所有分數的平均值。
• 若無評分紀錄，則回傳預設分數或提示用戶尚未評分。

---

總結

本篇教學涵蓋了使用 Django、Tailwind CSS 與 Alpine.js 建立「五顆星評分系統」的完整流程。

回顧重點：

• Model：建立 Rating 模型來儲存分數數據
• Form：使用 Django 的 ModelForm 建立數據驗證
• View：處理顯示 (GET) 與提交 (POST) 請求
• Template：使用 Tailwind 與 Alpine.js 打造互動式星星評分介面
• URL：設計兩條路由負責頁面顯示與分數提交
• 權限控管：限制僅登入用戶可提交評分

透過這樣的架構設計，你可以實作一個簡潔且可擴展的評分系統，適用於各種網站與應用場景。