Vue をベースにしたニュースレター アプリケーション開発: Firebase Cloud Firestore を使用したリアルタイム データ同期

Vue ベースのニュースレター アプリケーション開発: Firebase Cloud Firestore を使用してリアルタイム データ同期を実現するには、特定のコード サンプルが必要です

はじめに:
インターネットの発展に伴い、時事問題に対する人々の注目と需要もますます高まっています。今日、多くの人が、いつでもどこでも最新のニュースや注目のトピックを入手できることを望んでいます。このニーズを満たすために、Vue ベースのニュースレター アプリケーションを開発し、Firebase Cloud Firestore を使用してリアルタイムのデータ同期を実現できます。この記事では、Vue と Firebase に基づく開発プロセスを紹介し、詳細なコード例を示します。

1. 準備:

1. Node.js と Vue CLI をインストールします。
2. 新しい Vue プロジェクトを作成し、「news-app」という名前を付け、プロジェクト ディレクトリに入ります。

2. Firebase プロジェクトを作成します:

1. Firebase 公式 Web サイト (https://firebase.google.com/) にアクセスし、Google アカウントでログインします。
2. [開始] をクリックして新しいプロジェクトを作成します。
3. プロジェクト コンソールで、[アプリケーションの追加] をクリックし、[Web] を選択します。
4. アプリケーションの名前 (例: 「NewsApp」) を入力し、「アプリケーションの登録」をクリックします。
5. 以下の構成コードで、「firebaseConfig」オブジェクトの内容をコピーします。

3. Firebase の依存関係をインストールします:

1. ターミナルを開き、「news-app」プロジェクト ディレクトリに入ります。

2. 次のコマンドを実行して、Firebase 関連の依存関係をインストールします。

   npm install firebase

3. src ディレクトリに新しいフォルダーを作成し、「firebase」という名前を付けます。
4. 「firebase」フォルダーに新しいファイルを作成し、「config.js」という名前を付けます。

5. 「config.js」ファイルに、前にコピーした「firebaseConfig」オブジェクトを貼り付けてエクスポートします:

   export default {
     // 粘贴firebaseConfig对象
   }

4. Firebase を初期化します:

1. Firebase と「main.js」ファイル内の「firebase/config」ファイルをインポートします:

   import firebase from 'firebase/app'
   import 'firebase/firestore'
   import firebaseConfig from './firebase/config'

2. Firebase を初期化します:

   firebase.initializeApp(firebaseConfig)

3. Firebase Firestore インスタンスを作成します:

   const db = firebase.firestore()

4. アプリ全体からアクセスできるように、Firestore インスタンスを Vue プロトタイプに追加します:

   Vue.prototype.$db = db

5. ニュース リスト ページを作成します:

1. 「src/views」ディレクトリに新しいファイルを作成し、「NewsList.vue」という名前を付けます。

2. 「NewsList.vue」ファイルに次のテンプレート コードを記述します。

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

3. 「NewsList.vue」ファイルに次のスクリプトを記述します。コード:

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

6. ニュース追加ページの作成:

1. 「src/views」ディレクトリに新しいファイルを作成し、「AddNews」という名前を付けます。ビュー」。

2. 「AddNews.vue」ファイルに次のテンプレート コードを記述します。

   <template>
     <div>
    <h1>添加新闻</h1>
    <form @submit.prevent="addNews">
      <label for="title">标题：</label>
      <input type="text" id="title" v-model="title" required>
      <button type="submit">提交</button>
    </form>
     </div>
   </template>

3. 「AddNews.vue」ファイルに次のスクリプトを記述します。コード:

   <script>
   export default {
     data() {
    return {
      title: ''
    }
     },
     methods: {
    addNews() {
      this.$db.collection('news').add({
        title: this.title,
        timestamp: new Date()
      })
      this.title = ''
    }
     }
   }
   </script>

7. ルーティングの構成:

1. 「src/router/index.js」ファイルに、「NewsList.vue」をインポートします。 " および "AddNews.vue":

   import NewsList from '@/views/NewsList.vue'
   import AddNews from '@/views/AddNews.vue'

2. 「routes」配列に、2 つのルーティング オブジェクトを作成します:

   {
     path: '/',
     name: 'NewsList',
     component: NewsList
   },
   {
     path: '/add',
     name: 'AddNews',
     component: AddNews
   }

8.ホームページコンポーネント ：

1. 「src/views」ディレクトリに新しいファイルを作成し、「Home.vue」という名前を付けます。

2. 「Home.vue」ファイルに、次のテンプレート コードを記述します:

   <template>
     <div>
    <h1>时事通讯应用</h1>
    <router-link to="/">查看新闻</router-link>
    <router-link to="/add">添加新闻</router-link>
    <router-view></router-view>
     </div>
   </template>

9. アプリ コンポーネントを更新します:

1. 「src/App.vue」ファイルで、最初のテンプレート コードを次のコードに置き換えます:

   <template>
     <div id="app">
    <router-view></router-view>
     </div>
   </template>

10. アプリケーションを実行します:

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

   npm run serve

2. ブラウザを開いて「http://localhost:8080」にアクセスし、応用。

結論:
この記事のサンプル コードを通じて、Vue ベースのニュースレター アプリケーションを作成し、Firebase Cloud Firestore を使用してリアルタイム データ同期を実現することができました。ユーザー認証やコメント機能の追加など、開発者は自らのニーズやアイデアに応じてアプリケーションを改良し続けることができます。この記事が Vue と Firebase の実際の応用に役立ち、アプリケーションがユーザーのニーズをより適切に満たせるようになれば幸いです。

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