[PYTHON] Eine Reihe von Amateur-Infrastrukturingenieuren, die Django mit Docker touching berühren: Ansicht, Vorlage, CSS
TL;DR Fortsetzung von Amateur-Infrastrukturingenieur berührt Django mit Docker ④: urls.py. Wenn Sie von 1 lesen möchten, ↓ hier. Amateur-Infrastrukturingenieur berührt Django mit Docker (1): Machen Sie Django mit Docker Auch dieses Mal werde ich mit Django spielen, während ich eine Probe von [Django Girls] mache (https://tutorial.djangogirls.org/ja/). In Sicht können die über das Modell empfangenen Daten an die Vorlage übergeben und andere Verarbeitungen durchgeführt werden. Vorlage ist der Teil, der das Erscheinungsbild anpasst. HTML und CSS entsprechen dieser Vorlage. Schauen wir uns zunächst die Struktur an, indem wir eine einfache Ansicht erstellen.
view
① Bearbeiten Sie views.py
views.py
views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
Gut verständlicher Kommentar
from django.shortcuts import render
Die Shortcuts-Funktion definiert die Funktionen und Klassen, die zur Überbrückung jeder MTV-Ebene in Django erforderlich sind. Dieses Mal importieren wir eine Funktion namens render, die die als Argument angegebene Vorlage rendert und HttpResponse zurückgibt.
from django.utils import timezone
from .models import Post
Die Zeitzone, die die in der Dienstprogrammfunktion enthaltenen zeitbezogenen Funktionen bereitstellt, und das Post-Modell, das beim Erstellen des Modells erstellt wurde, werden importiert. Ich habe die Standposition der Ansicht in Teil 2 angesprochen, aber da sie auch die Aufgabe hat, die Daten mithilfe der Modellfunktion tatsächlich zu erfassen und an die Vorlage zu übergeben, importieren Sie das Modell, das Sie in der Ansicht verwenden möchten, und verwenden Sie die Vorlage. Muss als Option geliefert werden.
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
Der Definitionsteil der Funktion post_list. Denken Sie daran, dass Sie beim letzten Schreiben von urls.py views.post_list angegeben haben? Wenn eine Anforderung an urls.py gesendet wird, wird die gemäß dem Pfad angegebene Funktion in views.py aufgerufen und die Anforderung weitergeleitet. Nach Durchführung der erforderlichen Verarbeitung wird die Vorlage gerendert und eine Antwort zurückgegeben. In der zweiten Zeile werden unter Verwendung des Post-Modells veröffentlichtes Datum früher als zur aktuellen Zeit abgerufen, in chronologischer Reihenfolge sortiert und an blog / post_list.html übergeben.
Template
① Erstellen Sie ein Verzeichnis für HTML
cd ~/blog/template
mkdir blog
Unter dem Blog-Verzeichnis befindet sich ein Verzeichnis mit dem Namen template. Dies ist das Anwendungsverzeichnis. Erstellen Sie daher unter diesem Verzeichnis ein anderes Verzeichnis mit dem Namen blog. Sie fragen sich vielleicht, warum es so kompliziert aufgebaut ist, aber bei der Verwaltung einer umfangreichen Anwendung scheint es besser, Verzeichnisse für jede Funktion zu trennen, selbst für HTML.
② Bearbeiten Sie post_list.html
post_list.html
blog/template/blog/post_list.html
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<div class="date">
<p>published: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
Da es nicht der Zweck ist, den grundlegenden Teil von HTML zu erklären, wird hier nur der wichtige Teil erklärt.
Gut verständlicher Kommentar
{% load static %}
{% load static%} ist eine Beschreibung zum Laden statischer Inhalte wie der später beschriebenen CSS-Datei.
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Das zu lesende CSS wird hier angegeben.
{% for post in posts %}
<div class="post">
<div class="date">
<p>published: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
In diesem Teil möchte ich auf den Teil achten, in dem das Element des Post-Modells durch {{post.OBJECT}} angegeben ist. Mit dem Post-Modell erhaltene Posts werden in den oben genannten views.py an diese Vorlage übergeben, sodass sie einfach so aufgerufen werden können. Da die vom Post-Modell erfassten Posts in Form einer Liste vorliegen, können mithilfe der for-Anweisung mehrere Anzeigen realisiert werden.
③ Erstellen Sie ein Verzeichnis für CSS
cd ~/blog/static
mkdir css
④ Bearbeiten Sie blog.css
blog/static/css/blog.css
.page-header {
background-color: #C25100;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
}
.date {
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h2 a, .post h2 a:visited {
color: #000000;
}
Die Erklärung von CSS ist nicht der Hauptpunkt, daher hoffe ich, dass Sie sie mit der Erkenntnis kopieren können, dass Sie so etwas schreiben, um es zu formen. Es wird empfohlen, HTML und CSS in einem speziellen Buch zu studieren.
Starten einer Blog-Anzeigeseite
docker-compose up Zu diesem Zeitpunkt sollte Ihre Website vollständig sein (obwohl sie nur angezeigt wird). Gehen Sie in das Verzeichnis, in dem sich dockercompose.yaml befindet, und starten Sie es mit "docker-compose up".
docker-compose up
http://[IPADDRESS]:8000/にアクセスしてみる。
Es wurde angezeigt! Der Beitrag "Dies ist ein Testbeitrag" wurde übrigens auf der in Teil 3 erläuterten Administrationsseite veröffentlicht. Damit Benutzer Beiträge verfassen können, müssen sie eine Seite mit einem Beitragsformular erstellen. Beim Erstellen von Formularen bietet Django eine praktische Funktion namens Formulare. Die Geschichte wird beim nächsten Mal wiederkommen.
Ist es zuallererst wie eine Pause? ..
Fortsetzung folgt
Recommended Posts