Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 3)

Partie 2 https://qiita.com/TuruMaru/items/8b55d1e134f29b8a8dcd

Juste un peu de CSS

$mkdir static
$touch base.css

Créez un répertoire static directement sous le projet et créez-y un fichier css. statique signifie statique, il semble donc mettre un fichier statique.

mysite/setting.py


STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Ajoutez ceci au fichier de configuration.

templates/base.html


{% load staticfiles %}← Ajouter ceci
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
↓ Ajouter ceci
    <link rel="stylesheet" href="{% static 'base.css' %}">
    <title>{% block page_title %}{% endblock %}</title>

</head>

Vous pouvez maintenant utiliser css. C'est un peu ennuyeux.

Avant de créer la fonction pour afficher l'article, j'écrirai le HTML et le CSS de la base.

templates/base.html


{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'base.css' %}">
    <title>{% block page_title %}{% endblock %}</title>

</head>
<body>
<nav>
    <p class="site-name">Blog</p>
    <ul>
        <li><a href="{% url 'posts:index' %}">Top</a></li>
        <li><a href="{% url 'posts:write' %}">Write</a></li>
    </ul>
</nav>

<div class="title">
    <h1>{% block title %}{% endblock %}</h1>
</div>

<hr>

<div class="content">
    {% block content%}{% endblock %}
</div>

<hr>

</body>
</html>

static/base.css


html, body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body, h1, hr {
    margin: 0px;
}

a{
    color: #e8e8e8;
}

nav p{
    margin: 0px;
    font-size: 30px;
}

nav{
    padding: 10px 10px;
    color: #e8e8e8;
    background-color: #41a888;
}

nav .site-name{
    display: inline-block;
}

nav ul{
    margin: 0px;
    padding: 0px;
    float: right;
}

nav ul li{
    padding: 10px;
    display: inline-block;
}

.title{
    margin: 21px 50px;
}

.content{
    margin: 20px 50px;
}

Ajoutez un écran (écriture) pour écrire des messages dans view.py et ʻurls.py`.

posts/views.py


class WriteView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'posts/write.html')


write = WriteView.as_view()

posts/urls.py


app_name = 'posts'
urlpatterns = [
    path('', views.index, name='index'),
    path('write/', views.write, name='write'),← Ajouter ceci
]
スクリーンショット 2019-11-05 11.24.22.png

Ensuite, cela ressemblera à ceci.

Je me demandais lequel de l'écran de liste de messages (publication) et de l'écran d'écriture de publication (écriture) devrait être fait en premier, mais je le ferai à partir de l'écran d'écriture de publication (écriture).

Écran de post-création

Créez un formulaire de saisie et enregistrez votre saisie dans la base de données.

couler

  1. Créez form.py
  2. Créez views.py
  3. Créez du HTML

D'abord seulement la forme

$cd posts
$touch form.py

posts/form.py


from django import forms
from .models import Posts


class WriteForm(forms.ModelForm):
    class Meta:
        #Spécifiez le modèle
        model = Posts
        #Spécifiez la colonne que vous souhaitez afficher sous forme de formulaire
        fields = ('text',)

posts/views.py


from django.shortcuts import render

# Create your views here.
from django.views.generic import View
#form.Importer le formulaire depuis py
from .form import WriteForm


class IndexView(View):
    def get(self,request, *args, **kwargs):
        return render(request, 'posts/post.html')


index = IndexView.as_view()


class WriteView(View):
    def get(self, request, *args, **kwargs):
        #Aller au fichier html avec le prix
        return render(request, 'posts/write.html', {'form': WriteForm})


write = WriteView.as_view()

templates/posts/write.html


{% extends "base.html" %}

{% block page_title %}Write{% endblock %}
{% block title %}Write{% endblock %}

{% block content %}
    <form method="post" action="{% url 'posts:write' %}">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="button">Publier</button>
    </form>
{% endblock %}

C'est l'écran que vous pouvez faire. スクリーンショット 2019-11-05 16.24.03.png

Je n'écris pas beaucoup. J'écris en fait plus de HTML. Le code moins ici est form.py. Au début, je ne savais pas pourquoi je devais créer un tel fichier, mais c'est certainement plus efficace si je crée beaucoup de formulaires. En outre, cela semble pratique lors de l'enregistrement dans la base de données.

Enregistrer dans la base de données

Si rien n'est fait, une erreur se produira lorsque le bouton «Publier» est enfoncé. Alors, écrivons le processus lorsque la méthode est postée, c'est-à-dire le processus à enregistrer dans la base de données dans views.py.

posts/views.py


class WriteView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'posts/write.html', {'form': WriteForm})

    def post(self, request, *args, **kwargs):
        #Stocker le contenu écrit dans le formulaire
        form = WriteForm(request.POST)
        #Sortez avant d'économiser
        post = form.save(commit=False)
        #sauvegarder
        post.save()
        #Aller à la vue de l'index
        return redirect(to='posts:index')


write = WriteView.as_view()

Vous pouvez maintenant l'enregistrer dans la base de données. Ensuite, les publications enregistrées seront affichées dans la liste des publications.

Écran de la liste des publications

couler

  1. Créez views.py
  2. Créez du HTML

views.py


class IndexView(View):
    def get(self, request, *args, **kwargs):
        #Obtenez toutes les données dans le tableau des publications
        queryset = Posts.objects.all().order_by('-created_at')
        #Poster avec prix.Aller au html
        return render(request, 'posts/post.html', {'posts': queryset})


index = IndexView.as_view()

À propos, en préfixant «'-created_at» »et« - »par« - », les données sont acquises dans l'ordre décroissant. Assez important.

templates/posts/post.html


{% extends "base.html" %}
{% block page_title %}post{% endblock %}
{% block title %}Posts{% endblock %}
{% block content %}
    {% for post in posts %}← Utilisez les posts de la baie de stockage post comme publication
        <div class="post">
            <p class="text">{{ post.text }}</p>
            {{ post.created_at }}
            <hr>
        </div>
    {% endfor %}
{% endblock %}

Si vous regardez l'écran de liste avec ceci スクリーンショット 2019-11-06 2.40.40.png

Enfin terminé ~ (^ ○ ^) C'est un code très simple, mais j'ai tout essayé. Il y a encore de la place pour l'expansion, alors essayez de l'étendre.

Recommended Posts

Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 2)
Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 3)
Django à partir de zéro (partie: 2)
Django à partir de zéro (partie: 1)
Créer une application Web avec Django
Créer une application Todo avec Django ① Créer un environnement avec Docker
Comment développer une application de panier avec Django
Créez une interface utilisateur de jeu à partir de zéro avec pygame2!
[Python] Créer un environnement de développement Django avec Docker
Créez un environnement Django avec Vagrant en 5 minutes
Créer un babillard avec Heroku, Flask, SQL Alchemy
Créer un environnement de développement Django à l'aide de Doker Toolbox
Créez rapidement un environnement Python Django avec IntelliJ
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Django memo n ° 1 à partir de zéro
Créer une application Todo avec Django REST Framework + Angular
Essayez de créer une application Todo avec le framework Django REST
Étapes de l'installation de Python 3 à la création d'une application Django
Créer une application Todo avec Django ③ Créer une page de liste de tâches
Déployer l'application Django créée avec PTVS sur Azure
Créer une application Todo avec Django ⑤ Créer une fonction d'édition de tâches
Créez un environnement de développement avec Poetry Django Docker Pycharm
Construire un environnement Django pour Win10 (avec espace virtuel)
Créez un environnement d'apprentissage automatique à partir de zéro avec Winsows 10
Créez un environnement de développement Django avec Docker! (Docker-compose / Django / postgreSQL / nginx)
[Memo] Construire un environnement de développement pour Django + Nuxt.js avec Docker
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) avec PyCharm
Déployer Django + React à partir de zéro vers GKE (3) Créer un projet GCP
# 3 Créez un environnement Python (Django) avec une instance EC2 (ubuntu18.04) d'AWS part2
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Page de création de décalage)
Créez une application de scraping avec Python + Django + AWS et modifiez les tâches
[DynamoDB] [Docker] Créer un environnement de développement pour DynamoDB et Django avec docker-compose
Développement piloté par les tests avec Django Partie 3
Développement piloté par les tests avec Django Partie 4
Jouez avec une tortue avec des graphiques de tortue (partie 1)
Développement piloté par les tests avec Django Partie 6
Django: Importer une classe depuis une chaîne
Créer un fichier deb avec Docker
Déployer l'application Django avec Docker
Développement piloté par les tests avec Django Partie 2
Django Tips-Créez un site de classement avec Django-
Implémenter l'application Django sur Hy
Application installée à partir de Windows10 32 bits zéro
Créer un filtre avec un modèle django
Développement piloté par les tests avec Django Partie 1
Création d'un babillard avec flask
Développement piloté par les tests avec Django Partie 5
Créer un téléchargeur de fichiers avec Django
Lancer GQL avec un identifiant numérique depuis l'écran de gestion AppEngine
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Introduction)
J'ai essayé d'envoyer un e-mail de fin d'inscription depuis Gmail avec django.
Créer une application Todo avec Django ④ Implémenter la fonction de création de dossier et de tâche
Créez un environnement d'apprentissage pour le «Deep learning from scratch» avec Cloud9 (jupyter miniconda python3)
J'ai fait une webAPI! Construire un environnement à partir de Django Rest Framework 1 avec EC2
Procédure de création d'un environnement Django avec Win10 WSL Ubuntu18.04 + Anaconda + Apache2
Lecteur RSS simple réalisé avec Django
Créez facilement un environnement de développement avec Laragon