Un outil puissant pour créer des applications de newsletter modernes : Vue combinée à Firebase Cloud Firestore

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.

1. Préparation

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()

现在，我们已经完成了准备工作，可以开始构建时事通讯应用了。

2. 创建新闻列表

首先，我们需要创建一个新闻列表组件。在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，你将看到一个简单的新闻列表。

3. 添加新闻

接下来，我们需要添加一个表单来允许用户输入新闻标题。在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>

Dans le fichier main.js, nous importons Firebase et configurons :

rrreee

Maintenant que nous avons terminé les préparatifs, nous pouvons commencer à construire l'application newsletter.

Créer une liste d'actualités

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 :

rrreee

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.

🎜Ensuite, nous devons utiliser ce composant de liste d'actualités dans le composant racine de Vue. Recherchez le fichier 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. 🎜
🎜Ajouter des actualités🎜🎜🎜Ensuite, nous devons ajouter un formulaire pour permettre aux utilisateurs de saisir des titres d'actualités. Créez un fichier nommé 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!