Vue ベースのニュースレター アプリケーション開発ガイド: データ ストレージと同期に Firebase Cloud Firestore を使用する

Vue ベースのニュースレター アプリケーション開発ガイド: データ ストレージと同期に Firebase Cloud Firestore を使用する

はじめに:
モバイル アプリケーションの人気に伴い、人々は関心を持っています。 in 最新ニュースの需要も高まっています。リアルタイムのニュースレター アプリケーションの構築が開発者の焦点になりました。この記事では、Vue と Firebase Cloud Firestore を使用して、シンプルかつ強力なニュースレター アプリケーションを構築する方法を紹介します。

1. Firebase Cloud Firestore の概要
   Firebase Cloud Firestore は、Google が提供するクラウド ストレージ サービスで、データの保存と同期に使用できる柔軟でスケーラブルな NoSQL データベースです。リアルタイム更新をサポートし、強力なクエリ機能を提供します。このチュートリアルでは、データ ストレージおよび同期ソリューションとして Firestore を使用します。
2. 準備作業
   開始する前に、次の環境を準備する必要があります:
3. Node.js と npm (https://nodejs.org/)をインストールします
4. Firebase プロジェクトを作成し、認証情報を取得します (https://firebase.google.com/)

5. Vue プロジェクトの作成
   最初に、Vue プロジェクトを作成する必要があります。コマンド ラインから次のコマンドを実行します。

   npm install -g @vue/cli
   vue create news-app
   cd news-app
   npm run serve

   ログイン後にコピー

   これにより、「news-app」というプロジェクトが作成され、開発サーバーが実行されます。

6. Firebase の構成
   Firebase コンソール (https://console.firebase.google.com/) を開き、新しいプロジェクトを作成します。次に、「プロジェクト設定」をクリックし、「アプリの追加」を選択し、Web アプリを選択します。アプリを登録した後、提供された構成コードを src/main.js ファイルに貼り付けます。 main.js ファイルは次のようになります。

   import Vue from 'vue'
   import App from './App.vue'
   import firebase from 'firebase'
   
   const firebaseConfig = {
     // 将你的Firebase配置信息在这里填入
   }
   
   firebase.initializeApp(firebaseConfig)
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')

   ログイン後にコピー

7. ニュース リスト コンポーネントの作成
   まず、ニュース リストを表示するための Vue コンポーネントを作成します。 NewsList.vue という名前のファイルを src/components ディレクトリに作成し、次のコードを追加します。

   <template>
     <div>
    <h1>时事新闻</h1>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
     </div>
   </template>
   
   <script>
   import firebase from 'firebase'
   
   export default {
     data() {
    return {
      newsList: []
    }
     },
     mounted() {
    const db = firebase.firestore()
    const newsRef = db.collection('news')
   
    newsRef.onSnapshot(querySnapshot => {
      let newsList = []
      querySnapshot.forEach(doc => {
        newsList.push({
          id: doc.id,
          title: doc.data().title
        })
      })
      this.newsList = newsList
    })
     }
   }
   </script>

   ログイン後にコピー

8. ニュース作成コンポーネントの作成
   次に、ニュースを作成する Vue コンポーネントを作成します。 。 src/components ディレクトリに CreateNews.vue という名前のファイルを作成し、次のコードを追加します。

   <template>
     <div>
    <h1>创建新闻</h1>
    <form @submit.prevent="createNews">
      <input type="text" v-model="title" placeholder="标题" required>
      <input type="text" v-model="content" placeholder="内容" required>
      <button type="submit">创建</button>
    </form>
     </div>
   </template>
   <script>
   import firebase from 'firebase'
   
   export default {
     data() {
    return {
      title: '',
      content: ''
    }
     },
     methods: {
    createNews() {
      const db = firebase.firestore()
      db.collection('news').add({
        title: this.title,
        content: this.content
      })
      .then(() => {
        this.title = ''
        this.content = ''
      })
      .catch(error => console.error(error))
    }
     }
   }
   </script>

   ログイン後にコピー

9. 統合コンポーネント
   最後に、NewsList コンポーネントと CreateNews コンポーネントをアプリに統合する必要があります。 .vue ファイル。 App.vue ファイルを次のように変更します。

   <template>
     <div>
    <NewsList/>
    <CreateNews/>
     </div>
   </template>
   
   <script>
   import NewsList from './components/NewsList.vue'
   import CreateNews from './components/CreateNews.vue'
   
   export default {
     components: {
    NewsList,
    CreateNews
     }
   }
   </script>

   ログイン後にコピー

これまでのところ、Vue と Firebase Cloud Firestore に基づくニュースレター アプリケーションが完成しました。 Firebase ではニュースを追加、編集、削除でき、アプリケーション インターフェースにリアルタイムで表示されます。

結論:
この記事では、Vue と Firebase Cloud Firestore を使用してニュースレター アプリケーションを構築する方法について説明します。 Firebase Cloud Firestore を統合することで、リアルタイムのデータ保存と同期機能を迅速に実装できます。この記事があなたの Vue アプリケーション開発に役立つことを願っています。

以上がVue ベースのニュースレター アプリケーション開発ガイド: データ ストレージと同期に Firebase Cloud Firestore を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。