Vue.js (Vue CLI 3) と、firebaseで SPA開発、アプリ実装編 フォーム登録など SPA開発(5) #Vue.js #web #firebase #SPA

index:

概要:

前のSPA(SinglePageApplication) 関連で、Vue CLI 3 +firebase
の実装編となります。

・クロスドメイン構成で、バックエンドは別クラウドとなります。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

参考の設定

github.com

画面レイアウト

・index

・new

コードなど

・firebase のプロジェクトを作成

・datbase
Cloud firestoreの、コレクションを追加しておきます。

・App.vue
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/App.vue

<template>
  <div id="app">
    <navbar />
    <router-view/>
  </div>
</template>

<script>
import navbar from './components/Layouts/Navbar'

export default {
  name: 'app',
  components: {
    navbar
  }
}
</script>
<style>
</style>

・main.js
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/main.js

・firebase の接続設定を追加してます。

// Initialize Firebase
var config = {
  apiKey: "YOUR-PROJECT",
  authDomain: "YOUR-PROJECT.firebaseapp.com",
  databaseURL: "https://YOUR-PROJECT.firebaseio.com",
  projectId: "YOUR-PROJECT",
  storageBucket: "YOUR-PROJECT.appspot.com",
  messagingSenderId: "123"
}
firebase.initializeApp(config)

・router/index.js
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/router/index.js

ルーティングの設定など

Vue.use(Router)
//
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: home },
    { path: '/about', component: about },
    /* tasks */
    { path: '/tasks/new', component: tasksNew },
    { path: '/tasks', component: tasksIndex },
    { path: '/tasks/show/:id', component: tasksShow },
    { path: '/tasks/edit/:id', component: tasksEdit },
  ]
})

Vueコンポーネント

・tasks/new
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/new.vue

<script>
import firebase from 'firebase'
var tableName = 'tasks'
export default {
    created() {
        this.database = firebase.firestore()
    },
    data() {
        return {
            title:'',
            content:''
        }
    },
    methods: {
        createTask: function() {
            console.log('#create')
            if (this.newTodoName == "") { return; }        
            this.database.collection(tableName).add({
                title: this.title,
                content: this.content
            }).then(function(docRef) {
                console.log("Document written with ID: ", docRef.id)
                window.location.href='/tasks'
            }).catch(function(error) {
                console.log("Error adding document: ", error)
            })
            this.newTodoName = ""
        },
    }
}
</script>

・tasks/index
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/Index.vue

<script>
import firebase from 'firebase'
import {Mixin} from '../../mixin'
//
export default {
  mixins:[Mixin],
  created () {
    this.getTasks()
    /* console.log(this.sysConst.STORAGE_KEY_tasksData ) */
  },
  data () {
    return {
      tasks: []
    }
  },
  methods: {
    getTasks () {
        var items = []
        var self = this
        this.database = firebase.firestore()
        var dbRef = this.database.collection('tasks')
        dbRef = dbRef.orderBy("title", "desc")
        dbRef.get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                /* console.log(doc.id, " => ", doc.data()) */
                var item = doc.data()
                items.push({
                    id : doc.id,
                    title : item.title,
                    content : item.content
                })            
            })
            self.tasks = items
        })
    }
  }
}
</script>

・tasks/show
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/show.vue

・tasks/edit
https://github.com/kuc-arc-f/vue_2_ver2/blob/master/src/components/Tasks/edit.vue

まとめ

・比較的シンプルな構成ですが、
　バックエンドは firebase を使用しているので、
　フロント側の、主体の作業になりますね。

参考のページ

knaka0209.hatenablog.com

knaka0209.hatenablog.com

knaka0209.hatenablog.com