Comment utiliser Vue et Firebase Cloud Firestore pour implémenter une application de newsletter avec synchronisation des données en temps réel
Introduction :
À l'ère du numérique, l'acquisition d'informations en temps réel est devenue l'un des besoins importants. La fonction de synchronisation en temps réel des applications de newsletter aide les utilisateurs à rester informés des dernières nouvelles, événements et mises à jour. Cet article expliquera comment utiliser Vue.js et Firebase Cloud Firestore pour implémenter une application de newsletter avec synchronisation des données en temps réel et fournira des exemples de code correspondants.
1. Qu'est-ce que Vue.js et Firebase Cloud Firestore
Vue.js est un framework JavaScript populaire pour la création d'interfaces utilisateur. Il est facile à apprendre, flexible et efficace, et est largement utilisé dans le développement d’applications monopage et d’applications mobiles.
Firebase Cloud Firestore est un service de base de données cloud flexible et en temps réel. Il fournit un moyen simple de stocker et de synchroniser les données d'une application sans avoir besoin de créer et de gérer vous-même un serveur principal.
2. Préparation du projet
Créer un projet Vue.js
Tout d'abord, créez un nouveau projet Vue.js via Vue CLI. Ouvrez un terminal et exécutez la commande suivante :
vue create times-news-app
Sélectionnez vos options de configuration préférées et attendez la fin de la création du projet.
Ouvrez le projet Vue.js, créez un fichier nommé .env.local
dans le répertoire racine du projet et ajoutez les informations de configuration suivantes au fichier : .env.local
的文件,并将以下配置信息添加到该文件中:
VUE_APP_FIREBASE_API_KEY=YOUR_API_KEY VUE_APP_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN VUE_APP_FIREBASE_DATABASE_URL=YOUR_DATABASE_URL VUE_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID VUE_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET VUE_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID VUE_APP_FIREBASE_APP_ID=YOUR_APP_ID
将YOUR_API_KEY
、YOUR_AUTH_DOMAIN
等替换为你在Firebase控制台中获得的实际值。
三、创建Vue组件
首先,我们需要创建两个Vue组件:一个用于显示新闻列表,另一个用于发布新的新闻。
NewsList.vue
<template> <div> <h1>时事新闻</h1> <ul> <li v-for="newsItem in newsList" :key="newsItem.id"> {{ newsItem.title }} </li> </ul> </div> </template> <script> import db from '@/firebaseConfig.js'; export default { data() { return { newsList: [] }; }, created() { db.collection('news') .orderBy('timestamp', 'desc') .onSnapshot((snapshot) => { this.newsList = snapshot.docs.map((doc) => { return { id: doc.id, title: doc.data().title }; }); }); } }; </script>
NewNews.vue
<template> <form @submit.prevent="submitNews"> <h2>发布新闻</h2> <input type="text" v-model="newsText" placeholder="请输入新闻标题" /> <button type="submit">发布</button> </form> </template> <script> import db from '@/firebaseConfig.js'; export default { data() { return { newsText: '' }; }, methods: { submitNews() { db.collection('news') .add({ title: this.newsText, timestamp: new Date() }) .then(() => { this.newsText = ''; }) .catch((error) => { console.error('发布新闻失败:', error); }); } } }; </script>
四、配置路由和样式
在src/router/index.js
文件中配置路由:
import Vue from 'vue'; import VueRouter from 'vue-router'; import NewsList from '@/views/NewsList.vue'; import NewNews from '@/views/NewNews.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'NewsList', component: NewsList }, { path: '/new', name: 'NewNews', component: NewNews } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router;
在src/App.vue
文件中设置基本样式:
<template> <div id="app"> <router-link to="/">新闻列表</router-link> <router-link to="/new">发布新闻</router-link> <router-view /> </div> </template> <style> #app { font-family: Arial, Helvetica, sans-serif; text-align: center; } </style>
五、集成Firebase和Vue应用
在src/firebaseConfig.js
文件中配置Firebase:
import firebase from 'firebase/app'; import 'firebase/firestore'; const firebaseConfig = { apiKey: process.env.VUE_APP_FIREBASE_API_KEY, authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL, projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.VUE_APP_FIREBASE_APP_ID }; firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); export default db;
最后,在src/main.js
文件中集成Vue和Firebase:
import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App) }).$mount('#app');
六、运行应用
在终端中执行以下命令,运行应用:
npm run serve
访问http://localhost:8080
rrreee
Remplacez YOUR_API_KEY
, YOUR_AUTH_DOMAIN
, etc. avec les valeurs réelles que vous obtenez dans la console Firebase.
3. Créer des composants Vue
src/router/index.js
: 🎜rrreee🎜 Définissez le style de base dans le fichier src/App.vue
: 🎜rrreee🎜 5. Intégrez les applications Firebase et Vue 🎜Configurez Firebase dans le fichier src/firebaseConfig.js
: 🎜 rrreee 🎜Enfin, intégrez Vue et Firebase dans le fichier src/main.js
: 🎜rrreee🎜 6. Exécutez l'application 🎜Exécutez la commande suivante dans le terminal pour exécuter l'application : 🎜rrreee🎜Visitez http: //localhost:8080, vous verrez une application de newsletter avec fonction de synchronisation des données en temps réel. 🎜🎜Résumé : 🎜Cet article explique comment utiliser Vue.js et Firebase Cloud Firestore pour implémenter une application de newsletter avec synchronisation des données en temps réel. Nous avons créé deux composants Vue pour afficher la liste des actualités et publier des actualités, puis configuré le routage et les styles. Enfin, nous utilisons Firebase pour stocker et synchroniser les données et les intégrer dans l'application Vue. Avec ces étapes, nous pouvons facilement créer une application de newsletter avec des capacités de synchronisation en temps réel. 🎜🎜Matériaux de référence : 🎜🎜🎜Documentation officielle de Vue.js : https://vuejs.org/🎜🎜Documentation officielle de Firebase : https://firebase.google.com/docs🎜🎜Documentation officielle de Vue CLI : https:// cli.vuejs.org/🎜🎜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!