ホームページ > 記事 > ウェブフロントエンド > Vue と Firebase Cloud Firestore を使用して高品質のニュースレター アプリを作成する方法
Vue と Firebase Cloud Firestore を使用して高品質のニュースレター アプリを作成する方法
- 王林オリジナル
- 2023-09-13 11:24:32930ブラウズ
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 ディレクトリに作成し、次のコードをそのファイルにコピーします。同じ ディレクトリに新しいファイル
を作成し、次のコードをファイルにコピーします。 <pre class='brush:vue;toolbar:false;'><template>
<div>
<h1>时事通讯</h1>
<ul>
<li v-for="news in newsList" :key="news.id">
{{ news.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newsList: []
}
},
mounted() {
const newsRef = this.$firebase.firestore().collection('news')
newsRef.onSnapshot((snapshot) => {
const newsList = []
snapshot.forEach((doc) => {
newsList.push({...doc.data(), id: doc.id})
})
this.newsList = newsList
})
}
}
</script></pre> 4. ルーティングの構成
src/router/index .js
ファイルを開き、次のコードをルート定義に挿入します: <pre class='brush:vue;toolbar:false;'><template>
<div>
<h2>添加新闻</h2>
<form @submit.prevent="addNews">
<label for="title">标题</label>
<input type="text" id="title" v-model="title" required>
<label for="content">内容</label>
<textarea id="content" v-model="content" required></textarea>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
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 = ''
}
}
}
</script></pre>5. Firebase と Vue を統合する
src/main.js
ファイルを開き、次のコードを挿入します次のコードをファイルに挿入します。 <pre class='brush:javascript;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> 6. App.vue コンポーネントを作成します。
src/App.vue
ファイルを開き、ファイル内の内容を次のコードに置き換えます。コード: <pre class='brush:javascript;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 => h(App)
}).$mount('#app')</pre> 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 を使用して高品質のニュースレター アプリを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。