Alat yang berkuasa untuk membina apl surat berita moden: Vue digabungkan dengan Firebase Cloud Firestore

Alat yang berkuasa untuk membina aplikasi surat berita moden: Vue digabungkan dengan Firebase Cloud Firestore

Dalam beberapa dekad yang lalu, dengan populariti Internet dan pembangunan peranti mudah alih, cara orang mendapatkan dan berkongsi maklumat telah berubah secara mendadak . Apl surat berita telah menjadi salah satu saluran utama untuk orang ramai mendapatkan berita dan acara terkini. Membina aplikasi surat berita moden memerlukan kemesraan pengguna dan penyegerakan data masa nyata.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue yang digabungkan dengan Firebase Cloud Firestore untuk membina aplikasi surat berita moden dan menyediakan contoh kod khusus.

1. Persediaan

Pertama, kita perlu memasang Vue CLI untuk mencipta projek Vue baharu. Buka alat baris arahan dan masukkan arahan berikut:

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

Seterusnya, kita perlu memasang SDK Firebase dan mengkonfigurasinya. Buat projek baharu dalam konsol Firebase dan dapatkan maklumat konfigurasi projek.

Dalam projek Vue, kami perlu memasang Firebase SDK dan mengimport serta mengkonfigurasi Firebase dalam fail main.js. Buka alat baris arahan dan masukkan arahan berikut: main.js文件中导入和配置Firebase。打开命令行工具并输入以下命令：

npm install firebase

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

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

2. 创建新闻列表

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

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

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

npm run serve

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

3. 添加新闻

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

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

Dalam fail main.js, kami mengimport Firebase dan mengkonfigurasi:

rrreee

Sekarang kita selesai dengan persediaan, kita boleh mula membina aplikasi surat berita.

Buat senarai berita

Pertama, kita perlu mencipta komponen senarai berita. Buat fail bernama NewsList.vue dalam direktori src/components dan tambahkan kod berikut:

rrreee

Dalam kod di atas, kami mula-mula mengimport objek instance Firebase db. Dalam kaedah data komponen, kami mentakrifkan tatasusunan newsList untuk menyimpan data berita yang diperoleh daripada Firebase. Dalam cangkuk kitaran hayat dipasang komponen, kami menggunakan kaedah onSnapshot untuk mendengar kemas kini kepada koleksi berita dalam Firestore dan mengemas kini Senarai beritakod>tatasusunan.

🎜Seterusnya, kita perlu menggunakan komponen senarai berita ini dalam komponen akar Vue. Cari fail src/App.vue dan gantikan kandungannya: 🎜rrreee🎜Kini, kami boleh menjalankan aplikasi Vue dan melihat fungsi senarai berita. Masukkan arahan berikut dalam alat baris arahan: 🎜rrreee🎜Buka penyemak imbas dan lawati http://localhost:8080, anda akan melihat senarai berita mudah. 🎜
🎜Tambah Berita🎜🎜🎜Seterusnya, kita perlu menambah borang untuk membolehkan pengguna memasukkan tajuk berita. Buat fail bernama AddNews.vue dalam direktori src/components dan tambahkan kod berikut: 🎜rrreee🎜Dalam kod di atas, kami menambah borang dan atribut title terikat untuk menyimpan tajuk berita yang dimasukkan oleh pengguna. Dalam kaedah addNews, kami menggunakan kaedah add untuk menyimpan tajuk berita pada koleksi berita Firebase dan mengosongkan kotak input. 🎜🎜Kini, kita perlu menggunakan komponen ini yang menambah berita dalam komponen akar Vue. Cari fail src/App.vue dan tambah kod berikut: 🎜rrreee🎜Simpan dan muat semula penyemak imbas, anda akan melihat senarai berita dan borang untuk menambah berita. 🎜🎜Dengan langkah di atas, kami telah berjaya membina aplikasi surat berita yang mudah. Pengguna boleh menambah tajuk berita melalui borang dan memerhati data terkini dalam senarai berita dalam masa nyata. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan cara menggunakan rangka kerja Vue yang digabungkan dengan Firebase Cloud Firestore untuk membina aplikasi surat berita moden. Dengan menyepadukan fungsi penyegerakan data masa nyata Firebase, kami dapat memperoleh dan mengemas kini senarai berita dalam masa nyata. 🎜🎜Sudah tentu, ini hanya contoh mudah, anda boleh mengembangkan dan mengoptimumkannya mengikut keperluan sebenar anda. Saya harap artikel ini membantu anda membina aplikasi surat berita moden! 🎜

Atas ialah kandungan terperinci Alat yang berkuasa untuk membina apl surat berita moden: Vue digabungkan dengan Firebase Cloud Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!