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 の統合

1. Firebase プロジェクトの作成
   Firebase 公式 Web サイトで新しいプロジェクトを作成し、プロジェクト設定で Firebase 構成コードを取得します。

2. Firebase のインストール
   プロジェクト ルート ディレクトリで次のコマンドを実行して、Firebase 関連の依存関係をインストールします。

   npm install firebase

3. 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 にあるものに置き換える必要があります上記で取得した構成コード。

4. 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 を使用してニュースをリアルタイムで追加および表示する方法を示します。

1. データの初期化
   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());
      });
    }
  }
};

ニュースをリアルタイムで更新する
2. アプリケーションがニュースをリアルタイムで更新できること、つまり、新しいニュースが 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());
          }
        });
      });
    }
  }
};

ニュースの追加
3. ニュースを追加する機能も必要で、ユーザーがニュース コンテンツを入力すると、ニュースが 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を使って簡単なニュースレターアプリを構築し、リアルタイムでニュースを追加・表示する機能を実装しました。実践中は、次の事項にも注意する必要があります。

Firebase 設定は正しく機密である必要があり、機密情報が漏洩しないようにしてください。
1. Firestore のデータ量が大きすぎる場合は、
2. limit や where などのクエリ メソッドを使用してパフォーマンスを最適化します。
コレクション内のデータを変更する必要がある場合は、ドキュメント全体の上書きを避けるために、
3. set メソッドの代わりに Firestore の update メソッドを使用してください。

この記事が、Vue、Firebase、Cloud Firestore を使用してニュースレター アプリケーションを構築する方法を理解するのに役立つことを願っています。あなたの発展に幸あれ！

単語数: 1365 単語

以上がVue Firebase Cloud Firestore の事例: ニュースレター アプリケーションの構築に関する実践と経験の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。