Cara membina apl surat berita pintar menggunakan Vue dan Firebase Cloud Firestore

Cara membina apl surat berita pintar menggunakan Vue dan Firebase Cloud Firestore

Pengenalan:
Apl surat berita pintar memainkan peranan penting dalam masyarakat yang serba pantas hari ini. Artikel ini akan memperkenalkan cara membina aplikasi surat berita pintar menggunakan Vue dan Firebase Cloud Firestore. Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Firebase Cloud Firestore ialah penyelesaian pangkalan data awan yang disediakan oleh Google untuk menyimpan dan menyegerakkan data. Menggabungkan dua alatan berkuasa ini, kami boleh membina apl surat berita dengan mudah dengan pemesejan masa nyata dan pengesyoran pintar.

Langkah 1: Buat projek Vue
Mula-mula, kita perlu mencipta projek Vue. Buka terminal dan laksanakan arahan berikut:

vue create smart-news

Kemudian ikut arahan untuk memilih konfigurasi yang sesuai dengan anda dan melengkapkan penciptaan projek.

Langkah 2: Konfigurasikan Firebase
Seterusnya, kita perlu menyediakan projek baharu pada Firebase.

1. Lawati Firebase Console (https://console.firebase.google.com/).
2. Klik butang "Buat Projek" dan masukkan nama projek seperti yang digesa.
3. Dalam tetapan projek, klik "Tambah Apl" dan pilih apl "Web".
4. Masukkan nama apl yang sesuai dan salin maklumat konfigurasi yang disediakan oleh Firebase ke dalam aplikasi Vue kami.

Buka direktori akar projek Vue dan cari fail main.js dalam direktori src. Tambahkan kod berikut pada bahagian atas fail:

import firebase from 'firebase/app'
import 'firebase/firestore'

// 在此处粘贴Firebase配置信息

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

Langkah Ketiga: Buat Koleksi Firebase
Buat koleksi yang dipanggil artikel untuk menyimpan data artikel kami. Buka konsol Firebase dan klik pada tab "Pangkalan Data" di sebelah kiri. Kemudian klik butang "Buat Pangkalan Data" dan pilih "Mod Pengeluaran". Kami memilih "Mod Pengeluaran" kerana ia akan menetapkan pangkalan data kami ke dalam mod dilindungi dan hanya boleh diakses menggunakan mekanisme pengesahan Firebase.

Masukkan "artikel" dalam kotak input "ID Koleksi" dan klik "Seterusnya". Kemudian pilih "Mod Mula" dan klik "Dayakan".

Langkah 4: Tambahkan data artikel
Seterusnya, kami perlu menambahkan beberapa data artikel sampel ke Firestore untuk kegunaan seterusnya. Klik pada koleksi "artikel" dalam konsol Firestore dan klik pada butang "Tambah Dokumen". Kita boleh memasukkan medan dan nilai satu demi satu, atau memilih untuk menggunakan format JSON yang telah ditetapkan.

Contoh data artikel:

{
  "title": "如何使用Vue和Firebase Cloud Firestore构建智能应用",
  "description": "本文介绍如何使用Vue和Firebase Cloud Firestore构建一个智能时事通讯应用。",
  "category": "技术",
  "timestamp": "2021-09-01 10:00:00"
}

Klik "Simpan" untuk menambah data artikel kami.

Langkah 5: Cipta komponen Vue
Kini kami boleh mula mencipta komponen Vue kami. Cipta folder bernama "komponen" dalam direktori src, dan kemudian buat fail bernama "Articles.vue" di bawah folder.

Dalam Articles.vue, kami akan melaksanakan komponen untuk memaparkan semua artikel dan mengemas kininya dalam masa nyata.

Pertama, kami perlu mengimport fungsi kemas kini masa nyata Firestore ke dalam komponen Vue kami. Tambahkan kod berikut di bahagian atas Articles.vue:

import { db } from '../main'

Seterusnya, tambah kod berikut dalam pilihan eksport komponen:

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 获取文章数据
    db.collection('articles').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      this.articles = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }
}

Tambah kod berikut di dalam teg templat untuk memaparkan data artikel:

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
  <p>{{ article.description }}</p>
  <p>{{ article.category }}</p>
  <p>{{ article.timestamp }}</p>
</div>

Langkah 6: Penghalaan dan Paparan lengkap
Untuk kami mengakses halaman senarai artikel kami dalam penyemak imbas, kami perlu menentukan laluan dan pandangan.

Buka fail router.js dalam direktori src dan tambah kod berikut:

import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'

const routes = [
  { path: '/', component: Articles }
]

const router = new VueRouter({ routes })

export default router

Dalam App.vue, tambahkan kod berikut pada teg templat:

<router-view></router-view>

Langkah 7: Jalankan aplikasi
Sekarang kami telah menyelesaikan semua yang perlu Dengan persediaan dan kod disediakan, kami boleh menjalankan aplikasi kami dan melihat hasilnya.

Laksanakan arahan berikut dalam terminal:

npm run serve

Selepas itu, buka penyemak imbas dan lawati http://localhost:8080/, kami akan melihat halaman senarai artikel kami, dan apabila data artikel dalam Firestore berubah, halaman itu Akan dikemas kini dalam masa nyata.

Kesimpulan:
Artikel ini menerangkan cara membina apl surat berita pintar menggunakan Vue dan Firebase Cloud Firestore. Dengan menggabungkan Vue dan Firebase, kami telah membina apl surat berita dengan pemesejan masa nyata dan pengesyoran pintar. Semoga contoh kod ini akan membantu anda mengembangkan lagi aplikasi anda sendiri. Jika anda mempunyai sebarang soalan tentang Vue atau Firebase, anda boleh menyemak dokumentasi rasmi untuk mendapatkan maklumat yang lebih terperinci. Saya doakan anda berjaya!

Atas ialah kandungan terperinci Cara membina apl surat berita pintar menggunakan Vue dan Firebase Cloud Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!