Vue.js勉強記録その32 外部サービスを利用しよう 6-2 ver2
こちらの書籍で勉強中です。
今回は、前回作ったFirebaseのデータベースにアクセスして、値を取得します。
■FirebaseとREST API
・axiosでデータベースにアクセスする
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>またいつもの様に、bootstrapを導入しています。
HelloWorld.vue
<template>
<section class="alert alert-primary">
<h1>{{ data.title }}</h1>
<p>{{ data.message }}</p>
<table class="table table-light table-striped">
<thead class="table-dark text-center">
<tr>
<th>Name</th>
<th>Mail</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, key) in data.fire_data" v-bind:key="key">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ key }}</td>
</tr>
</tbody>
</table>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, reactive } from "vue";
let url = "https://○○○○○.firebaseio.com/person.json";
export default {
setup(props) {
const data = reactive({
title: "Firebase",
message: "This is Firebase sample.",
fire_data: null,
});
const getData = () => {
axios.get(url).then((result) => {
data.fire_data = result.data;
});
};
onMounted(() => {
getData();
});
return { data };
},
};
</script>getDataメソッドで、Firebaseへアクセスし、取得できたデータをdata.fire_dataに代入しています。
data.fire_dataが変更されると、template内のtrに設定してあるv-forが走り、取得したdataの数だけ出力される。
あとは、onMountedで、getDataを呼び出せばOK
ブラウザで見るとこんな感じ。
・指定したデータを取得する
次は指定したデータを取得します。
Firebaseは、以下の形で指定したデータを取得できる。
https://プロジェクト.firebaseio.com/person/キー.jpg
HelloWorld.vue
<template>
<section class="alert alert-primary">
<h1>{{ data.title }}</h1>
<p>{{ data.message }}</p>
<div class="form-inline my-2">
<input type="text" v-model="data.find" class="form-control" />
<button @click="getData" class="btn btn-primary">Click</button>
</div>
<div class="alert alert-light">
{{ data.fire_data }}
</div>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, reactive } from "vue";
let url = "https://ishikawa-vue3-default-rtdb.firebaseio.com/person/";
export default {
setup(props) {
const data = reactive({
title: "Firebase",
message: "This is Firebase sample.",
find: "",
fire_data: {},
});
const getData = () => {
let id_url = url + data.find + ".json";
axios
.get(id_url)
.then((result) => {
data.message = "get ID =" + data.find;
if (result.data != null) {
data.fire_data = result.data;
} else {
data.fire_data = "no data found...";
}
})
.catch((e) => {
data.message = "ERROR!";
data.fire_data = {};
});
};
return { data, getData };
},
};
</script>inputタグに、v-modelでdata.findと結びつけ、buttonタグのクリックイベントで、getDataメソッドを呼び出しています。
getDataでは、data.findの値を使って、URLを作り、そのURLにaxiosでアクセスする。
データが帰ってきたら、data.fire_dataに代入する。data.fire_dataが変更されると、template内が書き換わる。
■まとめ
今回は、実際にVue.jsを使って、Firebaseにアクセスし、データを取得しました。
さらに、全部のデータだけではなく、特定のデータの取得方法も学びました。
やっぱり、jsからgetするだけでデータが帰ってくるのが楽でいいですね。
この記事が気に入ったらサポートをしてみませんか？