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

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

Introduction :
Les applications de newsletter intelligentes jouent un rôle important dans la société en évolution rapide d'aujourd'hui. Cet article explique comment créer une application de newsletter intelligente à l'aide de Vue et Firebase Cloud Firestore. Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Firebase Cloud Firestore est une solution de base de données cloud fournie par Google pour stocker et synchroniser les données. En combinant ces deux outils puissants, nous pouvons facilement créer une application de newsletter avec une messagerie en temps réel et des recommandations intelligentes.

Étape 1 : Créer un projet Vue
Tout d'abord, nous devons créer un projet Vue. Ouvrez le terminal et exécutez la commande suivante :

vue create smart-news

Suivez ensuite les invites pour sélectionner la configuration qui vous convient et terminer la création du projet.

Étape 2 : Configurer Firebase
Ensuite, nous devons configurer un nouveau projet sur Firebase.

1. Visitez la console Firebase (https://console.firebase.google.com/).
2. Cliquez sur le bouton "Créer un projet" et entrez le nom du projet lorsque vous y êtes invité.
3. Dans les paramètres du projet, cliquez sur « Ajouter une application » et sélectionnez l'application « Web ».
4. Entrez un nom d'application approprié et copiez les informations de configuration fournies par Firebase dans notre application Vue.

Ouvrez le répertoire racine du projet Vue et recherchez le fichier main.js dans le répertoire src. Ajoutez le code suivant en haut du fichier :

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

// 在此处粘贴Firebase配置信息

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

Troisième étape : créer une collection Firebase
Créez une collection appelée articles pour stocker nos données d'articles. Ouvrez la console Firebase et cliquez sur l'onglet "Base de données" à gauche. Cliquez ensuite sur le bouton « Créer une base de données » et sélectionnez « Mode production ». Nous avons choisi le "Mode Production" car il mettra notre base de données en mode protégé et ne sera accessible qu'à l'aide du mécanisme d'authentification de Firebase.

Saisissez « articles » dans la zone de saisie « ID de collection » et cliquez sur « Suivant ». Sélectionnez ensuite « Mode Démarrer » et cliquez sur « Activer ».

Étape 4 : Ajouter des données d'article
Ensuite, nous devons ajouter des exemples de données d'article à Firestore pour une utilisation ultérieure. Cliquez sur la collection « articles » dans la console Firestore et cliquez sur le bouton « Ajouter un document ». Nous pouvons saisir les champs et les valeurs un par un, ou choisir d'utiliser un format JSON prédéfini.

Exemple de données d'article :

{
  "title": "如何使用Vue和Firebase Cloud Firestore构建智能应用",
  "description": "本文介绍如何使用Vue和Firebase Cloud Firestore构建一个智能时事通讯应用。",
  "category": "技术",
  "timestamp": "2021-09-01 10:00:00"
}

Cliquez sur "Enregistrer" pour ajouter nos données d'article.

Étape 5 : Créer un composant Vue
Nous pouvons maintenant commencer à créer notre composant Vue. Créez un dossier nommé « composants » dans le répertoire src, puis créez un fichier nommé « Articles.vue » sous le dossier.

Dans Articles.vue, nous allons implémenter un composant pour afficher tous les articles et les mettre à jour en temps réel.

Tout d'abord, nous devons importer la fonctionnalité de mise à jour en temps réel de Firestore dans notre composant Vue. Ajoutez le code suivant en haut d'Articles.vue :

import { db } from '../main'

Ensuite, ajoutez le code suivant dans l'option d'exportation du composant :

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 获取文章数据
    db.collection('articles').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      this.articles = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }
}

Ajoutez le code suivant dans la balise de modèle pour restituer les données de l'article :

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
  <p>{{ article.description }}</p>
  <p>{{ article.category }}</p>
  <p>{{ article.timestamp }}</p>
</div>

Step 6 : Routage complet et vues
Pour que nous puissions accéder à notre page de liste d'articles dans un navigateur, nous devons définir des itinéraires et des vues.

Ouvrez le fichier router.js dans le répertoire src et ajoutez le code suivant :

import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'

const routes = [
  { path: '/', component: Articles }
]

const router = new VueRouter({ routes })

export default router

Dans App.vue, ajoutez le code suivant à la balise du modèle :

<router-view></router-view>

Étape 7 : Exécutez l'application
Maintenant, nous avons terminé tout le nécessaire Une fois la configuration et le code en place, nous pouvons exécuter notre application et voir les résultats.

Exécutez la commande suivante dans le terminal :

npm run serve

Après cela, ouvrez le navigateur et visitez http://localhost:8080/, nous verrons notre page de liste d'articles, et lorsque les données de l'article dans Firestore changeront, la page être mis à jour en temps réel.

Conclusion :
Cet article explique comment créer une application de newsletter intelligente à l'aide de Vue et Firebase Cloud Firestore. En combinant Vue et Firebase, nous avons créé une application de newsletter avec messagerie en temps réel et recommandations intelligentes. Espérons que ces exemples de code vous aideront à développer davantage vos propres applications. Si vous avez des questions sur Vue ou Firebase, vous pouvez consulter la documentation officielle pour des informations plus détaillées. Je vous souhaite du succès !

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!