Django super Einführung von Python-Anfängern! Teil 5 Ich habe eine supereinfache Tagebuchanwendung mit einer klassenbasierten Allzweckansicht erstellt

Über diesen Artikel

Dies ist die Ausgabeseite des Ergebnisses des Lernens über Django bei Udemy. Der vorherige Artikel ist hier .

Diesmal unter Verwendung der klassenbasierten Allzweckansicht Ich möchte mit Django eine supereinfache Tagebuchanwendung erstellen. Klassenbasierte generische Ansichten machen die Notation von views.py sehr einfach.

Ergebnisse

oberste Seite

Detailseite

Seite aktualisieren

Seite löschen

Vorbereitungen

Zunächst aus dem Umweltbau. Es ist das gleiche wie im vorherigen Artikel, aber ich werde es nur für den Fall beschreiben. Erstellen Sie ein Projekt namens Second und eine Django-App namens Diary.

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

Registrieren Sie die Tagebuch-App in settings.py und stellen Sie die japanische Zeit ein

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 Kontoeinstellungen für den Administrator und Einstellungen für den Verwaltungsbildschirm. Diesmal ist es nicht notwendig, da es keine Anmeldefunktion gibt, aber ich werde nur beschreiben, wie es geht.

py manage.py createsuperuser #Administrator-Benutzererstellungsbefehl

Fügen Sie admin.py wie folgt hinzu.

Second\Second\admin.py

from django.contrib import admin
from .models import Day

admin.site.register(Day)

models.py models.py ist fast das gleiche wie im vorherigen Artikel. Fügen Sie def __str __ (self): hinzu, um das Verständnis beim Surfen auf der Admin-Site zu erleichtern. Wenn Sie dies hinzufügen, wird die Zeichenkettennotation des Titels beim Durchsuchen der im Tagesmodell auf der Administrationssite registrierten Daten angezeigt.

Second\Second\models.py

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

class Day(models.Model):
    #Ich habe es hier nicht deklariert, aber der Primärschlüssel pk wird automatisch registriert.
    title = models.CharField('Titel', max_length=200)
    text = models.TextField('Text')
    date = models.DateField('Datum', default=timezone.now)

    def __str__(self):
        return self.title

Registrieren Sie es nach der Eingabe von models.py in der Datenbank mit manage.py. Wechseln Sie in den Ordner, in dem manage.py gespeichert ist, und registrieren Sie ihn mit dem folgenden Befehl.

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

Beim Ausführen von Makemigrationen wird möglicherweise ein Rekursionsfehler angezeigt. RecursionError: maximum recursion depth exceeded while calling a Python object

Eine der Fehlerursachen ist, dass der Projektname andere Zeichen als alphanumerische Zeichen halber Breite enthält. Dies kann passieren, wenn der Pfad Leerzeichen enthält. Bitte beachten Sie, dass der Pfad Leerzeichen enthalten kann, wenn Sie ihn in einem speziellen Ordner wie OneDirve speichern.

urls.py Es ist das gleiche wie im vorherigen Artikel, aber ich werde es nur für den Fall beschreiben. Stellen Sie in urls.py direkt unter dem Projekt ein, dass Sie direkt unter der App zu urls.py wechseln.

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')),
]

Geben Sie urls.py wie folgt direkt unter der App ein.

Second\diary\urls.py

from django.urls import path
from . import views

app_name = 'diary'

urlpatterns = [
    path('', views.index, name='index'), #Listenseite
    path('add/', views.add, name='add'), #Zusätzliche Seite
    path('update/<int:pk>/', views.update, name='update'), #Seite aktualisieren
    path('delete/<int:pk>', views.delete, name='delete'), #Seite löschen
    path('detail/<int:pk>', views.detail, name='detail'), #Detailseite
]

forms.py Es ist das gleiche wie im vorherigen Artikel, aber ich werde es nur für den Fall beschreiben. Erstellen Sie vor dem Erstellen von views.py eine neue Datei mit dem Namen forms.py. Erstellen Sie eine Datei mit dem Namen forms.py im selben Ordner wie views.py (Second \ diary). Bitte machen Sie den Inhalt wie folgt.

Second\diary\forms.py

from django import forms
from .models import Day


class DayCreateForm(forms.ModelForm):

    class Meta:
        model = Day
        fields = '__all__'

Natürlich ist beim Erstellen oder Aktualisieren eines Artikels ein Eingabefeld in der HTML-Datei erforderlich. Um das Eingabefeld zu erstellen, muss in der HTML-Datei etwas namens Form konfiguriert werden.

Diese forms.py definiert, welche Art von Daten an dieses Formular übergeben werden. Lassen Sie uns dieses Mal alle Daten der in models.py definierten Day-Klasse übergeben. Wenn Sie alles übergeben möchten, setzen Sie fields = '__ all __'.

Der Klassenname DayCreateForm ist beliebig. Die darin enthaltene Klasse Meta ist eine feste Phrase. Lass es uns nicht ändern.

views.py Erstellen Sie eine Funktion zum Anzeigen von Listen, Hinzufügen, Aktualisieren, Löschen und Detaillieren von Seiten in views.py. Das letzte Mal habe ich es gewagt, es mit einer Funktion zu füllen, aber Django hat eine göttliche Funktion, die als klassenbasierte Allzweckansicht bezeichnet wird. Dieses göttliche Merkmal macht es sehr einfach auszufüllen.

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):
    #Es hat fast den gleichen Inhalt wie CreateView, übergibt jedoch nicht nur das Formular, sondern auch das Day-Objekt.
    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

Erstellen einer HTML-Datei

Erstellen Sie schließlich eine HTML-Datei. Dies ist fast das gleiche wie beim letzten Mal, aber es gibt einen Unterschied zum letzten Mal. Das heißt, der Name der Vorlagendatei ist als Standard definiert.

Insbesondere in einer Vorlagendatei, die die ListView-Klasse verwendet, Der Dateiname <App-Name> _list.html ist standardmäßig registriert. Mit DetailView <App-Name> _detail.html Mit DeleteView <App-Name> _confirm_delete.html Es ist möglich, eine Vorlagendatei mit einem nicht standardmäßigen Namen zu registrieren. Es kann sicherer sein, sich mit einem Standardnamen zu registrieren, damit andere ihn besser sehen können.

Base.html erstellen

Erstellen Sie zunächst base.html. Dies ist die HTML-Datei, die das Meisterwerk von allem ist.

• CSS und JavaScript verwenden Bootstrap.

Verknüpfen Sie die Listenseite und die Erstellung neuer Artikel im Navi-Teil. Verknüpfung mit {% url '<Anwendungsname>: <in urls.py definierter Namenswert>'%}.

Second\diary\templates\diary\base.html

<!doctype html>
<html lang="ja">
  <head>
    <title>Tagebuchanwendung</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' %}">Aufführen</a>
        <a class="nav-link" href="{% url 'diary:add' %}">hinzufügen</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 Dieses Mal werden wir eine Page Nation-Funktion hinzufügen. Speichern Sie es im Vorlagenordner mit dem Dateinamen page.html und schreiben Sie wie folgt.

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>

Day_list.html erstellen

Es ist eine Listenseite mit Artikeln. Im vorherigen Artikel war der Dateiname day_index, Dieses Mal verwenden wir also die ListView-Klasse Registrieren Sie sich mit dem Dateinamen day_list.html.

Von views.py wird day_list der Schlüsselkontext übergeben Mit day_list können Sie auf die in Ihrer Datenbank gespeicherten Artikeltitel und -daten zugreifen. Dies wird mit der for-Anweisung angezeigt.

Es ist ein Mechanismus, um auf die Aktualisierungsseite jedes Artikels zuzugreifen, indem day.pk zum Aktualisieren und Löschen übergeben wird.

Fügen Sie abschließend die Paginierungsfunktion in {% include'diary / page.html%} ein.

Second\diary\templates\diary\day_list.html

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

{% block content %}

<h1>Tagebuchliste</h1>

<table class="table">
    <thead>
        <tr>
            <th>Titel</th>
            <th>Datum</th>
            <th>Aktualisierungsprozess</th>
            <th>Prozess löschen</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 %}">aktualisieren</a></td>
            <td><a href="{% url 'diary:delete' day.pk %}">Löschen</a></td>
        </tr>
    {% endfor %}
    </tbody>
</table>

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

{% endblock %}

Day_detail.html erstellen

Dies ist die Detailseite. Da die DetailView-Klasse verwendet wird, speichern Sie sie als day_detail.html.

Titel, Text und Datum werden angezeigt. Der Zeilenumbruch wird nach dem Text hinzugefügt Dies dient zum Ausdrücken von Zeilenumbrüchen in HTML. Auch ohne gibt es kein Problem.

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

{% extends 'diary/base.html' %}
{% block content %}
    <table class="table">
        <tr>
            <th>Titel</th>
            <td>{{ day.title }}</td>
        </tr>
        <tr>
            <th>Text</th>
            <td>{{ day.text | linebreaksbr}}</td>
        </tr>
        <tr>
            <th>Datum</th>
            <td>{{ day.date }}</td>
        </tr>
    </table>
    <a href="{% url 'diary:update' day.pk %}"><button class="btn btn-primary">aktualisieren</button></a>
    <a href="{% url 'diary:delete' day.pk %}"><button class="btn btn-danger">Löschen</button></a>    
    
{% endblock %}

Day_form.html erstellen

Ein Formular erstellen. Es wird zum Erstellen und Aktualisieren von Artikeln verwendet.

Second\diary\templates\diary\day_form.html

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

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

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

Erstellen von day_confirm_delete.html

Dies ist die Löschseite. Da verwenden wir DeleteView Setzen Sie es auf den Namen 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>Titel</th>
            <td>{{ day.title }}</td>
        </tr>
        <tr>
            <th>Text</th>
            <td>{{ day.text }}</td>
        </tr>
        <tr>
            <th>Datum</th>
            <td>{{ day.date }}</td>
        </tr>
    </table>
    <p>Löschen Sie diese Daten.</p>
    <button type="submit" class="btn btn-primary">Löschen</button>
    {% csrf_token %}
</form>
{% endblock %}

Funktionsprüfung

Lassen Sie uns danach den Vorgang mit dem Ausführungsserver py manage.py überprüfen. Wenn Sie einen Artikel erstellen / aktualisieren / löschen können, sind Sie erfolgreich. Stellen Sie außerdem sicher, dass die Paginierungsfunktion aktiviert ist.