これまでFlaskでWebアプリケーションを構築する方法について紹介してきましたが、今回はGETメソッドでのリクエストに応じてデータベースから取得したデータをテーブル形式で画面に表示してみようと思います。
過去のFlaskに関する記事は以下からご覧ください。
https://www.learning-nao.com/?tag=flask
前提
Pythonパッケージ
今回使用するPythonパッケージは以下の通りです。
- Flask
- Pandas
- psycopg2（PostgreSQL操作用）
DB
今回はPostgreSQLを用います。”dvdrental”というデータベースを用意し、支払情報テーブルからデータを取得します。
実装
まずは今回のコード全体です。pythonはmain.py、結果を表示する画面はresult.htmlに記述しています。
from flask import Flask, render_template, request
import psycopg2
import pandas as pd
app = Flask(__name__)
# PostgreSQLへの接続
conn = psycopg2.connect(
user="ｘｘｘｘ", #ユーザ
password="ｘｘｘｘｘ", #パスワード
host="localhost", #ホスト名
port="5432", #ポート
dbname="dvdrental") #データベース名
@app.route('/')
def get_version():
cur = conn.cursor()
cur.execute('SELECT version()')
version = cur.fetchone()[0]
return f'PostgreSQL version: {version}'
@app.route('/result', methods=["GET"])
def result():
# GET送信の処理
user_id = request.args.get("user_id","")
print(user_id)
sql = "select * from payment where customer_id='{}'".format(user_id)
df = pd.read_sql(sql, conn)
return render_template('result.html', table=(df.to_html(classes="mystyle")))
if __name__ == '__main__':
app.run(host='localhost')<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mystyle</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: #666;
background-color: #f8f8f8;}
</style>
</head>
<body>
<h1>支払情報</h1>
{{table | safe}}
</body>
</html>PostgreSQLの接続
まずはデータベースオブジェクトconnを作成します。
# PostgreSQLへの接続
conn = psycopg2.connect(
user="ｘｘｘｘ", #ユーザ
password="ｘｘｘｘｘ", #パスワード
host="localhost", #ホスト名
port="5432", #ポート
dbname="dvdrental") #データベース名PythonからPostgreSQLへの接続については以下記事にまとめています。
DBとの接続を確認してみる
おまけみたいな内容にはなりますが、DBとの接続確認をWebを通してやってみます。
以下のような関数を用意します。接続したPostgreSQLのバージョンを取得し表示します。
#PostgreSQLのバージョンを取得し返す
@app.route('/')
def get_version():
cur = conn.cursor()
cur.execute('SELECT version()')
version = cur.fetchone()[0]
return f'PostgreSQL version: {version}'Webアプリケーションを起動し、当該URLを確認してみます。
バージョンを取得できたので、DBと接続できていることを確認できました。
検索結果のテーブルを画面に表示する
ここからがメインのところになります。今回はGETメソッドでパラメータを受け取り、そのパラメータ値でDBを検索した結果をテーブル形式でHTMLに渡し、画面に表示します。
@app.route('/result', methods=["GET"])
def result():
# GET送信の処理
user_id = request.args.get("user_id","")
print(user_id)
sql = "select * from payment where customer_id='{}'".format(user_id)
df = pd.read_sql(sql, conn)
return render_template('result.html', table=(df.to_html(classes="mystyle")))基本ロジック
GETメソッドでパラメータを受け取る場合は、デコレータ（@から始まる行）に明記します。もう1つPOSTメソッドもありますが、今回は使用しません。使用する場合はGETをPOSTに置き換えるか、両方使う場合は配列形式で両方を指定します。
request.args.get()ではパラメータの値を取得します。今回は”user_id”という名称のパラメータを取得します。
取得したuser_idはSQL文のWHERE句に入れ、動的に結果を取得するようにします。DBからの取得結果はPandasデータフレームに格納します。
取得結果のデータフレームはテーブル形式でresult.htmlに渡します。
HTMLにPandasデータフレームを渡す
Pandasのデータフレームオブジェクトにはto_htmlというメソッドが用意されており、データフレームをHTML形式に変換することができます。変換したものを結果を表示するHTMLに組み込むことで、テーブルを表示させています。
HTMLの変数tableにdf.to_html()の結果を渡します。
return render_template('result.html', table=(df.to_html(classes="mystyle")))<body>
<h1>支払情報</h1>
{{table | safe}}
</body>動作確認
では、作成したFlask Webアプリケーションを起動して結果を確認してみます。
GETメソッドではパラメータをURLにて渡します。試しにブラウザで以下のようなURLを実行してみます。
http://localhost:5000/result?user_id=341URLの？以降にパラメータを指定します。今回はuser_idが341のデータを取得してみます。
user_id（customer_id）が341のデータを表示できました。
まとめ
Flaskを使ってGETメソッドでのリクエストに応じてデータベースから取得したデータをテーブル形式で画面に表示させてみました。GETメソッド（POSTメソッド）を使ってデータの授受ができると、Webアプリケーションとしての幅が大きく広がります。
またDBやPandasも組み合わせて簡単にデータを見せることができるので、是非活用してください^^
ではでは👋
