Python on Pyramid jinja2編

お疲れ様です、竹上(ぱいそん)です。

Python on Pyramid jinja2編です。

前回(Python on Pyramid SQLAlchemy編)の続きからやっていきます。

前回は、SQLAlchemyを使ってDBから引き出したデータをそのまま表示するところまでやりました。
今回はjinja2というテンプレートエンジンを使用して動的にHTMLを生成していきます。

まず、jinja2を使うための設定から、
いつも通り、仮想環境にパスを通します。

生成した仮想環境のディレクトリに移動して、

$ source bin/activete

jinja2を仮想環境にインストール

$ pip install pyramid_jinja2

生成したプロジェクトのディレクトリ直下にある
__init__.pyでjinja2をインクルードします。

__init__.py (9行目らへんから)

def main(global_config, **settings):
    """ This function returns a Pyramid WSGI application.
    """
    engine = engine_from_config(settings, 'sqlalchemy.')
    DBSession.configure(bind=engine)
    Base.metadata.bind = engine
    config = Configurator(settings=settings)

    # chameleonのインクルード文を削除
    # config.include('pyramid_chameleon')

    # jinja2をインクルード
    config.include('pyramid_jinja2')

    config.add_static_view('static', 'static', cache_max_age=3600)
    config.add_route('home', '/')
    config.scan()
    return config.make_wsgi_app()

次にviews.pyでレンダリングするテンプレートを変更します。

views.py(12行目らへん)


# @view_config(route_name='home', renderer='templates/mytemplate.pt')
@view_config(route_name='home', renderer='templates/mytemplate.jinja2')
def my_view(request):

    models = DBSession.query(Post).all()
    return { 'models': models }

コメントアウトしてるのは解りやすくしているだけなので
消してしまっても大丈夫です。

次にレンダリングするviewを作成します。

前回作成したテンプレートをコピーして
mytemplate.jinja2を作成します。

jinja2で使用するテンプレートの拡張子は基本的にjinja2になります。

chameleonで使っていた文法では使えないので、
${} を {{ }} に置き換えます。

templates/mytemplates.jinja2

  
    db test
    {{ models[0] }}
{{ models[0].id }}
{{ models[0].name }}
{{ models[0].value }}
{{ models[0].created }}

{{ models[1] }}
{{ models[1].id }}
{{ models[1].name }}
{{ models[1].value }}
{{ models[1].created }}

{{ models[2] }}
{{ models[2].id }}
{{ models[2].name }}
{{ models[2].value }}
{{ models[2].created }}

一度この状態で保存して表示してみましょう。

設定ファイルなどがあるディレクトリに移動して

$ pserve developmemt.ini --reload

Pyramidはアプリケーション実行中にソースを修正しても反映されませんが。
–reloadオプションを付けることで、
終了後に自動的に再起動するようになります。
かといってソースに致命的なエラーがあると止まってしまいますので、
みえるところにサーバのコンソールをおいておくのをお勧めします。

サーバが起動したら、
http://localhost:6543
にあくせすします。

前回と同じ表示になると思います!

せっかくテンプレートエンジンを使っているので、実装を組み込んでいきます。

ご察しの通りjinja2で変数を表示するときは {{ }} で囲みます。
繰り返しや分岐を組み込む際は {% %} でかこみます。
超シンプルですね!
機能をざっくり下記します。

・for in文
{% for in %}
{% endfor %}

・if elif else文
{% if %}
{% elif %}
{% else %}
{% endif %}

・マクロ定義と展開
{% macro %}
{% call %}

・変数の定義
{% set %}

他にもありますが、これだけ覚えておけば何でもできます。

今回はオブジェクト配列をviewsから受け取っているので、
for文を使って表示してみます。

templates/mytemplates.jinja2

    db test
    {% for model in models %}
      {{ model }}
{{ model.id }}
{{ model.name }}
{{ model.value }}
{{ model.created }}

{% endfor %}

すっきり!

もう少し頑張るとこんな感じ

templates/mytemplate.jinja2

    
    db test
    
{% for model in models %}
  • {{ model.id }}
  • {{ model.name }}
  • {{ model.value }}
  • {{ model.created.strftime("%Y/%m/%d %H:%M:%S") }}
{% endfor %}

static/top.css

article {
    width: 100%;
}

section {
    margin: 0 auto;
    width: 70%;
}

ul {
    border: 5px solid #999;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

li {
    list-style: none;
}

li.id {
    color: gray;
    float: left;
}

li.name {
    font-weight: bold;
    margin-left: 20px;
}

li.value {
    padding: 10px;
}

li.created {
    text-align: right;
}

staticディレクトリにはその名の通り静的なリソースを入れておきますので、
top画面のcssはstaticに入れています。

テンプレート側では

{{ request.static_url('project_name:static/') }}

でstaticのディレクトリのurlを取得することができます。

今回は特に使っていないですが、
デフォルトで読み込んでいたjqueryとbootstrapは便利なので読み込んでいます。

pyramid-ss01

今こんな感じになってます。
なってますかね?

次はフォームでDBにデータを登録するところをやります。
ユーザからの入力を受け取るので
deformでバリデーションを実装したいと思います。

コメントを残す

メールアドレスが公開されることはありません。