#やりたいこと
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ページから、購入履歴ページリンクをクリックして画面遷移しました。期待通りです。
