Python:Flask DBのmodelsはJson形式の文字列で返そうよってお話し

初めに

大学２年の春休みの課題（ゼミ）中で色々データの受け渡しに困ったのでこんな記事を描こうと思い至った次第。
地味にqiita初投稿の記事でちょっと緊張。

なんか変だよとかあったらなんでもご教授ください。

環境
Python3.9.2
flask1.1.2
Vue2.6.12
その他ライブラリ等割愛

何が起こったのか

flaskとVueでSPAを作ってたらDBからのデータ受け渡しで困った。

原因

過去コード何にも考えずにを使いまわしたこと。

FastAPIのチュートリアルでtodoappをゼミの勉強会で作ったのですが、その時のmodelsを考えなしにほぼそのまま使いました。はい。アホです。

コード

flask-getdata

@app.route('/chat_api/')
def get_chat():
    talks = db.session.query(Talk).all()
    db.session.close()
    res = dict()
    for i in range(len(talks)):
        res[i] = str(talks[i]) 

    return res

上記のコードでdbからtalkのリストを取得してフロントvue.jsから表示しようとしました。

models(before)

class Talk(Base):
    """
    toDoタスク
    id       : 主キー
    user_id  : 外部キー
    content  : 内容
    date     : 作成日
    """
    __tablename__ = 'talk'
    id = Column(
        'id',
        INTEGER(unsigned=True),
        primary_key=True,
        autoincrement=True,
    )

    user_id = Column('user_id', ForeignKey('user.id'))
    content = Column('content', String(256))
    date = Column(
        'date',
        DateTime,
        default=datetime.now(),
        nullable=False,
        server_default=current_timestamp(),
    )

    def __init__(self, user_id: int, content: str, date: datetime = datetime.now()):
        self.user_id = user_id
        self.content = content
        self.date = date


    def __str__(self):
        return str(self.id) + \
               ': user_id -> ' + str(self.user_id) + \
               ', content -> ' + self.content + \
               ', date -> ' + self.date.strftime('%Y/%m/%d - %H:%M:%S')

"->"が良くなかった。

models(after)

def __str__(self):
        parms =  {
                "id" : self.id,
                "user_id" : self.user_id,
                "content" : self.content,
                "date" : self.date.strftime('%Y/%m/%d - %H:%M:%S') 
            }
        json_str = json.dumps(parms,ensure_ascii=False, indent=2)
        return json_str

getTalk

const path = `http://localhost:5000/chat_api`
axios.get(path)
          .then((response) => {
            var len = Object.keys(response.data).length
            for(var n = 0 ; n < len ; n++ ){
                var cont = JSON.parse(response.data[n])
                this.message.push({user_id:cont['user_id'],message:cont["content"]})
            }

フロントではこんな感じでtalkを取得してます。

結果

実際これでもvueで受け取る時のデータは文字列なのですが、
json.parse()でjson認識できる(しやすい)ので格段にデータの扱いやすさが変わりました。
データ構造まじ大事