More than 5 years have passed since last update.

PythonのFlaskを使用してWebアプリ作成してみよう（２）HTMLの表示とメソッドとパラメータの受け取りかた

Last updated at 2019-10-06Posted at 2019-07-13

このシリーズの目的

PythonのフレームワークであるFlaskを使用してWebアプリに必要な機能の作成と解説をやります。
普段の勉強のアウトプットとして書いています。質問や指摘は大歓迎です。

前回まで

PythonのフレームワークFlaskを使用してWebアプリ作成の物語（１）こんにちは世界

今回の目標

FlaskでHtmlを返してみよう
３種類のパラメータの受け取りかたを知ろう
- urlの場合
- getの場合
- postの場合

ソースコード

GitHubに上げています

環境準備

環境構築は以下のリンクを参考にしてください。
PythonのフレームワークFlaskを使用してWebアプリ作成の物語（１）こんにちは世界

フォルダ構成

$ tree
.
├── README.md
├── form.html
├── requirements.txt
└── src
    ├── main.py
    └── templates
        └── hello.html

解説

そもそもGETとかPOSTって何だっけ？？

ものすごく、ざっくり言うと

GET : 他の人に見られても大丈夫なデータ（Amazonの商品検索とか）
POST : 他の人に見られるのは困るデータ（会員登録とか）

もっと詳しく知りたい場合は、以下を見てみるといいかも
GETとPOSTの違いについて
 「GETメソッド」と「POSTメソッド」の違い
 Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

main.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/<name>')
def hello_world(name):
    # urlから直接パラメータを受け取る
    return render_template("hello.html", name=name, method="URLパラメータ")

@app.route('/param', methods=["GET","POST"])
def hello_world_with_parameter():
    
    if request.method == 'POST':
        # postのパラメータの受け取る
        name = request.form['name']
    else:
        # getのパラメータの受け取る
        name = request.args.get('name')

    return render_template("hello.html", name=name, method=request.method)


if __name__ == '__main__':
    app.run()

ポイント

render_template でhtmlをレンダリングしている。
requestでメソッドの判定やパラメータの受け取りを行う。
@app.route('/param', methods=["GET","POST"])のmethodsでリクエストメソッドを絞れる。
render_template("hello.html", name=name, method=request.method)でレンダリング時に使用するパラメータを渡している。

hello.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <p>こんにちは {{name}} さん</p>
    <p>このページは{{method}}で作られたよ。</p>
    </body>
</html>

ポイント（hello.html）

{{パラメータ名}}でパラメータを表している

動作確認

flask の起動

$ python src/main.py
 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Htmlの確認
- http://127.0.0.1:5000/Tom にブラウザからアクセス
- form.htmlを使用して、テキストを送信してレンダリングされたhello.htmlを確認

アクセスした際の表示

http://127.0.0.1:5000/Tomにブラウザからアクセス

form.htmlを使用して、テキストを送信

form.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <form method="POST" action="http://127.0.0.1:5000/param">
      <div>
        <input name="name" />
      </div>
      <div>
        <button>POSTで送信</button>
      </div>
    </form>
    <form method="GET" action="http://127.0.0.1:5000/param">
      <div>
        <input name="name" />
      </div>
      <div>
        <button>GETで送信</button>
      </div>
    </form>
  </body>
</html>