Как получить данные из базы данных JSON FireBase, используя Vue.js?

Question

У меня есть одна проблема, и я не могу получить данные из моей базы данных FireBase с помощью Vue.js.

Я хочу получить определенное сообщение поля и метку времени.Кроме того, имя и адрес электронной почты userModel.Зная это, я полагаю, что смог бы понять, как получить другие данные.

Я успешно справился с простой базой данных.

Но после того, как я попытался сделать это на своей реальной базе данных сЭто был неудачный код, потому что я не знаю точного кода для записи внутри тега <script>.

Более того, я считаю, что это можно сделать с помощью цикла, foreach, а затемНужно объединить, чтобы получить правильные данные из поля в дереве JSON, как указано ниже?

Зная конфигурацию FireBase, все в порядке.Я могу войти в систему, чтобы позвонить мне «Панель инструментов».На панели инструментов я хотел бы только получать и отображать данные в теге HTML <table>.

Мой JSON выглядит следующим образом:

{
  "chatmodel" : {
    "-LeZnCBPC7FvqMeIfw_Y" : {
      "file" : {
        "name_file" : "some_file.jpg",
        "size_file" : "5332138",
        "type" : "img",
        "url_file" : "https://firebasestorage.googleapis.com/v0/b/xmnovimarof.appspot.com/o/images%2F2019-05-11_045028camera.jpg_camera?alt=media&token=5e13c9be-b6a5-43cb-a4ed-725148d8d3de"
      },
      "message" : "",
      "timeStamp" : "1557543050279",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    },
    "-LeZnGUXcNhSYzZeGJWk" : {
      "mapModel" : {
        "latitude" : "46.31",
        "longitude" : "16.33"
      },
      "timeStamp" : "1557543067886",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    },
    "-LeZnNJL27r5NHB8gYzt" : {
      "message" : "This is a text test message.",
      "timeStamp" : "1557543095843",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    }
  }
}

Я немного запутался, которыйкод, который я должен использовать внутри моего тега <template> и <script>.

Мне нужно только получить данные из этой базы данных (в ней больше таких элементов).Мне не нужно редактировать или удалять его.

Спасибо за любой аванс и предоставленную помощь.

Answer 1

Один из распространенных способов - получить базу данных в хуке created вашего компонента, см. https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Ниже приведен код простого примера, основанного на стандартной настройке Vue.js. Обновите файл firebaseConfig.js, указав собственную конфигурацию проекта.

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

    <template>
      <div id="app">
        <HelloWorld/>
      </div>
    </template>

    <script>
    import HelloWorld from "./components/HelloWorld";

    export default {
      name: "App",
      components: {
        HelloWorld
      }
    };
    </script>

    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

компоненты / HelloWorld.vue

<template>
  <div class="hello">
    <div v-if="chatItems.length">
      <div v-for="ci in chatItems">
        <h4>{{ ci.messageDate }}</h4>
        <p>{{ ci.userName }} - {{ ci.messageText}}</p>
        <hr>
      </div>
    </div>
    <div v-else>
      <p>There are currently no posts</p>
    </div>
  </div>
</template>

<script>
import { db } from "../firebaseConfig.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      chatItems: []
    };
  },
  created() {
    db.ref("chatmodel")
      .once("value")
      .then(dataSnapshot => {
        const itemsArray = [];
        dataSnapshot.forEach(childSnapshot => {
          const childData = childSnapshot.val();
          itemsArray.push({
            messageText: childData.message,
            userName: childData.userModel.name,
            messageDate: childData.timeStamp
          });
        });
        this.chatItems = itemsArray;
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

firebaseConfig.js

import firebase from "firebase";

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxxxxx",
  authDomain: "xxxxxxx",
  databaseURL: "xxxxxxx",
  projectId: "xxxxxxx",
  storageBucket: "xxxxxxx",
  messagingSenderId: "xxxxxxx",
  appId: "xxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const db = firebase.database();

export { db };