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
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.
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.
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')
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>
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>
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!