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
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 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 ()
Apakah teknik pengaturcaraan dinamik, dan bagaimana saya menggunakannya dalam Python?
Jun 20, 2025 am 12:57 AM
Pengaturcaraan Dinamik (DP) mengoptimumkan proses penyelesaian dengan memecahkan masalah kompleks ke dalam subproblem yang lebih mudah dan menyimpan hasilnya untuk mengelakkan pengiraan berulang. Terdapat dua kaedah utama: 1. Top-down (Hafalan): Recursif menguraikan masalah dan menggunakan cache untuk menyimpan hasil pertengahan; 2. Bottom-Up (Jadual): Bangun secara beransur-ansur dari keadaan asas. Sesuai untuk senario di mana nilai maksimum/minimum, penyelesaian optimum atau subproblem yang bertindih diperlukan, seperti urutan Fibonacci, masalah backpacking, dan lain -lain.
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.
Apakah trend yang muncul atau arahan masa depan dalam bahasa pengaturcaraan Python dan ekosistemnya?
Jun 19, 2025 am 01:09 AM
Trend masa depan dalam Python termasuk pengoptimuman prestasi, jenis yang lebih kuat, peningkatan runtime alternatif, dan pertumbuhan berterusan bidang AI/ML. Pertama, Cpython terus mengoptimumkan, meningkatkan prestasi melalui masa permulaan yang lebih cepat, pengoptimuman panggilan fungsi dan operasi integer yang dicadangkan; Kedua, jenis petikan sangat terintegrasi ke dalam bahasa dan alat untuk meningkatkan pengalaman keselamatan dan pembangunan kod; Ketiga, runtime alternatif seperti Pyscript dan Nuitka menyediakan fungsi baru dan kelebihan prestasi; Akhirnya, bidang AI dan Sains Data terus berkembang, dan perpustakaan yang muncul mempromosikan pembangunan dan integrasi yang lebih cekap. Trend ini menunjukkan bahawa Python sentiasa menyesuaikan diri dengan perubahan teknologi dan mengekalkan kedudukan utama.
Bagaimana saya melakukan pengaturcaraan rangkaian di python menggunakan soket?
Jun 20, 2025 am 12:56 AM
Modul soket Python adalah asas pengaturcaraan rangkaian, menyediakan fungsi komunikasi rangkaian peringkat rendah, sesuai untuk membina aplikasi klien dan pelayan. Untuk menyediakan pelayan TCP asas, anda perlu menggunakan socket.socket () untuk membuat objek, mengikat alamat dan port, panggilan. Listen () untuk mendengar sambungan, dan menerima sambungan klien melalui .accept (). Untuk membina klien TCP, anda perlu membuat objek soket dan panggilan .Connect () untuk menyambung ke pelayan, kemudian gunakan .sendall () untuk menghantar data dan .recv () untuk menerima respons. Untuk mengendalikan pelbagai pelanggan, anda boleh menggunakan 1. Threads: Mulakan benang baru setiap kali anda menyambung; 2. Asynchronous I/O: Sebagai contoh, Perpustakaan Asyncio dapat mencapai komunikasi yang tidak menyekat. Perkara yang perlu diperhatikan
Polimorfisme dalam kelas python
Jul 05, 2025 am 02:58 AM
Polimorfisme adalah konsep teras dalam pengaturcaraan berorientasikan objek Python, merujuk kepada "satu antara muka, pelbagai pelaksanaan", yang membolehkan pemprosesan bersatu pelbagai jenis objek. 1. Polimorfisme dilaksanakan melalui penulisan semula kaedah. Subkelas boleh mentakrifkan semula kaedah kelas induk. Sebagai contoh, kaedah bercakap () kelas haiwan mempunyai pelaksanaan yang berbeza dalam subkelas anjing dan kucing. 2. Penggunaan praktikal polimorfisme termasuk memudahkan struktur kod dan meningkatkan skalabilitas, seperti memanggil kaedah cabutan () secara seragam dalam program lukisan grafik, atau mengendalikan tingkah laku umum watak -watak yang berbeza dalam pembangunan permainan. 3. Polimorfisme pelaksanaan Python perlu memenuhi: Kelas induk mentakrifkan kaedah, dan kelas kanak -kanak mengatasi kaedah, tetapi tidak memerlukan warisan kelas induk yang sama. Selagi objek melaksanakan kaedah yang sama, ini dipanggil "jenis itik". 4. Perkara yang perlu diperhatikan termasuk penyelenggaraan
Bagaimana saya mengiris senarai dalam python?
Jun 20, 2025 am 12:51 AM
Jawapan teras kepada pengirim senarai Python adalah menguasai sintaks [Start: End: Step] dan memahami kelakuannya. 1. Format asas pengirim senarai adalah senarai [Mula: akhir: langkah], di mana permulaan adalah indeks permulaan (termasuk), akhir adalah indeks akhir (tidak termasuk), dan langkah adalah saiz langkah; 2. Omit Mula secara lalai bermula dari 0, endek akhir secara lalai hingga akhir, omite langkah secara lalai kepada 1; 3. Gunakan my_list [: n] untuk mendapatkan item n pertama, dan gunakan my_list [-n:] untuk mendapatkan item n yang terakhir; 4. Gunakan langkah untuk melangkau unsur -unsur, seperti my_list [:: 2] untuk mendapatkan angka, dan nilai langkah negatif dapat membalikkan senarai; 5. Kesalahpahaman biasa termasuk indeks akhir tidak
