Flaskのチュートリアルをやってみる② 〜ビューから実行まで
前回の続き.
ビュー
エントリーページ
データベースに保存されている全てのエントリーの一覧のページ.ルートでもある.
以下をflaskr.pyに追記する.
@app.route('/') def show_entries(): cur = g.db.execute('select title, text from entries order by id desc') entries = [dict(title=row[0], text=row[1]) for row in cur.fetchall()] return render_template('show_entries.html', entries=entries)
データベースから全てのエントリーを取り出し,レンダリングテンプレートとしてshow_entries.htmlを指定している.
エントリー追加
エントリーを追加するためのページで,ログインしているユーザしかアクセスできない.
以下をflaskr.pyに追記する.
@app.route('/add', methods=['POST']) def add_entry(): if not session.get('logged_in'): abort(401) g.db.execute('insert into entries (title, text) values (?, ?)', [request.form['title'], request.form['text']]) g.db.commit() flash(u'新しいエントリーが追加されました') return redirect(url_for('show_entries'))
POSTリクエストのみが受け付けられ,エントリーの追加処理が正常終了するとshow_entriesページにリダイレクトされる.
ユーザがログインしているかどうかの判定には,sessionのlogged_inを使用している.
ログインとログアウト
ユーザのログインとログアウトを行うためのページ.
以下をflaskr.pyに追記する.
@app.route('/login', methods=['GET', 'POST']) def login(): error = None if request.method == 'POST': if request.form['username'] != app.config['USERNAME']: error = u'ユーザ名が間違っています' elif request.form['password'] != app.config['PASSWORD']: error = u'パスワードが間違っています' else: session['logged_in'] = True flash(u'ログインしました') return redirect(url_for('show_entries')) return render_template('login.html', error=error) @app.route('/logout') def logout(): session.pop('logged_in', None) flash(u'ログアウトしました') return redirect(url_for('show_entries'))
ログインには,ユーザ名とパスワードを利用して行ない,sessionにlogged_inのキーで設定がセットされる.
で,ログイン済みの場合は,ユーザはshow_entriesページにリダイレクトされる.
そして,追加メッセージでユーザにログインが成功した事が通知され,エラーが発生した場合はユーザに再度入力を求める.
ログアウト処理はsessionからkeyを削除することで行う.
テンプレートとスタイルシート
テンプレートとしてJinja2を用いる.
以降のファイルを作成する.
layout.html
各テンプレートの基本となるもので,タイトルなど大枠部分が記述される.
<!doctype html> <title>Flaskr</title> <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> <div class="page"> <h1>Flaskr</h1> <div class="metanav"> {% if not session.logged_in %} <a href="{{ url_for('login') }}">ログイン</a> {% else %} <a href="{{ url_for('logout') }}">ログアウト</a> {% endif %} </div> {% for message in get_flashed_messages() %} <div class="flash">{{ message }}</div> {% endfor %} {% block body %}{% endblock %} </div>
show_entries.html
各エントリを表示するためのテンプレート.
{% extends "layout.html" %} {% block body %} {% if session.logged_in %} <form action="{{ url_for('add_entry') }}" method="post" class="add-entry"> <dl> <dt>タイトル: <dd><input type="text" size=30 name="title"> <dt>本文: <dd><textarea name="text" rows=5 cols=40></textarea> <dd><input type="submit" value="追加"> </dl> </form> {% endif %} <ul class="entries"> {% for entry in entries %} <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }} {% else %} <li><em>マジか! エントリーなんて無かったんだ…</em> {% endfor %} </ul> {% endblock %}
login.html
ログイン画面用のテンプレート.
{% extends "layout.html" %} {% block body %} <h2>ログイン</h2> {% if error %}<p class="error"><strong>エラー:</strong> {{ error }}{% endif %} <form action="{{ url_for('login') }}" method="post"> <dl> <dt>ユーザ名: <dd><input type="text" name="username"> <dt>パスワード: <dd><input type="password" name="password"> <dd><input type="submit" value="ログイン"> </dl> </form> {% endblock %}
style.css
body { font-family: sans-serif; background: #eee; } a, h1, h2 { color: #377ba8; } h1, h2 { font-family: 'Georgia', serif; margin: 0; } h1 { border-bottom: 2px solid #eee; } h2 { font-size: 1.2em; } .page { margin: 2em auto; width: 35em; border: 5px solid #ccc; padding: 0.8em; background: white; } .entries { list-style: none; margin: 0; padding: 0; } .entries li { margin: 0.8em 1.2em; } .entries li h2 { margin-left: -1em; } .add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; } .add-entry dl { font-weight: bold; } .metanav { text-align: right; font-size: 0.8em; padding: 0.3em; margin-bottom: 1em; background: #fafafa; } .flash { background: #cee5F5; padding: 0.5em; border: 1px solid #aacbe2; } .error { background: #f0d6d6; padding: 0.5em; }
実行
まず,データベースの初期化を行うために,以下を実行する.
$ python >>> from flaskr import init_db >>> init_db()
そして,flaskr.pyを実行する.
$ python flaskr.py * Running on http://127.0.0.1:5000/ * Restarting with reloader
で,http://127.0.0.1:5000/にアクセスすると,こんな画面になっている.
で,ログイン画面.
ログインできた.
エントリーを追加してみる.
追加できた.
たくさん追加してみる.
で,ログアウト.
うん,いい感じ.
所感
すごく簡単.
これだけで,こんな簡単な簡易ブログができるのはいい.
モックアップとか,ちょー簡単なWebアプリとか作るなら,Flaskで十分って感じ.
少し規模が大きくなってくるとどうかはわからない.
一つのファイルにまとめて記述できる点が一長一短って感じかな.
Pyramidと比べると,やっぱり手軽なのが素晴らしい.
マイクロフレームワークと名乗るだけはある.
Pyramidとの比較とかもいい感じでできたらいいなとか思っている.
終わり.
GitHub > o-tomox/flaskr · GitHub