Précédent

Suivant

Exercice - Implémenter des vues génériques pour afficher des données

Effectué

Nous souhaitons créer une page de détails pour les chiens. Nous allons utiliser la vue générique DetailView pour réduire la quantité de code à créer.

Important

Cet exercice part du principe que vous avez effectué les étapes de configuration décrites plus haut dans ce module.

Créer une vue DogDetail

Nous allons commencer par créer la classe de la vue détaillée.

1. Dans Visual Studio Code, ouvrez dog_shelters/views.py.

2. Sous la ligne # TODO: Import generic views, ajoutez le code suivant pour importer le module de vues génériques.

   # TODO: Import generic views
   from django.views import generic
   

3. Ajoutez le code suivant en bas de views.py pour créer la vue générique pour DogDetail et définir le modèle, le template et l’objet de contexte.

   class DogDetailView(generic.DetailView):
       model = models.Dog
       template_name = 'dog_detail.html'
       context_object_name = 'dog'
   

Inscrire la vue détaillée

Une fois la vue créée, nous pouvons inscrire le chemin.

1. Ouvrez dog_shelters/urls.py.

2. Sous la ligne # TODO: Register detail view, ajoutez le code suivant pour inscrire le chemin de DogDetailView.

   # TODO: Register detail view
   path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
   

   Important

   N’oubliez pas la virgule à la fin de la ligne.

Créer le modèle HTML

Vous allez maintenant créer le modèle HTML pour afficher les détails du chien. Le nom de l’objet sera dog, le même que celui défini lors de la création du formulaire.

1. Dans Visual Studio Code, créez un fichier dans dog_shelters/templates nommé dog_form.html.

2. Ajoutez le code suivant à dog_detail.html pour créer le modèle afin d’afficher les détails du chien.

   {% extends 'base.html' %}
   
   {% block title %}
   {{ dog.name }}
   {% endblock %}
   
   {% block content %}
   <h2>{{ dog.name }}</h2>
   <div>About {{ dog.name }} - {{ dog.description }}</div>
   {% endblock %}
   

Mettre à jour la page de détails du refuge pour inclure notre lien

Une fois notre chemin inscrit et le modèle créé, nous pouvons mettre à jour le modèle de détails du refuge pour inclure des liens vers la page de détails de notre chien.

1. Ouvrez dog_shelters/templates/shelter_detail.html.

2. Sous la ligne {# TODO: Add link to dogs #}, ajoutez le code suivant afin de créer pour chaque chien un lien vers la vue détaillée.

   {# TODO: Add link to dogs #}
   <a href="{% url 'dog_detail' dog.id %}">
       {{dog.name}}
   </a>
   
   

Tester votre page

Avec tous les éléments créés, consultons notre page en action.

1. Enregistrez tous les fichiers en sélectionnant Fichier>Tout enregistrer.

2. Dans votre navigateur, accédez à http://localhost:8000.

3. Dans la liste des refuges, sélectionnez Contoso.

4. Dans la liste des chiens, sélectionnez Roscoe.

   La page des détails s’affiche.

   

Nous avons maintenant créé un affichage à l’aide du système de vues génériques dans Django.

Continuer