ListView do Django – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o Django ListViewpara exibir uma lista de tarefas para o aplicativo Todo list.

Este tutorial começa onde o tutorial do aplicativo Django Todo parou.

Introdução às visualizações baseadas em classe

Nos tutoriais anteriores, você aprendeu como construir um aplicativo de blog usando visualizações baseadas em funções.

As visualizações baseadas em funções são simples, mas flexíveis. Nas versões anteriores, o Django suportava apenas visualizações baseadas em funções. Mais tarde, o Django adicionou suporte para visualizações baseadas em classes que permitem definir visualizações usando classes.

Visualizações baseadas em classes são uma forma alternativa de implementar visualizações. Eles não substituem as visualizações baseadas em funções. No entanto, elas apresentam algumas vantagens em comparação com as visualizações baseadas em funções:

Organize o código relacionado aos métodos HTTP GETusando POSTmétodos separados, em vez de ramificação condicional na mesma função.
Aproveite múltiplas heranças para criar classes de visualização reutilizáveis.

Usaremos as visualizações baseadas em classe para construir o aplicativo Todo .

Você pode baixar o código final deste tutorial do Django ListView aqui.

Definindo uma visualização baseada em classe

Para exibir uma lista de objetos, você define uma classe que herda da ListViewclasse. Por exemplo, o seguinte define a TaskListclasse no views.pyaplicativo 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'

# ...
   
Linguagem de código:  Python  ( python )

A TaskListé uma visão baseada em classe que herda da ListViewclasse. Na TaskListclasse, definimos os seguintes atributos:

modelespecifica os objetos dos quais o modelo você deseja exibir. Neste exemplo, usamos o Taskmodelo. Internamente, o Django irá consultar todos os objetos do Taskmodelo ( Task.objects.all()) e passá-los para um modelo.
context_object_nameespecifica o nome da variável da lista de modelos no modelo. Por padrão, o Django usa object_list. No entanto, o nome object_listé bastante genérico. Portanto, substituímos context_object_namedefinindo seu valor como tasks.

Por convenção, a TaskListclasse carregará o todo/task_list.htmlmodelo. O nome do modelo segue esta convenção:

app/model_list.htmlLinguagem de código:  Python  ( python )

Se quiser definir um nome diferente, você pode usar o template_nameatributo. Neste tutorial, usaremos o nome do modelo padrão, que é task_list.html.

Defina uma rota

Altere o urls.pydo todoaplicativo para o seguinte:

from django.urls import path
from .views import home, TaskList

urlpatterns = [
    path('', home, name='home'),
    path('tasks/', TaskList.as_view(),name='tasks'),
]
Linguagem de código:  Python  ( python )

Como funciona.

Primeiro, importe a TaskListclasse do views.pymódulo.

from .views import home, TaskListLinguagem de código:  Python  ( python )

Segundo, defina tasks/o URL que exibe a lista de tarefas:

path('tasks/', TaskList.as_view(),name='tasks'),Linguagem de código:  Python  ( python )

Neste código, mapeamos a URL tasks/para o resultado do as_view()método da TaskListclasse.

Observe que você pode especificar os atributos da TaskListclasse no as_view()método. Por exemplo, você pode passar um nome de modelo para o as_view()método da seguinte maneira:

path('tasks/', TaskList.as_view(template_name='mytodo.html'),name='tasks'),Linguagem de código:  Python  ( python )

O as_view()método possui argumentos que correspondem aos atributos da TaskListclasse.

Criando um modelo ListView do Django

Defina o task_list.htmlno templates/tododiretório do Todoaplicativo:

{%extends 'base.html'%}

{%block content%}

<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, you have no pending tasks!</p>
	{% endif %}
	</ul>
</div>
{%endblock content%}Linguagem de código:  HTML, XML  ( xml )

O task_list.htmlmodelo estende o base.htmlmodelo do projeto. No task_list.htmlmodelo, iteramos tasks QuerySete exibimos cada um deles como um item em uma lista.

Além disso, adicionamos a completedclasse CSS à atag se a tarefa for concluída. Esta classe CSS adicionará uma ~~linha ao item~~ .

Se tasks QuerySetestiver vazio, exibimos uma mensagem informando que não há tarefas pendentes.

Incluindo link ListView no modelo base

Modifique o base.htmlmodelo para incluir o My Taskslink na navegação:

{%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>

    <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>© Copyright {% now "Y" %} by <a href="https://tutorials.acervolima.com">Python Tutorial</a></p>
            </div>
        </footer>
    </body>

</html>
Linguagem de código:  HTML, XML  ( xml )

Se você abrir o URL:

http://128.0.0.1:8000/tasks/Linguagem de código:  Python  ( python )

você verá a lista de tarefas da seguinte maneira:

Você pode baixar o código final deste tutorial do Django ListView aqui.

Resumo

Crie uma visualização baseada em classe que exiba uma lista de objetos herdando da ListViewclasse.

Aplicativo Django Todo

Django DetalheView