Maison  >  Article  >  interface Web  >  Guide de développement d'applications de newsletter basées sur Vue : utilisation de Firebase Cloud Firestore pour le stockage et la synchronisation des données

Guide de développement d'applications de newsletter basées sur Vue : utilisation de Firebase Cloud Firestore pour le stockage et la synchronisation des données

WBOY
WBOYoriginal
2023-09-13 12:28:521002parcourir

基于Vue的时事通讯应用开发指南:使用Firebase Cloud Firestore进行数据存储与同步

Guide de développement d'applications de newsletter basées sur Vue : utilisation de Firebase Cloud Firestore pour le stockage et la synchronisation des données

Introduction :
Avec la popularité des applications mobiles, la demande des gens en matière d'actualités augmente également. La création d'une application de newsletter en temps réel est devenue la priorité des développeurs. Cet article vous montrera comment utiliser Vue et Firebase Cloud Firestore pour créer une application de newsletter simple mais puissante.

  1. Introduction à Firebase Cloud Firestore
    Firebase Cloud Firestore est un service de stockage cloud fourni par Google. Il s'agit d'une base de données NoSQL flexible et évolutive qui peut être utilisée pour stocker et synchroniser des données. Il prend en charge les mises à jour en temps réel et offre de puissantes capacités de requête. Dans ce tutoriel, nous utiliserons Firestore comme solution de stockage et de synchronisation de données.
  2. Préparation
    Avant de commencer, nous devons préparer l'environnement suivant :
  3. Installer Node.js et npm (https://nodejs.org/)
  4. Créer un projet Firebase et obtenir les identifiants (https://firebase .google .com/)
  5. Créer un projet Vue
    Tout d'abord, nous devons créer un projet Vue. Exécutez la commande suivante dans la ligne de commande :

    npm install -g @vue/cli
    vue create news-app
    cd news-app
    npm run serve

    Cela créera un projet appelé "news-app" et exécutera le serveur de développement.

  6. Configurer Firebase
    Ouvrez la console Firebase (https://console.firebase.google.com/) et créez un nouveau projet. Ensuite, cliquez sur « Paramètres du projet », sélectionnez « Ajouter une application » et sélectionnez Web App. Après avoir enregistré votre application, collez le code de configuration fourni dans le fichier src/main.js. Votre fichier main.js devrait ressembler à ceci :

    import Vue from 'vue'
    import App from './App.vue'
    import firebase from 'firebase'
    
    const firebaseConfig = {
      // 将你的Firebase配置信息在这里填入
    }
    
    firebase.initializeApp(firebaseConfig)
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
  7. Création du composant News List
    Nous allons d'abord créer un composant Vue pour afficher la liste des actualités. Créez un fichier appelé NewsList.vue dans le répertoire src/components et ajoutez le code suivant :

    <template>
      <div>
     <h1>时事新闻</h1>
     <ul>
       <li v-for="news in newsList" :key="news.id">
         {{ news.title }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    import firebase from 'firebase'
    
    export default {
      data() {
     return {
       newsList: []
     }
      },
      mounted() {
     const db = firebase.firestore()
     const newsRef = db.collection('news')
    
     newsRef.onSnapshot(querySnapshot => {
       let newsList = []
       querySnapshot.forEach(doc => {
         newsList.push({
           id: doc.id,
           title: doc.data().title
         })
       })
       this.newsList = newsList
     })
      }
    }
    </script>
  8. Création d'un composant de création de nouvelles
    Ensuite, nous créerons un composant Vue pour créer des nouvelles. Créez un fichier appelé CreateNews.vue dans le répertoire src/components et ajoutez le code suivant :

    <template>
      <div>
     <h1>创建新闻</h1>
     <form @submit.prevent="createNews">
       <input type="text" v-model="title" placeholder="标题" required>
       <input type="text" v-model="content" placeholder="内容" required>
       <button type="submit">创建</button>
     </form>
      </div>
    </template>
    <script>
    import firebase from 'firebase'
    
    export default {
      data() {
     return {
       title: '',
       content: ''
     }
      },
      methods: {
     createNews() {
       const db = firebase.firestore()
       db.collection('news').add({
         title: this.title,
         content: this.content
       })
       .then(() => {
         this.title = ''
         this.content = ''
       })
       .catch(error => console.error(error))
     }
      }
    }
    </script>
  9. Composants intégrés
    Enfin, nous devons intégrer les composants NewsList et CreateNews dans le fichier App.vue. Modifiez le fichier App.vue comme suit :

    <template>
      <div>
     <NewsList/>
     <CreateNews/>
      </div>
    </template>
    
    <script>
    import NewsList from './components/NewsList.vue'
    import CreateNews from './components/CreateNews.vue'
    
    export default {
      components: {
     NewsList,
     CreateNews
      }
    }
    </script>

À ce stade, nous avons terminé une application de newsletter basée sur Vue et Firebase Cloud Firestore. Vous pouvez ajouter, modifier et supprimer des actualités dans Firebase, et elles seront affichées dans l'interface de l'application en temps réel.

Conclusion :
Cet article explique comment créer une application de newsletter à l'aide de Vue et Firebase Cloud Firestore. En intégrant Firebase Cloud Firestore, nous pouvons rapidement mettre en œuvre des fonctions de stockage et de synchronisation des données en temps réel. J'espère que cet article sera utile au développement de votre application Vue !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn