HTMX - это инструмент, который легко интегрируется с Django, позволяя строить динамичные веб-приложения всего с несколькими настройками. В этой части мы рассмотрим общие подготовительные работы и способы настройки для интеграции Django и HTMX.

Интеграция Django и HTMX для динамической веб-разработки

1. Подготовительные работы для интеграции HTMX с Django

Чтобы использовать HTMX в Django, выполните следующие шаги:

1.1 Загрузка JavaScript библиотеки HTMX

Добавьте CDN-ссылку внутри тега <head> в файле HTML-шаблона.

<script src="https://unpkg.com/htmx.org"></script>

1.2 Использование свойств HTMX в Django

HTMX предлагает различные свойства для простого обработки HTTP-запросов.

  • hx-get: свойство для отправки GET-запросов
  • hx-post: свойство для отправки POST-запросов
  • hx-target: указывает HTML-элемент для вставки данных ответа сервера

Пример HTML-кода

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">Получить данные</button>
    <button hx-post="/submit/" hx-target="#result">Отправить данные</button>
</div>
<div id="result">Результат будет отображен здесь.</div>

2. Обработка HTMX запросов в Django

2.1 Обработка GET-запросов

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GET запрос обработан успешно!</p>")

2.2 Обработка POST-запросов

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POST запрос обработан успешно!</p>")

2.3 URL маршрутизация

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. Важные моменты при интеграции HTMX

3.1 Обработка CSRF токенов

Django активирует защиту CSRF по умолчанию, поэтому для POST-запросов требуется CSRF токен. Чтобы обработать POST-запросы в HTMX, выберите один из двух способов:

1. Использование HTML <meta> тега и JavaScript скрипта
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>
2. Вставка {% csrf_token %} в HTML <form> тег
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Введите ваше имя">
    <button type="submit">Отправить</button>
</form>
<div id="result"></div>

Дополнительная информация о работе с CSRF токенами будет рассмотрена в следующей части.

3.2 Различение HTMX-запросов

В Django версии 4.2 и выше можно использовать атрибут request.htmx для различения HTMX-запросов.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMX-запрос
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # Полная страница

4. Общий поток интеграции HTMX с Django

4.1 Завершенный пример HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">GET запрос</button>
        <button hx-post="/submit/" hx-target="#result">POST запрос</button>
    </div>
    <div id="result">Результат будет отображен здесь.</div>
</body>
</html>

Заключение

В этой части мы изучили подготовительные работы и способы настройки интеграции Django с HTMX. В следующей части мы подробнее рассмотрим методы обработки CSRF токенов и безопасность интеграции Django и HTMX. Ожидайте!