Pembangunan aplikasi surat berita berdasarkan Vue: Penyegerakan data masa nyata menggunakan Firebase Cloud Firestore

Pembangunan aplikasi surat berita berasaskan Vue: Penyegerakan data masa nyata menggunakan Firebase Cloud Firestore memerlukan contoh kod khusus

Pengenalan:
Dengan perkembangan pesat Internet, orang ramai semakin memberi perhatian dan permintaan untuk hal ehwal semasa . Hari ini, ramai orang ingin dapat mengikuti perkembangan terkini dengan berita terkini dan topik hangat pada bila-bila masa dan di mana sahaja. Untuk memenuhi keperluan ini, kami boleh membangunkan aplikasi surat berita berasaskan Vue dan menggunakan Firebase Cloud Firestore untuk mencapai penyegerakan data masa nyata. Artikel ini akan memperkenalkan anda kepada proses pembangunan berdasarkan Vue dan Firebase serta memberikan contoh kod terperinci.

1. Penyediaan:

1. Pasang Node.js dan Vue CLI.
2. Buat projek Vue baharu, namakannya "aplikasi berita", dan masukkan direktori projek.

2 Buat projek Firebase:

1. Masukkan tapak web rasmi Firebase (https://firebase.google.com/) dan log masuk dengan akaun Google anda.
2. Klik "Bermula" untuk mencipta projek baharu.
3. Dalam konsol projek, klik "Tambah Aplikasi" dan pilih "Web".
4. Masukkan nama apl, seperti "NewsApp", dan kemudian klik "Daftar Apl".
5. Dalam kod konfigurasi di bawah, salin kandungan objek "firebaseConfig".

3. Pasang kebergantungan Firebase:

1. Buka terminal dan masukkan direktori projek "news-app".

2. Jalankan arahan berikut untuk memasang kebergantungan berkaitan Firebase:

   npm install firebase

3. Buat folder baharu dalam direktori src dan namakannya "firebase".
4. Buat fail baharu dalam folder "firebase" dan namakannya "config.js".

5. Dalam fail "config.js", tampalkan objek "firebaseConfig" yang disalin sebelum dan eksportnya:

   export default {
     // 粘贴firebaseConfig对象
   }

4. Mulakan Firebase:

1. Import Firebase"rebase" dan "firebase"

2. Mulakan Firebase:

   import firebase from 'firebase/app'
   import 'firebase/firestore'
   import firebaseConfig from './firebase/config'

3. Buat contoh Firebase Firestore:

   firebase.initializeApp(firebaseConfig)

4. Tambahkan contoh Firestore pada prototaip Vue untuk akses ke seluruh apl:

   rreee halaman berita:

:

Buat fail baharu dalam direktori "src/views" dan namakannya "NewsList.vue".

1. Dalam fail "NewsList.vue", tulis kod templat berikut:

2. const db = firebase.firestore()

Dalam fail "NewsList.vue", tulis kod skrip berikut:

3. Vue.prototype.$db = db

6. Buat halaman tambahan :

Buat fail baharu dalam direktori "src/views" dan namakannya "AddNews.vue".

1. Dalam fail "AddNews.vue", tulis kod templat berikut:

2. <template>
     <div>
    <h1>时事新闻</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
     </div>
   </template>

Dalam fail "AddNews.vue", tulis kod skrip berikut:

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

7. Konfigurasikan routing:

Dalam fail "src/router/index.js", import "NewsList.vue" dan "AddNews.vue":

<template>
  <div>
 <h1>添加新闻</h1>
 <form @submit.prevent="addNews">
   <label for="title">标题：</label>
   <input type="text" id="title" v-model="title" required>
   <button type="submit">提交</button>
 </form>
  </div>
</template>

1. Dalam tatasusunan "laluan", buat dua objek laluan:

<script>
export default {
  data() {
 return {
   title: ''
 }
  },
  methods: {
 addNews() {
   this.$db.collection('news').add({
     title: this.title,
     timestamp: new Date()
   })
   this.title = ''
 }
  }
}
</script>

八. Cipta komponen halaman utama:

Buat fail baharu dalam direktori "src/views" dan namakannya "Home.vue".

1. Dalam fail "Home.vue", tulis kod templat berikut:

2. import NewsList from '@/views/NewsList.vue'
   import AddNews from '@/views/AddNews.vue'

9 Kemas kini komponen Apl:

Dalam fail "src/App.vue", gantikan kod templat awal. Untuk kod berikut:

1. {
     path: '/',
     name: 'NewsList',
     component: NewsList
   },
   {
     path: '/add',
     name: 'AddNews',
     component: AddNews
   }

10 Jalankan aplikasi:

Jalankan arahan berikut dalam terminal untuk memulakan aplikasi:

1. <template>
     <div>
    <h1>时事通讯应用</h1>
    <router-link to="/">查看新闻</router-link>
    <router-link to="/add">添加新闻</router-link>
    <router-view></router-view>
     </div>
   </template>

   Buka pelayar dan lawati "http://localhost:8080" , anda boleh melihat halaman utama aplikasi.
2. Kesimpulan:

Melalui kod sampel dalam artikel ini, kami berjaya mencipta aplikasi surat berita berasaskan Vue dan menggunakan Firebase Cloud Firestore untuk mencapai penyegerakan data masa nyata. Pembangun boleh terus menambah baik aplikasi mengikut keperluan dan idea mereka sendiri, seperti menambah pengesahan pengguna, fungsi ulasan, dsb. Saya harap artikel ini dapat membantu aplikasi praktikal Vue dan Firebase, supaya aplikasi anda dapat memenuhi keperluan pengguna dengan lebih baik.

Atas ialah kandungan terperinci Pembangunan aplikasi surat berita berdasarkan Vue: Penyegerakan data masa nyata menggunakan Firebase Cloud Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!