Django super introduction par les débutants Python! Partie 5 J'ai créé une application de journal super simple avec une vue générale basée sur la classe

À propos de cet article

Voici la page de sortie du résultat de l'apprentissage de Django chez Udemy. L'article précédent est ici .

Cette fois, en utilisant la vue à usage général basée sur les classes, Je voudrais créer une application de journal super simple avec Django. Les vues génériques basées sur les classes rendent la notation de views.py très facile.

Livrables

haut de page

Page de détails

Mettre à jour la page

Supprimer la page

Préparation préalable

Tout d'abord, de la construction de l'environnement. C'est le même que l'article précédent, mais je vais le décrire au cas où. Créez un projet appelé Second et une application Django appelée journal.

django-admin startproject Second
cd Second
py .\manage.py startapp diary

Enregistrez l'application Agenda dans settings.py et réglez l'heure japonaise

Second\Second\sattings.py

INSTALLED_APPS = [
    'diary',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

admin.py Paramètres de compte pour l'administrateur et paramètres pour l'écran de gestion. Cette fois, ce n'est pas nécessaire car il n'y a pas de fonction de connexion, mais je ne décrirai que comment le faire.

py manage.py createsuperuser #Commande de création d'utilisateur administrateur

Ajoutez admin.py comme ci-dessous.

Second\Second\admin.py

from django.contrib import admin
from .models import Day

admin.site.register(Day)

models.py models.py est presque le même que l'article précédent. Ajoutez def __str __ (self): pour faciliter la compréhension lors de la navigation sur le site d'administration. En ajoutant cela, ce sera la notation de chaîne de caractères du titre lors de la navigation dans les données enregistrées dans le modèle Day sur le site d'administration.

Second\Second\models.py

from django.db import models
from django.utils import timezone

class Day(models.Model):
    #Bien que non déclarée ici, la clé primaire pk est automatiquement enregistrée.
    title = models.CharField('Titre', max_length=200)
    text = models.TextField('Texte')
    date = models.DateField('Date', default=timezone.now)

    def __str__(self):
        return self.title

Après avoir entré models.py, enregistrez-le dans la base de données avec manage.py. Accédez au dossier où manage.py est enregistré et enregistrez-le avec la commande suivante.

py .\manage.py makemigrations
py .\manage.py migrate

Lors de l'exécution de makemigrations, vous pouvez voir une erreur de récursivité. RecursionError: maximum recursion depth exceeded while calling a Python object

L'une des causes de l'erreur est que le nom du projet contient des caractères autres que des caractères alphanumériques demi-largeur. Cela peut se produire si le chemin contient des espaces vides. Veuillez noter que le chemin peut contenir des espaces vides si vous l'enregistrez dans un dossier spécial tel que OneDirve.

urls.py C'est le même que l'article précédent, mais je vais le décrire au cas où. Dans urls.py directement sous le projet, définissez pour accéder à urls.py directement sous l'application.

Second\Second\urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('diary/', include('diary.urls')),
]

Entrez urls.py directement sous l'application comme suit.

Second\diary\urls.py

from django.urls import path
from . import views

app_name = 'diary'

urlpatterns = [
    path('', views.index, name='index'), #Page de liste
    path('add/', views.add, name='add'), #Page supplémentaire
    path('update/<int:pk>/', views.update, name='update'), #Mettre à jour la page
    path('delete/<int:pk>', views.delete, name='delete'), #Supprimer la page
    path('detail/<int:pk>', views.detail, name='detail'), #Page de détails
]

forms.py C'est le même que l'article précédent, mais je vais le décrire au cas où. Avant de créer views.py, créez un nouveau fichier appelé forms.py. Créez un fichier appelé forms.py dans le même dossier que views.py (Second \ diary) Veuillez faire le contenu comme suit.

Second\diary\forms.py

from django import forms
from .models import Day


class DayCreateForm(forms.ModelForm):

    class Meta:
        model = Day
        fields = '__all__'

Bien entendu, lors de la création ou de la mise à jour d'un article, un champ de saisie est obligatoire dans le fichier HTML. Afin de créer le champ de saisie, il est nécessaire de configurer quelque chose appelé Formulaire dans le fichier HTML.

C'est ce forms.py qui définit le type de données transmises à ce formulaire. Cette fois, passons toutes les données de la classe Day définie dans models.py. Si vous voulez tout passer, définissez `` fields = '__ all __' ''.

Le nom de classe DayCreateForm est arbitraire, La classe Meta est une phrase fixe. Ne le changeons pas.

views.py Créez une fonction pour afficher la liste, ajouter, mettre à jour, supprimer et détailler les pages dans views.py. La dernière fois, j'ai osé le remplir avec une fonction, mais Django a une fonction divine appelée vue générale basée sur les classes. Cette fonctionnalité divine le rend très facile à remplir.

Second\diary\views.py

from django.shortcuts import render, redirect, get_object_or_404
from .forms import DayCreateForm
from .models import Day
from django.views import generic
from django.urls import reverse_lazy

class IndexView(generic.ListView):
    model = Day
    paginate_by = 3

class DayCreateView(generic.CreateView):
    model = Day
    form_class = DayCreateForm
    success_url = reverse_lazy('diary:index')

class DayUpdateView(generic.UpdateView):
    #Il a presque le même contenu que CreateView, mais passe non seulement le formulaire mais également l'objet Day.
    model = Day
    form_class = DayCreateForm
    success_url = reverse_lazy('diary:index')

class DayDeleteView(generic.DeleteView):
    model = Day
    success_url = reverse_lazy('diary:index')

class DayDetailView(generic.DetailView):
    model = Day

Créer un fichier html

Enfin, créez un fichier html. C'est presque la même chose que la dernière fois, mais il y a une différence par rapport à la dernière fois. Autrement dit, le nom du fichier modèle est défini comme standard.

Plus précisément, dans un fichier modèle qui utilise la classe ListView, Le nom de fichier <nom de l'application> _list.html '' est enregistré comme standard. Avec DetailView, <nom de l'application> _detail.html '' Avec DeleteView, `` <nom de l'application> _confirm_delete.html '' Il est possible d'enregistrer un fichier modèle avec un nom non standard, Il peut être plus sûr de s'inscrire avec un nom standard pour que les autres puissent le voir plus facilement.

Création de base.html

Tout d'abord, créez base.html. C'est le fichier html qui est le chef-d'œuvre de tout.

• CSS et JavaScript utilisent Bootstrap.

Liez la page de liste et la création d'un nouvel article dans la partie nav. Lien avec {% url '<nom de l'application>: <valeur de nom définie dans urls.py>'%}.

Second\diary\templates\diary\base.html

<!doctype html>
<html lang="ja">
  <head>
    <title>Application de l'agenda</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>

    <div class="container">
      <nav class="nav">
        <a class="nav-link active" href="{% url 'diary:index' %}">liste</a>
        <a class="nav-link" href="{% url 'diary:add' %}">ajouter à</a>
      </nav>
      {% block content %}
      {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

page.html Cette fois, nous allons ajouter une fonction de nation de page. Enregistrez-le dans le dossier du modèle avec le nom de fichier page.html et écrivez comme suit.

Second\diary\templates\diary\page.html

<nav aria-label="Page navigation">
  <ul class="pagination">
 
      {% if page_obj.has_previous %}
        <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      {% endif %}
    
      {% for link_page in page_obj.paginator.page_range %}
        {% if link_page == page_obj.number %}
          <li class="page-item active">
            <a class="page-link" href="?page={{ link_page }}">
              {{ link_page }}
            </a>
          </li>
        {% else %}
          <li class="page-item">
            <a class="page-link" href="?page={{ link_page }}">
              {{ link_page }}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    
      {% if page_obj.has_next %}
        <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
      {% endif %}
    
  </ul>
</nav>

Création de day_list.html

C'est une page de liste d'articles. Dans l'article précédent, le nom du fichier était day_index, Cette fois, nous utilisons la classe ListView, donc Inscrivez-vous avec le nom de fichier day_list.html.

Depuis views.py, day_list reçoit le contexte clé, donc Vous pouvez utiliser day_list pour accéder aux titres des articles et aux dates stockées dans votre base de données. Ceci est affiché à l'aide de l'instruction for.

C'est un mécanisme pour accéder à la page de mise à jour de chaque article en passant day.pk pour mettre à jour et supprimer.

Enfin, incluez la fonction de pagination avec {% include'diary / page.html%}.

Second\diary\templates\diary\day_list.html

{% extends 'diary/base.html' %}

{% block content %}

<h1>Liste de journal</h1>

<table class="table">
    <thead>
        <tr>
            <th>Titre</th>
            <th>Date</th>
            <th>Processus de mise à jour</th>
            <th>Supprimer le processus</th>
        </tr>
    </thead>
    <tbody>
    {% for day in object_list %}
        <tr>
            <td><a href="{% url 'diary:detail' day.pk %}">{{ day.title }}</a></td>
            <td>{{ day.date }}</td>
            <td><a href="{% url 'diary:update' day.pk %}">mise à jour</a></td>
            <td><a href="{% url 'diary:delete' day.pk %}">Effacer</a></td>
        </tr>
    {% endfor %}
    </tbody>
</table>

{% include 'diary/page.html' %}

{% endblock %}

Création de day_detail.html

Ceci est la page de détails. Puisqu'il utilise la classe DetailView, enregistrez-le sous day_detail.html.

Le titre, le texte et la date s'affichent. Les sauts de ligne sont ajoutés après le texte Il s'agit d'exprimer des sauts de ligne sur HTML. Il n'y a pas de problème même sans cela.

Second\diary\templates\diary\day_detail.html.html

{% extends 'diary/base.html' %}
{% block content %}
    <table class="table">
        <tr>
            <th>Titre</th>
            <td>{{ day.title }}</td>
        </tr>
        <tr>
            <th>Texte</th>
            <td>{{ day.text | linebreaksbr}}</td>
        </tr>
        <tr>
            <th>Date</th>
            <td>{{ day.date }}</td>
        </tr>
    </table>
    <a href="{% url 'diary:update' day.pk %}"><button class="btn btn-primary">mise à jour</button></a>
    <a href="{% url 'diary:delete' day.pk %}"><button class="btn btn-danger">Effacer</button></a>    
    
{% endblock %}

Création de day_form.html

Créer un formulaire. Il est utilisé pour créer et mettre à jour des articles.

Second\diary\templates\diary\day_form.html

{% extends 'diary/base.html' %}

{% block content %}
<form action="" method="POST">
    <table class="tabel">
        <tr>
            <th>Titre</th>
            <td>{{ form.title }}</td>
        </tr>
        <tr>
            <th>Texte</th>
            <td>{{ form.text }}</td>
        </tr>
        <tr>
            <th>Date</th>
            <td>{{ form.date }}</td>
        </tr>
    </table>

    <button type="submit" class="btn btn-primary">Envoyer</button>
    {% csrf_token %}
</form>
{% endblock %}

Création de day_confirm_delete.html

Ceci est la page de suppression. Puisque nous utilisons DeleteView Attribuez-lui le nom day_confirm_delete.html.

Second\diary\templates\diary\day_confirm_delete.html

{% extends 'diary/base.html' %}
{% block content %}
<form action="" method="POST">
    <table class="table">
        <tr>
            <th>Titre</th>
            <td>{{ day.title }}</td>
        </tr>
        <tr>
            <th>Texte</th>
            <td>{{ day.text }}</td>
        </tr>
        <tr>
            <th>Date</th>
            <td>{{ day.date }}</td>
        </tr>
    </table>
    <p>Supprimez ces données.</p>
    <button type="submit" class="btn btn-primary">Effacer</button>
    {% csrf_token %}
</form>
{% endblock %}

Contrôle de fonctionnement

Après cela, vérifions le fonctionnement avec le serveur d'exécution py manage.py. Si vous pouvez créer / mettre à jour / supprimer un article, vous réussissez. Assurez-vous également que la fonction de pagination est activée.