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
]
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
- Créez form.py
- Créez views.py
- 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.
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
- Créez views.py
- 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
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