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

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

王林

リリース： 2023-09-13 14:40:44

オリジナル

920 人が閲覧しました

基于Vue的时事通讯应用开发：利用Firebase Cloud Firestore实现实时数据同步

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

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

1. 準備:

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

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

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

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

ターミナルを開き、「news-app」プロジェクトディレクトリに入ります。
次のコマンドを実行して、Firebase 関連の依存関係をインストールします。
```
npm install firebase
```
ログイン後にコピー
src ディレクトリに新しいフォルダーを作成し、「firebase」という名前を付けます。
「firebase」フォルダーに新しいファイルを作成し、「config.js」という名前を付けます。
「config.js」ファイルに、前にコピーした「firebaseConfig」オブジェクトを貼り付けてエクスポートします:
```
export default {
  // 粘贴firebaseConfig对象
}
```
ログイン後にコピー

4. Firebase を初期化します:

Firebase と「main.js」ファイル内の「firebase/config」ファイルをインポートします:
```
import firebase from 'firebase/app'
import 'firebase/firestore'
import firebaseConfig from './firebase/config'
```
ログイン後にコピー
Firebase を初期化します:
```
firebase.initializeApp(firebaseConfig)
```
ログイン後にコピー
Firebase Firestore インスタンスを作成します:
```
const db = firebase.firestore()
```
ログイン後にコピー
アプリ全体からアクセスできるように、Firestore インスタンスを Vue プロトタイプに追加します:
```
Vue.prototype.$db = db
```
ログイン後にコピー

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

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

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

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

ログイン後にコピー

「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. ニュース追加ページの作成:

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

「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>

ログイン後にコピー

「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. ルーティングの構成:

「src/router/index.js」ファイルに、「NewsList.vue」をインポートします。 " および "AddNews.vue":
```
import NewsList from '@/views/NewsList.vue'
import AddNews from '@/views/AddNews.vue'
```
ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

「src/App.vue」ファイルで、最初のテンプレートコードを次のコードに置き換えます:
```
<template>
  <div id="app">
 <router-view></router-view>
  </div>
</template>
```
ログイン後にコピー

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

ターミナルで次のコマンドを実行してアプリケーションを開始します。
```
npm run serve
```
ログイン後にコピー
ブラウザを開いて「http://localhost:8080」にアクセスし、応用。

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

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