На главную Новости Уроки Проекты О сайте
Учебные материалы

Обработка ответа RESTful Web-сервиса rest.js’ом

Этот урок освещает процесс создания простого rest.js клиента, который обрабатывает ответ от Spring MVC RESTful Web Service.

Что вы создадите

Вы создадите rest.js клиент, который обрабатывает ответ от Spring MVC web-сервиса. В частности, клиент будет обрабатывать ответ от сервиса, созданного в Создание RESTful Web Service c CORS.

rest.js клиент будет доступен при открытии в браузере файла 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-restjs/initial) и оформлен как JSON.

.bowerrc

{"directory": "public/lib"}

Из командной строки в корне проекта выполните команду bower init. Она создаст файл bower.json, который описывает каждый JavaScript пакет, необходимый в проекте. Bower задаст несколько вопросов типа имени пректа, лицензии и др. Если есть сомнения в ответах, то просто нажмите Enter для принятия значений по умолчанию.

Далее используйте Bower для установки rest.js и AMD модуля загрузчика, такого как curl.js. Из командной строки выполните: 

bower install --save rest#~1
bower install --save curl#~0.8

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

Bower должен определить, что rest.js зависит от when.js и установить соответствующую версию.

По завершении, файл bower.json должен содержать свойство объекта "dependencies", в котором перечислены "curl" и "rest" как именованные свойства и информация о них как значения.

bower.json

{
  "name": "consuming-rest-rest.js",
  "version": "0.0.1",
  "authors": [
    "John Hann <jhann@gopivotal.com>"
  ],
  "license": "http://www.apache.org/licenses/LICENSE-2.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "public/lib",
    "test",
    "tests"
  ],
  "dependencies": {
    "curl": "~0.8",
    "rest": "~1"
  }
}

Создание модуля отображения

Для начала, создайте функцию отображения для установки данных в HTML документ.

public/hello/render.js

define(function (require) {

    var ready = require('curl/domReady');

    return render;

    function render (entity) {
        ready(function () {
            var idElement, nameElement;

            idElement = document.querySelector('[data-name="id"]');
            nameElement = document.querySelector('[data-name="content"]');

            idElement.textContent += entity.id;
            nameElement.textContent += entity.content;
        });
    }

});

AMD модуль использует простые DOM запросы и действия для изменения текста в документе. Для того, чтобы DOM не был использован, пока он не готов, модуль импортирует и использует функцию curl.js domReady.

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

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

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

public/hello/main.js

define(function (require) {

    var rest = require('rest');
    var mime = require('rest/interceptor/mime');
    var entity = require('rest/interceptor/entity');
    var render = require('./render');

    var endpointUrl, name, client;

    endpointUrl = 'http://rest-service.guides.spring.io/greeting';
    name = document.location.search.slice(1);

    client = rest
        .chain(mime, { mime: 'application/json' })
        .chain(entity);

    client({ path: endpointUrl, params: { name:  name } })
        .then(render);

});

Главный модуль считывает из строки запроса объект нахождения документа, настраивает rest.js клиент и вызывает REST сервис.

rest.js возвращает Promises/A+ обещание, которое вызывает функцию-модуль render, когда будут получены данные. Функция render ожидает сущность, но rest.js клиент обычно возвращает объект ответа. Перехватчик "rest/interceptor/entity" выдергивает сущность из ответа и передает на вход функции render.

Создание скрипта загрузки

Далее создайте скрипт загрузки run.js:

public/run.js

var curl;
(function () {

    curl.config({
        main: 'hello',
        packages: {
            // Your application's packages
            hello: { location: 'hello' },
            // Third-party packages
            curl: { location: 'lib/curl/src/curl' },
            rest: { location: 'lib/rest', main: 'rest' },
            when: { location: 'lib/when', main: 'when' }
        }
    });

}());

Этот скрипт настраивает AMD загрузчик curl.config(). Свойство main говорит curl.js где искать главный модуль приложения, который будет получен и инициализирован автоматически. Объект конфигурации packages говорит curl.js где искать модули ваших пакетов приложения и сторонних пакетов.

Создание страницы приложения

В заключении создайте файл index.html и поместите в него следующий HTML:

public/index.html

<!doctype html>
<html>
    <head>
        <title>Hello rest.js</title>
        <script data-curl-run="run.js" src="lib/curl/src/curl.js"></script>
    </head>
    <body>
        <div>
            <p data-name="id">The ID is </p>
            <p data-name="content">The content is </p>
        </div>
    </body>
</html>

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

Запуск клиента

Чтобы запустить клиент, вам необходимо поднять 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 будет увеличиваться каждый раз при обновлении страницы

Итог

Поздравляем! Вы только что разработали rest.js клиент, который обрабатывает ответ от Spring RESTful web сервиса.

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

comments powered by Disqus