Développement d'une application de newsletter basée sur Vue : synchronisation des données en temps réel à l'aide de Firebase Cloud Firestore

Développement d'applications de newsletter basées sur Vue : la synchronisation des données en temps réel à l'aide de Firebase Cloud Firestore nécessite des exemples de code spécifiques

Introduction :
Avec le développement rapide d'Internet, les gens accordent de plus en plus d'attention et de demande à l'actualité . Aujourd’hui, de nombreuses personnes souhaitent pouvoir rester informées des dernières nouvelles et des sujets d’actualité à tout moment et en tout lieu. Pour répondre à ce besoin, nous pouvons développer une application de newsletter basée sur Vue et utiliser Firebase Cloud Firestore pour réaliser une synchronisation des données en temps réel. Cet article vous présentera le processus de développement basé sur Vue et Firebase et fournira des exemples de code détaillés.

1. Préparation :

1. Installez Node.js et Vue CLI.
2. Créez un nouveau projet Vue, nommez-le "news-app" et entrez dans le répertoire du projet.

2. Créez un projet Firebase :

1. Entrez sur le site officiel de Firebase (https://firebase.google.com/) et connectez-vous avec votre compte Google.
2. Cliquez sur "Commencer" pour créer un nouveau projet.
3. Dans la console du projet, cliquez sur "Ajouter une application" et sélectionnez "Web".
4. Entrez le nom de l'application, tel que « NewsApp », puis cliquez sur « Enregistrer l'application ».
5. Dans le code de configuration ci-dessous, copiez le contenu de l'objet "firebaseConfig".

3. Installez les dépendances Firebase :

1. Ouvrez le terminal et entrez dans le répertoire du projet "news-app".

2. Exécutez la commande suivante pour installer les dépendances liées à Firebase :

   npm install firebase

3. Créez un nouveau dossier dans le répertoire src et nommez-le "firebase".
4. Créez un nouveau fichier dans le dossier "firebase" et nommez-le "config.js".

5. Dans le fichier "config.js", collez l'objet "firebaseConfig" copié auparavant et exportez-le :

   export default {
     // 粘贴firebaseConfig对象
   }

4. Initialisez Firebase :

1. Importez Firebase et le fichier "firebase/config" :

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

2. Initialisez Firebase :

   firebase.initializeApp(firebaseConfig)

3. Créez une instance Firebase Firestore :

   const db = firebase.firestore()

4. Ajoutez l'instance Firestore au prototype Vue pour y accéder dans toute l'application :

   Vue.prototype.$db = db

5 Créez une page de liste d'actualités :

.

1. Créez un nouveau fichier dans le répertoire "src/views" et nommez-le "NewsList.vue".

2. Dans le fichier "NewsList.vue", écrivez le code de modèle suivant :

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

3. Dans le fichier "NewsList.vue", écrivez le code de script suivant :

   <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. Créez une page d'ajout d'actualités :

1. Créez un nouveau fichier dans le répertoire "src/views" et nommez-le "AddNews.vue".

2. Dans le fichier "AddNews.vue", écrivez le code de modèle suivant :

   <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. Dans le fichier "AddNews.vue", écrivez le code de script suivant :

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

7. Configurez le routage :

1. Dans le fichier "src/router/index.js", importez "NewsList.vue" et "AddNews.vue" :

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

2. Dans le tableau "routes", créez deux objets route :

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

八. Créez un composant de page d'accueil :

1. Créez un nouveau fichier dans le répertoire "src/views" et nommez-le "Home.vue".

2. Dans le fichier "Home.vue", écrivez le code du modèle suivant :

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

9. Mettez à jour le composant App :

1. Dans le fichier "src/App.vue", remplacez le code du modèle initial. Pour le code suivant :

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

10. Exécutez l'application :

1. Exécutez la commande suivante dans le terminal pour démarrer l'application :

   npm run serve

2. Ouvrez le navigateur et visitez "http://localhost:8080". , vous pouvez voir la page d'accueil de l'application.

Conclusion : 
Grâce à l'exemple de code de cet article, nous avons réussi à créer une application de newsletter basée sur Vue et à utiliser Firebase Cloud Firestore pour réaliser une synchronisation des données en temps réel. Les développeurs peuvent continuer à améliorer l'application en fonction de leurs propres besoins et idées, comme l'ajout d'une authentification utilisateur, de fonctions de commentaires, etc. J'espère que cet article pourra être utile pour l'application pratique de Vue et Firebase, afin que votre application puisse mieux répondre aux besoins des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!