So erstellen Sie eine intelligente Newsletter-App mit Vue und Firebase Cloud Firestore

So erstellen Sie eine intelligente Newsletter-App mit Vue und Firebase Cloud Firestore

Einführung:
Intelligente Newsletter-Apps spielen in der heutigen schnelllebigen Gesellschaft eine wichtige Rolle. In diesem Artikel erfahren Sie, wie Sie mit Vue und Firebase Cloud Firestore eine intelligente Newsletter-Anwendung erstellen. Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Firebase Cloud Firestore ist eine von Google bereitgestellte Cloud-Datenbanklösung zum Speichern und Synchronisieren von Daten. Durch die Kombination dieser beiden leistungsstarken Tools können wir ganz einfach eine Newsletter-App mit Echtzeit-Messaging und intelligenten Empfehlungen erstellen.

Schritt 1: Erstellen Sie ein Vue-Projekt
Zuerst müssen wir ein Vue-Projekt erstellen. Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:

vue create smart-news

Folgen Sie dann den Anweisungen, um die für Sie passende Konfiguration auszuwählen und die Erstellung des Projekts abzuschließen.

Schritt 2: Firebase konfigurieren
Als nächstes müssen wir ein neues Projekt auf Firebase einrichten.

1. Besuchen Sie die Firebase-Konsole (https://console.firebase.google.com/).
2. Klicken Sie auf die Schaltfläche „Projekt erstellen“ und geben Sie nach Aufforderung den Namen des Projekts ein.
3. Klicken Sie in den Projekteinstellungen auf „App hinzufügen“ und wählen Sie die „Web“-App aus.
4. Geben Sie einen passenden App-Namen ein und kopieren Sie die von Firebase bereitgestellten Konfigurationsinformationen in unsere Vue-Anwendung.

Öffnen Sie das Stammverzeichnis des Vue-Projekts und suchen Sie die Datei main.js im Verzeichnis src. Fügen Sie den folgenden Code am Anfang der Datei hinzu:

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

// 在此处粘贴Firebase配置信息

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

Schritt drei: Erstellen Sie eine Firebase-Sammlung
Erstellen Sie eine Sammlung namens „Artikel“, um unsere Artikeldaten zu speichern. Öffnen Sie die Firebase-Konsole und klicken Sie links auf die Registerkarte „Datenbank“. Klicken Sie dann auf die Schaltfläche „Datenbank erstellen“ und wählen Sie „Produktionsmodus“. Wir haben den „Produktionsmodus“ gewählt, da dadurch unsere Datenbank in den geschützten Modus versetzt wird und nur über den Authentifizierungsmechanismus von Firebase darauf zugegriffen werden kann.

Geben Sie „Artikel“ in das Eingabefeld „Sammlungs-ID“ ein und klicken Sie auf „Weiter“. Wählen Sie dann „Startmodus“ und klicken Sie auf „Aktivieren“.

Schritt 4: Artikeldaten hinzufügen
Als nächstes müssen wir einige Beispielartikeldaten zur späteren Verwendung zu Firestore hinzufügen. Klicken Sie in der Firestore-Konsole auf die Sammlung „Artikel“ und dann auf die Schaltfläche „Dokument hinzufügen“. Wir können Felder und Werte einzeln eingeben oder ein vordefiniertes JSON-Format verwenden.

Beispielartikeldaten:

{
  "title": "如何使用Vue和Firebase Cloud Firestore构建智能应用",
  "description": "本文介绍如何使用Vue和Firebase Cloud Firestore构建一个智能时事通讯应用。",
  "category": "技术",
  "timestamp": "2021-09-01 10:00:00"
}

Klicken Sie auf „Speichern“, um unsere Artikeldaten hinzuzufügen.

Schritt 5: Vue-Komponente erstellen
Jetzt können wir mit der Erstellung unserer Vue-Komponente beginnen. Erstellen Sie einen Ordner mit dem Namen „components“ im Verzeichnis src und erstellen Sie dann eine Datei mit dem Namen „Articles.vue“ unter dem Ordner.

In Articles.vue werden wir eine Komponente implementieren, um alle Artikel anzuzeigen und in Echtzeit zu aktualisieren.

Zuerst müssen wir die Echtzeit-Update-Funktionalität von Firestore in unsere Vue-Komponente importieren. Fügen Sie den folgenden Code oben in Articles.vue hinzu:

import { db } from '../main'

Als nächstes fügen Sie den folgenden Code in der Exportoption der Komponente hinzu:

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 获取文章数据
    db.collection('articles').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      this.articles = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }
}

Fügen Sie den folgenden Code innerhalb des Vorlagen-Tags hinzu, um die Artikeldaten zu rendern:

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
  <p>{{ article.description }}</p>
  <p>{{ article.category }}</p>
  <p>{{ article.timestamp }}</p>
</div>

Step 6: Komplettes Routing und Ansichten
Damit wir in einem Browser auf unsere Artikellistenseite zugreifen können, müssen wir Routen und Ansichten definieren.

Öffnen Sie die Datei router.js im src-Verzeichnis und fügen Sie den folgenden Code hinzu:

import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'

const routes = [
  { path: '/', component: Articles }
]

const router = new VueRouter({ routes })

export default router

Fügen Sie in App.vue den folgenden Code zum Vorlagen-Tag hinzu:

<router-view></router-view>

Schritt 7: Führen Sie die Anwendung aus
Jetzt haben wir alles abgeschlossen Wenn das Setup und der Code vorhanden sind, können wir unsere App ausführen und die Ergebnisse sehen.

Führen Sie den folgenden Befehl im Terminal aus:

npm run serve

Danach öffnen Sie den Browser und besuchen http://localhost:8080/. Wir sehen unsere Artikellistenseite. Wenn sich die Artikeldaten in Firestore ändern, wird die Seite angezeigt in Echtzeit aktualisiert werden.

Fazit:
In diesem Artikel wird erläutert, wie Sie mit Vue und Firebase Cloud Firestore eine intelligente Newsletter-App erstellen. Durch die Kombination von Vue und Firebase haben wir eine Newsletter-App mit Echtzeit-Messaging und intelligenten Empfehlungen entwickelt. Wir hoffen, dass Ihnen diese Codebeispiele dabei helfen, Ihre eigenen Anwendungen weiterzuentwickeln. Wenn Sie Fragen zu Vue oder Firebase haben, können Sie sich die offizielle Dokumentation für detailliertere Informationen ansehen. Ich wünsche dir viel Erfolg!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine intelligente Newsletter-App mit Vue und Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!