#概要
今回はPythonのパラメータをHTML側に渡す方法について説明いたします。
#事前作業
●次のリンクサイトからRaspberry PIにFlask環境を構築します。
https://qiita.com/neomi/items/ad7e49c443494f1cecf5
#Blueprintについて参照サイト
Blueprintとは、アプリケーションの機能を分割して実装することができます。
●Blueprintを使ったアプリケーションのモジュール化
https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/blueprints.html
●参照内容
・なぜBlueprintsか?
・Blueprintのコンセプト
・最初のBlueprint
・Blueprintの登録
・Blueprintのリソースフォルダ
・静的ファイル
・テンプレート
・URLの構築
・エラー処理(Error Handlers)
#サンプルソース作成
①次はディレクトリの構成です。
# /home/pi/work
pi@raspberrypi:~ $ tree
.
├── app
│ ├── __init__.py
│ ├── main
│ │ └── index.py
│ └── templates
│ └── main
│ └── index.html
└── run.py
4 directories, 4 files
pi@raspberrypi:~ $
②次の4つのファイルを作成します。
# file name : __init__.py
# pwd : /home/pi/work/app/__init__.py
from flask import Flask
app= Flask(__name__)
# /home/pi/work/app/main/index.pyファイルインポート
from app.main.index import main as main
# Blueprintの登録
app.register_blueprint(main)
# file name : index.py
# pwd : /home/pi/work/app/main/index.py
from flask import Blueprint, render_template
main= Blueprint('main', __name__, url_prefix='/')
# http://url/main
@main.route('/main')
# index.htmlを参照してtestDataをテンプレートのhtmlDataに設定して表示します。
def index():
testData = 'test data'
# /home/pi/work/app/main/templates/main/index.html
return render_template('/main/index.html', htmlData=testData)
<!--file name : index.html-->
<!--pwd : /home/pi/work/app/templates/main/index.html-->
<html>
<head>
This is Main page Head<br>
</head>
<body>
This is Main Page Body<br>
test : {{htmlData}}
</body>
</html>
# file name : run.py
# pwd : /home/pi/work/run.py
from app import app
app.run(host='192.168.1.25', port=5000)
#動作確認
①次のコマンドでアプリを起動します。
pi@raspberry:~/work $ python3 run.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: Do not use the development server in a production environment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://192.168.1.25:5000/ (Press CTRL+C to quit)
#参考サイト
・Flask導入〜Blueprint適用メモ
https://qiita.com/shimajiri/items/fb7d1d58de0b0d171c88
#終わりに
テンプレート側のHTMLタグのHead部分がなぜタブのタイトルに表示されない疑問点が出てきました。ふむ。データのパラメータを渡し方はこんな感じですね。
今回のポイントはBlueprintとデータの渡し方のサンプルを確認しました。
次回はデータベースから取得したデータの表示について説明します。