TL;DR
Docker・Flask・SQLAlchemyを使って簡単なメモアプリを作ってみました。
SQLAlchemyを使ってデータベースを作成〜データを取ってきてブラウザ上で表示するところまでやりました。
本記事ではメモアプリが完成するまでの手順と、詰まったところやその解決方法を書いていきます。
以下のリポジトリにサンプルコードを公開しました。フォルダ構成や記事の中で出てこないファイルなどはこちらをご覧ください。
サンプルコード→ https://github.com/hiseumn/flask-postgresql-sample
また、参考資料に前回の記事を掲載しています。一通り動くところまでの手順はそちらに書いたため、今回は省略します。
必要なライブラリのインストール
SQLAlchemy
今回はSQL文を直接書かず、ORMを使用しました。
terminal
rye add sqlalchemy
uuid
保存するメモのIDとしてUUIDを使用しました。IDを時系列でソートしたかったので、ビルトインのv4ではなくv7を使用するため、以下のライブラリをインストールしてます。
terminal
rye add uuid6
主なファイル構成
app.py
python
from flask import Flask, render_template, request
import os
from sqlalchemy import create_engine, desc
from sqlalchemy.orm import sessionmaker
from sample_flask_memo.infra.models.memo import Memo
from uuid6 import uuid7
app = Flask(__name__)
engine=create_engine(f"postgresql+psycopg://postgres:postgres@localhost:5432/memo")
Session = sessionmaker(bind=engine)
session = Session()
@app.route("/", methods=["GET"])
def index():
memo_list=session.query(Memo).order_by('memo').all()
print(memo_list)
return render_template("index.html", memo_list=memo_list)
@app.route("/add", methods=["POST"])
def add():
memo = request.form.get("memo")
memo=Memo(id=uuid7(), memo=memo)
session.add(memo)
session.commit()
return index()
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True)
※データベースに接続するためのIDとパスワードをハードコーディングすることは、セキュリティリスクになりかねないため真似しないでください。
index.html
入力したメモが4列で表示される構造にしました。
html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>テストページ</title>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="mb-3">
<form action="/add" method="POST">
<div class="mb-3 form-check">
<label for="exampleFormControlTextarea1" class="form-label">登録するメモ</label>
<textarea class="form-control" id="exampleFormControlTextarea1" name="memo" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col">
{% for memo in memo_list %}
{%- if loop.index0 % 4 == 0 -%}
<div class="card">
<div class="card-body">
<h4>{{memo.id}}</h4>
<p>{{memo.memo}}</p>
</div>
</div>
{%- endif %}</li>
{% endfor %}
</div>
<div class="col">
{% for memo in memo_list %}
{%- if loop.index0 % 4 == 1 -%}
<div class="card">
<div class="card-body">
<h4>{{memo.id}}</h4>
<p>{{memo.memo}}</p>
</div>
</div>
{%- endif %}</li>
{% endfor %}
</div>
<div class="col">
{% for memo in memo_list %}
{%- if loop.index0 % 4 == 2 -%}
<div class="card">
<div class="card-body">
<h4>{{memo.id}}</h4>
<p>{{memo.memo}}</p>
</div>
</div>
{%- endif %}</li>
{% endfor %}
</div>
<div class="col">
{% for memo in memo_list %}
{%- if loop.index0 % 4 == 3 -%}
<div class="card">
<div class="card-body">
<h4>{{memo.id}}</h4>
<p>{{memo.memo}}</p>
</div>
</div>
{%- endif %}</li>
{% endfor %}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
for文の説明
-
{% for memo in memo_list %}は、memo_listというリスト内の各メモを一つずつ取り出し、それをmemoという変数に代入して処理するループを示しています -
<h4>{{memo.id}}</h4>は、各メモのIDがそれぞれヘッダーに表示されます -
<p>{{memo.memo}}</p>は、ブラウザ上で入力したメモが表示されます -
memo_listから各メモを取り出して表示します。それぞれのメモはカード形式で表示されます
memo.py
python
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.schema import Column
from uuid6 import uuid7
from sqlalchemy_utils import UUIDType
from sqlalchemy.types import Text
Base = declarative_base()
class Memo(Base):
__tablename__ = "memo" # テーブル名を指定
id = Column(UUIDType(binary=False), primary_key=True, default=uuid7)
memo = Column(Text)
def __repr__(self): # メモの内容を返す
return f"{self.id} {self.memo}"
-
Baseは、後で定義する全てのモデルクラスが継承するベースクラスです -
class Memo(Base)は、SQLAlchemyのモデルクラスでBaseを継承しています -
def __repr__(self)は、オブジェクトの文字列表現を定義し、デバッグやログ出力時に役立ちます。self.idとself.memoの内容を返します
詰まったところ
入力したデータを表示できない
そもそも全く別のファイルからデータを取り出そうとしていた
最初はhttp statusで304エラーが出てきてしまい、ひとつずつエラーが出てきたコードを調べながら進めていました。
しかし、入力したデータが表示されないどころか全く違うところからデータを引っ張ってきていたことがわかりました。
データベースに接続できない
psycopgが必要だったが実行するまでエラーとならなかった
上の画像は、psycopg2をインストールした際のエラー文です。
データベースに接続するためのドライバーが必要だったので、ターミナルでrye add psycopg2を入力して解決しました。
## 参考資料
以上