So implementieren Sie mit Vue und Firebase Cloud Firestore eine Newsletter-Anwendung mit Echtzeit-Datensynchronisierung

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

Einführung:
Im digitalen Zeitalter ist die Informationserfassung in Echtzeit zu einem der wichtigsten Bedürfnisse geworden. Die Echtzeit-Synchronisierungsfunktion von Newsletter-Apps hilft Benutzern, über die neuesten Nachrichten, Ereignisse und Updates auf dem Laufenden zu bleiben. In diesem Artikel wird erläutert, wie Sie mit Vue.js und Firebase Cloud Firestore eine Newsletter-Anwendung mit Echtzeit-Datensynchronisierung implementieren, und entsprechende Codebeispiele bereitstellen.

1. Was ist Vue.js und Firebase Cloud Firestore? Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es ist leicht zu erlernen, flexibel und effizient und wird häufig in der Entwicklung von Single-Page-Anwendungen und mobilen Apps eingesetzt.

1. Vue.js-Projekt erstellen

   Erstellen Sie zunächst ein neues Vue.js-Projekt über die Vue-CLI. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:
   

   vue create times-news-app

   Nach dem Login kopieren
   Wählen Sie Ihre bevorzugten Konfigurationsoptionen aus und warten Sie, bis die Projekterstellung abgeschlossen ist.

Firebase Cloud Firestore konfigurieren
2. Erstellen Sie ein neues Projekt in der Firebase-Konsole und fügen Sie die Cloud Firestore-Datenbank hinzu. Rufen Sie Ihre Firebase-Konfigurationsinformationen in den Projekteinstellungen ab.
   

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

<template>
  <div>
 <h1>时事新闻</h1>
 <ul>
   <li v-for="newsItem in newsList" :key="newsItem.id">
     {{ newsItem.title }}
   </li>
 </ul>
  </div>
</template>

<script>
import db from '@/firebaseConfig.js';

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

将YOUR_API_KEY、YOUR_AUTH_DOMAIN等替换为你在Firebase控制台中获得的实际值。

三、创建Vue组件
首先，我们需要创建两个Vue组件：一个用于显示新闻列表，另一个用于发布新的新闻。

1. NewsList.vue

   <template>
     <form @submit.prevent="submitNews">
    <h2>发布新闻</h2>
    <input type="text" v-model="newsText" placeholder="请输入新闻标题" />
    <button type="submit">发布</button>
     </form>
   </template>
   
   <script>
   import db from '@/firebaseConfig.js';
   
   export default {
     data() {
    return {
      newsText: ''
    };
     },
     methods: {
    submitNews() {
      db.collection('news')
        .add({
          title: this.newsText,
          timestamp: new Date()
        })
        .then(() => {
          this.newsText = '';
        })
        .catch((error) => {
          console.error('发布新闻失败：', error);
        });
    }
     }
   };
   </script>

   Nach dem Login kopieren

2. NewNews.vue

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import NewsList from '@/views/NewsList.vue';
   import NewNews from '@/views/NewNews.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
       path: '/',
       name: 'NewsList',
       component: NewsList
     },
     {
       path: '/new',
       name: 'NewNews',
       component: NewNews
     }
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
   });
   
   export default router;

   Nach dem Login kopieren

四、配置路由和样式
在src/router/index.js文件中配置路由：

<template>
  <div id="app">
    <router-link to="/">新闻列表</router-link>
    <router-link to="/new">发布新闻</router-link>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
</style>

在src/App.vue文件中设置基本样式：

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

const firebaseConfig = {
  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(firebaseConfig);

const db = firebase.firestore();

export default db;

五、集成Firebase和Vue应用
在src/firebaseConfig.js文件中配置Firebase：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

最后，在src/main.js文件中集成Vue和Firebase：

npm run serve

六、运行应用
在终端中执行以下命令，运行应用：

访问http://localhost:8080Ersetzen Sie Ersetzen Sie YOUR_API_KEY , YOUR_AUTH_DOMAIN usw. mit den tatsächlichen Werten, die Sie in der Firebase-Konsole erhalten.

3. Vue-Komponenten erstellen
Zuerst müssen wir zwei Vue-Komponenten erstellen: eine zum Anzeigen der Nachrichtenliste und die andere zum Veröffentlichen neuer Nachrichten.

NewsList.vue
• rrreee
• NewNews.vue
• rrreee

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