Comment créer une application de newsletter réactive avec Vue et Firebase Cloud Firestore

Comment créer une application de newsletter réactive à l'aide de Vue et Firebase Cloud Firestore

Avant-propos :
Avec le développement rapide d'Internet, la diffusion des informations d'actualité devient de plus en plus rapide. En tant que personnes modernes, nous voulons toujours connaître toutes sortes d’actualités le plus rapidement possible. Ainsi, dans cet article, j'expliquerai comment créer une application de newsletter réactive à l'aide de Vue et Firebase Cloud Firestore.

Qu'est-ce que Vue et Firebase Cloud Firestore :
Vue est un framework JavaScript progressif pour créer des interfaces utilisateur. Il utilise un modèle de développement à composants pour nous aider à créer plus facilement des applications Web interactives.

Firebase est une plateforme de services cloud fournie par Google, dans laquelle Cloud Firestore est une base de données NoSQL flexible et évolutive conçue pour nous aider à construire le backend de nos applications.

Préparation :
Avant de commencer, nous devons installer Vue et Firebase. La Vue CLI peut être installée à l'aide de la commande suivante :

npm install -g @vue/cli

Ensuite, nous devons créer un nouveau projet Vue :

vue create news-app

Ensuite, nous devons créer un nouveau projet dans la console Firebase et activer la base de données Cloud Firestore.

Configurer Firebase Cloud Firestore :
Dans la console Firebase, cliquez sur le bouton "Créer une nouvelle base de données Firestore" et sélectionnez "Démarrer".

Dans la boîte de dialogue "Créer une base de données", sélectionnez l'option "Démarrer en mode test" et cliquez sur "Suivant".

Ensuite, sélectionnez un emplacement de base de données et cliquez sur "Suivant".

Enfin, cliquez sur "Démarrer".

Dans la console, cliquez sur le bouton "Paramètres" et sélectionnez "Paramètres du projet".

Dans l'onglet "Général", faites défiler jusqu'à la section "Votre application" et sous "Importer les éléments suivants", sélectionnez Vue.js.

Ensuite, copiez le contenu du fichier de configuration dans le fichier .env.local de votre projet Vue. .env.local文件中。

安装Firebase:
在Vue项目的根目录下，使用以下命令安装Firebase:

npm install firebase

然后，在src/main.js文件中导入Firebase和Firestore:

import firebase from 'firebase/app'
import 'firebase/firestore'

// 初始化FirebaseApp
firebase.initializeApp({
  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
})

// 创建Firestore实例
const db = firebase.firestore()

// 导出Firestore实例
export default db

构建新闻通讯应用:
首先，我们需要创建一个用于显示新闻的组件News.vue，并在Vue项目的src/components目录下创建。

在News.vue中，我们将使用Vue的computed属性来从Firebase中获取最新的新闻数据，并使用Vue的v-for指令循环渲染每个新闻条目。

<template>
  <div>
    <h1>最新新闻</h1>
    <ul>
      <li v-for="news in latestNews" :key="news.id">
        <h2>{{ news.title }}</h2>
        <p>{{ news.content }}</p>
        <p>{{ news.date }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '@/main'

export default {
  name: 'News',
  computed: {
    latestNews() {
      return db.collection('news')
        .orderBy('date', 'desc')
        .limit(10)
        .get()
        .then(querySnapshot => {
          const news = []
          querySnapshot.forEach(doc => {
            news.push({
              id: doc.id,
              ...doc.data()
            })
          })
          return news
        })
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

li {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}
</style>

然后，在Vue项目的根目录下的App.vue文件中使用News组件:

<template>
  <div id="app">
    <News />
  </div>
</template>

<script>
import News from '@/components/News'

export default {
  name: 'App',
  components: {
    News
  }
}
</script>

编译和运行:
我们只需使用以下命令在本地编译和运行Vue项目:

npm run serve

然后，打开浏览器并访问http://localhost:8080

Installez Firebase :

Dans le répertoire racine du projet Vue, utilisez la commande suivante pour installer Firebase :
rrreee

Ensuite, importez Firebase et Firestore dans le fichier src/main.js :🎜rrreee 🎜Créer une application News Communication : 🎜Tout d'abord, nous devons créer un composant News.vue pour afficher les actualités, et le créer dans le répertoire src/components du projet Vue. 🎜🎜Dans News.vue, nous utiliserons l'attribut computed de Vue pour obtenir les dernières données d'actualité de Firebase, et utiliserons le v-for de Vue. La directive parcourt chaque article d’actualité. 🎜rrreee🎜Ensuite, utilisez le composant <code>News dans le fichier App.vue dans le répertoire racine du projet Vue : 🎜rrreee🎜Compilez et exécutez : 🎜Nous utilisons simplement le commande suivante Compilez et exécutez le projet Vue localement : 🎜rrreee🎜 Ensuite, ouvrez le navigateur et visitez http://localhost:8080, vous verrez une page affichant les dernières nouvelles. 🎜🎜Résumé :🎜Cet article explique comment créer une application de newsletter réactive à l'aide de Vue et Firebase Cloud Firestore. Un développement ultérieur pourrait inclure la possibilité d'ajouter des actualités et d'envoyer automatiquement des notifications aux utilisateurs après la publication des actualités. En apprenant et en maîtrisant ces technologies, nous pouvons créer des applications Web plus pratiques et plus réactives. 🎜

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!