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

   Copier après la connexion
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对象
   }

   Copier après la connexion

4. Initialisez Firebase :

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

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

   Copier après la connexion

2. Initialisez Firebase :

   firebase.initializeApp(firebaseConfig)

   Copier après la connexion

3. Créez une instance Firebase Firestore :

   const db = firebase.firestore()

   Copier après la connexion

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

   Vue.prototype.$db = db

   Copier après la connexion

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>

   Copier après la connexion

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>

   Copier après la connexion

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>

   Copier après la connexion

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>

   Copier après la connexion

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'

   Copier après la connexion

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

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

   Copier après la connexion

八. 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>

   Copier après la connexion

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>

   Copier après la connexion

10. Exécutez l'application :

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

   npm run serve

   Copier après la connexion
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!