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

Vue.js3超入門

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

今回は、Realtime Databaseにデータを入力したり、削除したりします。

■FirebaseとREST API

・データの追加

axiosでデータを追加するときは、以下のような記述でできます。

axios.put(アドレス , オブジェクト);

このアドレスには、FirebaseのRealtime databaseの以下のようなURLが入ります。

https://xxxxxxxxxxxxxxxxx.firebaseio.com/person/キー.json

HelloWorld.vue

<template>
 <section class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p>{{ data.message }}</p>
   <div class="text-left">
     <div class="form-group">
       <label>Email</label>
       <input type="text" v-model="data.email" class="form-control" />
     </div>

     <div class="form-group">
       <label>Name</label>
       <input type="text" v-model="data.username" class="form-control" />
     </div>

     <div class="form-group">
       <label>Age</label>
       <input type="text" v-model="data.age" class="form-control" />
     </div>
     <div class="form-group">
       <label>Tel</label>
       <input type="text" v-model="data.tel" class="form-control" />
     </div>
     <button @click="addData" class="btn btn-primary my-3">Click</button>
   </div>
   <ul
     v-for="(item, key) in data.fire_data"
     class="list-group"
     v-bind:key="key"
   >
     <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://xxxxxxxxxxxxxxxxx.firebaseio.com/person";
export default {
 setup(props) {
   const data = reactive({
     title: "Firebase",
     message: "This is Firebase sample.",
     email: "",
     username: "",
     tel: "",
     age: 0,
     fire_data: {},
   });
   const addData = () => {
     if (data.username == "") {
       console.log("no-username!");
       return;
     }
     let add_url = url + "/" + data.email + ".json";
     let item = {
       name: data.username,
       age: data.age,
       tel: data.tel,
     };
     axios.put(add_url, item).then((re) => {
       data.email = "";
       data.username = "";
       data.age = 0;
       data.tel = "";
       getData();
     });
   };

   const getData = () => {
     let all_url = url + ".json";
     axios
       .get(all_url)
       .then((result) => {
         data.message = "get all data";
         data.fire_data = result.data;
       })
       .catch((e) => {
         data.message = "Error!";
         data.fire_data = {};
       });
   };
   onMounted(() => {
     getData();
   });
   return { data, addData, getData };
 },
};
</script>

コードが長いけど、やっていることはシンプルです。

onMountedで、getDataメソッドを呼び出します。

getDataは、DBの中から全件取得してfire_dataプロパティにDBのデータを代入します。その後表示が更新されます。

Email、Name、Age、Telの入力欄に各々プロパティをv-modelで結び付けて、ボタンクリックで、addDataメソッドを呼び出します。

addDataは、まず、Emailだけ入力チェックして（Emailがキーになるので）、アクセスするURLを作ります。今回のURLは、以下のような形です。

https://xxxxxxxxxxxxxxxxx.firebaseio.com/person/test@test.json

キーのところが「test@test」のような、メールアドレスになります。

Name、Age、Telで、オブジェクトitemを作り、URLにputします。

axios.put(add_url, item)

putし終わったら、thenで、各プロパティを元に戻し、getDataを実行して表示をリフレッシュしています。

こんな感じで、データが追加されます。

・データの削除

今度はデータの削除です。

axiosでデータを削除するときは、以下のように書きます。

axios.delete(アドレス)

アドレスには、putの時と同じく以下のようなものが入ります。

https://xxxxxxxxxxxxxxxxx.firebaseio.com/person/test@test.json

HelloWorld.vue

<template>
 <section class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p>{{ data.message }}</p>
   <div class="text-left">
     <div class="form-group">
       <label>Email</label>
       <input type="text" v-model="data.email" class="form-control" />
     </div>
     <button @click="delData" class="btn btn-primary my-3">Click</button>
   </div>
   <ul
     v-for="(item, key) in data.fire_data"
     class="list-group"
     v-bind:key="key"
   >
     <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://ishikawa-vue3-default-rtdb.firebaseio.com/person";
export default {
 setup(props) {
   const data = reactive({
     title: "Firebase",
     message: "This is Firebase sample.",
     email: "",
     fire_data: {},
   });
   const delData = () => {
     if (data.email == "") {
       console.log("no-username!");
       return;
     }
     let del_url = url + "/" + data.email + ".json";
     axios.delete(del_url).then((re) => {
       data.message = data.email + "を削除しました。";
       data.email = "";
       getData();
     });
   };

   const getData = () => {
     let all_url = url + ".json";
     axios
       .get(all_url)
       .then((result) => {
         data.message = "get all data";
         data.fire_data = result.data;
       })
       .catch((e) => {
         data.message = "Error!";
         data.fire_data = {};
       });
   };
   onMounted(() => {
     getData();
   });
   return { data, delData, getData };
 },
};
</script>

onMountedの処理は、putの時と同様です。

ボタンを押した時に、メソッドdelDataを呼び出します。

Emailとv-modelで結び付けられたプロパティを使って、URLを作ります。
そのURLに、axios.deleteでアクセスします。

axios.delete(del_url)

処理が終わった後は、Emailを空にして、getDataメソッドで表示をリフレッシュします。

こんな感じでデータが消されていきます。

■まとめ

今回は、データの入力と削除でした。

URLで、jsonの値を入れると色々とサクッとアクセスできるのはめっちゃ便利ですね。
SQLだと、SELECTやWHEREとか色々使ってデータにアクセスするけど、そんな必要がないのが便利に感じます。

このsectionの最後のコラムで、このままDBを公開しっぱなしはよくないと記載があります。

今後の内容で、よりセキュリティを意識した書き方が紹介されるとのことです。