Vue Firebase Cloud Firestore の事例: ニュースレターアプリケーションの構築に関する実践と経験の共有-Vue.js-php.cn

Vue Firebase Cloud Firestore の事例: ニュースレターアプリケーションの構築に関する実践と経験の共有

WBOY

リリース： 2023-09-13 12:48:23

オリジナル

1295 人が閲覧しました

Vue Firebase Cloud Firestore案例：构建时事通讯应用的实践与经验分享

Vue Firebase Cloud Firestore の事例: ニュースレターアプリケーション構築の実践と経験の共有

はじめに:
モバイルインターネットの発展に伴い、ニュースレターアプリケーションは重要なものになりました。人々がニュースや情報を即時に入手できるチャネル。この記事では、Vue、Firebase、Cloud Firestore を使用してシンプルなニュースレターアプリケーションを構築する方法を紹介し、実際に遭遇したいくつかの経験と考慮事項を共有します。

1. 準備
始める前に、Node.js と Vue CLI をインストールする必要があります。まだインストールしていない場合は、公式Webサイトからダウンロードしてインストールできます。

2. プロジェクトの作成
コマンドラインで次のコマンドを実行して、新しい Vue プロジェクトを作成します:

vue create news-app

ログイン後にコピー

デフォルト設定を選択し、プロジェクトが作成されるまで待ちます。

3. Firebase の統合

Firebase プロジェクトの作成
Firebase 公式 Web サイトで新しいプロジェクトを作成し、プロジェクト設定で Firebase 構成コードを取得します。
Firebase のインストール
プロジェクトルートディレクトリで次のコマンドを実行して、Firebase 関連の依存関係をインストールします。
```
npm install firebase
```
ログイン後にコピー
Firebase を構成します
src でディレクトリ firebase.js というファイルを作成し、Firebase 構成コードをファイルにコピーします:
```
// firebase.js
import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // your firebase config
};

firebase.initializeApp(firebaseConfig);

export default firebase;
```
ログイン後にコピー
your firebase config を Firebase にあるものに置き換える必要があります上記で取得した構成コード。
Firebase の使用
新しく構成した Firebase インスタンスを Vue コンポーネントに導入し、それを使用して Cloud Firestore データベースにアクセスします。

データにアクセスする必要がある Vue コンポーネントに、先ほど作成した firebase.js ファイルを導入し、firebase.firestore() を使用してデータを取得します。データベースインスタンス:

import firebase from '@/firebase.js';

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    const db = firebase.firestore();
    // 在这里可以执行数据库操作
  }
}

ログイン後にコピー

4. ニュースレターアプリケーションの構築
シンプルなニュースリストアプリケーションを例として、Firebase と Cloud Firestore を使用してニュースをリアルタイムで追加および表示する方法を示します。

データの初期化
Cloud Firestore データベースで、news というコレクションを作成し、それに初期ニュースデータを追加する必要があります。

mounted ライフサイクルフック関数で getNewsData メソッドを呼び出して、Firestore からニュースデータを取得し、コンポーネントの newsList に保存できます。＃＃＃属性。

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    this.getNewsData();
  },
  methods: {
    async getNewsData() {
      const db = firebase.firestore();
      const snapshot = await db.collection('news').get();
      snapshot.forEach(doc => {
        this.newsList.push(doc.data());
      });
    }
  }
};

ログイン後にコピー

アプリケーションがニュースをリアルタイムで更新できること、つまり、新しいニュースが Firestore データベースに追加されると、アプリケーションが自動的に表示できることを期待しています。この機能を実現するには、Firestore の
onSnapshot メソッドを使用します。

mounted ライフサイクルフック関数の startNewsUpdate メソッドを呼び出して、Firestore の news コレクションをリッスンし、必要に応じて更新できます。 new ドキュメントが追加されたときに、newsList 配列を更新します。

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    this.getNewsData();
    this.startNewsUpdate();
  },
  methods: {
    async getNewsData() {
      // ...
    },
    async startNewsUpdate() {
      const db = firebase.firestore();
      const collectionRef = db.collection('news');

      collectionRef.onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
          if (change.type === 'added') {
            this.newsList.push(change.doc.data());
          }
        });
      });
    }
  }
};

ログイン後にコピー

ニュースを追加する機能も必要で、ユーザーがニュースコンテンツを入力すると、ニュースが Firestore データベースに追加されます。

まず、ニュースコンテンツを入力するためのフォームを Vue テンプレートに追加し、イベントに関する

addNews メソッドをフォームの @submit にバインドする必要があります。。

<template>
  <form @submit="addNews">
    <input type="text" v-model="newsTitle" placeholder="新闻标题" />
    <textarea v-model="newsContent" placeholder="新闻内容"></textarea>
    <button type="submit">添加新闻</button>
  </form>
</template>

ログイン後にコピー

次に、Vue コンポーネントの

methods に addNews メソッドを実装して、ユーザーが入力したニュースコンテンツを Firestore データベースに追加し、ニュースリストを更新します。リアルタイムで。

export default {
  data() {
    return {
      newsTitle: '',
      newsContent: ''
    };
  },
  methods: {
    async addNews(e) {
      e.preventDefault();
      
      const db = firebase.firestore();
      await db.collection('news').add({
        title: this.newsTitle,
        content: this.newsContent
      });

      this.newsTitle = '';
      this.newsContent = '';
    }
  }
};

ログイン後にコピー

5. まとめと注意事項

この記事では、Vue、Firebase、Cloud Firestoreを使って簡単なニュースレターアプリを構築し、リアルタイムでニュースを追加・表示する機能を実装しました。実践中は、次の事項にも注意する必要があります。