Mencipta apl Tugasan dengan Django dan HTMX - Sebahagian menambah Todos baharu

Sekarang kami telah menambahkan keupayaan untuk menghidupkan dan mematikan item todo pada Bahagian 3, mari tambahkan borang untuk mencipta item Todo baharu, menggunakan HTMX dan laluan yang menerima permintaan POST.

Ia akan kelihatan seperti ini:

Memperluaskan pandangan untuk menerima permintaan POST

Untuk membuat siaran baharu, kami mempunyai dua pilihan biasa untuk laluan POST: satu ialah mempunyai laluan yang berasingan, seperti /tasks/create, dan satu lagi ialah menggunakan laluan yang sama yang telah kami sediakan untuk menyenaraikan tugasan, /tugas. Kami akan memilih yang kedua, adakah yang terbaik mematuhi REST dan amalan hipermedia, tetapi kedua-duanya baik.

Memandangkan URL sudah ditakrifkan, kami hanya perlu menukar paparan tugas dalam core/views.py. Untuk memastikan kod lebih bersih, kami akan menyimpan kod yang mengendalikan permintaan POST pada fungsi yang berasingan.

def _create_todo(request):  # <-- NEW
    title = request.POST.get("title")
    if not title:
        raise ValueError("Title is required")

    todo = Todo.objects.create(title=title, user=request.user)
    return render(request, "tasks.html#todo-item-partial", {"todo": todo})


@require_http_methods(["GET", "POST"])  # <-- NEW
@login_required
def tasks(request):
    if request.method == "POST":  # <-- NEW
        return _create_todo(request)

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

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

Pada templat/tasks.html kami akan menambah borang baharu

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

{% melanjutkan "_base.html" %}
{% muatkan separa %}

{% kandungan blok %}
<div>



<p>Semua kod yang menarik ada dalam teg borang:</p>

<ul>
<li>
hx-post="{% url 'tasks' %}" menunjukkan bahawa borang akan membuat permintaan POST ke url tugasan;</li>
<li>
hx-swap="beforeend" dan hx-target="#todo-items" berfungsi bersama; ia menetapkan sasaran respons menjadi teg #todo-item (ul), dan ia harus menambah serpihan baharu sebelum akhir senarai. Jika kami ingin menambah item baharu di bahagian atas, kami boleh menggunakan afterbegin.</li>
<li>
hx-on::after-request="this.reset()" akan menetapkan semula borang (bersihkan teks input) selepas permintaan dihantar; ini akan membolehkan kami menambah beberapa tugasan serentak, dengan menaip dan menekan "Enter" untuk menyerahkan borang.</li>
</ul>

<p>Mari kita lihat ia beraksi!</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748091013.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos" /></p>

<h2>
  
  
  Berurusan dengan permintaan yang perlahan
</h2>

<p>Sekarang kita boleh menambah item baharu , mari kita atasi dengan isu UX biasa: kependaman. Walaupun ujian kami pada localhost agak pantas, dalam dunia nyata permintaan untuk membuat dan menogol item tugasan mungkin mengambil masa satu atau dua saat dan pengguna mungkin tidak pasti perkara yang sedang berlaku.</p>

<p>Untuk butang serah, kami akan menggunakan atribut hx-disable-elt dan menetapkannya kepada butang serah, dalam tasks.html`</p>

<p>jinja<br>
      <form hx-post="{% url 'tasks' %}" <br>
        hx-swap="beforeend" <br>
        hx-target="#todo-item" <br>
        hx-on::after-request="this.reset();"<br>
        hx-disabled-elt="#submit" <!-- BARU --><br>
       >
        <input type="text" required name="title" placeholder="Add a new todo" class="input input-bordered flex-1 text-lg" /><br>
        <butang>
      </form><br>
<p>Untuk fungsi togol, kami boleh melumpuhkan kotak pilihan semasa permintaan menggunakan hx-on:click</p>

<p>`jinja</p>

<pre class="brush:php;toolbar:false"> <li>

<p>`</p>

<p>Kami boleh memaksa permintaan menjadi perlahan dengan membuka alatan/rangkaian pembangun dan menetapkan pilihan Pendikit kepada 3G (dalam Firefox anda boleh memilih pilihan yang lebih perlahan)</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748646074.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>Jom semak bagaimana keadaannya:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173595748873709.jpg" alt="Creating a To-Do app with Django and HTMX - Part adding new Todos"></p>

<p>Kami sudah selesai sekarang! Dalam bahagian 5, kami akan menambah beberapa ujian pada pandangan kami, yang mungkin merupakan pengalaman yang lebih baik daripada menguji kod sebelah pelanggan :)</p>


          

            
        

Atas ialah kandungan terperinci Mencipta apl Tugasan dengan Django dan HTMX - Sebahagian menambah Todos baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!