プログラミング初心者がFlaskをやる#2

pythonのflask mega-tutorialを進めていきます。

chapter2 Templates

2章はMVTモデルのwebアプリケーションのテンプレートの実装を行います。

最近はAPIとフロントサイドの開発が別れているのが主流らしくMVTモデルのようにTemplateを使い出力の成形はしないらしい。
てっきりMVTモデルがスタンダードだと思っていた自分はフロントサイドの開発をしている友達に引かれました。。。


とりあえず説明に沿って実装していきます!

routes.py

#coding:utf-8
#app/routes.py

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user ={'username':'takuma'}
    posts = [
        {
            'author':{'username':'john'},
            'body':'my name is john'
        },
        {
            'author':{'username':'susan'},
            'body':'my name is susan'
        }
    ]
    return render_template('index.html',title='Home',user=user,posts=posts)

routes.pyを書き換えました。
render_template()はテンプレートに変数を埋め込んだりいろいろしてくれます。
routes.pyではindex.htmlにtitle, user, postsの値を渡しています。
今回変数の値はindex()内で定義しています。

つまり127.0.0.1:5000/indexにアクセスがあればhtmlを作成して返してくれるよってことです。

次にテンプレートを作成していきます。

テンプレートはtemplatesディレクトリに作成していきます。
なのでtemplatesディレクトリをapp配下に作成します。

mkdir app/templates

この中にテンプレートファイルを作成していきます。

index.html

{% extends "base.html" %}

{% block content %}
    <h1>Hi,{{ user.username }}</h1>
    {% for post in posts %}
    <div><p>{{post.author.username }} says:<b>{{ post.body }}</b></p></div>
    {% endfor %}
{% endblock %}

routes.pyのindex()に呼び出されるindex.htmlを作成します。
{% %}や{{ }}はjinja2と呼ばれるpythonのテンプレートエンジンです。ブンブン

{% extends "base.html" %}

上記ではbase.htmlを継承してindex.htmlを成形するという内容で、
{% block content %}と{% endblock %}内の記述をbase.htmlの同記載箇所に当てこみます。

{{ }}でroutes.pyから渡された変数を扱っています。

base.html

<html>
    <head>
        {% if title %}
        <title>{{ title  }} -Microblog</title>
        {% else %}
        <title>welcome to microblog</title>
        {% endif %}
    </head>
    <body>
        <div>Microblog: <a href="/index">Home</a></div>
        <hr>
        {% block content %}{% endblock %}
    </body>
</html>

base.htmlはこのような感じ。
{% block content %}{% endblock %}の箇所にindex.htmlが入ります。

こんな感じでhtmlファイルやら変数を組み合わせてHTMLを作成していきます。これがレンダリングかな?
jinja2ではifやforも使うことができます。

文章で変数の受け渡しを説明するのが難しい。

実行してみてる

flask run

http://127.0.0.1:5000/でindex.htmlが表示される。割愛

動くものができると感動する。

参考
blog.miguelgrinberg.com