はじめに
ログインフォームで、ユーザ名やパスワードを間違った場合はフォームが再表示されるだけのため、入力が間違ったことがわかりにくい。
そこでflashを使い下記を実行していく。
- ログインの成功や失敗
- ログアウトの各アクションごとにメッセージをだす
サーバー側でのflashの追加
Views.pyにて各アクション結果をflashに保存し、クライアントに返せるように変更する。
from flask import request, redirect, url_for, render_template, flash, session
from flask_blog import app
@app.route('/')
def show_entries():
if not session.get('logged_in'):
return redirect('/login')
return render_template('entries/index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
error = None
if request.method == 'POST':
if request.form['username'] != app.config['USERNAME']:
flash('ユーザ名が異なります')
elif request.form['password'] != app.config['PASSWORD']:
flash('パスワードが異なります')
else:
session['logged_in'] = True
flash('ログインしました')
return redirect('/')
return render_template('login.html')
@app.route('/logout')
def logout():
session.pop('logged_in', None)
return redirect('/')
login()にてprint文を書いていた部分をflashに変更した。ログインが成功したときとログアウトした場合もそれぞれ、flashwoを追加している。
これで、flash領域にメッセージが追加され、ブラウザにメッセージを渡すことができる。
ブラウザでのflashメッセージの表示
layout.htmlを修正し、サーバから渡されたflashメッセージを表示させるようにする。
<!DOCTYPE html>
<title>Flask Blog</title>
<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>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Flask Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav navbar-right">
{% if not session.logged_in %}
<li class="nav-item">
<a class="nav-link" href="/login">ログイン</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/logout">ログアウト</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% for message in get_flashed_messages() %}
<div class="alert alert-info" role="alert">
{{ message }}
</div>
{% endfor %}
<div class="blog-body">
{% block body %}{% endblock%}
</div>
</div>
flashメッセ時はJInja2を使って、以下のように表示することができる。
{% for message in get_flashed_messages() %}
<div class="alert alert-info" role="alert">
{{ message }}
</div>
{% endfor %}
get_flashed_messages()でサーバから渡された全てのメッセージを取得し、表示させている。
下記のように表示される。
終わりに
ログインフォームで、ユーザ名やパスワードを間違った場合はフォームが再表示されるだけのため、入力が間違ったことがわかりにくかった。そこでflashを使い、ログインの成功や失敗、ログアウトの各アクションごとにメッセージを出すことを実施した。
次回はurl_forを使い、自動でリンクを作成する。
コメント