Vue.js+Flask+axios+mysqlでDBの結果を画面表示

前回記事の続きです。使用しているテーブルや今回追記した箇所以外は前回までの記事を参照ください。今回試したことは以下になります。

• Vue.js側にaxiosを追加し、axios経由でFlaskを実行

• Flask側は上記に対応するメソッドを追加する

フロントエンド側

axiosを使用するので取得しておきます。axiosはjsベースのHTTP通信が行えるライブラリです。

npm install axios

vueファイルは以下のようにしました。画面表示用の変数resultを宣言しておき、axiosを経由して/api/kakeibo/dataリクエストを発効しています。その結果をresult.valueにセットすることで画面に反映しています。

<script setup>
import {ref} from 'vue';
import axios from 'axios';

const result = ref([])

const resultUpdate = async () => {
  const response = await axios.get('/api/kakeibo/data')
  result.value = response.data
}

resultUpdate()
</script>

<template>
    <div>{{ result }}</div>
</template>

バックエンド側

こちらはフロントに対応するよう@app.routeを設定するだけでした。

@app.route("/api/kakeibo/data")
def getKakeiboAll():
    result = queryExec("SELECT * FROM kakeibo")
    if result is None:
        result = []
    return result

結果

無事画面にSELECT結果が表示されました。現時点ではリストをそのまま表示しているのでカラム毎に分割したりv-forでレコード単位に分割するなどすれば問題なさそうです。