Création de liste de tâches [Python Django]

[Modification du post-scriptum] 24/11/2019 Certains paramètres de settings.py ont été modifiés. Il a été dit qu'une erreur se produirait si vous ajoutiez'todo.apps.TodoConfig'to settings.py avant de créer l'application todo, je les ai donc ajoutées dans l'ordre après la création de l'application.

Objectif

[Référence] Liste de tâches créée avec Django Quand j'ai pensé à faire quelque chose de simple avec python, j'ai pensé que l'application ToDo serait bonne et j'ai essayé.

--Une fonction

• Affichage de la liste
• Vue détaillée --Créer et modifier la liste
• Effacer

Nous allons créer une application ToDo avec ces quatre fonctions.

environnement

Les versions de python et Django sont les suivantes. Django sera installé dans l'environnement virtuel dans une étape ultérieure.

$ python -V
Python 3.7.3

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

Procédure de création

À peu près divisé

1. Préparez l'environnement de développement
2. Création d'applications ToDo (édition python)
3. Création d'applications ToDo (édition html)
4. Migration
5. Contrôle de fonctionnement 5 étapes

1. Préparez l'environnement de développement

Construire un environnement virtuel

Il existe plus de 150 bibliothèques python, et il est difficile de vérifier quelle bibliothèque est nécessaire pour quel projet. Aussi, si les bibliothèques interfèrent les unes avec les autres et ne fonctionnent pas bien ... Pour éviter cela, créez un environnement virtuel avec la commande suivante.

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

Installation de Django

Maintenant que nous avons un environnement virtuel, installez Django là-bas.

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

Créer un modèle de projet

Créez un répertoire pour votre projet et créez un modèle pour votre projet dans ce répertoire.

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

Le contenu de mysite est comme ça.

Structure de mysite

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

settings.py paramètres

Définissez settings.py dans le projet créé. Le champ ALLOWED_HOSTS semble avoir été introduit à partir de Django == 1.5, alors n'oubliez pas de le définir lors de l'utilisation de versions ultérieures.

mysite/settings.py

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['*']#Le nom de domaine du site à publier est également acceptable

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

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo'#Au Japon, heure

Créer et configurer des applications ToDo

Afin de créer l'application ToDo qui est le sujet principal, créez un modèle de l'application. Notez que la tâche d'application est créée dans la même hiérarchie que le projet mysite créé précédemment.

$ python3 manage.py startapp todo

Définissez settings.py pour l'application todo.

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', #Application todo intégrée
]

2. Application ToDo

La modélisation

Puisque «ToDo», «date et heure de création» et «date et heure de mise à jour» sont affichés, la date et l'heure etc. sont acquises. Ce contenu est reflété dans la base de données.

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('Date et heure de création', auto_now_add=True)
    updated_at = models.DateTimeField('Mettre à jour la date et l'heure',auto_now=True)

    def __str__(self):
        return self.todo

Création de classe de formulaire

Puisque forms.py n'est pas inclus dans le modèle, créez-le sous la hiérarchie des tâches. Étant donné que l'élément d'entrée est uniquement ToDo, la date et l'heure de création et la date et l'heure de mise à jour sont exclues.

todo/forms.py

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('created_at','updated_at',)  #Exclure la date et l'heure de création et la date et l'heure de mise à jour des éléments d'entrée

Voir la création

Créez une vue de l'application todo pour correspondre à chaque fonction du todo.

todo/views.py

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

#Fonction d'affichage de la liste des tâches
class TodoListView(generic.ListView):
    model = Todo
    paginate_by = 5

#Fonction d'affichage détaillée de ToDo
class TodoDetailView(generic.DetailView):
    model = Todo

#Fonction de création ToDo
class TodoCreateView(generic.CreateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#Fonction d'édition ToDo
class TodoUpdateView(generic.UpdateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#Fonction de suppression ToDo
class TodoDeleteView(generic.DeleteView):
    model = Todo
    success_url = reverse_lazy('todo:list')

Création d'URL

Tout d'abord, lors de la connexion à partir d'un navigateur avec todo /, changez pour faire référence au paramètre URL de l'application todo au lieu du paramètre URL de mysite. Par conséquent, il est nécessaire de jouer avec mysite / urls.py et todo / urls.py. Distinguons et changeons.

mysite/urls.py

from django.contrib import admin
from django.urls import include, path   #importer inclure

urlpatterns = [
    path('todo/', include('todo.urls')),    # todo/Reportez-vous au paramètre d'URL todo lors de l'accès avec
    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. Créer un modèle avec html

À partir de là, nous parlerons de l'interface utilisateur. Commencez par créer un répertoire de travail.

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

base

Créez la base du html qui sera créé. Laissez les quatre html créés ci-dessous hériter de la partie commune.

todo/templates/base.html

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

Fonction d'affichage de liste

Interface utilisateur de la fonction d'affichage de la liste ToDo.

todo/templates/todo/todo_list.html

{% extends 'base.html' %}

{% block content %}
<h1>Liste des tâches</h1>
<a href="{% url 'todo:create' %}">ajouter à</a>
<table>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">ToDo</th>
      <th scope="col">Date et heure de création</th>
      <th scope="col">Mettre à jour la date et l'heure</th>
      <th scope="col">opération</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 %}">Réparer</a>
        <a href="{% url 'todo:delete' pk=item.id %}">Effacer</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{%endblock%}

Fonction d'affichage détaillée

Interface utilisateur de la fonction d'affichage des détails ToDo.

todo/templates/todo/todo_detail.html

{% extends 'base.html' %}

{% block content %}
<h1>Détails ToDo</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Date et heure de création</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Mettre à jour la date et l'heure</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<a href="{% url 'todo:list' %}">Revenir</a>
{%endblock%}

Créer et modifier des fonctions

Interface utilisateur pour créer et modifier des tâches.

todo/templates/todo/todo_form.html

{% extends 'base.html' %}

{% block content %}

{% if object %}
<h1>Modifier ToDo</h1>
{% else %}
<h1>Créer une tâche</h1>
{% endif %}

<form method="post">
    {% csrf_token %}
    {{ form }} 
    <button type="submit">Envoyer</button>
</form>
<a href="{% url 'todo:list' %}">Revenir</a>
{%endblock%}

Supprimer la fonction

Interface utilisateur de la fonction de suppression ToDo.

todo/templates/todo/todo_confirm_delete.html

{% extends 'base.html' %}

{% block content %}
<h1>Supprimer ToDo</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Date et heure de création</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Mettre à jour la date et l'heure</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<form action="" method="post">
    {% csrf_token %}
    <input type="submit"value="Effacer" />
</form>
<a href="{% url 'todo:list' %}">Revenir</a>
{%endblock%}

4. Migration de la base de données

La migration de base de données est une fonction qui crée et gère automatiquement les définitions de base de données utilisées dans les applications. Le but de la migration de la base de données est de créer une projection de model.py qui a été définie en premier dans la base de données.

La première commande crée un fichier de migration et la deuxième commande applique (exécute) le fichier de migration à la base de données.

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

5. Contrôle de fonctionnement

Ceci termine toutes les préparations. Voyons si ça marche. Tout d'abord, démarrez le serveur Django avec la commande suivante.

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

Ensuite, démarrez le navigateur et accédez à l'URL suivante. http://127.0.0.1:8080/todo/list/

En cas de succès, cela devrait ressembler à ceci.

Bien que j'aie commis une erreur générale, comme une erreur dans l'emplacement du code source en cours de route, c'était relativement facile à créer. Je souhaite m'améliorer si possible (principalement côté UI)