シリーズのパート 3 へようこそ!この一連の記事では、バックエンドに Django を使用して、私自身が HTMX について學(xué)習(xí)したことを文書化しています。
このシリーズに參加したばかりの場(chǎng)合は、最初にパート 1 とパート 2 を確認(rèn)するとよいでしょう。
テンプレートとビューの作成
まず、ベース テンプレートと、データベース內(nèi)にある Todo をリストするインデックス ビューを指すインデックス テンプレートを作成します。 Todo の見栄えを良くするために、Tailwind CSS の拡張である DaisyUI を使用します。
これは、ビューが設(shè)定され、HTMLX を追加する前のページの外観です。
ビューと 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)
ここで興味深い點(diǎn)がいくつかあります。インデックス ルート (ホームページ) はタスクの URL とビューにリダイレクトされるだけです。これにより、將來(lái)的にアプリに何らかのランディング ページを自由に実裝できるようになります。
タスクビューにはログインが必要で、コンテキスト內(nèi)で 2 つの屬性を返します。ユーザーのフルネーム (必要に応じてユーザー名と合體)、および ToDo アイテム (作成日順にソート) (將來(lái))。
次に、テンプレートを追加しましょう。 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 ステートメントでは、テンプレートのパーシャルをどのように利用できるかを確認(rèn)できます。名前 todo-item-partial と、対象の項(xiàng)目の名前と一致するコンテキストを參照して、パーシャルのみを返しています。 task.html.
のループ內(nèi)で反復(fù)処理します。項(xiàng)目のオンとオフの切り替えをテストできるようになりました:
クライアント側(cè)の作業(yè)を行っているだけのように見えますが、ブラウザでネットワーク ツールを調(diào)べると、PUT リクエストをディスパッチし、部分的な HTML を返していることがわかります。
PUT リクエスト
応答
私たちのアプリは HTMX 対応になりました!最終的なコードはここで確認(rèn)できます。パート 4 では、タスクを追加および削除する機(jī)能を追加します。
以上がDjango と HTMX を使用した To-Do アプリの作成 - パート フロントエンドの作成と HTMX の追加の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8517
17
1742
16
1596
56
1536
28
1396
31
Python Webアプリケーション（XSS、SQLインジェクションなど）の一般的なセキュリティの脆弱性は何ですか？また、どのように緩和できますか？
Jun 10, 2025 am 12:13 AM
Webアプリケーションのセキュリティに注意する必要があります。 Python Webサイトの一般的な脆弱性には、XSS、SQLインジェクション、CSRF、およびファイルアップロードリスクが含まれます。 XSSの場(chǎng)合、テンプレートエンジンを使用して、自動(dòng)的にエスケープし、豊富なテキストHTMLをフィルタリングし、CSPポリシーを設(shè)定する必要があります。 SQLインジェクション、パラメーター化されたクエリまたはORMフレームワークを防ぎ、ユーザー入力を検証するため。 CSRFを防ぐには、CSRFTTOKENメカニズムを有効にし、機(jī)密操作を2回確認(rèn)する必要があります。ファイルアップロード脆弱性を使用して、タイプを制限し、ファイルの名前を変更し、実行権限を禁止する必要があります。規(guī)範(fàn)に従って、成熟したツールを使用すると、リスクが効果的に減少し、安全性が継続的に注意とテストを必要とします。
Pythonの不適格またはPytestフレームワークは、自動(dòng)テストをどのように促進(jìn)しますか？
Jun 19, 2025 am 01:10 AM
Pythonの不適格でPytestは、自動(dòng)テストの書き込み、整理、および実行を簡(jiǎn)素化する2つの広く使用されているテストフレームワークです。 1.両方とも、テストケースの自動(dòng)発見をサポートし、明確なテスト構(gòu)造を提供します。 pytestはより簡(jiǎn)潔で、テスト\ _から始まる関數(shù)が必要です。 2。それらはすべて組み込みのアサーションサポートを持っています：Unittestはアサートエクイアル、アサートトルー、およびその他の方法を提供しますが、Pytestは拡張されたアサートステートメントを使用して障害の詳細(xì)を自動(dòng)的に表示します。 3.すべてがテストの準(zhǔn)備とクリーニングを処理するためのメカニズムを持っています：un
Pythonは関數(shù)の可変デフォルト引數(shù)をどのように処理しますか、そしてなぜこれが問題になるのでしょうか？
Jun 14, 2025 am 12:27 AM
Pythonのデフォルトパラメーターは、定義されたときに1回のみ初期化されます?？蓧浈芝弗Д龋ē辚攻趣滢o書など）がデフォルトのパラメーターとして使用される場(chǎng)合、予期しない動(dòng)作が引き起こされる可能性があります。たとえば、空のリストをデフォルトのパラメーターとして使用する場(chǎng)合、関數(shù)への複數(shù)の呼び出しは、毎回新しいリストを生成する代わりに同じリストを再利用します。この動(dòng)作によって引き起こされる問題には、次のものが含まれます。1。関數(shù)呼び出し間のデータの予期しない共有。 2。その後の呼び出しの結(jié)果は、以前の呼び出しの影響を受け、デバッグの難しさを増加させます。 3.論理エラーを引き起こし、検出が困難です。 4.初心者と経験豊富な開発者の両方を混亂させるのは簡(jiǎn)単です。問題を回避するために、ベストプラクティスは、デフォルト値をNONEに設(shè)定し、関數(shù)內(nèi)に新しいオブジェクトを作成することです。
Pythonアプリケーションを生産環(huán)境に展開するための考慮事項(xiàng)は何ですか？
Jun 10, 2025 am 12:14 AM
Pythonアプリケーションを生産環(huán)境に展開するには、安定性、セキュリティ、メンテナンスに注意が必要です。まず、GunicornまたはUWSGIを使用して開発サーバーを置き換えて、同時(shí)処理をサポートします。第二に、パフォーマンスを改善するための逆プロキシとしてNginxと協(xié)力します。第三に、リソースを最適化するためにCPUコアの數(shù)に従ってプロセスの數(shù)を構(gòu)成します。第4に、仮想環(huán)境を使用して依存関係を分離し、バージョンをフリーズして一貫性を確保します。第5に、詳細(xì)なログを有効にし、監(jiān)視システムを統(tǒng)合し、操作とメンテナンスを容易にするアラームメカニズムを設(shè)定します。第六に、アプリケーションを?qū)g行するためのルートアクセス許可を避け、デバッグ情報(bào)を閉じ、HTTPSを構(gòu)成してセキュリティを確保します。最後に、自動(dòng)展開はCI/CDツールを通じて達(dá)成され、人的エラーを減らします。
PythonをMicroservicesアーキテクチャ內(nèi)の他の言語(yǔ)やシステムとどのように統(tǒng)合できますか？
Jun 14, 2025 am 12:25 AM
Pythonは、マイクロサービスアーキテクチャの他の言語(yǔ)やシステムとうまく機(jī)能します。キーは、各サービスが獨(dú)立して実行され、効果的に通信する方法です。 1.標(biāo)準(zhǔn)のAPIおよび通信プロトコル（HTTP、REST、GRPCなど）を使用して、PythonはFlaskやFastapiなどのフレームワークを介してAPIを構(gòu)築し、リクエストまたはHTTPXを使用して他の言語(yǔ)サービスを呼び出します。 2。メッセージブローカー（Kafka、Rabbitmq、Redisなど）を使用して非同期コミュニケーションを?qū)g現(xiàn)するために、Python Servicesは他の言語(yǔ)消費(fèi)者向けのメッセージを公開して、システム分離、スケーラビリティ、フォールトトレランスを改善します。 3.実裝を?qū)g現(xiàn)するために、他の言語(yǔ)のランタイム（Jythonなど）をC/Cから拡張または埋め込んだ
Pythonは、NumpyやPandasなどのライブラリとのデータ分析と操作にどのように使用できますか？
Jun 19, 2025 am 01:04 AM
pythonisidealfordataanalysisduetonumpyandpandas.1）numpyexcelsatnumericalcompitations withfast、多次元路面およびベクトル化された分離likenp.sqrt（）
__iter__と__next__を使用してPythonにカスタムイテレーターを?qū)g裝するにはどうすればよいですか？
Jun 19, 2025 am 01:12 AM
カスタムイテレーターを?qū)g裝するには、クラス內(nèi)の__iter__および__next__メソッドを定義する必要があります。 __iter__メソッドは、ループなどの反復(fù)環(huán)境と互換性があるように、通常は自己の反復(fù)オブジェクト自體を返します。 __next__メソッドは、各反復(fù)の値を制御し、シーケンスの次の要素を返し、アイテムがもうない場(chǎng)合、停止例外をスローする必要があります。 statusステータスを正しく追跡する必要があり、無(wú)限のループを避けるために終了條件を設(shè)定する必要があります。 fileファイルラインフィルタリングなどの複雑なロジック、およびリソースクリーニングとメモリ管理に注意を払ってください。 simple単純なロジックについては、代わりにジェネレーター関數(shù)の収率を使用することを検討できますが、特定のシナリオに基づいて適切な方法を選択する必要があります。
リスト、辭書、および設(shè)定された包括的設(shè)定は、Pythonのコードの読みやすさと簡(jiǎn)潔さをどのように改善しますか？
Jun 14, 2025 am 12:31 AM
Pythonのリスト、辭書、コレクションの派生は、簡(jiǎn)潔な構(gòu)文を通じてコードの読みやすさと書き込み効率を向上させます。これらは、マルチラインループをシングルラインコードに置き換えて要素変換またはフィルタリングを?qū)g裝するなど、イテレーションおよび変換操作を簡(jiǎn)素化するのに適しています。 1. [x2forxinrange（10）]などの包括的リストは、正方形シーケンスを直接生成できます。 2。{x：x2forxinrange（5）}などの辭書の包括的な辭書は、キー値マッピングを明確に表現(xiàn)しています。 3。[XForxinNumberSifx％2 == 0]などの條件フィルタリングにより、フィルタリングロジックがより直感的になります。 4。複雑な條件を埋め込むこともできます。たとえば、マルチコンディションフィルタリングや三元式の組み合わせなど。しかし、保守性の低下を避けるために、過度のネスティングまたは副作用操作を避ける必要があります。派生の合理的な使用は減少する可能性があります
