Vue.js勉強記録その35 外部サービスを利用しよう 6-3 ver1
こちらの書籍で勉強中です。
引き続きFirebaseです。今回は、データの検索です。
■FirebaseとREST API
・keyを指定して検索
<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://xxxxxxxx/person.json?orderBy=%22$key%22&equalTo=%22";
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 + "%22";
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 = {};
});
};
onMounted(() => {
getData();
});
return { data, getData };
},
};
</script>
inputタグに、findプロパティを結び付けて、ボタンクリックでgetDataメソッドを呼び出しています。
getDataメソッドの中で、Firebaseにアクセスする処理を書いていきます。
変数urlには、getDataメソッドでアクセスするURLを書くのですが、パラメータのところがちょっとわかりにくいですね。。
/person.json?orderBy=%22$key%22&equalTo=%22";
この%22は、「"」の事。この記述は、
/person.json?orderBy="$key"&equalTo=";
この状態と一緒。
で、getDataメソッドの中の、
let id_url = url + data.find + "%22";
この記述で、アクセスするURLを作っている。data.findプロパティには、「hanako@flower」の様な、Firebaseでkeyになっている文字(メールアドレスのてい)を入れます。そうすると、以下の様なURLが完成します。(https://xxxxxxxxx.comは、省略)
/person.json?orderBy=%22$key%22&equalTo=%22hanako@flower%22
%22を「"」に直すと、
/person.json?orderBy="$key"&equalTo="hanako@flower"
こんな感じになってます。
このURLにaxiosでアクセスし、成功したら、
data.fire_data = result.data;
fire_dataプロパティに、result.dataを代入しています。代入されると画面に表示される様、テンプレートに書いてあります。
ブラウザで見ると以下の感じ。
・年齢の範囲を指定して検索
今度は、キーを直接指定するのではなく、ageを使って年齢の範囲を指定してデータを取得してみます。
<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>
<ul
v-for="(item, key) in data.fire_data"
v-bind:key="key"
class="list-group"
>
<li class="list-group-item text-left">
<strong>{{ key }}</strong
><br />{{ item }}
</li>
</ul>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, reactive } from "vue";
let url =
"https://xxxxxxxxxxxxxxxx/person.json?orderBy=%22age%22";
export default {
setup(props) {
const data = reactive({
title: "Firebase",
message: "This is Firebase sample.",
find: "",
fire_data: {},
});
const getData = () => {
let range = data.find.split(",");
console.log(range);
let age_url = url + "&startAt=" + range[0] + "&endAt=" + range[1];
console.log(age_url);
axios
.get(age_url)
.then((result) => {
console.log(result.data);
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 = {};
});
};
onMounted(() => {
getData();
});
return { data, getData };
},
};
</script>
処理の流れは、大まかには$keyの時と同じですが、生成するURLのパラメーターがちょっと違います。
/person.json?orderBy=%22age%22";
まず、土台になるURLはこんな感じです。$keyの時と違って、$がいらないです。$keyのやつを改造する感じでコードを書いていたから、$がいらないことに気がつかずに、30分くらいハマりました。。
その後、「10,30」の様に、複数の数字を半角カンマで区切った値を、data.findと結び付けて、その値を使って、
startAt=10やendAt=30の様にパラメータを作っています。
こうすることで、ageが10から30までのデータを取得することができます。
今回は、データが複数になる場合があるので、テンプレート内はfor文を使って繰り返し処理にしています。
ブラウザで見ると、こんな感じ
■まとめ
今回は、Firebaseで作ったRealtime Databaseから、値を検索して取得しました。
このままのサンプルだと使いにくいかもですが、もうちょい工夫すると色々取得できそうですね。
次回は、データの更新と削除です。
この記事が気に入ったらサポートをしてみませんか?