[DOCKER] Tutoriel Django (Créer une application de blog) ③ --Affichage de la liste d'articles

La dernière fois, dans Tutoriel Django (création d'application de blog) ② - création de modèles, préparation du site de gestion, j'ai pu confirmer jusqu'à la création d'un article sur le site de gestion.

Cette fois, nous pourrons afficher une liste d'articles créés sur le site de gestion.

préparation du modèle (création de fichier)

Créons d'abord un modèle. Créez post_list.html sous templates / blog.

└── templates
    └── blog
        ├── index.html
        └── post_list.html

voir la préparation

Voici une petite explication importante.

Dans Django, vous pouvez facilement extraire un modèle pour afficher un article en utilisant un mécanisme appelé ** vue générale basée sur les classes **. Vous pouvez afficher le modèle et vous pourrez créer des applications efficacement. Au fait, la dernière fois que j'ai joué avec views.py, il y avait une notation ** générique **, qui est également une déclaration nécessaire en vue de l'utilisation de vues génériques basées sur les classes.

view.py

from django.views.generic import TemplateView

Il existe de nombreux types de vues de classe génériques, dont celles qui sont utilisées simplement pour afficher le modèle. Il s'agit du ** TemplateView ** utilisé pour afficher index.html. Pour afficher index.html, le modèle à appeler a été spécifié dans views.py.

view.py

class IndexView(TemplateView):
    template_name = 'blog/index.html'

De plus, jusqu'à présent, par souci de clarté, elle était déclarée comme génétique, puis la classe à utiliser était spécifiée et importée. Vous pouvez également l'appeler sous la forme generic.xxxView, alors réécrivons un peu views.py.

views.py(Après réécriture)

from django.views import generic

class IndexView(genetic.TemplateView):
    template_name = 'blog/index.html'

Je vais appeler beaucoup de vues génériques basées sur les classes, j'ai donc nettoyé la première déclaration.

Maintenant, cette fois, nous devons non seulement afficher le modèle simplement, mais également appeler le modèle d'information de l'article à partir de la base de données. Par conséquent, j'utilise une autre vue générique basée sur les classes appelée ** ListView **, mais l'utilisation est similaire à celle de TemplateView.

Tout ce que vous avez à faire est de déclarer le modèle que vous souhaitez utiliser en premier, d'écrire la classe et de spécifier le modèle à appeler.

views.py(Ajouter ListView)

from django.views import generic
from .models import Post #Importer le modèle de poste

class IndexView(genetic.TemplateView):
    template_name = 'blog/index.html'

class PostListView(generic.ListView): #Hériter de la classe générique ListView
    model = Post #Appelez le modèle que vous souhaitez lister

En incluant la description model = Post, la liste d'articles peut être transmise au modèle en tant que type de liste avec une variable ** post_list **.

Ceux qui se sont souvenus de l'époque où TemplateView était utilisé ici et ont pensé "Pourquoi ne pas spécifier le modèle?" Sont nets.

Bien sûr, vous pouvez le spécifier, mais en fait, generic.ListView a une fonction pratique qui l'appelle même si vous ne le spécifiez pas en faisant le nom de fichier du modèle selon la règle. (Cependant, comme il est plus facile pour un tiers de l'indiquer clairement, je pense qu'il peut être intentionnellement décrit.)

La règle est de réduire le nom du modèle, tel que "post_list.html", et dans le cas de ListView, d'utiliser la chaîne de caractères "liste" séparée par un trait de soulignement comme nom de fichier. (Cela dépend de la classe que vous utilisez, donc je l'expliquerai plus tard.)

Vous disposez maintenant d'une vue qui affiche le modèle, post_list.html, et qui transmet en même temps la liste des articles au modèle.

Recevez la liste des articles côté modèle

Pour recevoir le modèle passé à post_list.html, il existe une méthode de description propre à Django.

Dans le modèle de Django, vous pouvez écrire du code Python en le plaçant dans ** {%%} **, et pour afficher la valeur dans le navigateur au format HTML, vous pouvez utiliser ** {{}} ** avec un crochet du milieu. Décris.

Cette fois, la liste d'articles est un type de liste appelé ** post_list ** et les variables sont passées comme modèle, alors développez-la avec une boucle for et extrayez chaque titre et date d'article. (Les données de chaque colonne peuvent être récupérées en spécifiant le nom de la colonne avec des points dans le nom de la variable)

post_list.html

<h1>Liste des articles</h1>

<table class="table">
  <thead>
    <tr>
      <th>Titre</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    {% for post in post_list %}
    <tr>
      <td>{{ post.title }}</td>
      <td>{{ post.date }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

Paramètres de routage

Modifiez blog / urls.py pour appeler ListView la dernière fois que vous accédez à l'URL pour afficher la liste d'articles.

blog/urls.py

from django.urls import path
from . import views

app_name = 'blog'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('list', views.PostListView.as_view(), name='list'), #Ajouter ici
]

Gardez à l'esprit que la vue, le modèle et l'URL sont impliqués lors de l'affichage de quelque chose comme cette fois.

Vérifiez l'affichage de la liste d'articles

Maintenant que le modèle est prêt à être affiché, exécutons runserver pour accéder à l'url. Depuis que j'ai défini le chemin d'URL appelé list dans l'application de blog plus tôt, Vous pouvez le consulter à l'URL ** 127.0.0.1:8000/blog/list**.

Le tableau n'est pas cool, mais vous pouvez voir que les articles enregistrés depuis le site de gestion sont affichés.

• L'apparence sera ajustée plus tard à l'aide de BootStrap, mais d'abord nous ne ferons que la base pour comprendre les bases de Django.

Il est difficile de comprendre s'il n'y en a qu'un, alors ajoutons environ deux articles du site de gestion et vérifions à nouveau.

Vous pouvez voir que le titre et la date peuvent être récupérés respectivement.

La prochaine fois, nous créerons un test unitaire qui automatise le test.

→ La prochaine fois Tutoriel Django (Créer une application de blog) ④ --Test d'unité