[PYTHON] Erstellen Sie mit Django eine Bulletin-Board-App von Grund auf neu. (Teil 3)
Teil 2 https://qiita.com/TuruMaru/items/8b55d1e134f29b8a8dcd
Nur ein bisschen CSS
$mkdir static
$touch base.css
Erstellen Sie ein statisches Verzeichnis direkt unter dem Projekt und erstellen Sie eine CSS-Datei darin. statisch bedeutet statisch, es scheint also eine statische Datei zu sein.
mysite/setting.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Fügen Sie dies der Konfigurationsdatei hinzu.
templates/base.html
{% load staticfiles %}← Fügen Sie dies hinzu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
↓ Fügen Sie dies hinzu
<link rel="stylesheet" href="{% static 'base.css' %}">
<title>{% block page_title %}{% endblock %}</title>
</head>
Jetzt können Sie CSS verwenden. Es ist ein bisschen nervig.
Bevor ich die Funktion zum Anzeigen des Beitrags erstelle, schreibe ich HTML und CSS der Basis.
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;
}
Fügen Sie einen Bildschirm (Schreiben) hinzu, um Beiträge zu view.py und urls.py zu schreiben.
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'),← Fügen Sie dies hinzu
]
Dann wird es so aussehen.
Ich habe mich gefragt, welcher der Postlistenlisten (Post) und der Postschreibbildschirm (Schreiben) zuerst ausgeführt werden soll, aber ich werde dies über den Postschreibbildschirm (Schreiben) tun.
Bildschirm nach der Erstellung
Erstellen Sie ein Eingabeformular und speichern Sie Ihre Eingabe in der Datenbank.
fließen
- Erstellen Sie form.py.
- Erstellen Sie views.py
- Erstellen Sie HTML
Zuerst nur das Formular
$cd posts
$touch form.py
posts/form.py
from django import forms
from .models import Posts
class WriteForm(forms.ModelForm):
class Meta:
#Modell angeben
model = Posts
#Geben Sie die Spalte an, die Sie als Formular anzeigen möchten
fields = ('text',)
posts/views.py
from django.shortcuts import render
# Create your views here.
from django.views.generic import View
#form.Formular aus py importieren
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):
#Zur HTML-Datei mit Preis springen
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">Post</button>
</form>
{% endblock %}
Dies ist der Bildschirm, den Sie ausführen können.
Ich schreibe nicht so viel. Ich schreibe tatsächlich mehr HTML.
Der Code weniger hier ist form.py.
Anfangs wusste ich nicht, warum ich eine solche Datei erstellen musste, aber es ist definitiv effizienter, wenn ich viele Formulare erstelle. Es scheint auch praktisch zu sein, wenn in der Datenbank gespeichert wird.
In Datenbank speichern
Wenn nichts unternommen wird, tritt ein Fehler auf, wenn die Schaltfläche "Posten" gedrückt wird.
Schreiben wir also den Prozess, wenn die Methode veröffentlicht wird, dh den Prozess, der in der Datenbank in views.py gespeichert werden soll.
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):
#Speichern Sie den im Formular geschriebenen Inhalt
form = WriteForm(request.POST)
#Vor dem Speichern herausnehmen
post = form.save(commit=False)
#sparen
post.save()
#Zur Ansicht des Index gehen
return redirect(to='posts:index')
write = WriteView.as_view()
Sie können es jetzt in der Datenbank speichern. Als nächstes werden die gespeicherten Beiträge in der Beitragsliste angezeigt.
Postlistenbildschirm
fließen
- Erstellen Sie views.py
- Erstellen Sie HTML
views.py
class IndexView(View):
def get(self, request, *args, **kwargs):
#Holen Sie sich alle Daten in der Posts-Tabelle
queryset = Posts.objects.all().order_by('-created_at')
#Post mit Preis.Springe zu HTML
return render(request, 'posts/post.html', {'posts': queryset})
index = IndexView.as_view()
Übrigens werden durch Hinzufügen von "-created_at" und "-" vor "created_at" Daten in absteigender Reihenfolge erfasst. Ziemlich wichtig.
templates/posts/post.html
{% extends "base.html" %}
{% block page_title %}post{% endblock %}
{% block title %}Posts{% endblock %}
{% block content %}
{% for post in posts %}← Verwenden Sie die Posts des Post Storage Arrays als Post
<div class="post">
<p class="text">{{ post.text }}</p>
{{ post.created_at }}
<hr>
</div>
{% endfor %}
{% endblock %}
Wenn Sie sich damit den Listenbildschirm ansehen
Endlich abgeschlossen ~ (^ ○ ^) Es ist ein sehr einfacher Code, aber ich habe alles versucht. Es gibt noch Raum für Erweiterungen. Bitte versuchen Sie es zu erweitern.