Hello rest.js

Обработка ответа 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 и content в DOM.

Вы можете изменить приветствие дополнительной строков запроса в url:

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

Что вам потребуется

• Примерно 15 минут свободного времени
• Любимый текстовый редактор
• Современный web-браузер
• Интернет-соединение
• Node.js или предустановленный Git
• Установленный bower как глобальный node.js JavaScript пакет

Создание конфигурационного файла bower

Для начала, создайте файл управления bower .bowerrc . Этот файл говорит bower где находятся JavaScript зависимости. Файл .bowerrc должен быть расположен в корне проекта ( gs-consuming-rest-restjs/initial ) и оформлен как JSON.

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

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

bower install --save curl#~0.8

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

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

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

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

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

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

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

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

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

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 :

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:

       
The ID is
 
The content is
 
  

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

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

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

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

Теперь вы можете запустить приложение, используя Spring Boot CLI:

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

Значение ID будет увеличиваться каждый раз при обновлении страницы

Итог

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

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

Источник

Consuming a RESTful Web Service with jQuery

This guide walks you through writing a simple jQuery client that consumes a Spring MVC-based RESTful web service.

What you will build

You will build a jQuery client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.

The jQuery client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:

http://rest-service.guides.spring.io/greeting

The service will respond with a JSON representation of a greeting:

The jQuery client will render the ID and content into the DOM.

What you will need

• About 15 minutes
• A favorite text editor
• A modern web browser
• An internet connection

Create a jQuery Controller

First, you will create the jQuery controller module that will consume the REST service:

$(document).ready(function() < $.ajax(< url: "http://rest-service.guides.spring.io/greeting" >).then(function(data) < $('.greeting-id').append(data.id); $('.greeting-content').append(data.content); >); >);

This controller module is represented as a simple JavaScript function. It uses jQuery’s $.ajax() method to consume the REST service at http://rest-service.guides.spring.io/greeting. If successful, it will assign the JSON received to data , effectively making it a Greeting model object. The id and content are then appended to the greeting-id and greeting-content DOM elements respectively.

Note the use of the jQuery promise .then() . This directs jQuery to execute the anonymous function when the $.ajax() method completes, passing the data result from the completed AJAX request.

Create the Application Page

Now that you have a jQuery controller, you will create the HTML page that will load the client into the user’s web browser:

       
The ID is
 
The content is
 
  

Note the following two script tags within the section.

The first script tag loads the minified jQuery library (jquery.min.js) from a content delivery network (CDN) so that you don’t have to download jQuery and place it in your project. It also loads the controller code (hello.js) from the application’s path.

Also note that the

tags include class attributes.

These class attributes help jQuery to reference the HTML elements and update the text with the values from the id and content properties of the JSON received from the REST service.

Run the client

To run the client, you’ll need to serve it from a web server to your browser. The Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. See Building an Application with Spring Boot for more information about installing and using the CLI.

In order to serve static content from Spring Boot’s embedded Tomcat server, you’ll also need to create a minimal amount of web application code so that Spring Boot knows to start Tomcat. The following app.groovy script is sufficient for letting Spring Boot know that you want to run Tomcat:

You can now run the app using the Spring Boot CLI:

Once the app starts, open http://localhost:8080 in your browser, where you see:

The ID value will increment each time you refresh the page.

Summary

Congratulations! You’ve just developed a jQuery client that consumes a Spring-based RESTful web service.

See Also

The following guides may also be helpful:

• Building a RESTful Web Service
• Consuming a RESTful Web Service
• Consuming a RESTful Web Service with AngularJS
• Consuming a RESTful Web Service with rest.js
• Accessing GemFire Data with REST
• Accessing MongoDB Data with REST
• Accessing data with MySQL
• Accessing JPA Data with REST
• Accessing Neo4j Data with REST
• Securing a Web Application
• Building an Application with Spring Boot
• Creating API Documentation with Restdocs
• Enabling Cross Origin Requests for a RESTful Web Service
• Building a Hypermedia-Driven RESTful Web Service

Want to write a new guide or contribute to an existing one? Check out our contribution guidelines.

Get the Code

Get the Spring newsletter

Thank you for your interest. Someone will get back to you shortly.

Apache®, Apache Tomcat®, Apache Kafka®, Apache Cassandra™, and Apache Geode™ are trademarks or registered trademarks of the Apache Software Foundation in the United States and/or other countries. Java™, Java™ SE, Java™ EE, and OpenJDK™ are trademarks of Oracle and/or its affiliates. Kubernetes® is a registered trademark of the Linux Foundation in the United States and other countries. Linux® is the registered trademark of Linus Torvalds in the United States and other countries. Windows® and Microsoft® Azure are registered trademarks of Microsoft Corporation. “AWS” and “Amazon Web Services” are trademarks or registered trademarks of Amazon.com Inc. or its affiliates. All other trademarks and copyrights are property of their respective owners and are only mentioned for informative purposes. Other names may be trademarks of their respective owners.

Источник