Django ListView trong Python

Trong bài viết này, mình sẽ tìm hiểu cách sử dụng Django ListView để hiển thị danh sách các nhiệm vụ trong ứng dụng Todo. Hướng dẫn này tiếp nối từ phần cuối của loạt bài hướng dẫn về ứng dụng Todo trong Django, mang lại một cái nhìn toàn diện và chi tiết về việc áp dụng ListView để cải thiện khả năng hiển thị và quản lý dữ liệu trong dự án của bạn.

Bạn có thể tải dự án Django ListView trong Python xuống tại đây.

Giới thiệu về các view dựa trên class Django

Trong các hướng dẫn trước, bạn đã học cách xây dựng một ứng dụng blog bằng cách sử dụng các view dựa trên hàm.

Các view dựa trên hàm đơn giản nhưng linh hoạt. Trong các phiên bản trước, Django chỉ hỗ trợ các view dựa trên hàm. Sau này, Django bổ sung hỗ trợ cho các view dựa trên lớp, cho phép bạn định nghĩa các view bằng cách sử dụng các lớp.

Bài viết này được đăng tại [free tuts .net]

Các view dựa trên lớp là một cách thay thế để triển khai các view. Chúng không thay thế các view dựa trên hàm, nhưng có một số ưu điểm so với các view dựa trên hàm:

• Tổ chức mã liên quan đến các phương thức HTTP như GET và POST bằng cách sử dụng các phương thức riêng biệt, thay vì sử dụng điều kiện trong cùng một hàm.
• Tận dụng đa thừa kế để tạo các lớp view tái sử dụng.

Mình sẽ sử dụng các view dựa trên lớp để xây dựng ứng dụng Todo.

Khởi tạo một view dựa trên class Django bằng Python

Để hiển thị danh sách các đối tượng, bạn định nghĩa một lớp kế thừa từ lớp ListView. Ví dụ, đoạn mã sau đây định nghĩa lớp TaskList trong file views.py của ứng dụng todo:

from django.shortcuts import render
from django.views.generic.list import ListView
from .models import Task

class TaskList(ListView):
    model = Task
    context_object_name = 'tasks'

Lớp TaskList là một view dựa trên lớp kế thừa từ lớp ListView. Trong lớp TaskList, mình định nghĩa các thuộc tính sau:

• model chỉ định đối tượng từ mô hình nào bạn muốn hiển thị. Trong ví dụ này, mình sử dụng mô hình Task. Django sẽ truy vấn tất cả các đối tượng từ mô hình Task (Task.objects.all()) và truyền nó vào một template.
• context_object_name chỉ định tên biến của danh sách mô hình trong template. Mặc định, Django sử dụng object_list. Tuy nhiên, tên object_list khá chung chung. Do đó, mình ghi đè context_object_name bằng cách đặt giá trị của nó là tasks.

Theo quy ước, lớp TaskList sẽ tải template todo/task_list.html. Tên template theo quy ước này:

app/model_list.html

Nếu bạn muốn đặt một tên khác, bạn có thể sử dụng thuộc tính template_name. Trong bài này, mình sẽ sử dụng tên template mặc định, đó là task_list.html.

Khởi tạo một route Django bằng Python

Thay đổi file urls.py của ứng dụng todo thành như sau:

from django.urls import path
from .views import home, TaskList
#Bài viết này được đăng tại freetuts.net
urlpatterns = [
    path('', home, name='home'),
    path('tasks/', TaskList.as_view(), name='tasks'),
]

Cách hoạt động

• Đầu tiên, nhập lớp TaskList từ mô-đun views.py.

from .views import home, TaskList

Thứ hai, định nghĩa URL tasks/ để hiển thị danh sách nhiệm vụ:

path('tasks/', TaskList.as_view(), name='tasks'),

Trong đoạn mã này, mình ánh xạ URL tasks/ tới kết quả của phương thức as_view() của lớp TaskList.

Lưu ý rằng bạn có thể chỉ định các thuộc tính của lớp TaskList trong phương thức as_view(). Ví dụ, bạn có thể truyền tên template vào phương thức as_view() như sau:

path('tasks/', TaskList.as_view(template_name='mytodo.html'), name='tasks'),

Phương thức as_view() có các tham số tương ứng với các thuộc tính của lớp TaskList.

Tạo một template Django ListView Django bằng Python

Định nghĩa file task_list.html trong thư mục templates/todo của ứng dụng Todo:

{% extends 'base.html' %}

{% block content %}
#Bài viết này được đăng tại freetuts.net
<div class="center">
    <h2>My Todo List</h2>
    {% if tasks %}
    <ul class="tasks">
        {% for task in tasks %}
            <li><a href="#" class="{% if task.completed %}completed{% endif %}">{{ task.title }}</a>
                 <div class="task-controls">
                     <a href="#"><i class="bi bi-trash"></i></a>
                     <a href="#"><i class="bi bi-pencil-square"></i></a>
                 </div>
            </li>
        {% endfor %}
    {% else %}
        <p>???? Yay, bạn không có nhiệm vụ nào đang chờ!</p>
    {% endif %}
    </ul>
</div>
{% endblock content %}

Template task_list.html kế thừa template base.html của dự án. Trong template task_list.html, mình lặp qua QuerySet tasks và hiển thị từng nhiệm vụ như một mục trong danh sách.

Ta cũng thêm lớp CSS completed vào thẻ a nếu nhiệm vụ đã hoàn thành. Lớp CSS này sẽ thêm gạch ngang vào mục.

Nếu QuerySet tasks rỗng, mình hiển thị thông báo rằng không có nhiệm vụ nào đang chờ.

Bao gồm liên kết ListView trong template cơ bản

Sửa đổi template base.html để bao gồm liên kết "My Tasks" trong phần điều hướng:

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>Todo List</title>
</head>
#Bài viết này được đăng tại freetuts.net
<body>
    <header class="header">
        <div class="container">
            <a href="{% url 'home' %}" class="logo">Todo</a>
            <nav class="nav">
                <a href="{% url 'home' %}"><i class="bi bi-house-fill"></i> Home</a>
                <a href="{% url 'tasks' %}"><i class="bi bi-list-task"></i> My Tasks</a>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            {% block content %}
            {% endblock content %}
        </div>
    </main>
    <footer class="footer">
        <div class="container">
            <p>© Bản quyền {% now "Y" %} bởi <a href="https://freetuts.net/hoc-python/django"> Freetuts.net Python Django</a></p>
        </div>
    </footer>
</body>

</html>

Nếu bạn mở URL:

http://127.0.0.1:8000/tasks/

Bạn sẽ thấy danh sách nhiệm vụ như sau:

Bạn có thể tải dự án Django ListView trong Python xuống tại đây.

Kết bài

Việc sử dụng Django ListView không chỉ giúp bạn hiển thị danh sách các đối tượng một cách hiệu quả mà còn giúp mã nguồn của bạn trở nên gọn gàng và dễ bảo trì hơn. Bằng cách tận dụng các tính năng của class-based views, bạn có thể tổ chức mã nguồn theo cách rõ ràng, phân tách các xử lý liên quan đến HTTP methods và dễ dàng mở rộng hoặc tái sử dụng các thành phần của ứng dụng.

Trong hướng dẫn này, mình đã cùng nhau xây dựng một ListView để hiển thị danh sách các nhiệm vụ trong ứng dụng Todo. Bạn đã học cách định nghĩa một class-based view, cấu hình URL, tạo template để hiển thị dữ liệu và tích hợp các liên kết vào giao diện điều hướng của ứng dụng. Với những kiến thức này, bạn có thể áp dụng để xây dựng các ListView khác cho các phần khác nhau của dự án, giúp cải thiện trải nghiệm người dùng và tối ưu hóa hiệu suất của ứng dụng.

Hy vọng rằng hướng dẫn này sẽ là một tài nguyên hữu ích giúp bạn tiếp tục khám phá và làm chủ Django, đồng thời phát triển các ứng dụng web mạnh mẽ và linh hoạt hơn.