So verwenden Sie Vue und Firebase Cloud Firestore, um eine Newsletter-Anwendung mit Echtzeit-Nachrichten-Push zu implementieren-View.js-php.cn

So verwenden Sie Vue und Firebase Cloud Firestore, um eine Newsletter-Anwendung mit Echtzeit-Nachrichten-Push zu implementieren

王林

Freigeben： 2023-09-13 08:12:29

Original

1254 Leute haben es durchsucht

如何利用Vue和Firebase Cloud Firestore实现实时消息推送的时事通讯应用

So verwenden Sie Vue und Firebase Cloud Firestore, um eine Newsletter-Anwendung mit Echtzeit-Nachrichten-Push zu implementieren

Einführung:
Mit der Entwicklung des Internets sind aktuelle Informationen für die Informationsbeschaffung und Kommunikation der Menschen immer wichtiger geworden . Die Echtzeit-Nachrichten-Push-Anwendung kann Benutzern helfen, auf einfache Weise die neuesten aktuellen Informationen zu erhalten. In diesem Artikel wird erläutert, wie Sie mit Vue und Firebase Cloud Firestore eine Echtzeit-Nachrichten-Push-Newsletteranwendung implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Vorbereitung
Zuerst müssen Sie die Vue-CLI installieren und ein neues Vue-Projekt erstellen. Führen Sie den folgenden Befehl im Terminal aus:

npm install -g vue-cli
vue create news-app

Nach dem Login kopieren

Sobald die Installation abgeschlossen ist, gehen Sie in das Projektverzeichnis und starten Sie den Entwicklungsserver:

cd news-app
npm run serve

Nach dem Login kopieren

Firebase-Projekt konfigurieren
Zuerst müssen wir ein Firebase-Projekt erstellen und den Firestore aktivieren Datenbank. Wählen Sie in der Firebase-Konsole „Neues Projekt erstellen“ und befolgen Sie die Anweisungen, um die Projekterstellung abzuschließen.

Klicken Sie auf der Projektübersichtsseite auf „Firebase zu Ihrer Webanwendung hinzufügen“ und befolgen Sie die Anweisungen, um die generierten Konfigurationsinformationen zu kopieren. Speichern Sie diese Informationen wie folgt in einer .env-Datei in Ihrem Projekt:

VUE_APP_FIREBASE_API_KEY=your_api_key
VUE_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
VUE_APP_FIREBASE_DATABASE_URL=your_database_url
VUE_APP_FIREBASE_PROJECT_ID=your_project_id
VUE_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VUE_APP_FIREBASE_APP_ID=your_app_id

Nach dem Login kopieren

Firebase SDK installieren
Als nächstes müssen wir das Firebase SDK im Vue-Projekt installieren und konfigurieren. Führen Sie den folgenden Befehl im Terminal aus:

npm install firebase

Nach dem Login kopieren

Erstellen Sie eine Datei mit dem Namen firebase.js und fügen Sie der Datei den folgenden Code hinzu: firebase.js的文件，并将以下代码添加到文件中：

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

const config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
}

firebase.initializeApp(config)

export const db = firebase.firestore()

Nach dem Login kopieren

创建消息推送组件
现在，我们可以创建一个接收实时消息推送的组件。在Vue项目中创建一个名为NewsFeed.vue的组件，并将以下代码添加到文件中：

<template>
  <div class="news-feed">
    <h2>时事资讯</h2>
    <ul>
      <li v-for="(news, index) in newsList" :key="index">{{ news.content }}</li>
    </ul>
  </div>
</template>

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

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

<style scoped>
.news-feed {
  margin-top: 20px;
}
</style>

Nach dem Login kopieren

在上面的代码中，我们使用Firestore的onSnapshot方法来监听news集合的变化。通过snapshot.docChanges()方法获取最新的消息推送，并将其更新到newsList数组中。

使用消息推送组件
最后，我们需要在Vue项目中使用创建的消息推送组件。打开App.vue
```
<template>
  <div id="app">
    <news-feed></news-feed>
  </div>
</template>

<script>
import NewsFeed from './components/NewsFeed.vue'

export default {
  name: 'App',
  components: {
    NewsFeed
  }
}
</script>
```
Nach dem Login kopieren
Jetzt können wir eine Komponente erstellen, die Push-Nachrichten in Echtzeit empfängt. Erstellen Sie in Ihrem Vue-Projekt eine Komponente mit dem Namen NewsFeed.vue und fügen Sie der Datei den folgenden Code hinzu:
rrreee
Im obigen Code verwenden wir die onSnapshot-Code>-Methode von Firestore um Änderungen in der news-Sammlung zu überwachen. Holen Sie sich den neuesten Nachrichten-Push über die Methode snapshot.docChanges() und aktualisieren Sie ihn im Array newsList.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Firebase Cloud Firestore, um eine Newsletter-Anwendung mit Echtzeit-Nachrichten-Push zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!