Tout d'abord, je vais vous expliquer le concept de CRUD, qu'il est bon de connaître dans les applications Web. CRUD est un acronyme pour créer, lire, mettre à jour et supprimer. En prenant cette application comme exemple, cela signifie ce qui suit.
Avant d'ajouter la fonctionnalité CRUD, divisez views.py en trois parties: cafe.py, logging.py et review.py. Créez un dossier views sous le dossier cafe_site et créez-y les fichiers cafe.py, loging.py, reviews.py. Blueprint Utilisez Blueprint pour diviser le fichier de vues pour chaque fichier que vous avez créé précédemment et transformer chacun en une application.
python:./cafe_site/views/cafe.py
from flask import Blueprint
cafe = Blueprint('cafe', __name__)
python:./cafe_site/views/loging.py
from flask import Blueprint
loging = Blueprint('loging', __name__)
python:./cafe_site/views/review.py
from flask import Blueprint
review = Blueprint('review', __name__)
Et comme le nom de l'application a été changé en ** cafe **, ** logging **, ** review ** au lieu de ** app **, le routage est également @ cafe.route ()
, @ logging.route. Remplacez par ()
,@ review.route ()
,.
Ensuite, modifiez la partie du fichier **. / Cafe_site / __ init__.py ** qui importe les vues.
python:./__init__.py
from cafe_site.views.cafe import cafe
app.register_blueprint(cafe)
from cafe_site.views.loging import loging
app.register_blueprint(loging)
from cafe_site.views.reviews import review
app.register_blueprint(review, url_prefix='/users')
Vous pouvez désormais mettre à jour reviews.py pour les fonctionnalités liées aux futurs articles, logging.py pour les fonctionnalités liées à la connexion et cafe.py pour les fonctionnalités liées à la page d'accueil du café.
Enfin, j'aimerais créer un décorateur d'authentification de connexion qui simplifie l'authentification de connexion avant de passer à l'ajout de la fonctionnalité CRUD.
python:./cafe_site/views/loging.py
from functools import wraps
def login_required(loging):
@wraps(loging)
def inner(*args, **kwargs):
if not session.get('logged_in'):
return redirect(url_for('loging.login'))
return loging(*args, **kwargs)
return inner
Pour les processus qui nécessitent une connexion, l'authentification de connexion peut être effectuée simplement en ajoutant la phrase @login_required juste avant la méthode view.
Commençons par créer la fonction de publication d'article. [Création d'une application Web à l'aide de Flask ③] Utilisez la fonction de base de données créée dans () pour créer une fonction de publication d'article.
Modifiez le thème.html et ajoutez un lien "révision" à la barre de navigation pour les nouveaux articles.
html:./cafe_site/templates/theme.html
<ul class="main-nav">
{% if not session.logged_in %}
{% else %}
<li><a href="{{ url_for('review.new_review') }}">review</a></li>
{% endif %}
</ul>
html:./cafe_site/templates/theme.html
<!DOCTYPE html>
<html lang="ja">
<head>
{% block head %}
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="Café offrant un espace de travail">
<link rel="icon" type="image/png" href="/static/images/favicon.png ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
{% endblock %}
</head>
<body>
<div id="{{ id }}" class="big-bg">
<header class="page-header wrapper">
<h1><a href="/"><img class="logo" src="/static/images/logo.svg" alt="Café Maison"></a></h1>
<nav>
<ul class="main-nav">
{% if not session.logged_in %}
<li><a href="{{ url_for('cafe.news') }}">News</a></li>
<li><a href="{{ url_for('cafe.menu') }}">Menu</a></li>
<li><a href="{{ url_for('cafe.contact') }}">Contact</a></li>
<li><a href="{{ url_for('loging.login') }}">login</a></li>
{% else %}
<li><a href="{{ url_for('cafe.news') }}">News</a></li>
<li><a href="{{ url_for('cafe.menu') }}">Menu</a></li>
<li><a href="{{ url_for('cafe.contact') }}">Contact</a></li>
<li><a href="{{ url_for('review.new_review') }}">review</a></li>
<li><a href="{{ url_for('review.show_reviews') }}">board</a></li>
<li><a href="{{ url_for('loging.logout') }}">logout</a></li>
{% endif %}
</ul>
</nav>
</header>
{% for message in get_flashed_messages() %}
<div class="alert">
<font color="red">
<p>※{{ message }}</p>
</font>
</div>
{% endfor %}
{% block content %}
{% endblock %}
</div>
{% block content2 %}
{% endblock %}
{% block footer %}
{% endblock %}
</body>
</html>
python:./cafe_site/views/reviews.py
@review.route('/reviews/new', methods=['GET'])
@login_required
def new_review():
return render_template('reviews/review.html', id="review")
Enfin, modifiez un peu le fichier review.html créé dans Création d'une application Web à l'aide de Flask ①.
html:./cafe_site/templates/views/reviews.html
{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block content %}
<div class="form-content wrapper">
<h2 class="page-title">Review</h2>
<form method="POST" action="{{ url_for('review.add_review') }}">
<div class="star-rating">
<div class="star-rating__wrap">
<input class="star-rating__input" id="star-rating-5" type="radio" name="star" value=5>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-4" type="radio" name="star" value=4>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-3" type="radio" name="star" value=3>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-2" type="radio" name="star" value=2>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-1" type="radio" name="star" value=1>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
</div>
</div>
<div>
<label for="title">Titre</label>
<input placeholder="title" name="title" type="text"/>
</div>
<div>
<label for="message">message</label>
<textarea id="message" placeholder="message" name="text"></textarea>
</div>
<input type="submit" class="button" value="Publier">
</form>
</div>
{% endblock %}
{% block footer %}
<footer>
<div class="wrapper">
<p><small>© Coffee House</small></p>
</div>
</footer>
{% endblock %}
Jusqu'à présent, nous avons créé un formulaire de soumission. Ensuite, créez une fonction pour enregistrer les articles publiés à partir du formulaire de publication dans la base de données.
Dans review.html, le formulaire est publié sur ʻAction = "{{url_for ('review.add_review')}}" `. Créez ** review.add_review ** et ajoutez un processus pour recevoir le contenu publié et l'enregistrer dans la base de données. Ajoutez ** add_review ** à views / reviews.py.
python:./cafe_site/views/reviews.py
@review.route('/reviews', methods=['POST'])
@login_required
def add_review():
review = Review(
star=request.form['star'],
title=request.form['title'],
text=request.form['text']
)
db.session.add(review)
db.session.commit()
flash('Nouvel article créé')
return redirect(url_for('review.show_reviews'))
Comme pour la création du formulaire de connexion, spécifiez la méthode POST lors de l'envoi des données. Nous traitons si vous êtes connecté avec @login_required. Si vous êtes connecté, utilisez le modèle de révision créé dans le chapitre précédent pour créer une instance de modèle pour le titre de l'article et le contenu envoyé.
python:./cafe_site/views/reviews.py
review = Review(
star=request.form['star'],
title=request.form['title'],
text=request.form['text']
)
Ensuite, pour l'instance de modèle créée, effectuez le traitement suivant pour enregistrer le nouveau contenu d'article dans la base de données.
python:./cafe_site/views/reviews.py
db.session.add(review)
db.session.commit()
db.session.add ()
ajoute un nouveau contenu et db.session.commit ()
écrit les données dans la base de données.
Ensuite, ajoutez une fonction de détail de blog afin que les détails tels que le corps de l'article soient affichés.
En plus de chaque titre de l'écran de liste, ajoutez un lien «En savoir plus».
html:./cafe_site/templates/views/index.html
{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
{% endblock %}
{% block content %}
<div class="wrapper">
<h2 class="page-title">board</h2>
{% for review in reviews %}
<div class="card bg-transparent">
<div class="card-body">
{% if review.star == 1 %}
<h5 class="card-title">rating : <img src="/static/images/star.png " width="15" height="15"></h5>
{% endif %}
{% if review.star == 2 %}
<h5 class="card-title">rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></h5>
{% endif %}
{% if review.star == 3 %}
<h5 class="card-title">rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></h5>
{% endif %}
{% if review.star == 4 %}
<h5 class="card-title">rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></h5>
{% endif %}
{% if review.star == 5 %}
<h5 class="card-title">rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></h5>
{% endif %}
<h5 class="card-subtitle">{{ review.title }}</h5>
<a class="card-link" href="{{ url_for('review.show_review', id=review.id) }}" >Lire la suite</a>
</div>
</div>
{% else %}
Aucun message
{% endfor %}
</div>
{% endblock %}
{% block footer %}
<footer>
<div class="wrapper">
<p><small>© Coffee House</small></p>
</div>
</footer>
{% endblock %}
Ici, des arguments ont été ajoutés à {{url_for ('review.show_review', id = review.id)}}
et url_for. Cela permettra à l'ID de l'article sur lequel vous avez cliqué d'être transmis lorsque show_review () est appelé.
Ajoutez un nouveau show_review à views / reviews.py.
python:./cafe_site/views/reviews.py
@review.route('/board')
@login_required
def show_reviews():
reviews = Review.query.order_by(Review.id.desc()).all()
return render_template('reviews/index.html', reviews=reviews, id="board")
@review.route('/reviews/<int:id>', methods=['GET'])
@login_required
def show_review(id):
review = Review.query.get(id)
return render_template('reviews/show.html', review=review, id="show")
Dans reviews = Review.query.order_by (Review.id.desc ()). All ()
, spécifiez la variable * id * passée dans url_for.
De plus, ajoutez show_review (id) et le nom de l'argument afin que la variable * id * puisse être référencée.
Dans la méthode show_review, vous pouvez obtenir l'article avec l'identifiant passé de la base de données en écrivant simplement
review = Review.query.get (id)
.
Enfin, créez un fichier show.html pour afficher les détails du contenu de l'article.
html:./cafe_site/templates/views/show.html
{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<div class="show-content wrapper">
<h2>{{ review.title }}</h2>
{% if review.star == 1 %}
<h2>Évaluation: <img src="/static/images/star.png " width="40" height="40"></h2>
{% endif %}
{% if review.star == 2 %}
<h2>rating : <img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"></h2>
{% endif %}
{% if review.star == 3 %}
<h2>rating : <img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"></h2>
{% endif %}
{% if review.star == 4 %}
<h2>rating : <img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"></h2>
{% endif %}
{% if review.star == 5 %}
<h2>rating : <img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"><img src="/static/images/star.png " width="40" height="40"></h2>
{% endif %}
<br> {{ review.text|safe }}
<br>
<br>Date et heure de publication{{ review.created_at }}
</div>
{% endblock %}
Ajoutez une fonction d'édition d'article afin de pouvoir éditer l'article publié.
Ajoutez un bouton "Modifier" à l'écran des détails de l'article.
html:./cafe_site/templates/views/show.html
<form action="{{ url_for('review.edit_review', id=review.id) }}" method="GET">
<input type="submit" class="button" value="Éditer">
</form>
Ajoutez edit_review à views / reviews.py afin que l'écran d'édition soit renvoyé lorsque vous cliquez sur le bouton Modifier
python:./cafe_site/views/reviews.py
@review.route('/reviews/<int:id>/edit', methods=['GET'])
@login_required
def edit_review(id):
review = Review.query.get(id)
return render_template('reviews/edit.html', review=review)
Créez un nouveau fichier edit.html et créez un écran d'édition.
html:./cafe_site/templates/views/edit.html
{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block content %}
<div class="edit wrapper">
<h2 class="page-title">review</h2>
<form action="{{ url_for('review.update_review', id=review.id) }}" method=post class=add-review>
<div class="star-rating">
<div class="star-rating__wrap">
<input class="star-rating__input" id="star-rating-5" type="radio" name="star" value=5>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-4" type="radio" name="star" value=4>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-3" type="radio" name="star" value=3>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-2" type="radio" name="star" value=2>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
<input class="star-rating__input" id="star-rating-1" type="radio" name="star" value=1>
<label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
</div>
</div>
<div>
<label for="name">Titre</label>
<input placeholder="Titre" name="title" type="text" value={{ review.title }}/>
</div>
<div class="form-group">
<label for="message">message</label>
<textarea id="message" placeholder="La revue" name="text">{{ review.text | safe }}</textarea>
</div>
<input type="submit" class="button" value="mise à jour">
</form>
{% endblock %}
{% block footer %}
<footer>
<div class="wrapper">
<p><small>© Coffee House</small></p>
</div>
</footer>
{% endblock %}
Créez update_review dans reviews.py et ajoutez un processus pour recevoir les modifications saisies dans le formulaire et mettre à jour la base de données.
python:./cafe_site/views/reviews.py
@review.route('/reviews/<int:id>/update', methods=['POST'])
@login_required
def update_review(id):
review = Review.query.get(id)
review.star = request.form['star']
review.title = request.form['title']
review.text = request.form['text']
db.session.merge(review)
db.session.commit()
flash('Article mis à jour')
return redirect(url_for('review.show_reviews'))
** star **, ** title **, ** text ** sont mis à jour pour l'avis obtenu par Review.query.get (id)
.
Lors de la création, de l'ajout, mais lors de la mise à jour, utilisez db.session.merge (review)
et enfin db.session.commit ()
pour mettre à jour la base de données.
Enfin, ajoutez la possibilité de supprimer des articles.
html:./cafe_site/templates/views/show.html
<form action="{{ url_for('review.delete_review', id=review.id) }}" method="post">
<input type="submit" class="button" value="Effacer">
</form>
Ajoutez ** delete_review ** à views / reviews.py et ajoutez un processus pour supprimer l'article lorsque vous appuyez sur le bouton de suppression.
python:./cafe_site/views/reviews.py
@review.route('/reviews/<int:id>/delete', methods=['POST'])
@login_required
def delete_review(id):
review = Review.query.get(id)
db.session.delete(review)
db.session.commit()
flash('Message supprimé')
return redirect(url_for('review.show_reviews'))
Pour supprimer le contenu de la base de données, spécifiez db.session.delete (review)
.
Vous avez maintenant ajouté toutes les fonctionnalités de CRUD.
Enfin, jetons un coup d'œil à la vue d'ensemble de reviews.py.
python:./cafe_site/views/reviews.py
from flask import request, redirect, url_for, render_template, flash, session
from cafe_site import db
from cafe_site import app
from cafe_site.models.reviews import Review
from cafe_site.views.loging import login_required
from flask import Blueprint
review = Blueprint('review', __name__)
@review.route('/board')
@login_required
def show_reviews():
reviews = Review.query.order_by(Review.id.desc()).all()
return render_template('reviews/index.html', reviews=reviews, id="board")
@review.route('/reviews', methods=['POST'])
@login_required
def add_review():
review = Review(
star=request.form['star'],
title=request.form['title'],
text=request.form['text']
)
db.session.add(review)
db.session.commit()
flash('Nouvel article créé')
return redirect(url_for('review.show_reviews'))
@review.route('/reviews/new', methods=['GET'])
@login_required
def new_review():
return render_template('reviews/review.html', id="review")
@review.route('/reviews/<int:id>', methods=['GET'])
@login_required
def show_review(id):
review = Review.query.get(id)
return render_template('reviews/show.html', review=review, id="show")
@review.route('/reviews/<int:id>/edit', methods=['GET'])
@login_required
def edit_review(id):
review = Review.query.get(id)
return render_template('reviews/edit.html', review=review)
@review.route('/reviews/<int:id>/update', methods=['POST'])
@login_required
def update_review(id):
review = Review.query.get(id)
review.star = request.form['star']
review.title = request.form['title']
review.text = request.form['text']
db.session.merge(review)
db.session.commit()
flash('Article mis à jour')
return redirect(url_for('review.show_reviews'))
@review.route('/reviews/<int:id>/delete', methods=['POST'])
@login_required
def delete_review(id):
review = Review.query.get(id)
db.session.delete(review)
db.session.commit()
flash('Message supprimé')
return redirect(url_for('review.show_reviews'))
La suite sera expliquée dans Créer une application web avec Flask ④.
Recommended Posts