Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix. Я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.

ШЕСТАЯ ЗАДАЧА

Webix — это JavaScript библиотека, в которой операции в первую очередь происходят на стороне клиента, и только потом результат отправляется на сервер, если данные нужно сохранить. Каких либо строгих требований к бэкэнду здесь не предъявляется. Не важно с помощью чего обрабатываются данные на сервере, главное чтобы он принимал запросы определенного формата и отдавал ответ в нужном виде. Все что требуется от разработчика — подключать сервер и работать с простыми запросами, с учетом того, что по проекту не задуманы сложные пользовательские настройки.

Рассмотрим следующие задачи:

• подключение серверной части приложения;
• методы запросов на сервер;
• как отследить результат загрузки;
• как отследить результат сохранения.

В статье задействован виджет Table, подробно о котором написано в документации.

Исходники для работы со статьей находятся по ссылке.

С готовым приложением можно ознакомиться тут.

Подключение серверной части приложения

Приведем пример на основе виджета Table. В исходниках теперь изменена структура приложения. Раньше это был обыкновенный файл index.html с подключенными к нему js-файлами. Теперь добавлены две папки — backend, с простыми серверным скриптом на nodeJS и папка app, где лежит весь написанный клиентский код. Серверные операции для каждого виджета описаны в отдельных файлах. Для виджета Table это файл films.js.

Код виджета Table размещен в файле table.js папки app и отрисован во вкладке “Dashboard”.

Для начала, запустим приложение на локальном сервере.

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

npm install
npm run server

После этого в терминале появится следующая запись:

Server is running on port 3000…
Open localhost:3000/app in browser

Указанный адрес/ссылку открываем в браузере.

Серверный скрипт, к которому будет обращаться виджет Table, поддерживает все базовые crud-операции.

Для загрузки данных в таблицу указываем путь к скрипту в её свойстве url.

url: "/samples/server/films"

Для отправки запросов на сохранение — путь к скрипту указывается в свойстве save. Путь будет таким же как и в url, только с префиксом rest. О rest мы поговорим ниже.

save:"rest->/samples/server/films"

Методы запросов на сервер

Методы запросов определяют то, что мы хотим сделать с ресурсом. По умолчанию Webix использует методы GET и POST, но мы будем использовать RESTful API и все методы подходящие для наших операций с данными: GET, POST, PUT и DELETE.

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

Отслеживать запросы будем на примере виджета Table. Для этого в браузере перейдем в DevTools->Network и найдем информацию о нужном запросе.

Для загрузки данных в таблицу используется метод GET.

Обновим страницу и кликнем на запрос к скрипту films.

По умолчанию в этом запросе не будет никаких параметров, так как мы имеем дело с первой загрузкой данных в компонент.

В результате сервер нам возвращает массив JSON со всеми данными.

Результат запроса GET:



Для создания новой записи в таблице используется метод POST.

При помощи формы добавляем новые данные в таблицу.

Параметрами запроса будут следующие данные:



При добавлении записи на сервер в ответе обязательно должно прийти присвоенное там id:

{ "id":"ImurRuK1k59qzy2f" }

Это необходимо, чтобы не потерять связь между данными на сервере/клиенте. Это же id теперь будет использоваться на клиенте.

Для изменения данных в строках используется метод PUT.

Выберем в таблице первую строку — данные из нее появятся в форме. После чего изменим их и сохраним. На сервер уйдет вся запись (объект с данными) вместе с нашими изменениями.



Ответ сервера не должен содержать специфического статуса (ответом может стать и пустой объект, как будет показано ниже), но в нашем случае сервер вернёт следующий JSON:

{ status: “updated” }

Для удаления данных используется метод DELETE.

Удаляем первую строку кликом на крестик.

В этом случае передаваемыми параметрами на сервер будет вся строка. Главное в параметрах, это id записи которую предстоит удалить на сервере.



Сервер вернет пустой объект, так как специального подтверждения о такой операции не нужно.

Отслеживание результата загрузки

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

Обработчик ready вызывается сразу после того, как в компоненте пришли первые данные и только один раз. Внутри обработчика поместим функцию webix.message() вызывающую метод count. После её вызова, в правом верхнем углу экрана появится сообщение “Loaded 250 records!”.

const table = {
// code the widget Table
    ready(){
        webix.message({
            text:`Loaded ${this.count()} records!`, 
            type:"success"
        });
    }
}

Момент загрузки данных:



В случае, когда при загрузки данных произошла какая-либо ошибка, сработает событие onLoadError:

$$("datatable").attachEvent("onLoadError", function(xhr){
    webix.message("Error!");
});

Отслеживание результата сохранения

Получить ответ сервера при сохранении можно такими операциями как добавление, редактирование и удаление. Рассмотрим на примере виджета Table.

Для этого задействован модуль DataProcessor позволяющий взаимодействовать с сервером. API этого модуля можно использовать для более точной настройки сохранения данных. Нам нужно только отследить момент сохранения — поэтому используем одно его событие — onAfterSync.

Обращение к модулю DataProcessor происходит настройкой webix.dp(id)

Событие onAfterSync вызывается в момент, когда ответ от сервера получен и обработан. По этому событию выведем сообщение через webix.message(). После сохранения, в правом верхнем углу появится сообщение — “Saved!”.

Удаляем первую строку в таблице и смотрим на результат.



Код события в файле script.js после инициализации webix:

let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
    webix.message({
        text:"Saved!",
        type:"success"
    })
});

Ошибки в данном случае можно отлавливать событием onAfterSaveError:

dp.attachEvent("onAfterSaveError", function(id, status, response, details){
    webix.message("Error!");
});

Обобщение

При помощи операций CRUD мы разобрались как взаимодействовать с серверной частью приложения. Рассмотрели стандартный набор методов запроса и как отлавливать загрузку и сохранение данных. Рассмотренные в статье примеры доступны не только для виджета Table, но и для List. Попробовать вы это сможете самостоятельно в указанных в самом начале исходниках.

С кодом готового приложения можно ознакомиться тут.