今回は、データベースの設計を実装していく。
データベースの設計
realtime database
realtime databaseはデータとアプリケーションをリアルタイムで同期する事ができる
今回は、口コミ(テキストメッセージ)を保存する
口コミを保存する機能を実装していく
Desktop/miyazaki-tours/src/components/Aoshima.vue
<script> import firebase from 'firebase'; export default { name: 'Aoshima', data () { return { database: null, aoshimaOpinionsRef: null, newTodoName: '', aoshimaOpinions: [], } }, //データベースから値の取得 created: function() { this.database = firebase.database(); //refにパスを指定して値を取得 this.aoshimaOpinionsRef = this.database.ref('aoshimaOpinions'); var _this = this; //データに変化が起きたときに再取得する this.aoshimaOpinionsRef.on('value', function(snapshot) { _this.aoshimaOpinions = snapshot.val(); }); }, methods: { //DBのaoshimaOpinions/以下にデータを格納 postOpinion: function() { if (this.newTodoName == "") { return; } this.aoshimaOpinionsRef.push({ name: this.newTodoName, }); this.newTodoName = ""; }, }, } </script>
今回のrealtime databaseの設定では他のユーザの口コミも認証が通っていれば編集できてしまう。
そこで次回は
- ユーザごとにアクセスできるデータの制限の実装
- Firebaseのホスティング機能を使ったデプロイ
を行なっていく。