Abr@X@bra.ru
Vue.js 2 + Firebase

Vue.js 2 + Firebase

01.07.2017
3268

Firebase - это платформа для мобильных и веб-приложений, поддерживающая разработчиков с различными инструментами и услугами для создания высококачественного приложения. Главной особенностью Firebase является база данных реального времени. Используя Firebase API, база данных реального времени может использоваться для хранения и синхронизации данных между несколькими клиентами и платформами. Сайт Firebase доступен по адресу: https://firebase.google.com/.

Firebase идеально подходит для Vue.js. База данных реального времени может использоваться с бэкэнд, который реализован с помощью Vue.js 2. Чтобы интегрировать Firebase с вашим приложением Vue.js 2, можно использовать библиотеку VueFire.

Далее вы узнаете, как настроить базу данных Firebase в реальном времени и привязать к ней данные своего приложения Vue, используя эту библиотеку шаг за шагом.

Что мы собираемся сделать

Приложение, которое мы собираемся построить в этом посте, будет выглядеть так:


Это простое приложение для хранения книг. Данные по книгам прилетают из базы данных Firebase. Пользователь может добавлять новые книги в список и удалять существующие записи. Данные хранятся в базе данных Firebase, и все операции с базой данных синхронизируются в реальном времени во всех экземплярах приложений.

Чтобы создать пользовательский интерфейс приложения, мы используем Bootstrap Framework (хоть он и ужасен, но почему-то решил заюзать именно его). Чтобы показать уведомление пользователю после того, как книга была успешно удалена, используется библиотека JavaScript Toastr:


Настройка Firebase

Прежде чем приступить к внедрению приложения Vue, нам сначала нужно настроить базу данных реального времени Firebase.

Чтобы настроить Firebase, вам сначала нужно перейти на https://firebase.google.com/ создать учетную запись и войти в консоль Firebase. Консоль Firebase предоставляет вам доступ ко всем службам и настройкам firebase. Во-первых, нам нужно создать новый проект Firebase:


После создания проекта вы можете щелкнуть по плитке проекта, и вы будете перенаправлены на консоль проекта Firebase:


Консоль проекта является главным местом по настроек конфигурации Firebase. В меню слева вы можете получить доступ к различным службам Firebase. Нажмите ссылку База данных для доступа к представлению базы данных в режиме реального времени. Вы можете использовать онлайн-редактор для добавления контента в базу данных, например:


Как вы можете видеть, данные в базе данных реального времени организованы в иерархическое дерево, которое содержит узлы и пары ключ-значение. Это похоже на структуру данных JSON. Под корневым узлом добавьте элементы юнита. Под элементами создаются несколько пар ключ-значение, как вы можете видеть на скриншоте. Мы будем использовать эти элементы данных в нашем примере приложения позже.

Наконец, нам нужно отредактировать правила безопасности базы данных, чтобы мы могли получить доступ к данным без проверки подлинности. Перейдите на вкладку «Правила» и отредактируйте данные правила безопасности, чтобы они соответствовали следующему:

 {
"rules": {
".read": true,
".write": true
}
 }

Теперь доступ к чтению и записи возможен без аутентификации.

Настройка проекта Vue.js 2 (с Vue CLI)

С подготовленной базой данных Firebase в реальном времени мы готовы начать реализацию слоя представления. Чтобы инициировать новый проект Vue.js 2, самый простой способ - использовать Vue CLI:

$ vue init webpack vuejs-firebase-01

Создается новый каталог проектов vuejs-firebase-01 и шаблон Vue Webpack загружается в этот каталог. Нам нужно завершить настройку проекта, перейдя в этот каталог и выполнив следующую команду:

$ npm install

Это гарантирует, что все зависимости загружаются и устанавливаются в подпапку node_modules.

Добавление библиотеки Firebase и VueFire в проект

Библиотека VueFire (https://github.com/vuejs/vuefire) позволяет легко связывать данные Firebase с данными Vue.js. Чтобы добавить VueFire и базовую библиотеку Firebase в проект, выполните следующую команду в каталоге проекта:

$ npm install firebase vuefire --save

В файле main.js теперь мы можем импортировать VueFire. Также необходимо вызвать Vue.use  (VueFire), чтобы сделать библиотеку доступной в проекте:
import Vue from 'vue'
import VueFire from 'vuefire'
import App from './App'
Vue.use(VueFire)
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

Добавление Bootstrap в проект

Поскольку мы хотели бы использовать CSS и компоненты Bootstrap в нашем примере, нам также необходимо добавить его структуру проекта. Чтобы добавить фреймворк в наш проект, нам нужно включить соответствующий файл CSS и JavaScript в index.html. Ресурсы могут быть извлечены из CDN, как вы можете это видеть в данном примере:


<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>vuejs-firebase-01</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>
 <body>
   <div id="app"></div>
  
   <!-- built files will be auto injected -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </body>
</html>

Подключение к Firebase

Со всеми библиотеками, добавленными в проект, мы теперь можем установить соединение с базой данных Firebase. Давайте добавим следующий код внутри секции сценария в файл App.vue:

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

Во-первых, мы импортируем Firebase из базовой библиотеки firebase. Чтобы создать экземпляр Firebase, мы используем фабричный метод initializeApp. Этот метод ожидает объект конфигурации, содержащий следующие свойства: apiKey, authDomain, databaseURL, storageBucket и messagingSenderId. Значения свойств должны быть установлены в соответствии с созданным проектом Firebase. Вы можете легко получить значения из консоли Firebase. Откройте страницу обзора проекта и нажмите ссылку Добавить Firebase в свое веб-приложение.


В открывшемся всплывающем окне вы получаете предварительно заполненный объект конфигурации в нотации JSON.

С экземпляром Firebase, хранящимся в приложении, мы теперь можем получить ссылку на базу данных с помощью вызова app.database (). Имея доступную ссылку на базу данных, мы, наконец, можем получить ссылку на узел книг в нашей базе данных:

let booksRef = db.ref('books')

Внедрение вывода списка книг

Библиотека VueFire упрощает привязку свойств Vue.js к данным Firebase. Просто добавьте следующее в объект конфигурации компонента:

firebase: {
   books: booksRef
 },

Теперь переменная books дает нам доступ к элементам книг из базы данных Firebase, поэтому мы можем выводить данные в шаблоне:

<div class="panel-body">
   <table class="table table-striped">
     <thead>
       <tr>
         <th>Title</th>
         <th>Author</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="book in books">
         <td><a v-bind:href="book.url">{{book.title}}</a></td>
         <td>{{book.author}}</td>
       </tr>
     </tbody>
   </table>
 </div>

Просто используйте директиву v-for для итерации по элементам, доступным в книгах, для создания новой строки таблицы для каждого элемента книги.

Внедрение формы ввода книги

Затем давайте посмотрим, как новые элементы могут быть добавлены в базу данных реального времени. Сначала мы определяем модель данных:

data () {
   return {
     newBook: {
         title: '',
         author: '',
         url: 'http://'
     }
   }
 },

Затем соответствующая форма ввода реализуется в шаблоне компонента:
<div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">Add New Books</h3>
     </div>
     <div class="panel-body">
        <form id="form" class="form-inline" v-on:submit.prevent="addBook">
         <div class="form-group">
           <label for="bookTitle">Title:</label>
           <input type="text" id="bookTitle" class="form-control" v-model="newBook.title">
         </div>
         <div class="form-group">
           <label for="bookAuthor">Author:</label>
           <input type="text" id="bookAuthor" class="form-control" v-model="newBook.author">
         </div>
         <div class="form-group">
           <label for="bookUrl">Url:</label>
           <input type="text" id="bookUrl" class="form-control" v-model="newBook.url">
         </div>
         <input type="submit" class="btn btn-primary" value="Add Book">
       </form>
     </div>
   </div>

HTML-форма состоит из трех элементов ввода для названия книг, автора и URL-адреса. Используя директиву v-model, свойства newBook привязаны к соответствующим элементам управления вводом.

Используя директиву v-on, событие submit привязано к методу обработчика событий addBook. Чтобы реализовать событие addBook, добавьте свойство в метод, объекта конфигурации компонента и назначьте объект, содержащий реализацию addBook.

methods: {
     addBook: function () {
       booksRef.push(this.newBook);
       this.newBook.title = '';
       this.newBook.author = '';
       this.newBook.url = 'http://';
     },
   },
Поскольку мы использовали привязку данных для синхронизации значений элементов ввода формы с объектом newBook, мы можем использовать этот объект в addBook и передать ему вызов метода booksRef.push. Это вставляет новый объект книг в узел книг Firebase и автоматически синхронизирует данные по всем подключенным клиентским экземплярам приложения.

Реализация функции удаления

На следующем шаге давайте продолжим реализацию и добавим функцию удаления, чтобы пользователь мог удалять записи из таблицы книг. Сначала добавьте еще один столбец в таблицу, на котором отображается значок, на который пользователь может щелкнуть, чтобы удалить запись:

<td><span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeBook(book)"></span></td>
Опять же, мы используем директиву v-on для подключения события click к методу обработчика событий removeBook. Реализация метода:
removeBook: function (book) {
   booksRef.child(book['.key']).remove()
}

Чтобы удалить элемент книги из базы данных Firebase, мы сначала выбираем узел книги с помощью дочернего метода. Этот метод ожидает получить ключ элемента книги, который должен быть выбран. У нас уже есть доступ к этой информации через book ['. Key']. Наконец, нам нужно вызвать remove () в возвращаемом объекте книги, чтобы удалить его из базы данных.

Добавление уведомлений

Для окончательного завершения, мы добавляем библиотеку Toastr в наше приложение, чтобы каждый раз, когда удалялась книга, выносили уведомление.

Добавьте файл Toastr CSS из CDN в разделе head.html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>

Затем добавьте пакет toastr NPM в проект и сохраните эту зависимость в package.json:

$ npm install toastr --save

Далее нам нужно сделать импорт в наше приложение App.vue:

import toastr from 'toastr'

Внутри removeBook вызов метода toastr.success гарантирует, что будет показано уведомление:

removeBook: function (book) {
  booksRef.child(book['.key']).remove()
  toastr.success('Book removed successfully')
}

Завершение

Добавив все части вместе, вы получите следующий код внутри Vue.app:

<template>
 <div id="app" class="container">
   <div class="page-header">
     <h1>Vue.js 2 & Firebase <small>Sample Application by CodingTheSmartWay.com</small></h1>
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">Add New Books</h3>
     </div>
     <div class="panel-body">
        <form id="form" class="form-inline" v-on:submit.prevent="addBook">
         <div class="form-group">
           <label for="bookTitle">Title:</label>
           <input type="text" id="bookTitle" class="form-control" v-model="newBook.title">
         </div>
         <div class="form-group">
           <label for="bookAuthor">Author:</label>
           <input type="text" id="bookAuthor" class="form-control" v-model="newBook.author">
         </div>
         <div class="form-group">
           <label for="bookUrl">Url:</label>
           <input type="text" id="bookUrl" class="form-control" v-model="newBook.url">
         </div>
         <input type="submit" class="btn btn-primary" value="Add Book">
       </form>
     </div>
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">Book List</h3>
     </div>
     <div class="panel-body">
       <table class="table table-striped">
         <thead>
           <tr>
             <th>Title</th>
             <th>Author</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="book in books">
             <td><a v-bind:href="book.url">{{book.title}}</a></td>
             <td>{{book.author}}</td>
             <td><span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeBook(book)"></span></td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
 </div>
</template>
<script>
import Hello from './components/Hello'
import Firebase from 'firebase'
import toastr from 'toastr'
let config = {
   apiKey: "...",
   authDomain: "...",
   databaseURL: "...",
   storageBucket: "...",
   messagingSenderId: "..."
 };
 
let app = Firebase.initializeApp(config)
let db = app.database()
let booksRef = db.ref('books')
 
export default {
 name: 'app',
 firebase: {
   books: booksRef
 },
 
 data () {
   return {
     newBook: {
         title: '',
         author: '',
         url: 'http://'
     }
   }
 },
 
  methods: {
     addBook: function () {
       booksRef.push(this.newBook);
       this.newBook.title = '';
       this.newBook.author = '';
       this.newBook.url = 'http://';
     },
     removeBook: function (book) {
       booksRef.child(book['.key']).remove()
       toastr.success('Book removed successfully')
     }
   },
 
 components: {
   Hello
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
 margin-top: 20px;
}
</style>

Vue.js 2 – упрощает реализацию уровня представления одностраничного веб-приложения. Поскольку Vue не делает предположений о бэкэнд-технологии, его можно использовать вместе с различными стеками приложений. Если вы хотите синхронизировать данные в реальном времени в своем приложении, Firebase - отличный вариант для создания вашего бэкэнда.



Vue.js, Firebase
Читайте также:
Vue.js наступает на пятки React и Angular

Vue.js наступает на пятки React и Angular

Какая магия Vue.js заставляет его завоевывать сердца разработчиков? Давай выясним!
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
React vs Angular: подробное сравнение

React vs Angular: подробное сравнение

Должен ли я выбрать Angular или React? Сегодняшний полярный ландшафт JavaScript-фреймворков заставил многих разработчико...
Читать