Обробка відповіді RESTful Web-сервісу - ом, Spring по-українськи!

Цей урок висвітлює процес створення простого Backbone клієнта, який опрацьовує відповідь від Spring MVC RESTful Web Service.

Що ви створите

Ви створите Backbone клієнт, який опрацьовує відповідь від Spring MVC web-сервісу. Зокрема, клієнт оброблятиме відповідь від сервісу, створеного у Створенні RESTful Web Service c CORS.

Backbone клієнт буде доступний при відкритті в браузері файлу index.html і оброблятиме відповідь від запиту до сервісу:

Сервіс буде відповідати JSON вітанням:

Клієнт буде відображати ID та content у DOM.

Ви можете змінити привітання додаткових рядків запиту в URL:

Код надсилатиме параметр до REST сервісу та відображатиме змінене вітання в DOM.

Що вам потрібно

Створення конфігураційного файлу bower

Bower встановить Backbone та curl.js в директорію, яка вказана в .bowerrc. Т.к. ми визначили параметр --save, bower зберігатиме інформацію про пакет у файл bower.json.

Після завершення файл bower.json повинен містити властивість об'єкта "dependencies", в якому перераховані "backbone-amd", "jquery", "lodash" і "curl" як іменовані властивості та інформація про них як значення.

Створення Backbone моделі

Backbone обробляє дані від RESTful web сервісу через модель та колекції. Для початку ви створите Backbone модель, яка представляє дані, які ви хочете обробити із REST сервісу.

Модель розширює Backbone Model і надає urlRoot значення http://rest-service.guides.spring.io/greeting. Зауважте, що там також передається поле id як параметр url запиту. Використовується для налаштування привітання, використовуючи рядок запиту якзгадано вище (тобто http://localhost:8080/?User)

Створення Backbone вистави

Далі ви створите Backbone подання для відображення даних у вашій HelloModel.

Подання розширює Backbone View. Метод initialize буде викликаний, коли буде створено екземпляр подання. Воно використовує Underscore для компіляції шаблону, який буде використаний для відображення даних моделі, збережених у створеному шаблоні this.template.

Backbone автоматично обгортає кореневий DOM Node представлення (який буде доступний при створенні екземпляра представлення) в jQuery і робить його доступним як this.$el Метод render відображає скомпільований шаблон, передаючи дані моделі, а потім використовує метод jQuery html() для вставки в DOM.

Створення контролера

Цей контролер створює екземпляр HelloModel і потім викликає його метод fetch для збору даних від сервісу REST і присвоєння даних полям моделі. Потім створює екземпляр HelloView , передаючи DOM Node, в якому повинні бути відображені і представлення і модель. Подання автоматично відображатиме модель, використовуючи скомпільований шаблон.

Створення скрипту завантаження

Далі створіть скрипт завантаження run.js:

Цей скрипт налаштовує AMD завантажувач curl.config(). Властивість main говорить curl.js де шукати головний модуль програми, який буде отримано та ініціалізовано автоматично. Об'єкт packages конфігурації говорить curl.js де шукати модулі ваших пакетів програми і сторонніх пакетів.

Створення сторінки програми

Тепер, коли у вас є модель, представлення та контролер, ви створите HTML сторінку, яку завантажуватиме клієнт у браузері:

Елемент script завантажує curl.js, а потім завантажуєскрипт завантаженняпрограми "run.js". Скрипт завантаження ініціалізує та налаштовує AMD модуль оточення, а потім запускає код на стороні клієнта.

Наприкінці представлений кореневий DOME Node уявлення. Подання відображатиме дані моделі, використовуючи шаблон:

Запуск клієнта

Щоб запустити клієнт, вам необхідно підняти веб-сервер. Spring Boot CLI (Command Line Interface) включає вбудований Tomcat сервер, який дає простий підхід до обробки web вмісту. Більш детальну інформацію про встановлення та використання CLI див. у навчальному матеріалі Створення програм із Spring Boot.

Для обробки статичного вмісту необхідно створити мінімальну кількість коду. Нижче наведений app.groovy скрипт достатній для того, щоб Spring Boot знав, що ви хочете запустити Tomcat:

Тепер ви можете запустити програму, використовуючи Spring Boot CLI:

Коли програма запуститься, відкрийте http://localhost:8080 у вашому браузері, де ви побачите:

Значення ID збільшуватиметься щоразу під час оновлення сторінки

Вітаємо! Ви тільки-но розробили Backbone клієнт, який обробляє відповідь від Spring RESTful web сервісу.

---