Pythonの軽量webフレームワーク「Flask」でフォーム送信　GET/POST通信を行うサンプルコード

Flaskを使えばフォーム送信で動的なwebページが簡単に作れる

Pythonの軽量webフレームワークとして有名な「Flask」

ここではそのFlaskを用いてフォーム送信 GET/POST通信を行うwebページの簡単な作り方をご紹介します。

f:id:karupoimou:20190711105052p:plain:w400 — 作例

ファイル構成

Flask_test
│
│ main.py
│
├─static
│　 style.css
│
└─templates
　　index.html
　　layout.html
　　output.html

ここではローカル実行で最低限必要なファイルだけ挙げています。
※実際の稼働環境では「.htaccess」「index.cgi」なども必要となります。

サンプルコード

テンプレートhtml

index.html

{% extends "layout.html" %}
{% block body %}
<h2>入力フォーム</h2>

<form action = "output/" method = "GET">
<h3>GET通信</h3>
<p><input type="text" name="url_get_text" size="50" minlength="3" maxlength="1000"　required  placeholder="https://www.google.com/"></p>
<p><input class="button" type="submit" value="GET通信でoutputページを開く"></p>
</form>

<form action = "output/" method = "POST">
<h3>POST通信</h3>
<p><input type="text" name="url_post_text" size="50" minlength="3" maxlength="1000"　required  placeholder="https://www.google.com/"></p>
<p><input class="button" type="submit" value="POST通信でoutputページを開く"></p>
</form>

{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel = "stylesheet" href = "static/style.css">
    <title>FlaskでGET/POST通信</title>
</head>
{% block body %}
{% endblock %}
</html>

今回はヘッダー用に「layout.html」を別ファイルにしています。
なお必ずしも別ファイルにする必要はないみたいです。

output.html

{% extends "layout.html" %}
{% block body %}
<br>
{{ send_type }}<br>
<br>
{{ url_text }}<br>
<br>
{% endblock %}

{{ send_type }}　{{ url_text }}　の部分にFlaskからreturnされたテキストが代入される形となっています。

テンプレートのCSS

style.css

body {
background:#F5F5F5;
}
h1 {
  font-size: 300%;
}
h2 {
  font-size: 200%;
}
h3 {
  font-size: 150%;
}

Flaskの本体

main.py

#!/virtual/ユーザー名/.pyenv/versions/3.7.0/bin/python
# -*- coding: utf-8 -*-
# print('Content-type: text/html; charset=UTF-8\n')

import sys
# sys.stdout.write('Content-type: text/html; charset=UTF-8\n\n')

from flask import Flask, render_template,request
import requests

app = Flask(__name__)

#indexページ(フォーム画面)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/output/', methods = ['POST', 'GET'])
def output():
    if request.method == 'GET':
        result  = request.args.get('url_get_text', '')
        url_text=result
        send_type="GET通信"

    elif request.method == 'POST':
        result  = request.form
        url_text=str(result["url_post_text"])
        send_type="POST通信"

    return render_template("output.html",url_text=url_text,send_type=send_type)

#おまじない
if __name__ == '__main__':
    # app.debug = False#デバッグモードTrueにすると変更が即反映される
    app.debug = True#デバッグモードTrueにすると変更が即反映される
    app.run()

#ファイルのエンコードはUTF-8で保存すること
# http://127.0.0.1:5000/
# http://127.0.0.1:5000/output
#上記URLをブラウザに打ち込むとページが開く