why

Nuxt で使う準備。

コンソールで作成

Firebase Cloud Console から Create Database でデータベースを作成する

全公開設定の test で作成する。

person を作って中身を入れる

f:id:kei_s_lifehack:20210826042322p:plain

person の中に senkyo, takeshi, の年齢と電話番号のデータを作成する

ブラウザで DB の URL の json にアクセス

そして、これに person.json をつけた

https://note-app0902.firebaseio.com/person.json

の URL にアクセスすると

f:id:kei_s_lifehack:20210826042607p:plain

このように json 形式で返ってきた値が表示される。

Vue などで表示する

kei-s-lifehack.hatenablog.com

このデータはこの記事で axios で JSON Placeholder のサンプルデータを

とってきたのを少し変えると、 axios でとってくることもできる。

    <h2> body: {{ json_data}} </h2>
    <input type="text" v-model="finder" />
    <button @click="getInputIdData"> find </button>

const url = "https://note-app0902.firebaseio.com/person/"

  methods: {
    getInputIdData: function(event) {
      axios.get(url + this.finder + '.json')
        .then( (res) => {
          this.json_data = res.data
          this.message = 'get ID: ' + this.finder 
        }).catch((error) => {
      this.message = 'ERR'
      })
    }
  },