Note du didacticiel Django Girls
C'est un mémo d'étude du didacticiel django girls https://tutorial.djangogirls.org/ja/
Environnement d'essai
Puisqu'il s'agit d'un didacticiel qui se déploie à l'aide de PaaS appelé PythonAnywhere, cela peut être fait dans n'importe quel environnement où python et git peuvent être installés. La construction de l'environnement est également dans le tutoriel, donc si vous n'avez pas python et git, veuillez vous référer au lien ci-dessous. https://tutorial.djangogirls.org/ja/python_installation/
1. Créez un projet et exécutez-le
Tout d'abord, créez un répertoire de projet dans un emplacement approprié. Cette fois, j'ai créé un projet dans / home / username / django / proj1.
terminal
mkdir django
cd django
django-admin startproject proj1
Les fichiers suivants seront créés automatiquement.
/home/Nom d'utilisateur/django/proj1/
proj1
├── manage.py
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── myvenv
│ └── ...
└── requirements.txt
Écrivez les paramètres nécessaires dans le fichier de paramètres settings.py.
Fuseau horaire et langue
Ci-dessous, il est défini sur l'heure standard japonaise et japonaise.
setting.py
TIME_ZONE = 'Asia/Tokyo'
LANGUAGE_CODE = 'ja'
Fichier statique PATH
setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
URL qui permettent la lecture
Si ALLOWED_HOST est défini sur *, il sera possible de lire toutes les URL, mais il sera vulnérable aux attaques par injection http. Assurez-vous de n'ajouter que les URL dont vous avez besoin à la liste. Cette fois, après avoir testé avec localhost sur un serveur simple, nous allons déployer sur pythonanywhere.com, alors ajoutez les deux suivants.
setting.py
ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com']
Paramètres de la base de données
Lorsque vous utilisez sqlite3, procédez comme suit.
setting.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
Démarrez le serveur de test django
Essayez d'exécuter le serveur temporaire et voyez ce qui s'est passé.
terminal
python manage.py migrate
python manage.py runserver
Ouvrez http: // localhost: 8000 dans votre navigateur et vous devriez voir la page d'exemple de django.
Puisque la partie liée au contenu affiché n'a pas été modifiée, la page d'exemple par défaut est affichée.
2. Créez un modèle
Puisqu'il est possible de créer plusieurs applications dans un projet, nous créerons des applications de blog dans un répertoire appelé blog.
terminal
python manage.py startapp blog
Un répertoire nommé blog sera ajouté comme indiqué ci-dessous.
/home/Nom d'utilisateur/django/proj1/
proj1
├── blog
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── db.sqlite3
├── manage.py
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── myvenv
│ └── ...
└── requirements.txt
Ajoutez l'application ajoutée à INSTALLED_APPS dans settings.py pour que django vienne la lire.
setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog.apps.BlogConfig',
]
J'écrirai la partie modèle qui correspond à M du modèle MVC de models.py. model est responsable des parties back-end telles que la lecture et l'écriture de la base de données et le traitement des données.
Héritage de la classe django.db.models.Model
models.py
from django.conf import settings
from django.db import models
from django.utils import timezone
class Post(models.Model):
author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
text = models.TextField()
created_date = models.DateTimeField(default=timezone.now)
published_date = models.DateTimeField(blank=True, null=True)
def publish(self):
self.published_date = timezone.now()
self.save()
def __str__(self):
return self.title
models.CharField - Un champ qui définit du texte avec un nombre limité de caractères
models.TextField - Ceci est pour un texte long et sans restriction. C'est un champ idéal pour le contenu des articles de blog, non?
models.DateTimeField - Champs de date et d'heure
models.ForeignKey - Ceci est un lien vers un autre modèle
Ajoutez le modèle que vous avez créé à la base de données.
terminal
python manage.py makemigrations blog
python manage.py migrate blog
résultat
Operations to perform:
Apply all migrations: blog
Running migrations:
Applying blog.0001_initial... OK
S'il est affiché comme ci-dessus, la migration est réussie.
3. Ajouter un modèle à la page d'administration
Afin de rendre le modèle créé précédemment visible depuis l'écran de gestion, importez la classe Post créée précédemment avec from .models import Post et ajoutez admin.site.register (Post) à admin.py.
blog/admin.py
from django.contrib import admin
from .models import Post
admin.site.register(Post)
Créez un super utilisateur django qui peut se connecter à l'écran d'administration
python manage.py createsuperuser
Ouvrez l'écran de gestion.
http://localhost:8000/admin/
Entrez votre nom d'utilisateur et votre mot de passe pour accéder à l'écran de gestion.
Vous pouvez ajouter des articles en appuyant sur le bouton Ajouter à droite de Articles.
Je remplirai un message approprié.
Apparemment, le modèle fonctionne bien.
Au fait, la page du haut est toujours une fusée parce que je n'ai pas encore changé la vue.
http://localhost:8000/
4. Déployer
Dans ce chapitre, nous allons créer un référentiel sur github et déployer un blog sur PythonAnywhere.
Pousser vers github
Tout d'abord, connectez-vous à github et créez un référentiel. Le nom du référentiel doit être mon-premier-blog. Si vous n'avez pas de compte, vous pouvez en créer un gratuitement, alors créez-en un. https://github.com/
Ouvrez le terminal et installez git.
terminal
sudo apt install git
Après l'installation, git init dans le répertoire du projet (/ home / nom d'utilisateur / django / proj1 / dans ce cas), puis enregistrez le nom d'utilisateur et l'adresse e-mail. Ce qui suit est pour le nom d'utilisateur "hoge" et l'adresse e-mail "[email protected]".
terminal
git init
git config --global user.name hoge
git config --global user.email [email protected]
Enregistrez les fichiers / répertoires qui ne sont pas reflétés dans git dans .gitignore.
/home/Nom d'utilisateur/django/proj1/.gitignore
*.pyc
*~
/.vscode
__pycache__
myvenv
db.sqlite3
/static
.DS_Store
Assurez-vous que .gitignore est reflété.
terminal
git status
production
On branch master
No commits yet
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
blog/
manage.py
mysite/
nothing added to commit but untracked files present (use "git add" to track)
Il semble que cela soit reflété en toute sécurité, alors poussez-le sur github.
terminal
git add --all
git commit -m "first commit"
git remote add origin https://github.com/Nom d'utilisateur/my-first-blog.git
git push -u origin master
Si le push réussit, le fichier sera affiché dans le référentiel github.
Déployer sur PythonAnywhere
Créer un compte pour PythonAnyWhere https://www.pythonanywhere.com/
Après avoir créé un compte, accédez à la page Compte dans le menu en haut à droite et créez un jeton API.
Ouvrez la nouvelle console en bas à gauche du tableau de bord.
Lorsqu'elle est ouverte, la console s'ouvre comme illustré ci-dessous.
Installez l'outil d'assistance et utilisez l'outil d'assistance pour déployer le contenu de github.
PythonAnywhere_command-line
pip3.6 install --user pythonanywhere
pa_autoconfigure_django.py --python=3.6 https://github.com/nom d'utilisateur github/my-first-blog.git
Vérifions les fichiers synchronisés avec la commande ls.
PythonAnywhere_command-line
$ ls
blog db.sqlite3 manage.py proj1 static
$ ls blog/
__init__.py __pycache__ admin.py apps.py migrations models.py tests.py views.py
Vous pouvez également le vérifier à partir de la page Fichiers de PythonAnywhere.
Puisque l'outil d'assistance construit un nouvel environnement virtuel en utilisant le code de github, le super-utilisateur django créé précédemment n'a pas encore été enregistré, alors enregistrez-le avec la commande ci-dessous.
PythonAnywhere_command-line
python manage.py createsuperuser
Maintenant, la même chose que vous avez faite localement sera publiée sur Internet. Si vous accédez à la page Web Apps à partir du tableau de bord PythonAnywhere, vous trouverez un lien vers le site que vous pouvez ouvrir à partir de là.
Lorsque vous entrez dans l'écran de gestion, vous pouvez voir qu'il n'y a pas encore de publication. En effet, la base de données n'est pas synchronisée avec github car elle est écrite en .gitignore. La définition de .gitignore est très importante pour ne pas écraser par inadvertance la base de données dans l'environnement de production.
5. Faire une vue
Ici, créez une vue pour afficher réellement la page et écrivez un lien vers la vue.
Écrivez un lien pour voir
Lorsque j'ouvre urls.py, cela dit quelque chose comme ce qui suit, et quand j'arrive à http: // localhost / admin /, il est spécifié de faire référence à admin.site.urls. Je n'ai pas encore spécifié de lien vers la vue du blog, alors je vais écrire ceci.
proj1/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
]
Lorsque vous arrivez sur la page d'accueil http: // localhost /, ajoutez-la pour faire référence à proj1 / blog / urls.py.
proj1/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
]
Créez blog.urls.py et dites-lui de référencer la vue nommée post_list depuis blog / views.py lorsque vous accédez à http: // localhost /.
proj1/blog/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.post_list, name='post_list'),
]
Écrivez l'ensemble de fonctions post_list à référencer ci-dessus dans views.py. Ici, le contenu de blog / post_list.html est retourné tel quel.
blog/views.py
from django.shortcuts import render
def post_list(request):
return render(request, 'blog/post_list.html', {})
Maintenant, lorsque vous arrivez sur http: // localhost /, le lien sera connecté à proj1 / urls.py → proj1 / blog / urls.py → proj1 / blog / views.py → proj1 / blog / post_list.html. ..
Maintenant, lorsque j'ouvre la page avec python manage.py runserver, j'obtiens une page d'erreur car proj1 / blog / post_list.html n'y est pas encore.
Si runserver échoue et que la page n'apparaît pas, quelque chose que vous avez écrit jusqu'à présent est erroné, alors vérifiez-le.
Créer un modèle de vue
Après avoir créé proj1 / blog / templates / blog / post_list.html et vérifié à nouveau la page avec python manage.py runserver, la page s'affiche enfin sans aucune erreur. Cependant, comme rien n'a encore été écrit, la page sera vierge.
Si vous écrivez correctement le HTML, il sera affiché tel quel.
proj1/blog/templates/blog/post_list.html
<html>
<body>
<p>Hi there!</p>
<p>It works!</p>
</body>
</html>
Faisons une page qui ressemble à un blog.
proj1/blog/templates/blog/post_list.html
<html>
<head>
<title>Django Girls blog</title>
</head>
<body>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div>
<p>published: 14.06.2014, 12:14</p>
<h2><a href="">My first post</a></h2>
<p>Aenean eu leo quam.salut! Je vous remercie!</p>
</div>
<div>
<p>date de sortie: 2014/06/14, 12:14</p>
<h2><a href="">Deuxième poste</a></h2>
<p>salut! Je vous remercie!</p>
</div>
</body>
</html>
Déployer
Déployons le contenu jusqu'à présent sur PythonAnywhere.
/home/Nom d'utilisateur/django/proj1/
git add --all
git commit -m "changed the html for the site"
git push
Ouvrez la ligne de commande PythonAnywhere et tirez-la.
terminal:~/Nom d'utilisateur PythonAnywhere.pythonanywhere.com
git pull
Si vous accédez à une page Web à partir du tableau de bord PythonAnywhere, que vous la rechargez, puis que vous ouvrez le site, vous devriez voir le même contenu.
6. Comment utiliser l'ensemble de requêtes
Vous pouvez utiliser des ensembles de requêtes pour lire et écrire dans la base de données tout comme django y accède. Cela vous permet d'écrire une description dans view.py qui fonctionne comme prévu lorsque vous le déplacez réellement.
Ouvrez le jeu de requêtes dans le shell django.
terminal
python manage.py shell
Importons la classe Post et affichons toutes les données de publication avec Post.objects.all ().
command-line
>>> from blog.models import Post
>>> Post.objects.all()
<QuerySet [<Post:Taitoru 1>, <Post:Taitoru 2>, <Post:Taitoru 3>]>
Ajoutons un message.
command-line
>>> from django.contrib.auth.models import User
>>> me = User.objects.get(username='Nom d'utilisateur')
>>> Post.objects.create(author=me, title='Sample title', text='Test')
>>> Post.objects.all()
<QuerySet [<Post:Taitoru 1>, <Post:Taitoru 2>, <Post:Taitoru 3>, <Post: Sample title>]>
Le message ajouté est ajouté à la fin. Ensuite, je n'afficherai que les articles dont le titre contient le titre.
command-line
>>> Post.objects.filter(title__contains='title')
<QuerySet [<Post: Sample title>]>
Affiche le message publié.
command-line
>>> from django.utils import timezone
>>> Post.objects.filter(published_date__lte=timezone.now())
<QuerySet []>
Je vais le publier.
command-line
>>> post = Post.objects.get(title="Sample title")
>>> post.publish()
>>> Post.objects.filter(title__contains='title')
<QuerySet [<Post: Sample title>]>
Vous pouvez également afficher une liste des super utilisateurs enregistrés dans django.
command-line
>>> User.objects.all()
<QuerySet [<User:Nom d'utilisateur>]>
Vous pouvez également les afficher dans l'ordre de comptabilisation ou dans l'ordre inverse.
command-line
>>> Post.objects.order_by('created_date')
<QuerySet [<Post:Taitoru 1>, <Post:Taitoru 2>, <Post:Taitoru 3>, <Post: Sample title>]>
>>> Post.objects.order_by('-created_date')
<QuerySet [<Post: Sample title>, <Post:Taitoru 3>, <Post:Taitoru 2>, <Post:Taitoru 1>]>
Vous pouvez également rédiger une série de requêtes.
command-line
>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
<QuerySet [<Post: Sample title>]>
Vous pouvez quitter le jeu de requêtes avec exit ().
command-line
exit()
7. Créer un modèle de vue dynamique
Nous écrirons un modèle de vue pour afficher le contenu de l'article stocké dans la base de données. J'ai écrit pour transmettre les données de publication publiées au modèle et les afficher comme je l'ai fait dans l'ensemble de requêtes précédemment.
proj1/blog/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})
Le blog / post_list.html créé précédemment était un html statique, mais je vais le réécrire pour afficher la valeur reçue de la base de données.
Le script python est exécuté dans la plage incluse dans {%%}, et la valeur de l'objet passé est insérée dans la plage incluse dans {{}}, de sorte que l'article est affiché dans l'ordre. ..
proj1/blog/templates/blog/post_list.html
<html>
<head>
<title>Django Girls blog</title>
</head>
<body>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Vous devriez maintenant pouvoir voir le contenu de l'article que vous avez entré sur la page d'administration, alors vérifiez l'affichage avec python manage.py runserver.
Il est terminé en toute sécurité.
8. Mignon avec CSS
Je vais faire un joli design en utilisant Bootstrap.
Tout d'abord, mettez un lien dans l'en-tête de post_list.html afin que vous puissiez utiliser Bootstrap.
proj1/blog/templates/blog/post_list.De html<head>Ajouter à
<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">
Cela seul définit le CSS par défaut pour Bootstrap, de sorte que la conception change un peu.
Créer un fichier CSS
Puisque django reconnaît le dossier nommé static comme un fichier statique, créez un répertoire css dans le répertoire static et placez-y blog.css.
proj1
└─── blog
└─── static
└─── css
└─── blog.css
Le CSS est normalement écrit dans ce fichier. Pour le moment, changeons la couleur de la balise a dans l'en-tête.
proj1/blog/static/css/blog.css
h1 a, h2 a {
color: #C25100;
}
Ajoutez {% load static%} et {% static'css / blog / css '%} à post_list.html pour refléter blog.css.
proj1/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>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Le CSS est reflété et la couleur du texte de la balise a du titre est désormais orange.
J'ajouterai diverses choses
proj1/blog/static/css/blog.css
h1 a, h2 a {
color: #C25100;
font-family: 'Lobster';
}
body {
padding-left: 15px;
}
.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;
}
proj1/blog/templates/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 href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
C'est devenu bon
9. Extension de modèle
Le gabarit de vue peut réutiliser des parties communes.
À titre d'exemple, divisons la post_list.html créée précédemment en deux vues. Écrivez la partie qui définit la conception de base dans base.html et écrivez la partie qui affiche la liste des publications dans post_list.html.
blog
└───templates
└───blog
base.html
post_list.html
Insérez le contenu de post_list.html de {% block content%} vers {% endblock%}.
proj1/blog/templates/blog/base.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 href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/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">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
La première ligne du côté post_list.html vous indique d'étendre base.html en écrivant {% extend'blog / base.html '%}.
proj1/blog/templates/blog/post_list.html
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
Lorsque vous redémarrez le serveur et affichez la page, vous devriez voir la même chose qu'avant.
10. Extension d'application
Ajoutez une page pour afficher chaque article de blog.
Créer un lien vers le modèle
Spécifie de faire référence à la fonction view.post_detail () lorsqu'il s'agit de html: // localhost / post / **** /. <int: pk> signifie convertir la chaîne de caractères en type int, l'affecter à pk et le donner comme argument comme views.post_detail (request, pk).
proj1/blog/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.post_list, name='post_list'),
path('post/<int:pk>/', views.post_detail, name='post_detail'),
]
Ajoutez la fonction post_detail à proj1 / blog / views.py. J'utilise également get_object_or_404 () pour renvoyer 404 s'il n'y a pas d'article correspondant dans l'objet Post. Le deuxième argument de la fonction de rendu spécifie que "blog / post_detail.html" est utilisé comme modèle de vue.
proj1/blog/views.py
from django.shortcuts import render, get_object_or_404
def post_detail(request, pk):
post = get_object_or_404(Post, pk=pk)
return render(request, 'blog/post_detail.html', {'post': post})
Ajoutez un modèle de vue pour afficher l'article. Puisque j'utilise base.html, je peux l'écrire brièvement.
proj1/blog/templates/blog/post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<div class="post">
{% if post.published_date %}
<div class="date">
{{ post.published_date }}
</div>
{% endif %}
<h2>{{ post.title }}</h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endblock %}
Enfin, ajoutez un lien vers la balise
affichant le titre de l'article de post_list.html pour terminer.
proj1/blog/templates/blog/post_list.html
<h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
proj1/blog/templates/blog/post_list.html
<h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
Une page pour afficher les articles a été créée.
Déployer
Poussons le contenu jusqu'à présent vers git et déployons-le.
terminal
git status
git add --all .
git status
git commit -m "Added view and template for detailed blog post as well as CSS for the site."
git push
terminal:~/Nom d'utilisateur.pythonanywhere.com
cd ~/Nom de domaine.pythonanywhere.com
git pull
Il ne reflète pas le CSS, car PythonAnywhere a un emplacement différent pour les fichiers statiques. Si vous utilisez l'outil, il sera placé automatiquement.
terminal:~/Nom d'utilisateur PythonAnywhere.pythonanywhere.com
nom d'utilisateur workon.pythonanywhere.com
python manage.py collectstatic
11-1. Créer un formulaire de publication
Dans l'opération jusqu'à présent, le billet de blog a été saisi à partir de l'écran de gestion http: // localhost / admin /, mais vous pouvez créer un formulaire pour le rendre un peu plus facile à saisir.
Créer un formulaire de publication
blog
└── forms.py
Héritez de la classe forms.ModelForm et ajoutez uniquement une partie pour créer un formulaire. Ici, le formulaire est utilisé pour saisir le titre et le texte.
proj1/blog/forms.py
from django import forms
from .models import Post
class PostForm(forms.ModelForm):
class Meta:
model = Post
fields = ('title', 'text',)
Mettez un lien vers le formulaire de publication dans base.html
Ajoutez la ligne suivante pour mettre un lien vers le formulaire de publication en haut de base.html. Si class = "glyphicon glyphicon-plus" est défini, + sera affiché en utilisant la fonction Bootstrap.
proj1/blog/templates/blog/base.Ajouté au html
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
proj1/blog/templates/blog/base.Après modification 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 href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
Ajouté à urls.py
Lorsque vous arrivez sur http: // localhost: 8000 / post / new /, appelez la fonction views.post_new.
blog/urls.Ajouter à py
path('post/new/', views.post_new, name='post_new'),
blog/urls.Après modification py
from django.urls import path
from . import views
urlpatterns = [
path('', views.post_list, name='post_list'),
path('post/<int:pk>/', views.post_detail, name='post_detail'),
path('post/new/', views.post_new, name='post_new'),
]
Ajoutez la fonction appelée par urls.py à views.py
blog/views.Ajouter à py
from django.shortcuts import redirect
def post_new(request):
if request.method == "POST":
form = PostForm(request.POST)
if form.is_valid():
post = form.save(commit=False)
post.author = request.user
post.published_date = timezone.now()
post.save()
return redirect('post_detail', pk=post.pk)
else:
form = PostForm()
return render(request, 'blog/post_edit.html', {'form': form})
Si vous utilisez python manage.py runserver et ouvrez http: // localhost: 8000 / post / new / dans votre navigateur, la nouvelle page de publication s'affichera comme indiqué ci-dessous.
11-2. Créer un formulaire de modification pour les articles publiés
Ajoutons la fonction d'édition d'article de la même manière qu'avant.
Modifier le formulaire
Le formulaire lui-même utilise le même que le nouveau formulaire de publication.
Placer un bouton d'édition
blog/templates/blog/post_detail.Ajouter au HTML
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
blog/templates/blog/post_detail.Après modification html
{% extends 'blog/base.html' %}
{% block content %}
<div class="post">
{% if post.published_date %}
<div class="date">
{{ post.published_date }}
</div>
{% endif %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
<h2>{{ post.title }}</h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endblock %}
Ajouter un lien vers urls.py
python:proj1.blog/urls.Ajouter à py
path('post/<int:pk>/edit/', views.post_edit, name='post_edit'),
Ajouter une fonction à views.py
proj1/blog/views.Ajouter à py
def post_edit(request, pk):
post = get_object_or_404(Post, pk=pk)
if request.method == "POST":
form = PostForm(request.POST, instance=post)
if form.is_valid():
post = form.save(commit=False)
post.author = request.user
post.published_date = timezone.now()
post.save()
return redirect('post_detail', pk=post.pk)
else:
form = PostForm(instance=post)
return render(request, 'blog/post_edit.html', {'form': form})
11-3. Modifiable uniquement lors de la connexion
Bouton Nouveau message
proj1/blog/templates/blog/base.Avant de modifier le HTML
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
proj1/blog/templates/blog/base.Après avoir modifié le HTML
{% if user.is_authenticated %}
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
{% endif %}
Bouton d'édition d'article
proj1/blog/templates/blog/post_detail.Avant de modifier le HTML
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
proj1/blog/templates/blog/post_detail.Après avoir modifié le HTML
{% if user.is_authenticated %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
{% endif %}
Le bouton Modifier n'apparaît plus si vous n'êtes pas connecté.
Déployer
terminal
git status
git add --all .
git status
git commit -m "Added view and template for detailed blog post as well as CSS for the site."
git push
terminal:~/Nom d'utilisateur.pythonanywhere.com
cd ~/Nom de domaine.pythonanywhere.com
git pull
C'est pourquoi c'est terminé.
je l'ai fait
Recommended Posts