このガイドでは、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 を開きます:

ID 値は、ページをリフレッシュするたびに増加します。
要約
おめでとう! Spring ベースの RESTful Web サービスを使用する rest.js クライアントを開発しました。
関連事項
次のガイドも役立ちます。
新しいガイドを作成したり、既存のガイドに貢献したいですか? 投稿ガイドラインを参照してください: GitHub (英語) 。
すべてのガイドは、コード用の ASLv2 ライセンス、およびドキュメント用の Attribution、NoDerivatives クリエイティブコモンズライセンス (英語) でリリースされています。 |