Vue.js × axios × Firebase で掲示板アプリをつくる - 登録と一覧表示を実装
vue.js で axios（HTTP Client ライブラリ）を使って http 通信を行う方法についての記事です。
Firebase にリクエストを送りデータの登録と一覧表示を行うためのサンプルコードを掲載しています。
プロジェクト作成とaxiosインストール
vue-cli で作成。vuejs-http という名前にしました。
vue create vuejs-http
npm でインストール。
cd vuejs-http
npm install axios
src/App.js を編集して掲示板のフォームを作成します。
<template>
<div id="app">
<h3>掲示板に投稿する</h3>
<label for="name">ニックネーム：</label>
<input id="name" type="text">
<br><br>
<label for="comment">コメント：</label>
<textarea id="comment"></textarea>
<button @click="createComment">送信</button>
<h2>掲示板</h2>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
comment: ""
}
}
}
</script>
開発サーバーを起動してブラウザで確認。フォームなどが表示できていればOK。
データベースの準備
Firebase ログインしてプロジェクトを作成し Firestore Database からデータベースの作成。今回はテストモード、ローケーションは asia-southeast2 を選択。
Firestore API を使ってデータ登録
リクエスト送信は axios を使って処理する。送信先のURLは、Firestore REST API のページからコピーしてきて YOUR_PROJECT_ID とドキュメントの名前を書き換えます。
変更前
https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA
変更後
https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments
今回は post メソッドでデータを送信して Firestore に登録するようにします。
methods: {
createComment() {
axios.post(
'https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments',
{
fields: {
name: {
stringValue: this.name
},
comment: {
stringValue: this.comment
}
}
}
)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
this.name = "";
this.comment = "";
}
}
フォームを入力して送信するとデータを登録できるはずです。
データの一覧表示
Firestore API の get メソッドを使ってデータを取得して表示してみます。
created() {
axios.get('https://firestore.googleapis.com/v1/projects/vuejs-http-8f605/databases/(default)/documents/comments')
.then(response => {
this.posts = response.data.documents;
});
},
<div v-for="post in posts" :key="post.name">
<br>
<div>名前：{{ post.fields.name.stringValue }}</div>
<div>コメント：{{ post.fields.comment.stringValue }}</div>
</div>
baseURL
post も get も送信先のURLは同じなので1か所で定義した方が良いです。そんな時は axios.defaults.baseURL を使います。今回は main.js で定義するようにしました。
axios.defaults.baseURL = 'https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments';
axios.get(
axios.defaults.baseURL
axios.post(
axios.defaults.baseURL,
まとめ
axios（HTTP Client ライブラリ）を使って Firebase と http 通信を行う方法について解説しました。
データの登録と一覧取得は使う機会が多いので実装の参考になれば幸いです。
参考
Udemy 超Vue.js 2 完全パック (Vue Router, Vuex含む)
Author And Source
この問題について(Vue.js × axios × Firebase で掲示板アプリをつくる - 登録と一覧表示を実装), 我々は、より多くの情報をここで見つけました https://zenn.dev/aono/articles/6094291e3825a1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol