Vue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリを構築する方法-Vue.js-php.cn

Vue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリを構築する方法

PHPz

リリース： 2023-09-13 10:25:55

オリジナル

717 人が閲覧しました

如何利用Vue和Firebase Cloud Firestore构建响应式时事通讯应用

Vue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリケーションを構築する方法

前書き:
インターネットの急速な発展に伴い、ニュース情報の拡散は急速に進んでいます。ますます速くなります。現代人として、私たちは常にあらゆる種類の時事ニュースをできるだけ早く知りたいと思っています。そこで、この記事では、Vue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリを構築する方法について説明します。

Vue と Firebase Cloud Firestore とは:
Vue は、ユーザーインターフェイスを構築するためのプログレッシブ JavaScript フレームワークです。コンポーネント化された開発モデルを使用して、インタラクティブな Web をより簡単に構築できます。

Firebase は、Google が提供するクラウドサービスプラットフォームです。Cloud Firestore は、アプリケーションのバックエンドの構築を支援するために設計された、柔軟でスケーラブルな NoSQL データベースです。

準備:
始める前に、Vue と Firebase をインストールする必要があります。 Vue CLI は、次のコマンドを使用してインストールできます:

npm install -g @vue/cli

ログイン後にコピー

次に、新しい Vue プロジェクトを作成する必要があります:

vue create news-app

ログイン後にコピー

次に、Firebase コンソールで新しいプロジェクトを作成する必要があります。 Cloud Firestore データベースを有効にします。

Firebase Cloud Firestore のセットアップ:
Firebase コンソールで、[新しい Firestore データベースの作成] ボタンをクリックし、[開始] を選択します。

[データベースの作成] ダイアログボックスで、[テストモードで開始] オプションを選択し、[次へ] をクリックします。

次に、データベースの場所を選択し、[次へ] をクリックします。

最後に、「開始」をクリックします。

コンソールで、[設定] ボタンをクリックし、[プロジェクト設定] を選択します。

[全般] タブで、[アプリケーション] セクションまで下にスクロールし、[次のものをインポート] を選択し、Vue.js を選択します。

次に、構成ファイルの内容を Vue プロジェクトの .env.local ファイルにコピーします。

Firebase のインストール:
Vue プロジェクトのルートディレクトリで、次のコマンドを使用して Firebase をインストールします:

npm install firebase

ログイン後にコピー

次に、それを src/main.js にインポートします。 ファイル Firebase と Firestore:

import firebase from 'firebase/app'
import 'firebase/firestore'

// 初始化FirebaseApp
firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
})

// 创建Firestore实例
const db = firebase.firestore()

// 导出Firestore实例
export default db

ログイン後にコピー

ニュースレターアプリケーションの構築:
まず、ニュースを表示するためのコンポーネント News.vue を作成し、# に追加する必要があります。 Vue プロジェクトの ##src /components ディレクトリに作成されます。

News.vue では、Vue の computed プロパティを使用して Firebase から最新のニュースデータを取得し、Vue の v-The for を使用します。ディレクティブは各ニュース項目をループします。

<template>
  <div>
    <h1>最新新闻</h1>
    <ul>
      <li v-for="news in latestNews" :key="news.id">
        <h2>{{ news.title }}</h2>
        <p>{{ news.content }}</p>
        <p>{{ news.date }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '@/main'

export default {
  name: 'News',
  computed: {
    latestNews() {
      return db.collection('news')
        .orderBy('date', 'desc')
        .limit(10)
        .get()
        .then(querySnapshot => {
          const news = []
          querySnapshot.forEach(doc => {
            news.push({
              id: doc.id,
              ...doc.data()
            })
          })
          return news
        })
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

li {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}
</style>

ログイン後にコピー

次に、Vue プロジェクトのルートディレクトリにある

App.vue ファイルの News コンポーネントを使用します。

<template>
  <div id="app">
    <News />
  </div>
</template>

<script>
import News from '@/components/News'

export default {
  name: 'App',
  components: {
    News
  }
}
</script>

ログイン後にコピー

コンパイルして実行します。 :

次のコマンドを使用して Vue プロジェクトをローカルでコンパイルして実行するだけです:

npm run serve

ログイン後にコピー

次に、ブラウザを開いて

http://localhost:8080 にアクセスします。最新ニュースについては表示ページをご覧ください。

概要:

この記事では、Vue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリケーションを構築する方法について説明します。さらなる開発には、ニュースを追加し、ニュースの公開後にユーザーに自動的にプッシュ通知を送信する機能が含まれる可能性があります。これらのテクノロジーを学習して習得することで、より実用的で応答性の高い Web アプリケーションを構築できます。

以上がVue と Firebase Cloud Firestore を使用してレスポンシブなニュースレターアプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。