flaskでformデータの受け渡し
一つ前では、deta.spaceでflaskのhello worldをやりましたので、今度はformデータの受け渡しをやってみましょう。
formとは
HTMLのformタグでinputで受け取ったデータを、指定したurlに送信して、受け取ることができます。これができればアンケートや掲示板のデータ入力ができるようになります。
flaskでindex.htmlを利用する方法
今回は、複数のhtmlファイルとコントローラーのmain.py、そして環境設定ファイルが必要です。そこでフォルダーに階層が必要になります。まずは、前回と同じでMicroを作成してから、フォルダーを作成して行きます
新規Microを作成する
mkdir formtest
cd formtest
space new
フォルダーに以下のファイルを作成していきます
main.py
requirements.txt
SpaceFile
\templates
index.html
calc.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>formTest</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-1 text-primary">べき乗の計算</h1>
<div class="m-5 border p-3">
<p>pythonでべき乗の計算をします。整数を２つ入力してください。</p>
<form action="/calc" method="post">
<div class="mb-3 row p-3">
<div class="col-sm-4">
<input type="text" name="num1" size="20" maxlength="200">の
</div>
<div class="col-sm-4">
<input type="text" name="num2" size="20" maxlength="200">べき乗
</div>
</div>
<div class="mb-3 row p-3">
<div class="col-sm-10">
<input class="btn btn-primary" type="submit" value="計算">
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</div>
</body>
</html>
Bootstrap5を使用しています。formの中でinputを2つ行い、num1とnum2を calc.htmlに送っています。
calc.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>formTest 結果表示</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-1 text-primary">べき乗の計算</h1>
<div class="m-5 border p-3">
<p>pythonでべき乗の結果です。</p>
<dl>
<!-- もとの数 -->
{{a}}**{{b}}={{c}}
</dl>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</div>
</body>
</html>
ここでは {a}と{b}と{c}という変数が宣言されていて、python経由でnum1とnum2と計算結果が送られてきます。それをrenderして表示します。
コントローラのpythonを記述します
main.pyにpythonのプログラムを記述します。flaskを使ってformのデータ渡しを行います。
main.py
from flask import Flask, render_template
from flask import request
import signal
import sys
app = Flask(__name__)
@app.route("/")
def hello():
return render_template('index.html')
@app.route("/calc",methods=['POST'])
def connect():
print("calc called")
num1 = int(request.form['num1'])
num2 = int(request.form['num2'])
powered=0
try:
powered = num1 ** num2
print("data:",num1,num2,powered)
except:
pass
return render_template('calc.html', a=num1,b=num2,c=powered)
def sigint_handler(signal,frame):
sys.exit(0)
if __name__ == '__main__':
signal.signal(signal.SIGINT, sigint_handler)
app.run(host='0.0.0.0', port=5000, debug=True)
つづいて、実行時に必要なライブラリー環境を宣言します。今回もflaskを使うのでそれを宣言します。
requirements.txt
flask
このファイルのスペルをよく間違えるので、確認してください。
SpaceFile
# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0 v: 0 micros: - name: formtest src: ./ engine: python3.9 primary: true public: true
projectをデプロイします
space push
これでデプロイ終了です。実行するにはcanvasに作成されたアイコンを選択してください。
formtestで実験できます