Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata-View.js-php.cn

Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata

王林

Lepaskan： 2023-09-13 08:27:24

asal

1237 orang telah melayarinya

如何使用Vue和Firebase Cloud Firestore实现数据实时同步的时事通讯应用

Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata

Pengenalan:
Dalam era digital, pemerolehan maklumat masa nyata telah menjadi salah satu keperluan penting. Ciri penyegerakan masa nyata apl surat berita membantu pengguna mengikuti perkembangan terkini berita, acara dan kemas kini. Artikel ini akan memperkenalkan cara menggunakan Vue.js dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata dan memberikan contoh kod yang sepadan.

1. Apakah itu Vue.js dan Firebase Cloud Firestore
Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Ia mudah dipelajari, fleksibel dan cekap, serta digunakan secara meluas dalam aplikasi satu halaman dan pembangunan aplikasi mudah alih.

Firebase Cloud Firestore ialah perkhidmatan pangkalan data awan masa nyata yang fleksibel. Ia menyediakan cara mudah untuk menyimpan dan menyegerakkan data aplikasi tanpa perlu membina dan menyelenggara pelayan bahagian belakang sendiri.

2. Penyediaan projek

Buat projek Vue.js
Mula-mula, buat projek Vue.js baharu melalui Vue CLI. Buka terminal dan laksanakan arahan berikut:
```
vue create times-news-app
```
Salin selepas log masuk
Pilih pilihan konfigurasi pilihan anda dan tunggu penciptaan projek selesai.
Mengkonfigurasi Firebase Cloud Firestore
Buat projek baharu dalam konsol Firebase dan tambahkan pangkalan data Cloud Firestore. Dapatkan maklumat konfigurasi Firebase anda dalam tetapan projek.

Buka projek Vue.js, buat fail bernama .env.local dalam direktori akar projek dan tambah maklumat konfigurasi berikut pada fail: .env.local的文件，并将以下配置信息添加到该文件中：

VUE_APP_FIREBASE_API_KEY=YOUR_API_KEY
VUE_APP_FIREBASE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
VUE_APP_FIREBASE_DATABASE_URL=YOUR_DATABASE_URL
VUE_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
VUE_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
VUE_APP_FIREBASE_APP_ID=YOUR_APP_ID

Salin selepas log masuk

将YOUR_API_KEY、YOUR_AUTH_DOMAIN等替换为你在Firebase控制台中获得的实际值。

三、创建Vue组件
首先，我们需要创建两个Vue组件：一个用于显示新闻列表，另一个用于发布新的新闻。

NewsList.vue

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

<script>
import db from '@/firebaseConfig.js';

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

Salin selepas log masuk

NewNews.vue

<template>
  <form @submit.prevent="submitNews">
 <h2>发布新闻</h2>
 <input type="text" v-model="newsText" placeholder="请输入新闻标题" />
 <button type="submit">发布</button>
  </form>
</template>

<script>
import db from '@/firebaseConfig.js';

export default {
  data() {
 return {
   newsText: ''
 };
  },
  methods: {
 submitNews() {
   db.collection('news')
     .add({
       title: this.newsText,
       timestamp: new Date()
     })
     .then(() => {
       this.newsText = '';
     })
     .catch((error) => {
       console.error('发布新闻失败：', error);
     });
 }
  }
};
</script>

Salin selepas log masuk

四、配置路由和样式
在src/router/index.js文件中配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import NewsList from '@/views/NewsList.vue';
import NewNews from '@/views/NewNews.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'NewsList',
    component: NewsList
  },
  {
    path: '/new',
    name: 'NewNews',
    component: NewNews
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Salin selepas log masuk

在src/App.vue文件中设置基本样式：

<template>
  <div id="app">
    <router-link to="/">新闻列表</router-link>
    <router-link to="/new">发布新闻</router-link>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
</style>

Salin selepas log masuk

五、集成Firebase和Vue应用
在src/firebaseConfig.js文件中配置Firebase：

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

const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

export default db;

Salin selepas log masuk

最后，在src/main.js文件中集成Vue和Firebase：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

Salin selepas log masuk

六、运行应用
在终端中执行以下命令，运行应用：

npm run serve

Salin selepas log masuk

访问http://localhost:8080rrreee

Ganti Ganti YOUR_API_KEY , YOUR_AUTH_DOMAIN, dsb. dengan nilai sebenar yang anda perolehi dalam Firebase console.

3. Cipta komponen Vue

Pertama, kita perlu mencipta dua komponen Vue: satu untuk memaparkan senarai berita dan satu lagi untuk menerbitkan berita baharu. . Tetapkan gaya asas dalam fail src/App.vue:

rrreee

5. Sepadukan aplikasi Firebase dan Vue

src/firebaseConfig.js

rrreee

src/main.js

rrreee
Jalankan arahan berikut dalam terminal untuk menjalankan aplikasi:

Lawati http: //localhost:8080, anda akan melihat aplikasi surat berita dengan fungsi penyegerakan data masa nyata. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan Vue.js dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata. Kami mencipta dua komponen Vue untuk memaparkan senarai berita dan menerbitkan berita, dan kemudian mengkonfigurasikan penghalaan dan gaya. Akhir sekali, kami menggunakan Firebase untuk menyimpan dan menyegerakkan data serta menyepadukannya ke dalam apl Vue. Dengan langkah ini, kami boleh membina apl surat berita dengan keupayaan penyegerakan masa nyata dengan mudah. 🎜🎜Bahan rujukan: 🎜🎜🎜Dokumentasi rasmi Vue.js: https://vuejs.org/🎜🎜Dokumentasi rasmi Firebase: https://firebase.google.com/docs🎜🎜Dokumentasi rasmi Vue CLI: https:// cli.vuejs.org/🎜🎜

Atas ialah kandungan terperinci Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan penyegerakan data masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!