Постоянное хранилище данных в Ember с LocalStorage

Ember - это бесплатный javascript-фреймворк с открытым исходным кодом для одностраничных приложений. Он соответствует шаблону модель-представление-представление-модель (MVVM).

Ember поставляется с интерфейсом командной строки Ember, который можно использовать для создания приложений Ember и управления ими.

Как вы все знаете, существует множество UI-фреймворков для создания одностраничных приложений, и если вы внимательно посмотрите, то увидите Ember в списке лучших UI-фреймворков.

Этот UI Framework не создается и не управляется какой-либо крупной корпорацией, в отличие от react, angular и т. Д., Но он пользуется широкой поддержкой сообщества очень увлеченных разработчиков.

Ember.js имеет стандартную структуру проекта, которая позволяет разработчикам легко понимать и организованно писать код. Ember представила интерфейс командной строки для создания, сборки, обслуживания и тестирования приложений Ember.js.

Он используется на многих популярных веб-сайтах, таких как LinkedIn, Live Nation, Apple Music и т. Д. Это фреймворк для веб-приложений, но его можно использовать для создания как мобильных, так и веб-приложений. Apple Music - это пример настольного приложения ember.

В этой статье я объясню вам, как настроить проект ember и как выполнить простую операцию CRUD с использованием localStorage.

Ember CLI и установка Ember

Ember CLI построен с использованием javascript и требует последней версии Node.js. с долгосрочной поддержкой (LTS). Зависимости Ember загружаются с использованием NPM, доступного в Node.js.

Вы можете проверить, есть ли на вашем компьютере node и npm, с помощью следующей команды.

node -version
npm -version

Если вы получаете сообщение об ошибке «команда не найдена», установите последнюю версию Node.js.

Установка Ember CLI

npm install -g ember-cli
ember -v

Создание приложения Ember

Мы можем создать новое веб-приложение ember, используя команду ember new в терминале ember-cli.

ember new ember-crud-ls

Приведенная выше команда создаст новый каталог ember-crud-ls и настроит приложение ember со следующими встроенными функциями:

• Сервер разработки
• Возможности ES6 через Babel
• Возможности минификации Javascript и CSS
• Автоматическая сборка и компиляция

мы можем быстро запустить приложение из каталога ember-crud-ls с помощью команды ember-serve

Приложение будет доступно по адресу http://localhost:4200/ с app/templates/application.hbs в качестве домашней страницы. Если вы отредактируете эту страницу, вы увидите, что страница автоматически загружается после компиляции новых изменений.

Чтобы создать приложение для добавления, обновления, удаления и отображения списка книг, мы должны сначала создать страницу. Другими словами, мы можем сказать, что должны создать маршрут. Маршруты - это список страниц для приложения.

Создание маршрута (страница для вашего приложения)

Для создания маршрута мы можем использовать команду ember generate route, за которой следует имя маршрута.

ember generate route books

Вышеупомянутая команда создаст следующие файлы и изменения,

• Маршрутные js-файлы извлекают модели или вызывают сервис для страницы
• Шаблон для отображения пунктов маршрута
• Делает запись в файле router.js
• Файл модульного теста для маршрута

//app/routes/books.js
import Route from '@ember/routing/route';
export default Route.extend({
    model() {
        return ['The god of small things', 'Book of Ram', 'History of the world'];
     }
});

Шаблон маршрута будет создан под app/templates

// app/templates/books.hbs
<h2>Books</h2>
<ul>
  {{#each this.model as |book|}}
    <li>{{book}}</li>
  {{/each}}
</ul>

Создание компонента пользовательского интерфейса Ember

Компонент будет представлять данные модели пользователю, а не получать модель. Маршруты получат данные модели.

Мы можем легко создавать многоразовые элементы с помощью component. В ember мы можем создать компонент, используя команду ember generate component, за которой следует имя компонента.

ember generate component book-list

И мы можем вызвать компонент из шаблона маршрута вот так.

{{book-list title=”Books” books=this.model}}

Динамическое название, значение книги заменят свойство {{title}} и {{book}} в компоненте, который мы передаем из маршрута.

Мы можем добавить код для вывода списка книг в book-list файл шаблона компонента

app/templates/components/book-list.hbs
<h2>{{this.title}}</h2>
<ul>
 {{#each this.books as |book|}}
 <li>{{book}}</li>
 {{/each}}
</ul>

Использование данных Ember для работы CRUD

Ember поставляется с библиотекой управления данными ember-data store для управления данными вашего приложения.

Вот диаграмма архитектуры Ember.

Данные Ember требуют модели для управления данными. Модель - это класс, который представляет свойства и поведение данных, которые мы использовали в нашем приложении. Мы можем определять модели, расширяя DS.Model.

Для добавления новой модели мы должны создать файл в папке моделей. В нашем приложении для управления книгами нам понадобится модель книги. Мы можем легко создать модель, используя ember cli с помощью следующей команды.

ember generate model book

Он создает файл book.js в папке моделей. В этом файле мы можем определить атрибут, необходимый для книги.

import DS from ‘ember-data’;
export default DS.Model.extend({
  name: DS.attr(‘string’),
  author: DS.attr(‘string’),
});

Объект хранилища данных Ember доступен в маршрутах, которые можно использовать для управления записями в хранилище. Библиотека данных Ember предоставляет следующие методы управления записями.

Создание записей

Мы можем создать запись, используя метод ember store.createRecord. Для создания новой записи книги в createRecord method необходимо передать тип записи (книгу) и объект детали.

store.createRecord(‘book’, {
   name: ‘2 States’,
   author: ‘Chetan bhagat’,
});

Обновление записей

Мы можем вносить изменения в созданные записи, используя метод store.updateRecord method.

this.store.findRecord(‘book’, 1).then(function(book) {
   book.set(‘name’, ‘Chetan Bhagat’);
});

Метод поиска записи найдет запись книги с предоставленным идентификатором, и мы сможем обновить значение записи.

Удаление записей

С помощью метода ember store.deleteRecord легко уничтожить запись.

store.findRecord(‘book’, 1).then(function(book) {
   book.deleteRecord();
});

Получение записей

Получить все записи определенного типа с помощью метода store.findAll

this.store.findAll(‘book’) .then(function(books) {
   // Do something with ‘books’ list
});

мы можем прочитать одну запись, используя store.findRecord method,

this.store.findRecord(‘book’, 1).then(function(book) {
    // Do something with ‘book’
});

Chrome предоставил надстройку ember Inspector для понимания и отладки приложений ember. Это дополнение поможет вам во время разработки. Вот скриншот книжных записей, созданных в нашем приложении.

Сохранение записей в локальном хранилище

Мы можем легко добавлять, изменять записи в нашем приложении, используя вышеуказанные методы. Но эти данные будут потеряны, если мы обновим браузер. Чтобы сохранить эти данные, мы должны сохранить эти данные в базе данных.

Здесь я объясню вам, как хранить эти данные в localStorage браузера. localStorage широко используется в веб-приложениях для автономного хранения данных.

Большинство браузеров поддерживают localStorage для хранения данных. Вот список поддерживаемых браузеров.

Для сохранения записи мы можем использовать метод save() для любого экземпляра DS.Model. save() сделает сетевой запрос на сохранение данных. Ember-data позаботится о состоянии каждой записи за вас.

let book= store.createRecord(‘book’, {
   name: ‘2 States’,
   author: ‘Chetan Bhagat’,
});
book.save(); // => POST to ‘/books’

В ember-data adapters определяет, как данные сохраняются в внутреннем хранилище. URL-адрес серверной части, заголовки для связи с остальными API и т. Д. Могут быть добавлены в файл adapter.js.

Для хранения всех данных в локальном хранилище нам понадобится адаптер локального хранилища. Для этого мы можем установить уже имеющийся модуль npm ember-local-storage.

ember install ember-local-storage

Настройка адаптера для приложения

Мы можем сгенерировать адаптер для приложения, используя следующую команду:

ember generate adapter application

Ember по умолчанию сгенерирует JSONAPIAdapter.

import DS from ‘ember-data’;
   export default DS.JSONAPIAdapter.extend({
});

Но для этого приложения мы храним данные в локальном хранилище. Таким образом, мы можем заменить код adapter.js следующим кодом адаптера локального хранилища.

export { default } from ‘ember-local-storage/adapters/local’;

Настройка сериализатора для приложения

В Ember сериализатор форматирует данные, отправляемые в серверную базу данных и получаемые из нее. Мы можем создать сериализатор, как показано ниже,

ember generate serializer application

Ember по умолчанию создает сериализатор JSON API.

import DS from ‘ember-data’;
export default DS.JSONAPISerializer.extend({
});

Мы можем заменить сериализатор JSON API на сериализатор локального хранилища.

export { default } from ‘ember-local-storage/serializers/serializer’;

Мы можем сохранить данные в локальном хранилище с помощью вышеуказанного сериализатора и адаптера. Мы можем видеть, что данные сохраняются, обновив URL-адрес приложения после выполнения операций CRUD.

Заключение

Надеюсь, вы получили некоторую информацию о сохранении данных в локальном хранилище с помощью ember.js.

Для справки проверьте код здесь: https://github.com/manubenjamin/ember-crud-ls

Для онлайн-демонстрации посетите этот URL: https://manubenjamin.github.io/ember-crud-ls/#/books

Пожалуйста, поделитесь своими комментариями и вопросами.