Vue.js 2 + Firebase
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Создание одностраничных веб-приложений в реальном времени с помощью Vue.js 2 и Firebase
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. Под корневым узлом добавьте подузел items. В разделе элементы создайте несколько пар ключ-значение, как показано на снимке экрана. Позже мы будем использовать эти элементы данных в нашем примере приложения.
Наконец, нам нужно отредактировать правила безопасности базы данных, чтобы мы могли позже получить доступ к данным без аутентификации в нашем примере приложения Angular 2. Перейдите на вкладку Правила и отредактируйте данные правила безопасности, чтобы они соответствовали следующему: { "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 в проект
Поскольку мы хотели бы использовать Bootstrap CSS и компоненты в нашем примере приложения, нам также необходимо добавить этот фреймворк в проект. Чтобы добавить фреймворк в наш проект, нам нужно включить соответствующий файл 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 (). Теперь, когда ссылка на базу данных доступна, мы, наконец, можем получить ссылку на узел books в нашей базе данных: 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 событие отправки привязано к методу обработчика событий addBook. Чтобы реализовать addBook, добавьте свойство methods к объекту конфигурации компонента и назначьте объект, содержащий реализацию 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, чтобы связать событие щелчка с методом обработчика событий removeBook. Реализацию метода можно увидеть в следующем:
removeBook: function (book) {
booksRef.child(book['.key']).remove()
}
Чтобы удалить элемент книги из базы данных Firebase, мы сначала выбираем узел книги с помощью метода child. Этот метод ожидает получить ключ элемента книги, который должен быть выбран. У нас уже есть доступ к этой информации через book['.key']. Наконец, нам нужно вызвать remove () для возвращенного объекта книги, чтобы удалить его из базы данных.
Добавление всплывающих уведомлений
В качестве последнего штриха мы добавляем в наше приложение библиотеку Toastr, которая будет отображать всплывающее уведомление при каждом удалении книги.
Добавьте CSS-файл Toastr из CDN в заголовок index.html: <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
Затем добавьте NPM-пакет toastr в проект и сохраните эту зависимость в 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 - отличный вариант для создания серверной части.
Видеоурок
Этот видеоурок содержит шаги, описанные в тексте выше:
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
