Vue と Firebase Cloud Firestore を使用して、リアルタイムデータ同期を備えたニュースレターアプリケーションを実装する方法-Vue.js-php.cn

Vue と Firebase Cloud Firestore を使用して、リアルタイムデータ同期を備えたニュースレターアプリケーションを実装する方法

王林

リリース： 2023-09-13 08:27:24

オリジナル

1236 人が閲覧しました

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

Vue と Firebase Cloud Firestore を使用して、リアルタイムデータ同期を備えたニュースレターアプリケーションを実装する方法

はじめに:
デジタル時代には、リアルタイム情報取得は重要なニーズの 1 つとなっています。ニュースレターアプリのリアルタイム同期機能により、ユーザーは最新のニュース、イベント、更新情報を常に把握できます。この記事では、Vue.js と Firebase Cloud Firestore を使用して、リアルタイムデータ同期を備えたニュースレターアプリケーションを実装する方法を紹介し、対応するコード例を示します。

1. Vue.js と Firebase Cloud Firestore とは
Vue.js は、ユーザーインターフェイスの構築に使用される人気のある JavaScript フレームワークです。習得が簡単で、柔軟かつ効率的であり、シングルページアプリケーションやモバイルアプリケーションの開発で広く使用されています。

Firebase Cloud Firestore は、柔軟なリアルタイムのクラウドデータベースサービスです。これにより、バックエンドサーバーを自分で構築して保守する必要がなく、アプリケーションのデータを保存して同期する簡単な方法が提供されます。

2. プロジェクトの準備

Vue.js プロジェクトの作成
まず、Vue CLI を使用して新しい Vue.js プロジェクトを作成します。ターミナルを開いて次のコマンドを実行します。
```
vue create times-news-app
```
ログイン後にコピー
希望の構成オプションを選択し、プロジェクトが作成されるまで待ちます。
Firebase Cloud Firestore の構成
Firebase コンソールで新しいプロジェクトを作成し、Cloud Firestore データベースを追加します。プロジェクト設定で Firebase 構成情報を取得します。

Vue.js プロジェクトを開き、プロジェクトのルートディレクトリに .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

ログイン後にコピー

YOUR_API_KEY、YOUR_AUTH_DOMAIN などを、Firebase コンソールで取得した実際の値に置き換えます。

3. Vue コンポーネントの作成
まず、ニュースリストの表示用と新しいニュースの公開用の 2 つの 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>

ログイン後にコピー

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>

ログイン後にコピー

4. ルーティングとスタイルを構成する
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;

ログイン後にコピー

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>

ログイン後にコピー

5. 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;

ログイン後にコピー

最後に、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');

ログイン後にコピー

6. アプリケーションを実行します
ターミナルで次のコマンドを実行してアプリケーションを実行します:

npm run serve

ログイン後にコピー

Visit http ://localhost: 8080 にアクセスすると、リアルタイムデータ同期機能を備えたニュースレターアプリケーションが表示されます。

概要:
この記事では、Vue.js と Firebase Cloud Firestore を使用して、リアルタイムデータ同期を備えたニュースレターアプリケーションを実装する方法を紹介します。ニュースリストを表示するためとニュースを公開するための 2 つの Vue コンポーネントを作成し、ルーティングとスタイルを構成しました。最後に、Firebase を使用してデータを保存および同期し、Vue アプリに統合します。これらの手順により、リアルタイム同期機能を備えたニュースレターアプリを簡単に構築できます。

参考資料: