#やりたかった事
webサイトの入力フォームから入力された「名前」と「所在地」を、Firebase CloudFirestoreに保存する。
今回はVue.jsで実装
#環境
・Firebase CloudFirestore
・Visual Studio Code
・Vue.js
#準備
##Firebase CloudFirestoreで格納データを作成
Firebase CloudFirestoreで格納するデータ型を作成する方法は以下を参考にして下さい。
必要な情報は
・SDN情報
・コレクション名
・格納データ名
Firebase CloudFirestoreの使い方を初心者が解説してみた
##Visual Studio Code
新しいjsファイルを作成
npm初期化
npm i
#作り方
##作成したjsファイルに以下を入力
今回、名前、所在地を格納するデータベースを作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEBサイトから取得したデータをFirebase CloudFirestoreに保存</title>
</head>
<body>
<div id="app">
<ul v-for="data in allData" :key="data.id" class="menu-list">
<li>
{{data.name}} / {{data.age}}
</li>
</ul>
<p>
名前：<input v-model="name" placeholder="名前">
所在地：<input v-model="age" placeholder="年齢">
<button v-on:click='post'>送信</button>
</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const app = new Vue({
el: '#app',
data: {
allData: [],
name: '',
age: 0
},
mounted: async function () {
db.collection('memos').onSnapshot(snapshot => {
// データベースに変更があった場合実行される
console.log('on snapshot!');
// 更新されたデータだけでなく、全て取得される
this.allData = [];
snapshot.forEach(doc => {
// console.log(doc);
this.allData.push(doc.data());
});
});
},
methods: {
//データ追加
post: async function () {
await db.collection("user").add({
name: this.name,
age: this.age
});
}
}
})
</script>
</body>
</html>
自分の環境に変更しないといけない箇所
Firebase CloudFirestoreで発行されたSDK情報に書き換えます。
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
「await db.collection("user").add({」のuserの箇所は、Firebase CloudFirestoreで作成したコレクション名に変えます。
methods: {
//データ追加
post: async function () {
await db.collection("user").add({
name: this.name,
age: this.age
});
}
#完成
これで、webサイトから入力した名前、所在地の値がFirebase CloudFirestoreへ保存されます。
お問い合わせフォームの入力内容等、保存しておくことが可能になります。
