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

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

Les applications de newsletter jouent un rôle important dans la société moderne et peuvent aider les utilisateurs à obtenir les dernières informations sur les actualités et les événements en temps opportun. Cet article expliquera comment utiliser le framework Vue et Firebase Cloud Firestore pour créer une application de newsletter de haute qualité et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons installer certains outils et bibliothèques nécessaires. Tout d’abord, assurez-vous que Node.js et npm sont installés. Ensuite, utilisez la commande suivante sur la ligne de commande pour installer Vue CLI (échafaudage) :

npm install -g @vue/cli

Ensuite, créez un nouveau projet Vue :

vue create newsletter-app

Entrez le répertoire du projet :

cd newsletter-app

Installez les dépendances Firebase :

npm install firebase

2. Créer une instance Firebase et initialisation
Créez un nouveau projet dans la console Firebase et activez la base de données Cloud Firestore. Ensuite, récupérez les informations de configuration de votre projet depuis la console.

Créez un nouveau dossier firebase dans le répertoire src du projet Vue et créez-y un nouveau fichier index.js. Ensuite, copiez le code suivant dans index.js : src目录下创建一个新文件夹firebase，并在其中创建一个新文件index.js。然后，将下面的代码复制到index.js中：

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

const firebaseConfig = {
  // 将你的Firebase配置信息替换成实际的值
  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()

记得将YOUR_API_KEY等替换为你的实际配置值。

三、创建Vue组件
我们将创建两个Vue组件：一个显示新闻列表，一个用于添加新闻。

在src/components目录下创建一个新文件NewsList.vue，并将以下代码复制到文件中：

<template>
  <div>
    <h1>时事通讯</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    const newsRef = this.$firebase.firestore().collection('news')
    newsRef.onSnapshot((snapshot) => {
      const newsList = []
      snapshot.forEach((doc) => {
        newsList.push({...doc.data(), id: doc.id})
      })
      this.newsList = newsList
    })
  }
}
</script>

在同一个目录下创建一个新文件AddNews.vue，并将以下代码复制到文件中：

<template>
  <div>
    <h2>添加新闻</h2>
    <form @submit.prevent="addNews">
      <label for="title">标题</label>
      <input type="text" id="title" v-model="title" required>
      <label for="content">内容</label>
      <textarea id="content" v-model="content" required></textarea>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    addNews() {
      const newsRef = this.$firebase.firestore().collection('news')
      newsRef.add({ title: this.title, content: this.content })
      this.title = ''
      this.content = ''
    }
  }
}
</script>

四、配置路由
打开src/router/index.js文件，并将以下代码插入到路由定义中：

import NewsList from '@/components/NewsList.vue'
import AddNews from '@/components/AddNews.vue'

const routes = [
  {
    path: '/',
    name: 'NewsList',
    component: NewsList
  },
  {
    path: '/add',
    name: 'AddNews',
    component: AddNews
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

五、集成Firebase和Vue
打开src/main.js文件，并将以下代码插入到文件中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { db } from './firebase'

Vue.prototype.$firebase = db

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

六、创建App.vue组件
打开src/App.vue文件，并将以下代码替换文件中的内容：

<template>
  <div id="app">
    <router-view></router-view>
    <router-link to="/add">添加新闻</router-link>
  </div>
</template>

<script>
export default {
  
}
</script>

七、运行应用
现在，我们已经完成了所有必要的代码和配置。在命令行中输入以下命令启动应用：

npm run serve

打开浏览器，访问http://localhost:8080rrreee

N'oubliez pas de remplacer YOUR_API_KEY etc. par vos valeurs de configuration réelles.

3. Créer des composants Vue

Nous allons créer deux composants Vue : un pour afficher la liste des actualités et un pour ajouter des actualités. 🎜🎜Créez un nouveau fichier NewsList.vue dans le répertoire src/components et copiez le code suivant dans le fichier : 🎜rrreee🎜Créez un nouveau fichier dans le même répertoire Fichier AddNews.vue et copiez le code suivant dans le fichier : 🎜rrreee🎜 IV. Configurer le routage 🎜Ouvrez le fichier src/router/index.js et copiez le code suivant Insérer dans la définition de la route : 🎜rrreee🎜 5. Intégrez Firebase et Vue 🎜 Ouvrez le fichier src/main.js et insérez le code suivant dans le fichier : 🎜rrreee🎜 6. Créez le composant App.vue 🎜Ouvrez le fichier src/App.vue et remplacez le contenu du fichier par le code suivant : 🎜rrreee🎜7 Exécutez l'application🎜Maintenant, nous avons terminé tout le code et la configuration nécessaires. Entrez la commande suivante sur la ligne de commande pour démarrer l'application : 🎜rrreee🎜Ouvrez le navigateur et visitez http://localhost:8080 pour voir l'interface de l'application de newsletter. Vous pouvez tester l'application en ajoutant des actualités. 🎜🎜Résumé🎜Cet article explique comment créer une application de newsletter de qualité à l'aide de Vue et Firebase Cloud Firestore. Avec une configuration simple et quelques lignes de code, nous pouvons facilement implémenter la liste d'actualités et ajouter des fonctions d'actualités. J'espère que cet article vous sera utile et je vous souhaite un bon développement ! 🎜

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!