ToDo-Listenerstellung [Python Django]

[Nachtrag bearbeiten] 24.11.2019 Einige Einstellungen in settings.py wurden geändert. Es wurde gesagt, dass ein Fehler auftreten würde, wenn Sie vor dem Erstellen der ToDo-App'todo.apps.TodoConfig'to settings.py hinzufügen würden. Daher habe ich sie in der Reihenfolge nach dem Erstellen der App hinzugefügt.

Zweck

[Referenz] Mit Django erstellte Aufgabenliste Als ich darüber nachdachte, etwas mit Python einfach zu machen, dachte ich, dass die ToDo-App gut sein würde, und versuchte es.

--Funktion

• Listenanzeige
• Detailansicht
• Liste erstellen und bearbeiten
• Löschen

Wir werden eine ToDo-App mit diesen vier Funktionen erstellen.

Umgebung

Die Versionen von Python und Django sind wie folgt. Django wird in einem späteren Schritt in der virtuellen Umgebung installiert.

$ python -V
Python 3.7.3

$ pip list
Package    Version
---------- -------
Django     2.1.8  

Erstellungsverfahren

Grob geteilt

1. Bereiten Sie die Entwicklungsumgebung vor
2. ToDo-Anwendungserstellung (Python Edition)
3. ToDo-Anwendungserstellung (HTML-Edition)
4. Migration
5. Funktionsprüfung 5 Schritte

1. Bereiten Sie die Entwicklungsumgebung vor

Aufbau einer virtuellen Umgebung

Es gibt mehr als 150 Python-Bibliotheken, und es ist schwer zu überprüfen, welche Bibliothek für welches Projekt benötigt wird. Auch wenn sich die Bibliotheken gegenseitig stören und nicht gut funktionieren ... Um dies zu verhindern, erstellen Sie eine virtuelle Umgebung mit dem folgenden Befehl.

$ virtualenv ~/eb-virt
$ source ~/eb-virt/bin/activate

Django Installation

Nachdem wir eine virtuelle Umgebung haben, installieren Sie Django dort.

(eb-virt)~$ pip3 install django==2.1.8
(eb-virt)~$ pip3 freeze

Erstellen einer Projektvorlage

Erstellen Sie ein Verzeichnis für Ihr Projekt und erstellen Sie in diesem Verzeichnis eine Vorlage für Ihr Projekt.

(eb-virt)~$ mkdir django-todo
(eb-virt)~$ cd django-todo
(eb-virt)~$ python3 -m django startproject mysite .

Der Inhalt von mysite ist so.

Struktur der Mysite

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

settings.py settings

Legen Sie settings.py im erstellten Projekt fest. Das Feld ALLOWED_HOSTS wurde anscheinend aus Django == 1.5 eingeführt. Vergessen Sie also nicht, es festzulegen, wenn Sie spätere Versionen verwenden.

mysite/settings.py

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['*']#Der Domainname der zu veröffentlichenden Site ist ebenfalls akzeptabel

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja'#Japanese

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo'#In Japan Zeit

Erstellen und Konfigurieren von ToDo-Anwendungen

Erstellen Sie eine Vorlage der Anwendung, um die ToDo-Anwendung zu erstellen, die das Hauptthema ist. Beachten Sie, dass die Anwendung todo in derselben Hierarchie wie die zuvor erstellte Projektmysite erstellt wird.

$ python3 manage.py startapp todo

Stellen Sie settings.py für die Aufgaben-App ein.

mysite/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig', #Eingebaute ToDo-Anwendung
]

2. ToDo App

Modellieren

Da "Aufgaben", "Erstellungsdatum und -zeit" und "Datum und Uhrzeit aktualisieren" angezeigt werden, werden Datum und Uhrzeit usw. erfasst. Dieser Inhalt spiegelt sich in der Datenbank wider.

todo/models.py

from django.db import models 


class Todo(models.Model): 
    todo = models.CharField('ToDo', max_length=100, blank=False)
    created_at = models.DateTimeField('Erstellungsdatum und -zeit', auto_now_add=True)
    updated_at = models.DateTimeField('Datum und Uhrzeit aktualisieren',auto_now=True)

    def __str__(self):
        return self.todo

Formularklassenerstellung

Da forms.py nicht in der Vorlage enthalten ist, erstellen Sie es unter der Aufgabenhierarchie. Da das Eingabeelement nur Aufgaben ist, werden das Erstellungsdatum und die Erstellungszeit sowie das Aktualisierungsdatum und die Aktualisierungszeit ausgeschlossen.

todo/forms.py

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('created_at','updated_at',)  #Schließen Sie Erstellungsdatum und -zeit aus und aktualisieren Sie Datum und Uhrzeit von den Eingabeelementen

Erstellung anzeigen

Erstellen Sie eine Ansicht der ToDo-Anwendung, die jeder Funktion der ToDo entspricht.

todo/views.py

from django.views import generic
from django.urls import reverse_lazy
from .models import Todo
from .forms import TodoForm

#ToDo-Listenanzeigefunktion
class TodoListView(generic.ListView):
    model = Todo
    paginate_by = 5

#Detaillierte Anzeigefunktion von ToDo
class TodoDetailView(generic.DetailView):
    model = Todo

#ToDo-Erstellungsfunktion
class TodoCreateView(generic.CreateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#ToDo-Bearbeitungsfunktion
class TodoUpdateView(generic.UpdateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#ToDo-Löschfunktion
class TodoDeleteView(generic.DeleteView):
    model = Todo
    success_url = reverse_lazy('todo:list')

URL-Erstellung

Wenn Sie eine Verbindung von einem Browser mit todo / herstellen, ändern Sie zunächst die URL-Einstellung der todo-Anwendung anstelle der URL-Einstellung von mysite. Daher ist es notwendig, mit mysite / urls.py und todo / urls.py zu spielen. Lassen Sie uns unterscheiden und ändern.

mysite/urls.py

from django.contrib import admin
from django.urls import include, path   #Import enthalten

urlpatterns = [
    path('todo/', include('todo.urls')),    # todo/Beachten Sie die Einstellungen für die Aufgaben-URL, wenn Sie mit zugreifen
    path('admin/', admin.site.urls),
]

todo/urls.py

from django.urls import path
from . import views 

app_name = 'todo' 

urlpatterns = [
    path('list/', views.TodoListView.as_view(), name='list'), 
    path('detail/<int:pk>/', views.TodoDetailView.as_view(), name='detail'), 
    path('create/', views.TodoCreateView.as_view(), name='create'), 
    path('update/<int:pk>/', views.TodoUpdateView.as_view(), name='update'), 
    path('delete/<int:pk>/', views.TodoDeleteView.as_view(), name='delete'), 
]

3. Erstellen Sie eine Vorlage mit HTML

Von hier an werden wir über die Benutzeroberfläche sprechen. Erstellen Sie zunächst ein Arbeitsverzeichnis.

(eb-virt) $mkdir -p todo/templates/todo

Base

Erstellen Sie die Basis des HTML-Codes, der erstellt wird. Lassen Sie die vier unten erstellten htmls den gemeinsamen Teil erben.

todo/templates/base.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

Listenanzeigefunktion

Benutzeroberfläche der ToDo-Listenanzeigefunktion.

todo/templates/todo/todo_list.html

{% extends 'base.html' %}

{% block content %}
<h1>Liste der Aufgaben</h1>
<a href="{% url 'todo:create' %}">hinzufügen</a>
<table>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">ToDo</th>
      <th scope="col">Erstellungsdatum und -zeit</th>
      <th scope="col">Datum und Uhrzeit aktualisieren</th>
      <th scope="col">Operation</th>
    </tr>
  </thead>
  <tbody>
    {% for item in object_list %}
    <tr>
      <td scope="row"><a href="{% url 'todo:detail' pk=item.id %}">{{ item.id }}</a></td>
      <td>{{ item.todo }}</td>
      <td>{{ item.created_at }}</td>
      <td>{{ item.updated_at }}</td>
      <td>
        <a href="{% url 'todo:update' pk=item.id %}">Fix</a>
        <a href="{% url 'todo:delete' pk=item.id %}">Löschen</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{%endblock%}

Detaillierte Anzeigefunktion

Benutzeroberfläche der ToDo-Detailanzeigefunktion.

todo/templates/todo/todo_detail.html

{% extends 'base.html' %}

{% block content %}
<h1>ToDo Details</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Erstellungsdatum und -zeit</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Datum und Uhrzeit aktualisieren</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<a href="{% url 'todo:list' %}">Rückkehr</a>
{%endblock%}

Funktionen erstellen und bearbeiten

Benutzeroberfläche zum Erstellen und Bearbeiten von Aufgaben.

todo/templates/todo/todo_form.html

{% extends 'base.html' %}

{% block content %}

{% if object %}
<h1>Aufgaben bearbeiten</h1>
{% else %}
<h1>Eine Aufgabe erstellen</h1>
{% endif %}

<form method="post">
    {% csrf_token %}
    {{ form }} 
    <button type="submit">Senden</button>
</form>
<a href="{% url 'todo:list' %}">Rückkehr</a>
{%endblock%}

Funktion löschen

Benutzeroberfläche der ToDo-Löschfunktion.

todo/templates/todo/todo_confirm_delete.html

{% extends 'base.html' %}

{% block content %}
<h1>ToDo löschen</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Erstellungsdatum und -zeit</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Datum und Uhrzeit aktualisieren</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<form action="" method="post">
    {% csrf_token %}
    <input type="submit"value="Löschen" />
</form>
<a href="{% url 'todo:list' %}">Rückkehr</a>
{%endblock%}

4. Datenbankmigration

Die Datenbankmigration ist eine Funktion, die automatisch Datenbankdefinitionen erstellt und verwaltet, die in Anwendungen verwendet werden. Der Zweck der Datenbankmigration besteht darin, eine Projektion von model.py zu erstellen, die zuerst in der Datenbank festgelegt wurde.

Der erste Befehl erstellt eine Migrationsdatei, und der zweite Befehl wendet die Migrationsdatei auf die Datenbank an (führt sie aus).

(eb-virt) $ python3 manage.py makemigrations
(eb-virt) $ python3 manage.py migrate

5. Funktionsprüfung

Damit sind alle Vorbereitungen abgeschlossen. Mal sehen, ob es funktioniert. Starten Sie zuerst den Django-Server mit dem folgenden Befehl.

(eb-virt) $ python3 manage.py runserver 8080

Starten Sie anschließend den Browser und greifen Sie auf die folgende URL zu. http://127.0.0.1:8080/todo/list/

Wenn erfolgreich, sollte es so aussehen.

Obwohl ich unterwegs einen allgemeinen Fehler gemacht habe, z. B. einen Fehler in der Position des Quellcodes, war die Erstellung relativ einfach. Ich möchte mich nach Möglichkeit verbessern (hauptsächlich UI-Seite)