So erstellen Sie eine hochwertige Newsletter-App mit Vue und Firebase Cloud Firestore

So erstellen Sie eine hochwertige Newsletter-Anwendung mit Vue und Firebase Cloud Firestore

Newsletter-Anwendungen spielen in der modernen Gesellschaft eine wichtige Rolle und können Benutzern dabei helfen, zeitnah die neuesten Informationen zu Nachrichten und Ereignissen zu erhalten. In diesem Artikel wird erläutert, wie Sie mit dem Vue-Framework und Firebase Cloud Firestore eine hochwertige Newsletter-Anwendung erstellen und spezifische Codebeispiele bereitstellen.

1. Vorbereitung
Bevor wir beginnen, müssen wir einige notwendige Tools und Bibliotheken installieren. Stellen Sie zunächst sicher, dass Node.js und npm installiert sind. Verwenden Sie dann den folgenden Befehl in der Befehlszeile, um die Vue-CLI (Gerüst) zu installieren:

npm install -g @vue/cli

Als nächstes erstellen Sie ein neues Vue-Projekt:

vue create newsletter-app

Geben Sie das Projektverzeichnis ein:

cd newsletter-app

Installieren Sie Firebase-Abhängigkeiten:

npm install firebase

2. Firebase-Instanz erstellen und initialisieren
Erstellen Sie ein neues Projekt in der Firebase-Konsole und aktivieren Sie die Cloud Firestore-Datenbank. Rufen Sie dann die Konfigurationsinformationen Ihres Projekts von der Konsole ab.

Erstellen Sie einen neuen Ordner firebase im Verzeichnis src des Vue-Projekts und erstellen Sie darin eine neue Datei index.js. Kopieren Sie dann den folgenden Code in 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

Denken Sie daran, YOUR_API_KEY usw. durch Ihre tatsächlichen Konfigurationswerte zu ersetzen.

3. Vue-Komponenten erstellen

Wir erstellen zwei Vue-Komponenten: eine zum Anzeigen der Nachrichtenliste und eine zum Hinzufügen von Nachrichten. 🎜🎜Erstellen Sie eine neue Datei NewsList.vue im Verzeichnis src/components und kopieren Sie den folgenden Code in die Datei: 🎜rrreee🎜Erstellen Sie eine neue Datei im selben Verzeichnis File AddNews.vue und kopieren Sie den folgenden Code in die Datei: 🎜rrreee🎜 IV. Konfigurieren Sie das Routing 🎜Öffnen Sie die Datei src/router/index.js und kopieren Sie den folgenden Code in die Routendefinition ein: 🎜rrreee🎜 5. Integrieren Sie Firebase und Vue 🎜 Öffnen Sie die Datei src/main.js und fügen Sie den folgenden Code in die Datei ein: 🎜rrreee🎜 6. Erstellen Sie die App.vue-Komponente 🎜Öffnen Sie die Datei src/App.vue und ersetzen Sie den Inhalt der Datei durch den folgenden Code: 🎜rrreee🎜7. Führen Sie die Anwendung aus. 🎜Jetzt haben wir den gesamten erforderlichen Code und die Konfiguration abgeschlossen. Geben Sie den folgenden Befehl in die Befehlszeile ein, um die Anwendung zu starten: 🎜rrreee🎜Öffnen Sie den Browser und besuchen Sie http://localhost:8080, um die Oberfläche der Newsletter-Anwendung anzuzeigen. Sie können die App testen, indem Sie Neuigkeiten hinzufügen. 🎜🎜Zusammenfassung🎜In diesem Artikel wird erläutert, wie Sie mit Vue und Firebase Cloud Firestore eine hochwertige Newsletter-App erstellen. Mit einfacher Konfiguration und wenigen Codezeilen können wir die Nachrichtenliste problemlos implementieren und Nachrichtenfunktionen hinzufügen. Ich hoffe, dass dieser Artikel für Sie hilfreich ist, und wünsche Ihnen eine glückliche Entwicklung! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine hochwertige Newsletter-App mit Vue und Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!