Alat yang berkuasa untuk membina apl surat berita moden: Vue digabungkan dengan Firebase Cloud Firestore-View.js-php.cn

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

WBOY

Lepaskan： 2023-09-13 10:07:52

asal

916 orang telah melayarinya

构建现代化时事通讯应用的利器：Vue结合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.

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

创建新闻列表

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

Salin selepas log masuk

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

Salin selepas log masuk

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

npm run serve

Salin selepas log masuk

打开浏览器，并访问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>

Salin selepas log masuk

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

Salin selepas log masuk

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

rrreee

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

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

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.

src/App.vue

http://localhost:8080

AddNews.vue

src/components

atribut title

addNews

add

berita

src/App.vue

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!