Vue Firebase Cloud Firestore sedang beraksi: langkah dan teknik untuk membina aplikasi surat berita

Vue Firebase Cloud Firestore sedang beraksi: Langkah dan teknik untuk membina aplikasi surat berita

Dengan perkembangan pesat Internet, cara untuk mendapatkan maklumat berita juga sentiasa berubah. Hari ini, orang semakin bergantung pada apl mudah alih untuk menyemak imbas kandungan berita. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue.js dan Firebase Cloud Firestore untuk membina aplikasi surat berita supaya pengguna boleh mengikuti perkembangan terkini dengan berita terkini.

Langkah 1: Buat projek Vue

Mula-mula, kita perlu memasang Vue CLI untuk mencipta projek Vue. Jalankan arahan berikut dalam baris arahan:

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

Arahan di atas akan mencipta projek Vue bernama news-app dan memulakan pelayan pembangunan.

Langkah 2: Pasang Firebase

Dalam direktori projek, jalankan arahan berikut untuk memasang Firebase:

npm install firebase

Langkah 3: Buat projek Firebase

Di tapak web Firebase, buat projek baharu. Dalam tetapan projek, cari "Tambah Apl" dan pilih pilihan Web. Beri nama aplikasi anda dan salin maklumat konfigurasi yang diberikan ke dalam fail main.js projek Vue.

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

Ganti medan seperti YOUR_API_KEY dengan maklumat konfigurasi anda sendiri.

Langkah 4: Buat koleksi Firestore

Untuk menyimpan dan mengurus data maklumat berita, kami perlu membuat koleksi di Cloud Firestore. Tambahkan kod berikut pada fail main.js untuk mencipta koleksi bernama "berita":

db.collection("news").add({
  title: "Breaking News",
  content: "This is the latest news update",
  publishedAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then((docRef) => {
  console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
  console.error("Error adding document: ", error);
});

Kod di atas menambah dokumen berita baharu pada koleksi bernama "berita". Dengan menetapkan medan publishedAt kepada cap waktu pelayan, kami boleh memastikan bahawa setiap dokumen berita mempunyai masa penerbitannya sendiri.

Langkah 5: Dapatkan data berita daripada Firestore

Gunakan komponen Vue untuk memaparkan data berita yang diperoleh daripada Firestore. Buat komponen NewsList.vue dan tambahkan kod berikut dalam blok templat:

<template>
  <div>
    <h2>News List</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h3>{{ news.title }}</h3>
        <p>{{ news.content }}</p>
        <p>{{ news.publishedAt.toDate() }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    db.collection('news').orderBy('publishedAt', 'desc')
      .onSnapshot((snapshot) => {
        this.newsList = snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id }
        })
      })
  }
}
</script>

Kod di atas akan mendapat data berita daripada Firestore dalam masa nyata dan memaparkannya pada halaman.

Langkah 6: Cipta fungsi menambah berita

Tambah fungsi menambah berita dalam komponen NewsList.vue. Tambahkan kod berikut dalam blok templat:

<template>
  <div>
    <!-- ...上述代码... -->
    <form @submit.prevent="addNews">
      <input type="text" v-model="newsTitle" placeholder="News Title">
      <textarea v-model="newsContent" placeholder="News Content"></textarea>
      <button type="submit">Add News</button>
    </form>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: [],
      newsTitle: '',
      newsContent: ''
    }
  },
  mounted() {
    // ...上述代码...
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.newsTitle,
        content: this.newsContent,
        publishedAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(() => {
        this.newsTitle = ''
        this.newsContent = ''
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
    }
  }
}
</script>

Kod di atas akan menambah data berita ke Firestore menggunakan kaedah addNews.

Pada ketika ini, kami telah berjaya membina aplikasi surat berita ringkas menggunakan Vue.js dan Firebase Cloud Firestore. Melalui aplikasi ini, pengguna boleh melayari berita dan maklumat terkini, dan juga boleh menambah berita mereka sendiri.

Ringkasan:

Artikel ini memperkenalkan langkah dan teknik untuk membangunkan aplikasi surat berita menggunakan Vue.js dan Firebase Cloud Firestore. Melalui gabungan rangka kerja Vue dan pangkalan data Firestore, kami boleh mencipta aplikasi berita terkini masa nyata untuk memastikan pengguna dimaklumkan tentang berita terkini. Saya harap artikel ini akan membantu pembangun yang ingin membangunkan aplikasi yang serupa.

Atas ialah kandungan terperinci Vue Firebase Cloud Firestore sedang beraksi: langkah dan teknik untuk membina aplikasi surat berita. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!