Обработка ответа RESTful Web-сервиса Backbone.js’ом
Этот урок освещает процесс создания простого Backbone клиента, который обрабатывает ответ от Spring MVC RESTful Web Service.
Что вы создадите
Вы создадите Backbone клиент, который обрабатывает ответ от Spring MVC web-сервиса. В частности, клиент будет обрабатывать ответ от сервиса, созданного в Создание RESTful Web Service c CORS.
Backbone клиент будет доступен при открытии в браузере файла index.html и будет обрабатывать
ответ от запроса к сервису:
http://rest-service.guides.spring.io/greeting
Сервис будет отвечать JSON приветствием:
{"id":1,"content":"Hello, World!"}Клиент будет отображать ID и content в DOM.
Вы можете изменить приветствие дополнительной строков запроса в url:
http://localhost:8080/?User
Код будет отправлять параметр к REST сервису и отображать измененное приветствие в DOM.
Что вам потребуется
- Примерно 15 минут свободного времени
- Любимый текстовый редактор
- Современный web-браузер
- Интернет-соединение
- Node.js или предустановленный Git
- Установленный bower как глобальный node.js JavaScript пакет
Создание конфигурационного файла bower
Для начала, создайте файл управления bower .bowerrc. Этот файл говорит bower где находятся
JavaScript зависимости. Файл .bowerrc должен быть расположен в корне проекта
(gs-consuming-rest-backbone/initial) и оформлен как JSON.
.bowerrc
{"directory": "public/lib"}
Из командной строки в корне проекта выполните команду bower init. Она создаст файл
bower.json, который описывает каждый JavaScript пакет,
необходимый в проекте. Bower задаст несколько вопросов типа имени пректа, лицензии и др. Если
есть сомнения в ответах, то просто нажмите Enter для принятия значений по умолчанию.
Далее используйте Bower для установки Backbone(т.к. мы используем JavaScript модули, мы будем использовать AMD версию Backbone), Jquery и Lodash(альтернатива Underscore) и AMD модуля загрузчика, такого как curl.js. Из командной строки выполните:
bower install --save backbone-amd#~1 bower install --save jquery#~2 bower install --save lodash#~1 bower install --save curl#~0.8
Bower установит Backbone и curl.js в директорию, которая указана в .bowerrc. Т.к. мы определили
параметр --save, bower будет сохранять информацию о пакете в файл bower.json.
По завершении, файл bower.json должен содержать свойство объекта "dependencies", в котором перечислены
"backbone-amd", "jquery", "lodash" и "curl" как именованные свойства и информация о них как значения.
bower.json
{
"name": "draft-consuming-rest-backbone.js",
"version": "0.0.1",
"authors": [
"Brian Cavalier <bcavalier@gopivotal.com>"
],
"license": "http://www.apache.org/licenses/LICENSE-2.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"lib",
"test",
"tests"
],
"dependencies": {
"curl": "~0.8",
"backbone-amd": "~1",
"lodash": "~1",
"jquery": "~2"
}
}Создание Backbone модели
Backbone обрабатывает данные от RESTful web сервиса через модель и коллекции. Для начала вы создадите Backbone модель, которая представляет данные, которые вы хотите обработать из REST сервиса.
public/hello/HelloModel.js
define(function(require) {
var Backbone = require('Backbone');
return Backbone.Model.extend({
urlRoot: 'http://rest-service.guides.spring.io/greeting',
url: function() {
return this.urlRoot + '?name=' + this.id;
}
});
});
Модель расширяет Backbone Model и присваивает urlRoot значение
http://rest-service.guides.spring.io/greeting.
Обратите внимание, что там также передается поле id как параметр url запроса.
Использовано это для настройки приветствия, используя строку запроса как упомянуто выше
(т.е. http://localhost:8080/?User)
Создание Backbone представления
Далее вы создадите Backbone представление для отображения данных в вашей HelloModel.
public/hello/HelloView.js
define(function(require) {
var Backbone = require('Backbone');
var $ = require('jquery');
var _ = require('underscore');
return Backbone.View.extend({
initialize: function() {
this.template = _.template($('#hello-template').html());
this.listenTo(this.model, 'change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.attributes));
}
});
})
Представление расширяет Backbone View. Метод initialize будет
вызван, когда будет создан экземпляр представления. Оно использует Underscore
для компиляции шаблона, который будет использован для отображения данных
модели, сохраненных в созданном шаблоне this.template.
Backbone автоматически обертывает корневой DOM Node представления(который будет
доступен при создании экземпляра представления) в jQuery и делает его доступным
как this.$el Метод render отображает скомпилированный
шаблон, передавая данные модели, изатем использует метод jQuery html()
для вставки в DOM.
Создание контроллера
public/hello/main.js
define(function(require) {
var HelloModel = require('./HelloModel');
var HelloView = require('./HelloView');
var $ = require('jquery');
var model = new HelloModel({ id: document.location.search.slice(1) });
model.fetch();
$(document).ready(function() {
var hello = new HelloView({
el: $('.hello').first(),
model: model
});
});
});
Этот контроллер создает экземпляр HelloModel и затем вызывает его
метод fetch для сбора данных от REST сервиса и присвоения данных полям
модели. Затем от создает экземпляр HelloView, передавая DOM Node,
в котором должны быть отображены и представление и модель. Представление будет
автоматически отображать модель, используя скомпилированный шаблон.
Создание скрипта загрузки
Далее создайте скрипт загрузки run.js:
public/run.js
var curl;
(function () {
curl({
main: 'hello',
packages: {
// Your application's package
hello: { location: 'hello' },
// Third-party packages
curl: { location: 'lib/curl/src/curl' },
jquery: { location: 'lib/jquery/jquery', main: '.' },
Backbone: { location: 'lib/backbone-amd/backbone', main: '.' },
underscore: { location: 'lib/lodash/lodash', main: '.' }
}
});
}());
Этот скрипт настраивает AMD загрузчик curl.config(). Свойство main
говорит curl.js где искать главный модуль приложения, который будет получен и инициализирован
автоматически. Объект конфигурации packages говорит curl.js где искать модули
ваших пакетов приложения и сторонних пакетов.
Создание страницы приложения
Теперь, когда у вас есть модель, представление и контроллер, вы создадите HTML страницу, которую будет загружать клиент в браузере:
public/index.html
<!doctype html>
<html>
<head>
<title>Hello Backbone</title>
<script data-curl-run="run.js" src="lib/curl/src/curl.js"></script>
<script type="text/html" id="hello-template">
<p>The ID is <%= id %></p>
<p>The content is <%= content %></p>
</script>
</head>
<body>
<div class="hello">
</div>
</body>
</html>
Элемент script загружает curl.js, а затем загружает скрипт загрузки приложения
"run.js". Скрипт загрузки инициализирует и настраивает AMD модуль окружения и затем запускает код на
стороне клиента.
<script data-curl-run="run.js" src="lib/curl/src/curl.js"></script>
Далее описан HTML шаблон, который ваше представление использует для отображения данных модели.
Обратите внимание, что мы использовали тэг script с типом tet/html. Это говорит
браузеру не пытаться выполнять содержимое тэга как JavaScript. Он также имеет id,
поэтому на него можно легко сослаться из представления.
<script type="text/html" id="hello-template">
<p>The ID is <%= id %></p>
<p>The content is <%= content %></p>
</script>В конце представлен корневой DOME Node представления. Представление будет отображать данные модели, используя шаблон:
<div class="hello">
</div>Запуск клиента
Чтобы запустить клиент, вам необходимо поднять web сервер. Spring Boot CLI (Command Line Interface) включает встроенный Tomcat сервер, который предоставляет простой подход к обработке web содержимого. Более подробную информацию об установке и использовании CLI смотрите в учебном материале Создание приложений с Spring Boot.
Для обработки статического содержимого вам необходимо создать минимальное количество кода. Приведенный
ниже app.groovy скрипт достаточен для того, чтобы Spring Boot знал, что вы хотите запустить Tomcat:
app.groovy
@Controller class JsApp { }Теперь вы можете запустить приложение, используя Spring Boot CLI:
spring run app.groovy
Когда приложение запустится, откройте http://localhost:8080 в вашем браузере, где вы увидите:
Значение ID будет увеличиваться каждый раз при обновлении страницы
Итог
Поздравляем! Вы только что разработали Backbone клиент, который обрабатывает ответ от Spring RESTful web сервиса.
С оригинальным текстом урока вы можете ознакомиться на spring.io.
comments powered by Disqus