pembangunan bahagian belakang
Tutorial Python
Mencipta aplikasi Tugasan dengan Django dan HTMX - Bahagian Mencipta bahagian hadapan dan menambah HTMX
Mencipta aplikasi Tugasan dengan Django dan HTMX - Bahagian Mencipta bahagian hadapan dan menambah HTMX
Jan 06, 2025 am 12:00 AM
Selamat datang ke bahagian 3 siri kami! Dalam siri artikel ini, saya mendokumentasikan pembelajaran saya sendiri tentang HTMX, menggunakan Django untuk bahagian belakang.
Jika anda baru tiba dalam siri ini, anda mungkin mahu menyemak bahagian satu dan dua terlebih dahulu.
Mencipta templat dan pandangan
Kami akan bermula dengan mencipta templat asas, dan templat indeks yang menghala ke paparan indeks, yang akan menyenaraikan Todos yang kami ada dalam pangkalan data. Kami akan menggunakan DaisyUI yang merupakan lanjutan daripada Tailwind CSS, untuk menjadikan Todos kelihatan baik.
Beginilah rupa halaman setelah paparan ditetapkan, dan sebelum kami menambah HTMX:
Menambah pandangan dan URL
Mula-mula kami perlu mengemas kini fail urls.py dalam akar projek, untuk memasukkan url yang akan kami tentukan dalam apl "teras" kami:
# 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
]
Kemudian, kami mentakrifkan URL baharu untuk apl, meletakkan penambahan teras fail baharu/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"),
]
Kini kita boleh mencipta paparan yang sepadan, dalam 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)
Beberapa perkara menarik di sini: laluan indeks kami (halaman utama) hanya akan mengubah hala ke URL dan paparan tugasan. Ini akan memberi kami kebebasan untuk melaksanakan beberapa jenis halaman pendaratan untuk apl pada masa hadapan.
Paparan tugas memerlukan log masuk dan mengembalikan dua atribut dalam konteks: nama penuh pengguna, yang digabungkan dengan nama pengguna mereka jika perlu, dan item todo, diisih mengikut tarikh penciptaan (kita boleh menambah beberapa pilihan pengisihan untuk pengguna dalam masa depan).
Sekarang mari tambah templat. Kami akan mempunyai templat asas untuk keseluruhan apl, yang akan merangkumi Tailwind CSS dan DaisyUI serta templat untuk paparan tugasan.
<!-- 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
Mengikut arahan pemasangan, kami harus mengemas kini fail settings.py kami sedemikian
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"core",
"template_partials", # <-- NEW
]
Dalam templat tugasan kami, kami akan mentakrifkan setiap item tugasan sebagai templat separa sebaris. Jika kami memuatkan semula halaman tersebut, halaman tersebut sepatutnya tidak mempunyai sebarang perbezaan visual.
<!-- 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 %}
Pada core/urls.py kami akan menambah laluan baharu kami:
# 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
]
Kemudian, pada core/views.py, kami akan menambah paparan yang sepadan:
# 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})
Dalam pernyataan pemulangan, kita dapat melihat cara kita boleh memanfaatkan separa templat: kita hanya mengembalikan separa, dengan merujuk pada namanya todo-item-partial dan konteks yang sepadan dengan nama item yang kita gunakan lelaran dalam gelung dalam tasks.html.
Kami kini boleh menguji menghidupkan dan mematikan item:
Nampaknya kami hanya melakukan beberapa kerja pihak pelanggan, tetapi memeriksa alat Rangkaian dalam penyemak imbas menunjukkan kepada kami cara kami menghantar permintaan PUT dan mengembalikan sebahagian HTML:
LETAKKAN permintaan
Jawapan
Apl kami kini HTMX-fied! Anda boleh menyemak kod akhir di sini. Dalam bahagian 4, kami akan menambah keupayaan untuk menambah dan memadam tugasan.
Atas ialah kandungan terperinci Mencipta aplikasi Tugasan dengan Django dan HTMX - Bahagian Mencipta bahagian hadapan dan menambah HTMX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah beberapa kelemahan keselamatan biasa dalam aplikasi web Python (mis., XSS, suntikan SQL) dan bagaimana mereka dapat dikurangkan?
Jun 10, 2025 am 12:13 AM
Keselamatan aplikasi web perlu diberi perhatian. Kelemahan umum di laman web python termasuk XSS, suntikan SQL, CSRF dan risiko memuat naik fail. Untuk XSS, enjin template harus digunakan untuk melarikan diri secara automatik, penapis teks HTML yang kaya dan menetapkan dasar CSP; untuk mengelakkan suntikan SQL, rangka pertanyaan parameter atau ORM, dan mengesahkan input pengguna; Untuk mengelakkan CSRF, mekanisme CSRFTToken mesti diaktifkan dan operasi sensitif mesti disahkan dua kali; Kelemahan muat naik fail mesti digunakan untuk menyekat jenis, menamakan semula fail, dan melarang keizinan pelaksanaan. Berikutan norma -norma dan menggunakan alat yang matang dapat mengurangkan risiko, dan keselamatan memerlukan perhatian dan ujian yang berterusan.
Bagaimanakah rangka kerja Python atau PyTest memudahkan ujian automatik?
Jun 19, 2025 am 01:10 AM
Python's Unittest and Pytest adalah dua kerangka ujian yang digunakan secara meluas yang memudahkan penulisan, penganjuran dan menjalankan ujian automatik. 1. Kedua -duanya menyokong penemuan automatik kes ujian dan menyediakan struktur ujian yang jelas: Unittest mentakrifkan ujian dengan mewarisi kelas ujian dan bermula dengan ujian \ _; Pytest lebih ringkas, hanya memerlukan fungsi bermula dengan ujian \ _. 2. Mereka semua mempunyai sokongan dakwaan terbina dalam: Unittest menyediakan kaedah AssertEqual, AssertTrue dan lain-lain, manakala PYTest menggunakan pernyataan menegaskan yang dipertingkatkan untuk memaparkan butiran kegagalan secara automatik. 3. Semua mempunyai mekanisme untuk mengendalikan penyediaan ujian dan pembersihan: un
Bagaimanakah Python mengendalikan argumen lalai yang boleh berubah dalam fungsi, dan mengapa ini boleh menjadi masalah?
Jun 14, 2025 am 12:27 AM
Parameter lalai Python hanya dimulakan sekali apabila ditakrifkan. Jika objek yang boleh berubah (seperti senarai atau kamus) digunakan sebagai parameter lalai, tingkah laku yang tidak dijangka mungkin disebabkan. Sebagai contoh, apabila menggunakan senarai kosong sebagai parameter lalai, pelbagai panggilan ke fungsi akan menggunakan semula senarai yang sama dan bukannya menghasilkan senarai baru setiap kali. Masalah yang disebabkan oleh tingkah laku ini termasuk: 1. Perkongsian data yang tidak dijangka antara panggilan fungsi; 2. Hasil panggilan berikutnya dipengaruhi oleh panggilan sebelumnya, meningkatkan kesukaran debugging; 3. Ia menyebabkan kesilapan logik dan sukar untuk dikesan; 4. Mudah untuk mengelirukan kedua -dua pemaju baru dan berpengalaman. Untuk mengelakkan masalah, amalan terbaik adalah untuk menetapkan nilai lalai kepada tiada dan membuat objek baru di dalam fungsi, seperti menggunakan my_list = tiada bukan my_list = [] dan pada mulanya dalam fungsi
Apakah pertimbangan untuk menggunakan aplikasi Python ke persekitaran pengeluaran?
Jun 10, 2025 am 12:14 AM
Menggunakan aplikasi python ke persekitaran pengeluaran memerlukan perhatian terhadap kestabilan, keselamatan dan penyelenggaraan. Pertama, gunakan Gunicorn atau UWSGI untuk menggantikan pelayan pembangunan untuk menyokong pemprosesan serentak; kedua, bekerjasama dengan Nginx sebagai proksi terbalik untuk meningkatkan prestasi; Ketiga, konfigurasikan bilangan proses mengikut bilangan teras CPU untuk mengoptimumkan sumber; Keempat, gunakan persekitaran maya untuk mengasingkan kebergantungan dan membekukan versi untuk memastikan konsistensi; Kelima, membolehkan log terperinci, mengintegrasikan sistem pemantauan, dan menyediakan mekanisme penggera untuk memudahkan operasi dan penyelenggaraan; Keenam, elakkan keizinan akar untuk menjalankan aplikasi, menutup maklumat debugging, dan konfigurasikan HTTPS untuk memastikan keselamatan; Akhirnya, penggunaan automatik dicapai melalui alat CI/CD untuk mengurangkan kesilapan manusia.
Bagaimanakah Python dapat diintegrasikan dengan bahasa atau sistem lain dalam seni bina microservices?
Jun 14, 2025 am 12:25 AM
Python berfungsi dengan baik dengan bahasa dan sistem lain dalam seni bina mikroservis, kunci adalah bagaimana setiap perkhidmatan berjalan secara bebas dan berkomunikasi dengan berkesan. 1. Menggunakan API standard dan protokol komunikasi (seperti HTTP, REST, GRPC), Python membina API melalui rangka kerja seperti Flask dan FastAPI, dan menggunakan permintaan atau HTTPX untuk memanggil perkhidmatan bahasa lain; 2. Menggunakan broker mesej (seperti Kafka, Rabbitmq, Redis) untuk merealisasikan komunikasi tak segerak, perkhidmatan Python dapat menerbitkan mesej untuk pengguna bahasa lain untuk memproses, meningkatkan sistem decoupling, skalabilitas dan toleransi kesalahan; 3. Memperluas atau membenamkan runtime bahasa lain (seperti Jython) melalui C/C untuk mencapai pelaksanaan
Bagaimanakah Python boleh digunakan untuk analisis data dan manipulasi dengan perpustakaan seperti numpy dan panda?
Jun 19, 2025 am 01:04 AM
Pythonisidealfordataanalysisysisduetonumpyandpandas.1) numpyexcelsatnumericalcomputationswithfast, multi-dimensiArarraySandvectorizedoperationsLikenp.sqrt ()
Bagaimana anda boleh melaksanakan iterators tersuai di Python menggunakan __iter__ dan __Next__?
Jun 19, 2025 am 01:12 AM
Untuk melaksanakan iterator tersuai, anda perlu menentukan kaedah __iter__ dan __Next__ di dalam kelas. ① Kaedah __iter__ mengembalikan objek iterator itu sendiri, biasanya diri sendiri, bersesuaian dengan persekitaran berulang seperti untuk gelung; ② Kaedah __Next__ mengawal nilai setiap lelaran, mengembalikan elemen seterusnya dalam urutan, dan apabila tidak ada lagi item, pengecualian hentian harus dibuang; ③ Status mesti dikesan dengan betul dan keadaan penamatan mesti ditetapkan untuk mengelakkan gelung tak terhingga; ④ Logik kompleks seperti penapisan talian fail, dan perhatikan pembersihan sumber dan pengurusan memori; ⑤ Untuk logik mudah, anda boleh mempertimbangkan menggunakan hasil fungsi penjana sebaliknya, tetapi anda perlu memilih kaedah yang sesuai berdasarkan senario tertentu.
Bagaimanakah senarai, kamus, dan menetapkan pemantauan meningkatkan kebolehbacaan kod dan kesimpulan dalam Python?
Jun 14, 2025 am 12:31 AM
Senarai Python, Kamus dan Pengumpulan Pengumpulan meningkatkan kebolehbacaan kod dan kecekapan penulisan melalui sintaks ringkas. Mereka sesuai untuk memudahkan operasi lelaran dan penukaran, seperti menggantikan gelung berbilang baris dengan kod satu baris untuk melaksanakan transformasi atau penapisan unsur. 1. Senarai pemantauan seperti [x2forxinrange (10)] secara langsung boleh menghasilkan urutan persegi; 2. KESELAMATAN KAMI seperti {x: x2forxinrange (5)} jelas menyatakan pemetaan nilai utama; 3. Penapisan bersyarat seperti [XforxinNumbersifx%2 == 0] membuat logik penapisan lebih intuitif; 4. Keadaan kompleks juga boleh tertanam, seperti menggabungkan penapisan pelbagai syarat atau ekspresi ternary; Tetapi operasi bersarang atau kesan sampingan yang berlebihan harus dielakkan untuk mengelakkan mengurangkan kebolehkerjaan. Penggunaan derivasi yang rasional dapat mengurangkan
