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:
2 Buat projek Firebase:
3. Pasang kebergantungan Firebase:
Jalankan arahan berikut untuk memasang kebergantungan berkaitan Firebase:
npm install firebase
Dalam fail "config.js", tampalkan objek "firebaseConfig" yang disalin sebelum dan eksportnya:
export default {
// 粘贴firebaseConfig对象
}4. Mulakan Firebase:
Import Firebase"rebase" dan "firebase"
import firebase from 'firebase/app' import 'firebase/firestore' import firebaseConfig from './firebase/config'
firebase.initializeApp(firebaseConfig)
rreee halaman berita:
const db = firebase.firestore()
Vue.prototype.$db = db
Buat fail baharu dalam direktori "src/views" dan namakannya "AddNews.vue".
<template>
<div>
<h1>时事新闻</h1>
<ul>
<li v-for="news in newsList" :key="news.id">
{{ news.title }}
</li>
</ul>
</div>
</template><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><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>
<script>
export default {
data() {
return {
title: ''
}
},
methods: {
addNews() {
this.$db.collection('news').add({
title: this.title,
timestamp: new Date()
})
this.title = ''
}
}
}
</script>import NewsList from '@/views/NewsList.vue' import AddNews from '@/views/AddNews.vue'
{
path: '/',
name: 'NewsList',
component: NewsList
},
{
path: '/add',
name: 'AddNews',
component: AddNews
}<template> <div> <h1>时事通讯应用</h1> <router-link to="/">查看新闻</router-link> <router-link to="/add">添加新闻</router-link> <router-view></router-view> </div> </template>
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
