Heroku の Flask の GET,POST のサンプル #Heroku

Heroku の Flask で、GET,POST を行うサンプルです。

実行結果

https://p0083.herokuapp.com/

フォルダー構成

$ tree
.
├── Procfile
├── get_post.py
├── requirements.txt
└── static
    ├── get_post.js
    └── index.html

get_post.py

# -*- coding: utf-8 -*-
# -------------------------------------------------------------------
#
#	get_post.py
#
#						Aug/07/2017
# -------------------------------------------------------------------
import os
import json
from flask import Flask
from flask import request

# -------------------------------------------------------------------
app = Flask(__name__)

# -------------------------------------------------------------------
@app.route('/')
def Welcome():
    return app.send_static_file('index.html')

# -------------------------------------------------------------------
@app.route("/hello")
def hello():
	str_out = ""
	str_out += "<h2>Hello from Python!</h2>"
	str_out += "<blockquote>"
	str_out += "こんにちは<p />"
	str_out += "</blockquote>"
	str_out += "Aug/07/2017 PM 12:49<br />"
#
	return str_out
#
# -------------------------------------------------------------------
@app.route("/get" ,methods=['GET'])
def get_proc():
	message = []
	message.append("*** get_proc *** start ***")
	message.append("request.method = " + request.method)
	message.append("request.args.get aa = " + request.args.get('aa',""))
	message.append("request.args.get bb = " + request.args.get('bb',""))
	message.append("request.args.get cc = " + request.args.get('cc',""))
	message.append("*** get_proc *** end ***")
#
	str_out = json.dumps(message)

	return str_out
# -------------------------------------------------------------------
@app.route("/post" ,methods=['POST'])
def post_proc():
	message = []
	message.append("*** post_proc *** start ***")
	message.append("request.method = " + request.method)
	message.append("request.form = " + json.dumps(request.form))
	message.append("request.form.aa = " + request.form['aa'])
	message.append("request.form.bb = " + request.form['bb'])
	message.append("request.form.cc = " + request.form['cc'])
	message.append("*** post_proc *** end ***")
#
	str_out = json.dumps(message)
	return str_out
# -------------------------------------------------------------------
if __name__ == "__main__":
	port = int(os.environ.get("PORT", 5000))
	app.run(host='0.0.0.0', port=port)

# -------------------------------------------------------------------

Procfile

web: gunicorn get_post:app --log-file -

requirements.txt

Flask
gunicorn
requests

static/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="static/get_post.js"></script>
<title>Flask Get Post</title>
</head>
<body>
<h2>Flask Get Post のサンプル</h2>
<div id="message_get">message</div>
<p />
<div id="message_post">message</div>
<p />
<hr />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Nov/08/2022 PM 15:11</li>
</body>
</html>

static/get_post.js

// -------------------------------------------------------------------
//	static/get_post.js
//
//					Aug/07/2017
// -------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text ("*** get_post.js *** 開始 ***")

	get_proc ()

	post_proc ()

	jQuery("#outarea_hh").text ("*** get_post.js *** 終了 ***")

})

// -------------------------------------------------------------------
function get_proc ()
{
	url_target = "/get"

	args = {"aa": "PPP",
		"bb": "QQQ",
		"cc": "RRR"
		}

	jQuery.get (url_target,args,function (res)
		{
		const messages = JSON.parse(res)
		var str_out = ""
		messages.forEach(function (message)
			{
			str_out += message + "<br />"
			})

		jQuery("#message_get").html (str_out)
		})
}

// -------------------------------------------------------------------
function post_proc ()
{
	url_target = "/post"

	args = {"aa": "Hello",
		"bb": "Good",
		"cc": "Morning"
		}

	jQuery.post (url_target,args,function (res)
		{
		const messages = JSON.parse(res)
		var str_out = ""
		messages.forEach(function (message)
			{
			str_out += message + "<br />"
			})

		jQuery("#message_post").html (str_out)
		})
}

// -------------------------------------------------------------------

Heroku にアップロード

heroku login
git init
git add .
git commit -m "init"
heroku create p0083
git push heroku master

コードのダウンロード

heroku git:clone --app p0083

コードの更新

go_update.sh

git add .
git commit -m "modified on Nov/08/2022 PM 16:33"
git push heroku master