やりたいこと

Flaskを用いて、共通テンプレートを使用した画面遷移プログラムのサンプルソースを作成したい。

環境

Flask 1.0.2
Python 3.5.2 (default, Nov 23 2017, 16:37:01)

サンプルソース

以下、ソースファイルを作成。
- ワークディレクトリ：/home/xxx/workdir/sample_app
- indexページ：/home/xxx/workdir/sample_app/index.py
- テンプレート：/home/xxx/workdir/sample_app/templates/index.html
layout.htmlが共通テンプレートです。ヘッダータグ、Bodyタグの骨格を記載しています。
index.htmlとscreen_tran.htmlは共通テンプレートのlayout.htmlをextends で読み込んでいます。その為、index.htmlとscreen_tran.htmlは画面固有の出力処理のみ記載すれば良くなります。

index.py

from flask import Flask, render_template
app = Flask(__name__)

user_name="田中　一郎"

# メニューを表示
@app.route("/")
def menu():
    return render_template("index.html", user_name = user_name)

# マイページ
@app.route("/mypage")
def walk():
    menu_name = "マイページ"
    info = "会員ランク：A"
    return render_template("screen_tran.html", menu_name = menu_name, user_name = user_name, info = info)

# 購入履歴
@app.route("/history")
def attack():
    menu_name = " 購入履歴"
    info = "2018.11.01 iMac 120,000"
    return render_template("screen_tran.html", menu_name = menu_name, user_name = user_name, info = info)

index.html

{% extends "layout.html" %}
{% block content %}
    <h1>{{ user_name }}さん。こんにちは！</h1>
    <p><a href="/mypage">マイページ</a></p>
    <p><a href="/history">購入履歴</a></p>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask</title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

screen_tran.html

{% extends "layout.html" %}
{% block content %}
    <h1>{{ user_name }}さんの{{ menu_name }}です。</h1>
    <p>{{ info }}</p>
    <p><a href="/">メニューに戻る</a></p>
{% endblock %}

コマンドを実行してFlaskのサーバーを起動

FLASK_APP="index.py" FLASK_ENV=development flask run

ブラウザで実行結果を確認
- http://localhost:5000 にアクセス

実行結果を確認

Topページを表示しました。期待通りです。
マイページリンクをクリックして画面遷移しました。期待通りです。
メニューに戻るリンクをクリックして、Topページに画面遷移することも出来ました。
再び、Topページから、購入履歴ページリンクをクリックして画面遷移しました。期待通りです。

【Flask】コーディングメモ（共通テンプレートを使用した画面遷移プログラムのサンプルソース）

やりたいこと

環境

サンプルソース

実行結果を確認