技術雑記帳兼日記帳

AWS、Python、Terraformの使い方をコッソリ

flask テンプレート

Python

はじめに

Flask便利機能の一つであるテンプレートについて解説する。

テンプレート

準備

下記のファイルを作成する。

  • render.py
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/login/')
def login():
    return render_template('login.html', msg='hello')

@app.route('/login_do', methods=['POST'])
def login_do():
    app.logger.info('%s request', request.form)
    if request.method == 'POST':  
        return render_template('post.html'
                              , msg1=request.form['msg1']
                              , msg2=request.form['msg2'])

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=80)
  • login.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
</head>
<body>
  <form action="/login_do" accept-charset="UTF-8" method="post">
    <input type="text"   name="msg1"></input>
    <input type="text"   name="msg2"></input>
    <input type="submit" name="submit"></input>
  </form>
</body>
</html>
  • post.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to post show page</title>
</head>

<body>
  <p>template Login</p> 
  <p>{{ msg1 }}</p>
  <p>{{ msg2 }}</p>
</body>

</html>

ファイルの構成は下記にして実行する。

.
├── render.py
└── templates
    ├── login.html
    └── post.html

python render.py

これで、render_templateメソッドがtemplates配下のHTML元にレンダリングしてくれる。
※Jinja2テンプレートエンジンのおかげ

アクセス結果

http:// IPアドレス /login
上記にアクセスすると、テキストボックスx2と送信ボタンが表示される。

・画面表示
f:id:halhalhal1:20210320134735p:plain
試しに送信ボタンを押してみた結果が以下
・送信結果
f:id:halhalhal1:20210320134912p:plain

pythonソースで、methods=['POST']を指定してPOSTを受け入れるようにしている。

@app.route('/login_do', methods=['POST'])

そのうえで、指定したURLに対してFORMを記載することでをmsgを表示する処理を実現している。

  <form action="/login_do" accept-charset="UTF-8" method="post">
    <input type="text"   name="msg1"></input>
    <input type="text"   name="msg2"></input>
    <input type="submit" name="submit"></input>
  </form>

なお、loggerでデータを表示させてみたら、こんな感じで入ってることがわかった。

INFO in render: ImmutableMultiDict([('msg1', 'a'), ('msg2', 'a'), ('submit', '送信')]) request

まとめ

お手軽にWeb機能が実装できたのでFlaskの凄さを体感できると思う。
POST以外にもGETとかもよく使うと思うので、メソッドもう少しやりたい。