Vue と Firebase Cloud Firestore を使用して高品質のニュースレター アプリを作成する方法

Vue と Firebase Cloud Firestore を使用して高品質のニュースレター アプリケーションを作成する方法

ニュースレター アプリケーションは現代社会において重要な役割を果たしており、ユーザーがニュースやイベントを入手するのに役立ちます。最新情報をタイムリーに。この記事では、Vue フレームワークと Firebase Cloud Firestore を使用して高品質のニュースレター アプリケーションを作成する方法を紹介し、具体的なコード例を示します。

1. 準備
始める前に、必要なツールとライブラリをインストールする必要があります。まず、Node.js と npm がインストールされていることを確認します。次に、コマンド ラインで次のコマンドを使用して Vue CLI (スキャフォールディング) をインストールします:

npm install -g @vue/cli

次に、新しい Vue プロジェクトを作成します:

vue create newsletter-app

プロジェクト ディレクトリに移動します:

cd newsletter-app

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

npm install firebase

2. Firebase インスタンスを作成して初期化します
Firebase コンソールで新しいプロジェクトを作成し、Cloud Firestore データベースを有効にします。次に、コンソールからプロジェクトの構成情報を取得します。

Vue プロジェクトの src ディレクトリに新しいフォルダー firebase を作成し、その中に新しいファイル index.js を作成します。次に、次のコードを index.js にコピーします。

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

const firebaseConfig = {
  // 将你的Firebase配置信息替换成实际的值
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
}

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

YOUR_API_KEY などを実際の構成値に置き換えることを忘れないでください。

3. Vue コンポーネントの作成
2 つの Vue コンポーネントを作成します: 1 つはニュース リストを表示するコンポーネント、もう 1 つはニュースを追加するコンポーネントです。

新しいファイル NewsList.vue を src/components ディレクトリに作成し、次のコードをそのファイルにコピーします。同じ ディレクトリに新しいファイル

AddNews.vue

を作成し、次のコードをファイルにコピーします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h1&gt;时事通讯&lt;/h1&gt; &lt;ul&gt; &lt;li v-for=&quot;news in newsList&quot; :key=&quot;news.id&quot;&gt; {{ news.title }} &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { newsList: [] } }, mounted() { const newsRef = this.$firebase.firestore().collection('news') newsRef.onSnapshot((snapshot) =&gt; { const newsList = [] snapshot.forEach((doc) =&gt; { newsList.push({...doc.data(), id: doc.id}) }) this.newsList = newsList }) } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 4. ルーティングの構成

Open

src/router/index .js
ファイルを開き、次のコードをルート定義に挿入します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h2&gt;添加新闻&lt;/h2&gt; &lt;form @submit.prevent=&quot;addNews&quot;&gt; &lt;label for=&quot;title&quot;&gt;标题&lt;/label&gt; &lt;input type=&quot;text&quot; id=&quot;title&quot; v-model=&quot;title&quot; required&gt; &lt;label for=&quot;content&quot;&gt;内容&lt;/label&gt; &lt;textarea id=&quot;content&quot; v-model=&quot;content&quot; required&gt;&lt;/textarea&gt; &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { title: '', content: '' } }, methods: { addNews() { const newsRef = this.$firebase.firestore().collection('news') newsRef.add({ title: this.title, content: this.content }) this.title = '' this.content = '' } } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>5. Firebase と Vue を統合する

src/main.js
ファイルを開き、次のコードを挿入します次のコードをファイルに挿入します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import NewsList from '@/components/NewsList.vue' import AddNews from '@/components/AddNews.vue' const routes = [ { path: '/', name: 'NewsList', component: NewsList }, { path: '/add', name: 'AddNews', component: AddNews } ] const router = createRouter({ history: createWebHistory(), routes })</pre><div class="contentsignin">ログイン後にコピー</div></div> 6. App.vue コンポーネントを作成します。

src/App.vue
ファイルを開き、ファイル内の内容を次のコードに置き換えます。コード: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import Vue from 'vue' import App from './App.vue' import router from './router' import { db } from './firebase' Vue.prototype.$firebase = db new Vue({ router, render: h =&gt; h(App) }).$mount('#app')</pre><div class="contentsignin">ログイン後にコピー</div></div> 7. アプリケーションの実行

これで、必要なコードと構成がすべて完了しました。コマンド ラインに次のコマンドを入力して、アプリケーションを開始します。

<template>
  <div id="app">
    <router-view></router-view>
    <router-link to="/add">添加新闻</router-link>
  </div>
</template>

<script>
export default {
  
}
</script>

ブラウザを開いて、http://localhost:8080

にアクセスし、ニュースレター アプリケーションのインターフェイスを確認します。ニュースを追加してアプリをテストできます。 概要

この記事では、Vue と Firebase Cloud Firestore を使用して高品質のニュースレター アプリケーションを作成する方法について説明します。シンプルな設定と数行のコードで、ニュースリストの実装やニュース機能の追加が簡単に行えます。この記事があなたのお役に立てば幸いです。また、あなたの発展を祈っています。

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