Un outil puissant pour créer des applications de newsletter modernes : Vue combinée avec Firebase Cloud Firestore
Au cours des dernières décennies, avec la popularité d'Internet et le développement des appareils mobiles, la façon dont les gens obtiennent et partagent des informations a radicalement changé . Les applications de newsletter sont devenues l’un des principaux canaux permettant aux utilisateurs d’obtenir les dernières nouvelles et événements. Construire une application de newsletter moderne nécessite une convivialité et une synchronisation des données en temps réel.
Dans cet article, nous présenterons comment utiliser le framework Vue combiné avec Firebase Cloud Firestore pour créer une application de newsletter moderne et fournirons des exemples de code spécifiques.
Tout d'abord, nous devons installer Vue CLI pour créer un nouveau projet Vue. Ouvrez l'outil de ligne de commande et entrez la commande suivante :
npm install -g @vue/cli vue create news-app
Ensuite, nous devons installer le SDK Firebase et le configurer. Créez un nouveau projet dans la console Firebase et obtenez les informations de configuration du projet.
Dans le projet Vue, nous devons installer le SDK Firebase et importer et configurer Firebase dans le fichier main.js
. Ouvrez l'outil de ligne de commande et saisissez la commande suivante : main.js
文件中导入和配置Firebase。打开命令行工具并输入以下命令:
npm install firebase
在main.js
文件中,我们导入Firebase并配置:
import firebase from 'firebase/app' import 'firebase/firestore' const firebaseConfig = { apiKey: 'YOUR_API_KEY', authDomain: 'YOUR_AUTH_DOMAIN', projectId: 'YOUR_PROJECT_ID', storageBucket: 'YOUR_STORAGE_BUCKET', messagingSenderId: 'YOUR_MESSAGING_SENDER_ID', appId: 'YOUR_APP_ID', } firebase.initializeApp(firebaseConfig) export const db = firebase.firestore()
现在,我们已经完成了准备工作,可以开始构建时事通讯应用了。
首先,我们需要创建一个新闻列表组件。在src/components
目录下创建一个名为NewsList.vue
的文件,并添加以下代码:
<template> <div> <h2>News List</h2> <ul> <li v-for="news in newsList" :key="news.id"> {{ news.title }} </li> </ul> </div> </template> <script> import { db } from '../main' export default { data() { return { newsList: [], } }, mounted() { db.collection('news').onSnapshot(querySnapshot => { this.newsList = [] querySnapshot.forEach(doc => { this.newsList.push({ id: doc.id, ...doc.data() }) }) }) }, } </script> <style scoped> h2 { color: #333; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } </style>
在以上代码中,我们首先导入了Firebase实例对象db。在组件的data
方法中,我们定义一个newsList
数组来存储从Firebase获取的新闻数据。在组件的mounted
生命周期钩子中,我们使用onSnapshot
方法监听Firestore中news
集合的更新,并更新newsList
数组。
接下来,我们需要在Vue根组件中使用这个新闻列表组件。找到src/App.vue
文件并替换其中的内容:
<template> <div id="app"> <NewsList /> </div> </template> <script> import NewsList from './components/NewsList.vue' export default { components: { NewsList, }, } </script> <style> #app { font-family: Arial, sans-serif; } </style>
现在,我们可以运行Vue应用并查看新闻列表的功能。在命令行工具中输入以下命令:
npm run serve
打开浏览器,并访问http://localhost:8080
,你将看到一个简单的新闻列表。
接下来,我们需要添加一个表单来允许用户输入新闻标题。在src/components
目录下创建一个名为AddNews.vue
的文件,并添加以下代码:
<template> <div> <h2>Add News</h2> <form @submit.prevent="addNews"> <input v-model="title" type="text" placeholder="News Title" required /> <button type="submit">Add</button> </form> </div> </template> <script> import { db } from '../main' export default { data() { return { title: '', } }, methods: { addNews() { db.collection('news').add({ title: this.title, }) this.title = '' }, }, } </script> <style scoped> h2 { color: #333; } form { margin-top: 10px; } input { padding: 5px; } button { padding: 5px 10px; } </style>
在以上代码中,我们添加了一个表单,并绑定了title
属性来保存用户输入的新闻标题。在addNews
方法中,我们使用add
方法将新闻标题保存到Firebase的news
集合中,并清空输入框。
现在,我们需要在Vue根组件中使用这个添加新闻的组件。找到src/App.vue
<template> <div id="app"> <NewsList /> <AddNews /> </div> </template> <script> import NewsList from './components/NewsList.vue' import AddNews from './components/AddNews.vue' export default { components: { NewsList, AddNews, }, } </script> <style> #app { font-family: Arial, sans-serif; } </style>
main.js
, nous importons Firebase et configurons : rrreee
Maintenant que nous avons terminé les préparatifs, nous pouvons commencer à construire l'application newsletter.Tout d'abord, nous devons créer un composant de liste d'actualités. Créez un fichier nommé NewsList.vue
dans le répertoire src/components
et ajoutez le code suivant :
Dans le code ci-dessus, nous avons d'abord importé la base de données de l'objet d'instance Firebase. Dans la méthode data
du composant, nous définissons un tableau newsList
pour stocker les données d'actualité obtenues depuis Firebase. Dans le hook de cycle de vie monté
du composant, nous utilisons la méthode onSnapshot
pour écouter les mises à jour de la collection news
dans Firestore et mettre à jour le newsListcode>tableau.
src/App.vue
et remplacez le contenu : 🎜rrreee🎜Maintenant, nous pouvons exécuter l'application Vue et afficher la fonctionnalité de la liste d'actualités. Entrez la commande suivante dans l'outil de ligne de commande : 🎜rrreee🎜Ouvrez le navigateur et visitez http://localhost:8080
, vous verrez une simple liste d'actualités. 🎜AddNews.vue
dans le répertoire src/components
et ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un formulaire et le L'attribut title
est destiné à enregistrer le titre de l'actualité saisi par l'utilisateur. Dans la méthode addNews
, nous utilisons la méthode add
pour enregistrer le titre de l'actualité dans la collection news
de Firebase et effacer la zone de saisie. 🎜🎜Maintenant, nous devons utiliser ce composant qui ajoute des nouvelles dans le composant racine de Vue. Recherchez le fichier src/App.vue
et ajoutez le code suivant : 🎜rrreee🎜Enregistrez et actualisez le navigateur, vous verrez une liste de nouvelles et un formulaire pour ajouter des nouvelles. 🎜🎜Avec les étapes ci-dessus, nous avons réussi à créer une application de newsletter simple. Les utilisateurs peuvent ajouter des titres d'actualités via le formulaire et observer les dernières données de la liste d'actualités en temps réel. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser le framework Vue combiné avec Firebase Cloud Firestore pour créer une application de newsletter moderne. En intégrant la fonction de synchronisation des données en temps réel de Firebase, nous sommes en mesure d'obtenir et de mettre à jour la liste des actualités en temps réel. 🎜🎜Bien sûr, ce n'est qu'un exemple simple, vous pouvez l'étendre et l'optimiser en fonction de vos besoins réels. J'espère que cet article vous aidera à créer une application de newsletter moderne ! 🎜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!