HTMX 簡介
HTMX 是一個輕量級的前端框架，允許開發者直接在 HTML 中使用屬性來實現動態交互，無需撰寫大量的 JavaScript。它支持使用標準的 HTTP 方法（GET、POST、PUT、DELETE）進行局部更新，並且可以與 Django 等後端框架無縫整合。 HTMX 的核心功能 1. 局部更新 HTMX 可以通過 hx-get 或 hx-post 等屬性發送請求，並將返回的 HTML 片段插入到指定的 DOM 節點中。 範例：按讚功能 {% if user in interview.favorited_by.all %} 已收藏 {% else %} 收藏 {% endif %} hx-post: 發送 POST 請求到指定的 URL。 hx-swap="outerHTML": 替換按鈕本身的 HTML，而不僅僅是其內部內容。 2. 動態載入內容 HTMX 支持在用戶操作時動態載入內容，例如模態視窗（Modal）。 範例：動態載入模態視窗 <button hx-get="/modal" hx-target="#modal-container" class="btn">打開模態視窗</button> <div id="modal-container"></div> hx-get: 發送 GET 請求到 /modal。 hx-target: 指定將返回的 HTML 插入到 #modal-container 中。 3. 表單提交 HTMX 可以用於處理表單提交，並動態更新頁面的一部分。 範例：新增留言 <form action="{% url 'interviews:comment' interview.id %}" method="post" hx-target=".list" hx-swap="beforeend"> {% csrf_token %} <textarea name="content"></textarea> <button>新增留言</button> </form> hx-target: 指定將返回的內容插入到 .list 元素中。 hx-swap="beforeend": 將返回的內容追加到 .list 的末尾。 4. 事件處理 HTMX 支持使用屬性來處理事件，例如在請求完成後執行操作。 範例：顯示成功訊息 <button hx-post="/action" hx-trigger="click" hx-on="htmx:afterRequest: alert('操作成功')">執行操作</button> hx-trigger: 指定觸發請求的事件。 hx-on: 綁定 HTMX 事件（如 htmx:afterRequest）並執行 JavaScript。 HTMX 與 Django 的整合 1. 後端返回部分模板 在 Django 視圖中，返回一部分模板作為 HTMX 的響應。 範例：按讚視圖 views.py @require_POST @login_required def favorite(req, id): interview = get_object_or_404(Interview, pk=id) favorites = req.user.favorite_interviews if favorites.filter(pk=interview.pk).exists(): favorites.remove(interview) else: favorites.add(interview) return render(req, "interviews/favorite.html", {"user": req.user, "interview": interview}) favorite.html {% if user in interview.favorited_by.all %} 已收藏 {% else %} 收藏 {% endif %} 視圖返回的模板只包含按鈕的 HTML，HTMX 會自動更新頁面。 2. CSRF Token HTMX 請求需要包含 CSRF Token，否則 Django 會拒絕請求。 解決方法 在 HTML 的 <body> 標籤中添加以下屬性： <body hx-headers='{"x-csrftoken": "{{ csrf_token }}"}'> 3. 局部渲染 HTMX 可以用於實現局部渲染，避免整頁刷新。 範例：留言列表 <form action="{% url 'interviews:comment' interview.id %}" method="post" hx-target=".list" hx-swap="beforeend"> {% csrf_token %} <textarea name="content"></textarea> <button>新增留言</button> </form> <ul class="list"> {% for comment in comments %} {{ comment.user }} 說：{{ comment.content }} {% endfor %} </ul> 新增留言後，HTMX 只更新 .list 的內容，而不是整個頁面。 HTMX 的優勢 簡化前端開發: 無需撰寫大量 JavaScript，直接在 HTML 中定義交互邏輯。 與後端無縫整合: 使用 Django 模板引擎生成 HTML，減少前後端分離的複雜性。 提升性能: 支持局部更新，減少不必要的頁面刷新。 HTMX 的限制 複雜交互: 對於需要大量前端邏輯的應用，HTMX 可能不如前端框架（如 React 或 Vue）靈活。 學習曲線: 雖然 HTMX 簡單，但需要熟悉其屬性和事件。 總結 HTMX 是一個強大且輕量的工具，適合用於需要快速開發的 Django 項目。通過 HTMX，可以實現高效的局部更新和動態交互，提升用戶體驗，同時保持代碼的簡潔性。