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

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

WBOY

リリース： 2023-09-13 12:28:52

オリジナル

999 人が閲覧しました

基于Vue的时事通讯应用开发指南：使用Firebase Cloud Firestore进行数据存储与同步

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

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

Firebase Cloud Firestore の概要
Firebase Cloud Firestore は、Google が提供するクラウドストレージサービスで、データの保存と同期に使用できる柔軟でスケーラブルな NoSQL データベースです。リアルタイム更新をサポートし、強力なクエリ機能を提供します。このチュートリアルでは、データストレージおよび同期ソリューションとして Firestore を使用します。
準備作業
開始する前に、次の環境を準備する必要があります:
Node.js と npm (https://nodejs.org/)をインストールします
Firebase プロジェクトを作成し、認証情報を取得します (https://firebase.google.com/)
Vue プロジェクトの作成
最初に、Vue プロジェクトを作成する必要があります。コマンドラインから次のコマンドを実行します。
```
npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve
```
ログイン後にコピー
これにより、「news-app」というプロジェクトが作成され、開発サーバーが実行されます。
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')
```
ログイン後にコピー

ニュースリストコンポーネントの作成
まず、ニュースリストを表示するための 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>

ログイン後にコピー

ニュース作成コンポーネントの作成
次に、ニュースを作成する 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>

ログイン後にコピー

統合コンポーネント
最後に、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 サイトの他の関連記事を参照してください。