Rumah > Artikel > hujung hadapan web > 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!