Ein leistungsstarkes Tool zum Erstellen moderner Newsletter-Apps: Vue kombiniert mit Firebase Cloud Firestore-View.js-php.cn

构建现代化时事通讯应用的利器：Vue结合Firebase Cloud Firestore

Ein leistungsstarkes Tool zum Erstellen moderner Newsletter-Anwendungen: Vue kombiniert mit Firebase Cloud Firestore

In den letzten Jahrzehnten hat sich mit der Popularität des Internets und der Entwicklung mobiler Geräte die Art und Weise, wie Menschen Informationen erhalten und teilen, dramatisch verändert . . Newsletter-Apps sind zu einem der wichtigsten Kanäle für Menschen geworden, um die neuesten Nachrichten und Ereignisse zu erhalten. Der Aufbau einer modernen Newsletter-Anwendung erfordert Benutzerfreundlichkeit und Echtzeit-Datensynchronisierung.

In diesem Artikel stellen wir vor, wie Sie das Vue-Framework in Kombination mit Firebase Cloud Firestore verwenden, um eine moderne Newsletter-Anwendung zu erstellen, und stellen spezifische Codebeispiele bereit.

Vorbereitung

Zuerst müssen wir die Vue-CLI installieren, um ein neues Vue-Projekt zu erstellen. Öffnen Sie das Befehlszeilentool und geben Sie den folgenden Befehl ein:

npm install -g @vue/cli
vue create news-app

Nach dem Login kopieren

Als nächstes müssen wir das Firebase SDK installieren und konfigurieren. Erstellen Sie ein neues Projekt in der Firebase-Konsole und rufen Sie die Konfigurationsinformationen des Projekts ab.

Im Vue-Projekt müssen wir das Firebase SDK installieren und Firebase in die Datei main.js importieren und konfigurieren. Öffnen Sie das Befehlszeilentool und geben Sie den folgenden Befehl ein: main.js文件中导入和配置Firebase。打开命令行工具并输入以下命令：

npm install firebase

Nach dem Login kopieren

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

Nach dem Login kopieren

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

创建新闻列表

首先，我们需要创建一个新闻列表组件。在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>

Nach dem Login kopieren

在以上代码中，我们首先导入了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>

Nach dem Login kopieren

现在，我们可以运行Vue应用并查看新闻列表的功能。在命令行工具中输入以下命令：

npm run serve

Nach dem Login kopieren

打开浏览器，并访问http://localhost:8080，你将看到一个简单的新闻列表。

添加新闻

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

Nach dem Login kopieren

在以上代码中，我们添加了一个表单，并绑定了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>

Nach dem Login kopieren

In der Datei main.js importieren wir Firebase und konfigurieren:

rrreee

Da wir nun mit den Vorbereitungen fertig sind, können wir mit dem Erstellen beginnen die Newsletter-App.

Zuerst müssen wir eine Nachrichtenlistenkomponente erstellen. Erstellen Sie eine Datei mit dem Namen NewsList.vue im Verzeichnis src/components und fügen Sie den folgenden Code hinzu:

Im obigen Code haben wir zuerst die Firebase-Instanzobjektdatenbank importiert. In der data-Methode der Komponente definieren wir ein newsList-Array, um die von Firebase erhaltenen Nachrichtendaten zu speichern. Im mounted-Lebenszyklus-Hook der Komponente verwenden wir die Methode onSnapshot, um auf Aktualisierungen der news-Sammlung in Firestore zu warten und die newsListcode>array.

src/App.vue

http://localhost:8080

AddNews.vue

src/components

hinzugefügt Das Attribut title

addNews

add

news

src/App.vue

Das obige ist der detaillierte Inhalt vonEin leistungsstarkes Tool zum Erstellen moderner Newsletter-Apps: Vue kombiniert mit Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!