Vue.js勉強記録その35 外部サービスを利用しよう 6-3 ver1

Vue.js3超入門

こちらの書籍で勉強中です。

引き続き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から、値を検索して取得しました。

このままのサンプルだと使いにくいかもですが、もうちょい工夫すると色々取得できそうですね。

次回は、データの更新と削除です。