Vue Firebase Cloud Firestore in Aktion: Schritte und Techniken zum Erstellen einer Newsletter-Anwendung

Vue Firebase Cloud Firestore in Aktion: Schritte und Techniken zum Erstellen einer Newsletter-Anwendung

Mit der rasanten Entwicklung des Internets ändert sich auch die Art und Weise, Nachrichteninformationen zu erhalten, ständig. Heutzutage verlassen sich Menschen zunehmend auf mobile Apps, um Nachrichteninhalte zu durchsuchen. In diesem Artikel stellen wir vor, wie Sie mit Vue.js und Firebase Cloud Firestore eine Newsletter-Anwendung erstellen, damit Benutzer über die neuesten Nachrichten auf dem Laufenden bleiben.

Schritt 1: Erstellen Sie ein Vue-Projekt

Zuerst müssen wir die Vue-CLI installieren, um ein Vue-Projekt zu erstellen. Führen Sie den folgenden Befehl in der Befehlszeile aus:

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

Der obige Befehl erstellt ein Vue-Projekt mit dem Namen news-app und startet den Entwicklungsserver.

Schritt 2: Firebase installieren

Führen Sie im Projektverzeichnis den folgenden Befehl aus, um Firebase zu installieren:

npm install firebase

Schritt 3: Erstellen Sie ein Firebase-Projekt

Erstellen Sie auf der Firebase-Website ein neues Projekt. Suchen Sie in den Projekteinstellungen nach „App hinzufügen“ und wählen Sie die Option „Web“. Geben Sie Ihrer Anwendung einen Namen und kopieren Sie die bereitgestellten Konfigurationsinformationen in die Datei main.js des Vue-Projekts.

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
}

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

Ersetzen Sie Felder wie YOUR_API_KEY durch Ihre eigenen Konfigurationsinformationen.

Schritt 4: Erstellen Sie eine Firestore-Sammlung

Um Nachrichteninformationsdaten zu speichern und zu verwalten, müssen wir eine Sammlung im Cloud Firestore erstellen. Fügen Sie den folgenden Code zur Datei main.js hinzu, um eine Sammlung mit dem Namen „news“ zu erstellen:

db.collection("news").add({
  title: "Breaking News",
  content: "This is the latest news update",
  publishedAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then((docRef) => {
  console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
  console.error("Error adding document: ", error);
});

Der obige Code fügt der Sammlung ein neues Nachrichtendokument mit dem Namen „news“ hinzu. Indem wir das Feld „publicatedAt“ auf einen Server-Zeitstempel setzen, können wir sicherstellen, dass jedes Nachrichtendokument seinen eigenen Veröffentlichungszeitpunkt hat.

Schritt 5: Nachrichtendaten von Firestore abrufen

Verwenden Sie die Vue-Komponente, um die von Firestore erhaltenen Nachrichtendaten anzuzeigen. Erstellen Sie eine NewsList.vue-Komponente und fügen Sie den folgenden Code im Vorlagenblock hinzu:

<template>
  <div>
    <h2>News List</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h3>{{ news.title }}</h3>
        <p>{{ news.content }}</p>
        <p>{{ news.publishedAt.toDate() }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    db.collection('news').orderBy('publishedAt', 'desc')
      .onSnapshot((snapshot) => {
        this.newsList = snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id }
        })
      })
  }
}
</script>

Der obige Code ruft Nachrichtendaten in Echtzeit von Firestore ab und zeigt sie auf der Seite an.

Schritt 6: Erstellen Sie die Funktion zum Hinzufügen von Nachrichten.

Fügen Sie die Funktion zum Hinzufügen von Nachrichten in der NewsList.vue-Komponente hinzu. Fügen Sie den folgenden Code im Vorlagenblock hinzu:

<template>
  <div>
    <!-- ...上述代码... -->
    <form @submit.prevent="addNews">
      <input type="text" v-model="newsTitle" placeholder="News Title">
      <textarea v-model="newsContent" placeholder="News Content"></textarea>
      <button type="submit">Add News</button>
    </form>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: [],
      newsTitle: '',
      newsContent: ''
    }
  },
  mounted() {
    // ...上述代码...
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.newsTitle,
        content: this.newsContent,
        publishedAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(() => {
        this.newsTitle = ''
        this.newsContent = ''
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
    }
  }
}
</script>

Der obige Code fügt mithilfe der addNews-Methode Nachrichtendaten zu Firestore hinzu.

Zu diesem Zeitpunkt haben wir erfolgreich eine einfache Newsletter-Anwendung mit Vue.js und Firebase Cloud Firestore erstellt. Über diese Anwendung können Benutzer die neuesten Nachrichten und Informationen durchsuchen und auch eigene Nachrichten hinzufügen.

Zusammenfassung:

In diesem Artikel werden die Schritte und Techniken zum Entwickeln einer Newsletter-Anwendung mit Vue.js und Firebase Cloud Firestore vorgestellt. Durch die Kombination von Vue-Framework und Firestore-Datenbank können wir eine in Echtzeit aktualisierte Nachrichtenanwendung erstellen, um Benutzer über die neuesten Nachrichten auf dem Laufenden zu halten. Ich hoffe, dass dieser Artikel für Entwickler hilfreich ist, die ähnliche Anwendungen entwickeln möchten.

Das obige ist der detaillierte Inhalt vonVue Firebase Cloud Firestore in Aktion: Schritte und Techniken zum Erstellen einer Newsletter-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!