このガイドでは、Spring MVC ベースの RESTful Web サービスを使用する単純な rest.js クライアントを使用するプロセスについて説明します。

構築する

Spring ベースの RESTful Web サービスを使用する rest.js クライアントを構築します。具体的には、クライアントは CORS を使用した RESTful Web サービスの構築で作成されたサービスを使用します。

rest.js クライアントは、ブラウザーで index.html ファイルを開くことによりアクセスされ、次の場所でリクエストを受け入れるサービスを使用します。

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

サービスは、挨拶の JSON 表現で応答します。

{"id":1,"content":"Hello, World!"}

クライアントは、ID とコンテンツを DOM にレンダリングします。

URL でオプションのクエリ文字列を使用して、グリーティングをカスタマイズできます。

http://localhost:8080/?User

コードはパラメーターを REST エンドポイントに送信し、カスタムグリーティングを DOM にレンダリングします。

必要なもの

  • 約 15 分

  • お気に入りのテキストエディター

  • 最新の Web ブラウザー

  • インターネット接続

  • Node.js と Git がプリインストールされています

  • グローバル node.js JavaScript パッケージとしてインストールされた Bower

バウワー構成ファイルを作成する

最初に、バウアー制御ファイル .bowerrc を作成します。このファイルは、JavaScript 依存関係を配置する場所を bower に指示します。.bowerrc ファイルは、プロジェクト ({project_id}/initial) のルートに配置し、JSON としてフォーマットする必要があります。

.bowerrc

{
	"directory": "public/lib"
}

プロジェクトのルートにあるコマンドプロンプトから bower init を実行します。これにより、プロジェクトに必要な各 JavaScript パッケージを記述する bower.json ファイルが作成されます。Bower は、プロジェクト名、ライセンスなど、いくつかの情報を要求します。不明な場合は、Enter を押してデフォルトを受け入れます。

次に、Bower を使用して、rest.js と、curl.js などの AMD モジュールローダーをインストールします。コマンドプロンプトで、次のように入力します。

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 ファイルには、プロパティ名として「curl」および「rest」、値として semver 情報をリストする「dependencies」オブジェクトプロパティが必要です。

bower.json

{
  "name": "consuming-rest-rest.js",
  "version": "0.0.1",
  "authors": [
    "John Hann <[email protected] (英語)  >"
  ],
  "license": "https://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 関数モジュールをインポートして使用します。

実際のアプリケーションでは、ここに示すように DOM 操作ではなく、データバインディングまたはテンプレートを使用する必要があります。

アプリケーション構成モジュールを作成する

次に、アプリケーションを構成するモジュールを作成します。

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 mime クライアントを構成し、REST エンドポイントを呼び出します。

rest.js は Promises/A + promise を返します。これは、エンドポイントがデータを返すときに render 関数モジュールを呼び出します。render 関数はエンティティを想定していますが、rest.js クライアントは通常レスポンスオブジェクトを返します。「レスト / インターセプター / エンティティ」インターセプターは、レスポンスからエンティティを引き抜き、それを 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 config オブジェクトは、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（コマンドラインインターフェース）には、Web コンテンツを提供するためのシンプルなアプローチを提供する Tomcat サーバーが組み込まれています。CLI のインストールと使用の詳細については、Spring Boot でアプリケーションの構築を参照してください。

Spring Boot の組み込み Tomcat サーバーから静的コンテンツを提供するには、Spring Boot が Tomcat を起動することを認識できるように、最小限の Web アプリケーションコードを作成する必要もあります。Tomcat を実行することを Spring Boot に知らせるには、次の app.groovy スクリプトで十分です。

app.groovy

@Controller class JsApp { }

これで、Spring Boot CLI を使用してアプリを実行できます。

spring run app.groovy

アプリが起動したら、ブラウザーで http://localhost:8080 を開きます：

Model data retrieved from the REST service is rendered into the DOM.

ID 値は、ページをリフレッシュするたびに増加します。

要約

おめでとう！ Spring ベースの RESTful Web サービスを使用する rest.js クライアントを開発しました。

関連事項

次のガイドも役立ちます。

新しいガイドを作成したり、既存のガイドに貢献したいですか？ 投稿ガイドラインを参照してください: GitHub (英語) 。

すべてのガイドは、コード用の ASLv2 ライセンス、およびドキュメント用の Attribution、NoDerivatives クリエイティブコモンズライセンス (英語) でリリースされています。