Django と HTMX を使用した To-Do アプリの作成 - パートフロントエンドの作成と HTMX の追加-Python チュートリアル-php.cn

ホームページ

バックエンド開発

Python チュートリアル

Django と HTMX を使用した To-Do アプリの作成 - パートフロントエンドの作成と HTMX の追加

Susan Sarandon

Jan 06, 2025 am 12:00 AM

シリーズのパート 3 へようこそ!この一連の記事では、バックエンドに Django を使用して、私自身が HTMX について学習したことを文書化しています。
このシリーズに参加したばかりの場合は、最初にパート 1 とパート 2 を確認するとよいでしょう。

テンプレートとビューの作成

まず、ベーステンプレートと、データベース内にある Todo をリストするインデックスビューを指すインデックステンプレートを作成します。 Todo の見栄えを良くするために、Tailwind CSS の拡張である DaisyUI を使用します。

これは、ビューが設定され、HTMLX を追加する前のページの外観です。

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

ビューと URL の追加

まず、プロジェクトのルートにある urls.py ファイルを更新して、「コア」アプリに定義する URL を含める必要があります。

# todomx/urls.py

from django.contrib import admin
from django.urls import include, path # <-- NEW

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("core.urls")), # <-- NEW
]

ログイン後にコピー

次に、アプリの新しい URL を定義し、新しいファイル core/urls.py を追加します。

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
]

ログイン後にコピー

これで、core/views.py に対応するビューを作成できるようになりました

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required


def index(request):
    return redirect("tasks/")


def get_user_todos(user: UserProfile) -> list[Todo]:
    return user.todos.all().order_by("created_at")


@login_required
def tasks(request):
    context = {
        "todos": get_user_todos(request.user),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

ログイン後にコピー

ここで興味深い点がいくつかあります。インデックスルート (ホームページ) はタスクの URL とビューにリダイレクトされるだけです。これにより、将来的にアプリに何らかのランディングページを自由に実装できるようになります。

タスクビューにはログインが必要で、コンテキスト内で 2 つの属性を返します。ユーザーのフルネーム (必要に応じてユーザー名と合体)、および ToDo アイテム (作成日順にソート) (将来)。

次に、テンプレートを追加しましょう。 Tailwind CSS と DaisyUI を含むアプリ全体の基本テンプレートと、タスクビューのテンプレートを用意します。

<!-- core/templates/_base.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    {% block header %}
    {% endblock %}
  </head>
  <body>



<p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be  bundled in your app.</p>

<p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}

{% block content %}
<div>



<p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>

<p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>

<h2>
  
  
  Add inline partial templates
</h2>

<p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>

<p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>

<p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
</p>

<pre class="brush:php;toolbar:false">❯ uv add django-template-partials
Resolved 24 packages in 435ms
Installed 1 package in 10ms
 + django-template-partials==24.4

ログイン後にコピー

インストール手順に従って、settings.py ファイルを更新する必要があります

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
    "template_partials",  # <-- NEW
]

ログイン後にコピー

タスクテンプレートでは、各 ToDo アイテムをインライン部分テンプレートとして定義します。ページをリロードしても、視覚的な違いは何もないはずです。

<!-- core/templates/tasks.html -->

{% extends "_base.html" %}
{% load partials %} <!-- NEW -->

{% block content %}
<div>



<p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>

<p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>

<h2>
  
  
  Toggling todo items on and off with HTMX
</h2>

<p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>

<p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
</p>

<pre class="brush:php;toolbar:false">    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script src="https://unpkg.com/htmx.org@2.0.4" ></script> <!-- NEW -->
    {% block header %}
    {% endblock %}

ログイン後にコピー

core/urls.py に新しいルートを追加します:

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
    path("tasks/<int:task_id>/", views.toggle_todo, name="toggle_todo"), # <-- NEW
]

ログイン後にコピー

次に、core/views.py に対応するビューを追加します。

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods # <-- NEW

# ... existing code

# NEW
@login_required
@require_http_methods(["PUT"])
def toggle_todo(request, task_id):
    todo = request.user.todos.get(id=task_id)
    todo.is_completed = not todo.is_completed
    todo.save()

    return render(request, "tasks.html#todo-item-partial", {"todo": todo})

ログイン後にコピー

return ステートメントでは、テンプレートのパーシャルをどのように利用できるかを確認できます。名前 todo-item-partial と、対象の項目の名前と一致するコンテキストを参照して、パーシャルのみを返しています。 task.html.

のループ内で反復処理します。

項目のオンとオフの切り替えをテストできるようになりました:

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

クライアント側の作業を行っているだけのように見えますが、ブラウザでネットワークツールを調べると、PUT リクエストをディスパッチし、部分的な HTML を返していることがわかります。

PUT リクエスト

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

応答

Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

私たちのアプリは HTMX 対応になりました!最終的なコードはここで確認できます。パート 4 では、タスクを追加および削除する機能を追加します。

以上がDjango と HTMX を使用した To-Do アプリの作成 - パートフロントエンドの作成と HTMX の追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1672

CakePHP チュートリアル

1428

Laravel チュートリアル

1332

PHP チュートリアル

1277

C# チュートリアル

1256

Related knowledge

Python vs. C：曲線と使いやすさの学習 Apr 19, 2025 am 12:20 AM

Pythonは学習と使用が簡単ですが、Cはより強力ですが複雑です。 1。Python構文は簡潔で初心者に適しています。動的なタイピングと自動メモリ管理により、使いやすくなりますが、ランタイムエラーを引き起こす可能性があります。 2.Cは、高性能アプリケーションに適した低レベルの制御と高度な機能を提供しますが、学習しきい値が高く、手動メモリとタイプの安全管理が必要です。

Pythonの学習：2時間の毎日の研究で十分ですか？ Apr 18, 2025 am 12:22 AM

Pythonを1日2時間学ぶだけで十分ですか？それはあなたの目標と学習方法に依存します。 1）明確な学習計画を策定し、2）適切な学習リソースと方法を選択します。3）実践的な実践とレビューとレビューと統合を練習および統合し、統合すると、この期間中にPythonの基本的な知識と高度な機能を徐々に習得できます。

Python vs. C：パフォーマンスと効率の探索 Apr 18, 2025 am 12:20 AM

Pythonは開発効率でCよりも優れていますが、Cは実行パフォーマンスが高くなっています。 1。Pythonの簡潔な構文とリッチライブラリは、開発効率を向上させます。 2.Cのコンピレーションタイプの特性とハードウェア制御により、実行パフォーマンスが向上します。選択を行うときは、プロジェクトのニーズに基づいて開発速度と実行効率を比較検討する必要があります。

Python vs. C：重要な違いを理解します Apr 21, 2025 am 12:18 AM

PythonとCにはそれぞれ独自の利点があり、選択はプロジェクトの要件に基づいている必要があります。 1）Pythonは、簡潔な構文と動的タイピングのため、迅速な開発とデータ処理に適しています。 2）Cは、静的なタイピングと手動メモリ管理により、高性能およびシステムプログラミングに適しています。

Python Standard Libraryの一部はどれですか：リストまたは配列はどれですか？ Apr 27, 2025 am 12:03 AM

PythonListSarePartOfThestAndardarenot.liestareBuilting-in、versatile、forStoringCollectionsのpythonlistarepart。

Python：自動化、スクリプト、およびタスク管理 Apr 16, 2025 am 12:14 AM

Pythonは、自動化、スクリプト、およびタスク管理に優れています。 1）自動化：OSやShutilなどの標準ライブラリを介してファイルバックアップが実現されます。 2）スクリプトの書き込み：Psutilライブラリを使用してシステムリソースを監視します。 3）タスク管理：スケジュールライブラリを使用してタスクをスケジュールします。 Pythonの使いやすさと豊富なライブラリサポートにより、これらの分野で優先ツールになります。

科学コンピューティングのためのPython：詳細な外観 Apr 19, 2025 am 12:15 AM

科学コンピューティングにおけるPythonのアプリケーションには、データ分析、機械学習、数値シミュレーション、視覚化が含まれます。 1.numpyは、効率的な多次元配列と数学的関数を提供します。 2。ScipyはNumpy機能を拡張し、最適化と線形代数ツールを提供します。 3. Pandasは、データ処理と分析に使用されます。 4.matplotlibは、さまざまなグラフと視覚的な結果を生成するために使用されます。

Web開発用のPython：主要なアプリケーション Apr 18, 2025 am 12:20 AM

Web開発におけるPythonの主要なアプリケーションには、DjangoおよびFlaskフレームワークの使用、API開発、データ分析と視覚化、機械学習とAI、およびパフォーマンスの最適化が含まれます。 1。DjangoandFlask Framework：Djangoは、複雑な用途の迅速な発展に適しており、Flaskは小規模または高度にカスタマイズされたプロジェクトに適しています。 2。API開発：フラスコまたはdjangorestFrameworkを使用して、Restfulapiを構築します。 3。データ分析と視覚化：Pythonを使用してデータを処理し、Webインターフェイスを介して表示します。 4。機械学習とAI：Pythonは、インテリジェントWebアプリケーションを構築するために使用されます。 5。パフォーマンスの最適化：非同期プログラミング、キャッシュ、コードを通じて最適化

See all articles

Django と HTMX を使用した To-Do アプリの作成 - パートフロントエンドの作成と HTMX の追加

テンプレートとビューの作成

ビューと URL の追加

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Django と HTMX を使用した To-Do アプリの作成 - パート フロントエンドの作成と HTMX の追加

テンプレートとビューの作成

ビューと URL の追加

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Django と HTMX を使用した To-Do アプリの作成 - パートフロントエンドの作成と HTMX の追加