Entwicklung von Newsletter-Anwendungen auf Basis von Vue: Echtzeit-Datensynchronisierung mit Firebase Cloud Firestore

Vue-basierte Newsletter-Anwendungsentwicklung: Echtzeit-Datensynchronisierung mit Firebase Cloud Firestore erfordert spezifische Codebeispiele

Einführung:
Mit der rasanten Entwicklung des Internets schenken die Menschen immer mehr Aufmerksamkeit und Nachfrage nach aktuellen Ereignissen . Heutzutage möchten viele Menschen jederzeit und überall über die neuesten Nachrichten und aktuellen Themen auf dem Laufenden bleiben. Um diesen Bedarf zu decken, können wir eine Vue-basierte Newsletter-Anwendung entwickeln und Firebase Cloud Firestore verwenden, um eine Datensynchronisierung in Echtzeit zu erreichen. Dieser Artikel führt Sie in den Entwicklungsprozess auf Basis von Vue und Firebase ein und liefert detaillierte Codebeispiele.

1. Vorbereitung:

1. Node.js und Vue CLI installieren.
2. Erstellen Sie ein neues Vue-Projekt, nennen Sie es „news-app“ und geben Sie das Projektverzeichnis ein.

2. Erstellen Sie ein Firebase-Projekt:

1. Betreten Sie die offizielle Firebase-Website (https://firebase.google.com/) und melden Sie sich mit Ihrem Google-Konto an.
2. Klicken Sie auf „Erste Schritte“, um ein neues Projekt zu erstellen.
3. Klicken Sie in der Projektkonsole auf „Anwendung hinzufügen“ und wählen Sie „Web“ aus.
4. Geben Sie den Namen der App ein, z. B. „NewsApp“, und klicken Sie dann auf „App registrieren“.
5. Kopieren Sie im folgenden Konfigurationscode den Inhalt des „firebaseConfig“-Objekts.

3. Firebase-Abhängigkeiten installieren:

1. Öffnen Sie das Terminal und geben Sie das Projektverzeichnis „news-app“ ein.

2. Führen Sie den folgenden Befehl aus, um Firebase-bezogene Abhängigkeiten zu installieren:

   npm install firebase

3. Erstellen Sie einen neuen Ordner im src-Verzeichnis und nennen Sie ihn „Firebase“.
4. Erstellen Sie eine neue Datei im Ordner „firebase“ und nennen Sie sie „config.js“.

5. Fügen Sie in der Datei „config.js“ das zuvor kopierte „firebaseConfig“-Objekt ein und exportieren Sie es:

   export default {
     // 粘贴firebaseConfig对象
   }

4. Firebase initialisieren:

1. Firebase und Datei „firebase/config“ importieren:

   import firebase from 'firebase/app'
   import 'firebase/firestore'
   import firebaseConfig from './firebase/config'

2. FireBase initialisieren:

   firebase.initializeApp(firebaseConfig)

3. Erstellen Sie eine FireBase -Firestore -Instanz:

   const db = firebase.firestore()

4. Fügen Sie die Firestore -Instanz zum Vue -Prototyp für den Zugriff in der App hinzu:

   Vue.prototype.$db = db

5.

Erstellen Sie eine neue Datei im Verzeichnis „src/views“ und nennen Sie sie „NewsList.vue“.
2. Schreiben Sie in die Datei „NewsList.vue“ den folgenden Vorlagencode:

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

3. Schreiben Sie in die Datei „NewsList.vue“ den folgenden Skriptcode:

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

6. Erstellen Sie eine Seite zum Hinzufügen von Nachrichten :

Erstellen Sie eine neue Datei im Verzeichnis „src/views“ und nennen Sie sie „AddNews.vue“.
2. Schreiben Sie in die Datei „AddNews.vue“ den folgenden Vorlagencode:

   <template>
     <div>
    <h1>添加新闻</h1>
    <form @submit.prevent="addNews">
      <label for="title">标题：</label>
      <input type="text" id="title" v-model="title" required>
      <button type="submit">提交</button>
    </form>
     </div>
   </template>

3. Schreiben Sie in die Datei „AddNews.vue“ den folgenden Skriptcode:

   <script>
   export default {
     data() {
    return {
      title: ''
    }
     },
     methods: {
    addNews() {
      this.$db.collection('news').add({
        title: this.title,
        timestamp: new Date()
      })
      this.title = ''
    }
     }
   }
   </script>

7. Konfigurieren Sie das Routing:

1. Importieren Sie in der Datei „src/router/index.js“ „NewsList.vue“ und „AddNews.vue“:

   import NewsList from '@/views/NewsList.vue'
   import AddNews from '@/views/AddNews.vue'

2. Erstellen Sie im Array „routes“ zwei Routenobjekte:

   {
     path: '/',
     name: 'NewsList',
     component: NewsList
   },
   {
     path: '/add',
     name: 'AddNews',
     component: AddNews
   }

八. Erstellen Sie eine Homepage-Komponente:

Erstellen Sie eine neue Datei im Verzeichnis „src/views“ und nennen Sie sie „Home.vue“.
2. In der Datei „Home.vue“ schreiben Sie den folgenden Vorlagencode:

   <template>
     <div>
    <h1>时事通讯应用</h1>
    <router-link to="/">查看新闻</router-link>
    <router-link to="/add">添加新闻</router-link>
    <router-view></router-view>
     </div>
   </template>

9. Aktualisieren Sie die App-Komponente:

1. Ersetzen Sie in der Datei „src/App.vue“ den ursprünglichen Vorlagencode Für den folgenden Code:

   <template>
     <div id="app">
    <router-view></router-view>
     </div>
   </template>

10. Führen Sie die Anwendung aus:

1. Führen Sie den folgenden Befehl im Terminal aus, um die Anwendung zu starten:

   npm run serve

Öffnen Sie den Browser und besuchen Sie „http://localhost:8080“. , können Sie die Homepage der Anwendung sehen.

Fazit:

Mit dem Beispielcode in diesem Artikel haben wir erfolgreich eine Vue-basierte Newsletter-Anwendung erstellt und Firebase Cloud Firestore verwendet, um eine Datensynchronisierung in Echtzeit zu erreichen. Entwickler können die Anwendung nach ihren eigenen Bedürfnissen und Vorstellungen weiter verbessern, beispielsweise durch das Hinzufügen von Benutzerauthentifizierung, Kommentarfunktionen usw. Ich hoffe, dass dieser Artikel für die praktische Anwendung von Vue und Firebase hilfreich sein kann, damit Ihre Anwendung den Anforderungen der Benutzer besser gerecht werden kann.

Das obige ist der detaillierte Inhalt vonEntwicklung von Newsletter-Anwendungen auf Basis von Vue: Echtzeit-Datensynchronisierung mit Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!