12/08/2018, 17:53

Vue Firebase CRUD Example

I. Chuẩn bị Cài đặt Vue sử dụng Vue CLI bằng một trong 2 câu lệnh sau: npm install -g @vue/cli or yarn global add @vue/cli Nếu gặp lỗi bạn hay thử với quyền root. Tạo project với scaffold dựng sẵn: vue create vuefirebaseexample Di chuyển vào thư mục gốc và mở source code bắng ...

I. Chuẩn bị

Cài đặt Vue sử dụng Vue CLI bằng một trong 2 câu lệnh sau:
```
npm install -g @vue/cli
or
yarn global add @vue/cli
```
Nếu gặp lỗi bạn hay thử với quyền root.
Tạo project với scaffold dựng sẵn:
```
vue create vuefirebaseexample
```
Di chuyển vào thư mục gốc và mở source code bắng sublime text:
```
cd vuefirebaseexample
subl .
```

Cài đặt vuefire bằng một trong hai câu lệnh sau:

yarn add vuefire firebase
or    
npm install vuefire firebase --save

Ta cần import vuefire vào file src/man.js:

import Vue from 'vue'
import VueFire from 'vuefire'
import App from './App.vue'

Vue.use(VueFire)
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Cài đặt Bootstrap 4 bằng 1 trong 2 cách:

yarn add bootstrap
# or
npm install bootstrap --save

Sau đó inport vào file App.vue

<style lang="css">
  @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>

II. Vue component

Tạo 4 file component AddItem.vue, EditItem.vue, ListItem.vue, Home.vue trong thư mục src/components/ với nội dung:

// Home.vue

<template>
  <h1>Home</h1>
</template>

<script>
export default {
  components: {
      name: 'Home'
  }
}
</script>

// AddItem.vue
<template>
  <h1>Add Item</h1>
</template>

<script>
export default {
  components: {
      name: 'AddItem'
  }
}
</script>

// EditItem.vue
<template>
  <h1>Edit Item</h1>
</template>

<script>
export default {
  components: {
      name: 'EditItem'
  }
}
</script>

// ListItem.vue

<template>
  <h1>List Item</h1>
</template>

<script>
export default {
  components: {
      name: 'ListItem'
  }
}
</script>

Cài đặt gói vue-route

yarn add vue-router
# or
npm install vue-router --save

Và config route trong file main.js như sau:

import Vue from 'vue'
import VueFire from 'vuefire'
import VueRouter from 'vue-router'
import App from './App.vue'

import AddItem from './components/AddItem.vue'
import EditItem from './components/EditItem.vue'
import ListItem from './components/ListItem.vue'
import Home from './components/Home.vue'

Vue.use(VueFire)
Vue.use(VueRouter)
Vue.config.productionTip = false

const routes = [
  {
    name: 'Home',
    path: '/',
    component: Home
  },
  {
        name: 'Add',
        path: '/add',
        component: AddItem
  },
  {
      name: 'Edit',
      path: '/edit/:id',
      component: EditItem
  },
  {
      name: 'List',
      path: '/index',
      component: ListItem
  },
];

const router = new VueRouter({ mode: 'history', routes: routes });

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Trước khi khởi tạo server để test thử ta cần gọi route từ file App.vue như sau:

// App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
      name: 'app'
    }
</script>

<style lang="css">
  @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>

Và khởi tạo server với câu lệnh:
```
npm run serve
```
Truy cập vào đường link http://localhost:8080 trên trình duyệt để xem kết quả.
Route đã hoạt động nhưng bước tiếp theo ta cần chỉnh sửa lại style cho đẹp.

Thêm thanh navigation vào file App.vue:

<template>
  <div id="app" class="container">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link :to="{ name: 'Home' }" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Add' }" class="nav-link">Add Item</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'List' }" class="nav-link">All Item</router-link>
        </li>
      </ul>
    </nav>
    <div class="gap">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="css">
  @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
</style>

<style>
  .gap {
    margin-top: 50px;
  }
</style>

<script>

export default {
  name: 'app'
}
</script>

Kết quả thu được:
Cài đặt gói nprogress cung cấp component UI cho việc hiển thị route
```
yarn add nprogress
# or
npm install nprogress --save
```

Và thêm vào file main.js:

...
import NProgress from 'nprogress';
import '../node_modules/nprogress/nprogress.css'
...
const router = new VueRouter({ mode: 'history', routes: routes });

router.beforeResolve((to, from, next) => {
  if (to.name) {
      NProgress.start()
  }
  next()
})

router.afterEach(() => {
  NProgress.done()
})
...

Tạo form add Item trong file AddItem.vue:

// AddItem.vue
<template>
  <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Add Item</h3>
            </div>
            <div class="card-body">
                <form v-on:submit.prevent="addItem">
                    <div class="form-group">
                        <label>Item Name:</label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label>Item Price:</label>
                        <input type="text" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Add Item"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {
      name: 'AddItem'
  }
}
</script>

III. FireBase

Truy cập Firebase và tạo một project, bạn nhớ phải cho phép quyền đọc và ghi nếu không sẽ không thể tạo data trên firebase được.

Tạo file config db.js trong thư mục src:

// db.js

 import Firebase from 'firebase'
  let config = {
     apiKey: "",
     authDomain: "",
     databaseURL: "",
     projectId: "",
     storageBucket: "",
     messagingSenderId: ""
   };
 let app = Firebase.initializeApp(config)
 export const db = app.database()

Đến đây việc config kết nối Firebase đã xong, ta sẽ tiến hành add Item vào data Firebase:

// AddItem.vue

 <template>
   <div class="container">
         <div class="card">
             <div class="card-header">
                 <h3>Add Item</h3>
             </div>
             <div class="card-body">
                 <form v-on:submit.prevent="addItem">
                     <div class="form-group">
                         <label>Item Name:</label>
                         <input type="text" class="form-control" v-model="newItem.name"/>
                     </div>
                     <div class="form-group">
                         <label>Item Price:</label>
                         <input type="text" class="form-control" v-model="newItem.price"/>
                     </div>
                     <div class="form-group">
                         <input type="submit" class="btn btn-primary" value="Add Item"/>
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </template>

 <script>

 import { db } from '../config/db';

 export default {
   components: {
       name: 'AddItem'
   },
   firebase: {
     items: db.ref('items')
   },
   data () {
     return {
       newItem: {
           name: ',
           price: '
       }
     }
   },
   methods: {
       addItem() {
         this.$firebaseRefs.items.push({
             name: this.newItem.name,
             price: this.newItem.price
         })
         this.newItem.name = ';
         this.newItem.price = ';
         this.$router.push('/index')
       }
     }
 }
 </script>

Kết quả ta thu được:

Sau khi lưu được data vào firebase ta sẽ update ListItem.vue để hiển thị data từ firebase:

// ListItem.vue

  <template>
    <div>
      <h1>List Item</h1>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Item Price</th>
            <th colspan="2">Action</th>
          </tr>
        </thead>
        <tbody>
            <tr v-for="item of items" :key="item['.key']">
              <td>{{ item.name }}</td>
              <td>{{ item.price }}</td>
              <td>
                  <router-link :to="{ name: 'Edit', params: {id: item['.key']} }" class="btn btn-warning">
                    Edit
                  </router-link>
              </td>
            </tr>
        </tbody>
      </table>
    </div>
  </template>

  <script>

  import { db } from '../config/db';

  export default {
    components: {
        name: 'ListItem'
    },
    data() {
      return {
        items: []
      }
    },
    firebase: {
      items: db.ref('items')
    }
  }
  </script>

Update data vào firebase:

// EditItem.vue

<template>
  <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Edit Item</h3>
            </div>
            <div class="card-body">
                <form v-on:submit.prevent="updateItem">
                    <div class="form-group">
                        <label>Item Name:</label>
                        <input type="text" class="form-control" v-model="newItem.name"/>
                    </div>
                    <div class="form-group">
                        <label>Item Price:</label>
                        <input type="text" class=

Bình luận về bài viết này

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Vue Firebase CRUD Example

I. Chuẩn bị

II. Vue component

III. FireBase

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI