RESTとその強力なバックエンド機能を使用するアプリのコレクションと、Reactの洗練された機能を組み合わせて、わかりやすいUIを構築します。ハイパーメディアを使用したリポジトリをすばやく構築する方法を提供します。JavaScriptでの効率的で高速で使いやすいビューに対するFacebookのソリューションです。基本機能Springコミュニティへようこそ。RESTアプリケーションを迅速に起動して実行する方法を示します。次に、FacebookのReact.jsツールセットを使用して、その上にシンプルなUIを構築する方法を示します。自由に入手して、フォローしてください。アクセスして、次の依存関係を選択してください。Bootの最新の安定版リリースを使用しています。コーディングされたReact.jsも使用します。これにより、クリーンで空のプロジェクトが作成されます。そこから、このセクションに明示的に示されているさまざまなファイルを追加したり、前述のリポジトリから借用したりできます。はじめに...最初はデータがありました。その後、人々はさまざまな手段でデータにアクセスしたいと考えました。何年もの間、人々は多くのMVCコントローラーを組み合わせ、多くはSpringの強力なRESTサポートを使用していました。繰り返し行うには多くの時間がかかります。RESTは、いくつかの仮定が行われた場合にこの問題がどれほど簡単になるかを示しています。Dataプロジェクトを使用します。広く受け入れられている業界標準プロトコルを使用します。RESTベースのアプリケーションの基盤を形成します。このセクションでは、会社の従業員を追跡するアプリケーションを作成します。次のように、データ型を作成して開始します。リレーショナルテーブルに格納するためのクラス全体を示すJPAアノテーションです。主キーを記録するためのJPAアノテーションであり、必要に応じて自動的に生成されます。このエンティティは、従業員情報を追跡するために使用されます。この場合、名前と職務説明です。RESTはJPAに限定されません。このチュートリアルでは表示されませんが、多くのNoSQLデータストアをサポートしています。データアクセスを参照してください。RESTアプリケーションのもう1つの重要な部分は、次のような対応するリポジトリ定義です。継承し、ドメインオブジェクトのタイプとそのプライマリキーをプラグインします。実際、最上位で表示されている場合は、インターフェースにアノテーションを付ける必要さえありません。CrudRepositoryを開くと、事前定義されたメソッドのコレクションが見つかります。必要に応じて、独自のリポジトリを定義できます。RESTも同様にサポートしています。デモのプリロードこのアプリケーションを使用するには、次のようにデータを事前にロードする必要があります。アノテーションが付いているため、@SpringBootApplicationによって自動的に取得されます。実装するため、すべてのBeanが作成および登録された後に実行されます。EmployeeRepositoryを取得します。メソッドはコマンドライン引数で呼び出され、データをロードします。Dataの最大かつ最も強力な機能の1つは、JPAクエリを作成できることです。これにより、開発時間が短縮されるだけでなく、バグやエラーのリスクも軽減されます。必要な操作を見つけ出します。これが、空のインターフェースを作成し、既に構築されている保存、検索、および削除操作を継承する方法です。/でリンクのルートコレクションをホストします。UIをホストするため、次のようにルートURIを変更する必要があります。mwethodを作成することです。入力することで起動できます。いずれかを参照してください。ツール)を使用して、コマンドラインで確認できます。次のコマンド(出力とともに表示)は、アプリケーション内のリンクを一覧表示します。ラップされたリンクのコレクションが返されます。利用可能なリンクのコレクションです。インターフェースによって定義された従業員オブジェクトの集約ルートを指します。IANA標準の関係であり、サービス全体に関する検出可能なメタデータを指します。これについては後のセクションで説明します。リンクをナビゲートすることにより、このサービスをさらに掘り下げることができます。次のコマンド(出力とともに表示)はこれを行います。}}この段階では、従業員のコレクション全体を表示しています。属性が含まれています。これは、その特定の従業員の正規リンクです。「文脈の自由」を意味します。/api/orders/1/processorを介して同じユーザーを取得でき、従業員は特定のオーダーの処理に関連付けられています。ここでは、他のエンティティとの関係はありません。リンクはRESTの重要な側面です。これらは、関連アイテムにナビゲートするためのパワーを提供します。これにより、変更が発生するたびに書き直さなくても、他の関係者がAPIをナビゲートできるようになります。クライアントの更新は、クライアントがリソースへのパスをハードコードする場合の一般的な問題です。リソースを再構築すると、コードに大きな混乱が生じる可能性があります。リンクが使用され、ナビゲーションルートが維持される場合、そのような調整を行うことは簡単かつ柔軟になります。必要に応じて、その従業員を表示することもできます。次のコマンド(出力とともに表示)はこれを行います。ラッパーは必要ないことを除いて、ここではほとんど変更はありません。それはすべてうまくいきますが、おそらく新しいエントリを作成するのに苦労しています。次のコマンド(出力とともに表示)はこれを行います。DELETEも使用できます。今のところは、洗練されたUIの構築に進みます。Bootを使用すると、カスタムWebページを簡単に立ち上げることができます。MVCコントローラーが必要です。MVCコントローラーとしてマークします。メソッドにフラグを立てます。Bootの自動構成ビューリゾルバーは、src/main/resources/templates/index.htmlにマッピングします。HTMLテンプレートの定義Thymeleafを使用していますが、その機能の多くは実際には使用しません。開始するには、次のようにインデックスページが必要です。ここで、レンダリングされた出力をプラグインするようにReactに指示します。ファイルがどこから来たのか疑問に思うかもしれません。構築方法は次のセクションで説明します。main.cssを示していませんが、上にリンクされていることがわかります。src/main/resources/staticで見つかったものを自動的に提供します。ファイルを配置します。RESTであるため、チュートリアルには示されていません。JavaScriptモジュールのロードこのセクションには、JavaScriptビットを地面から取り出すための最低限の情報が含まれています。JavaScriptsコマンドラインツールはすべてインストールできますが、インストールする必要はありません。少なくともまだインストールしていません。ビルドファイルに次を追加するだけです。build</id><goals><goal>webpack</goal></goals></execution></executions></plugin>この小さなプラグインは複数の手順を実行します。フォルダーにインストールします。(これにより、バイナリがソース管理下に置かれなくなり、cleanでクリーンアウトできるようになります)。コマンドは、指定された引数(install)でnpmバイナリを実行します。これにより、package.jsonで定義されたモジュールがインストールされます。コマンドはwebpackバイナリを実行し、webpack.config.jsに基づいてすべてのJavaScriptコードをコンパイルします。これらの手順は順番に実行され、本質的にnode.jsをインストールし、JavaScriptモジュールをダウンロードし、JSビットを構築します。ファイルを作成します。}}主な依存関係は次のとおりです。ビルドファイルを定義する必要があります。./src/main/js/app.jsとして定義します。最終バンドルがブラウザーによってロードされたときに何を起動するかを知るために、これを知っている必要があります。ブラウザでJSコードをデバッグしているときに元のソースコードにリンクできるように、ソースマップを作成します。./src/main/resources/static/built/bundle.jsにコンパイルします。JARと同等のJavaScriptです。呼び出しによってプルされたモジュールは、このファイルに詰め込まれます。両方のプリセットを使用して、Babelエンジンに接続します。これらの各JavaScriptツールの動作方法の詳細については、対応するリファレンスドキュメントを参照してください。実行して、webpackを監視モードにします。これらすべての準備が整ったら、Reactビットに焦点を合わせることができます。Reactビットは、DOMのロード後に取得されます。次のように、パーツに分割されます。webpackを使用して物を組み立てているため、先に進み、必要なモジュールをフェッチします。このアプリのビルドに使用されるFacebookのメインライブラリの1つです。このアプリのビルドに使用されるFacebookのメインライブラリの1つです。rest.jsを構成して、HAL、URIテンプレートなどのサポートを含めるカスタムコードです。application/hal+jsonに設定します。ここでコードを読むことができます(GitHub)。コードは表示されません。ソースを自由に確認してください。ポイントは、Restangular(または好きなもの)をプラグインすることができ、概念はまだ適用されます。Reactに飛び込むReactは、コンポーネントの定義に基づいています。多くの場合、1つのコンポーネントは、親子関係で別のコンポーネントの複数のインスタンスを保持できます。この概念は、複数のレイヤーに拡張できます。最初に、すべてのコンポーネントにトップレベルのコンテナーを用意しておくと非常に便利です。(これは、このシリーズ全体でコードを展開するにつれて明らかになります。)現在、従業員リストのみがあります。後で他の関連コンポーネントが必要になる場合があるため、次から始めてください。Reactコンポーネントを作成するメソッドです。ReactがDOMのコンポーネントをレンダリングした後に呼び出されるAPIです。画面上にコンポーネントを「描画」するAPIです。Reactでは、大文字はコンポーネントの命名規則です。データに保存されます。properties.状態は、コンポーネントがそれ自体を処理することが期待されるデータです。変動して変化する可能性のあるデータです。状態を読み取るには、this.stateを使用します。更新するには、this.setState()を使用します。呼び出されるたびに、Reactは状態を更新し、前の状態と新しい状態の間の差分を計算し、ページ上のDOMに一連の変更を挿入します。これにより、UIが迅速かつ効率的に更新されます。一般的な規則は、コンストラクターですべての属性を空にして状態を初期化することです。使用して属性を設定することにより、サーバーからデータを検索します。それ以降は、ユーザーアクションまたはその他のイベントによって更新を実行できます。プロパティには、コンポーネントに渡されるデータが含まれます。プロパティは変更されませんが、代わりに固定値です。これらを設定するには、すぐにわかるように、新しいコンポーネントを作成するときに属性に割り当てます。JavaScriptは、他の言語のようにデータ構造をロックダウンしません。値を割り当ててプロパティを破壊しようとすることはできますが、これはReactの差動エンジンでは機能しないため、避ける必要があります。clientを介してデータをロードします。内の関数を呼び出し、そのHALドキュメント(response.entity._embedded.employees)に基づいて状態を設定します。構造を見て、それがこの構造にどのようにマッピングされるかを参照してください。関数が呼び出されます。Reactコンポーネントの作成に入力パラメーターとして含まれています。次のリストは、EmployeeListの定義を示しています。Reactコンポーネントの配列に変換されます(後ほど説明します)。次のリストを考慮してください。リンクが特定のリソースのキーになります。配列をラップしたHTMLテーブルを返します。{employees}</table>状態、プロパティ、およびHTMLのこのシンプルなレイアウトは、Reactを使用して、シンプルでわかりやすいコンポーネントを宣言的に作成する方法を示しています。使用する必要はありません。Reactは純粋なJavaScriptを使用して作成できますが、JSX構文は非常に簡潔です。Babel.jsの迅速な作業のおかげで、トランスパイラーはJSXとES6の両方のサポートを一度に提供します。断片も含まれています。必要としないようにします。ReactのAPIは、状態とプロパティを組み合わせた優れた宣言型構造を推奨します。Reactは、関連のないJavaScriptとHTMLの束を混合する代わりに、関連する状態とプロパティの小さなビットを備えた単純なコンポーネントを構築することを推奨します。単一のコンポーネントを見て、設計を理解できます。その後、組み合わせてより大きな構造を簡単に作成できます。何であるかを次のように実際に定義する必要があります。(<tr><td>{this.props.employee.firstName}</td><td>{this.props.employee.lastName}</td><td>{this.props.employee.description}</td></tr>)}}このコンポーネントは非常に単純です。従業員の3つのプロパティを囲む1つのHTMLテーブル行があります。this.props.employeeです。JavaScriptオブジェクトを渡すと、サーバーから取得したデータを簡単に渡すことができることに注意してください。このコンポーネントは状態を管理せず、ユーザー入力も処理しないため、他に行うことはありません。詰め込むように誘惑するかもしれません。アプリを小さなコンポーネントに分割し、それぞれが1つのジョブを実行することで、将来機能を構築しやすくなります。最後のステップは、次のように全体をレンダリングすることです。spring-boot:run)を再実行してhttp://localhost:8080にアクセスしてください。次のイメージは、更新されたアプリケーションを示しています。システムによってロードされた最初の従業員を見ることができます。cURLを使用して新しいエントリを作成したことを覚えていますか?次のコマンドを使用して再度実行します。"Content-Type:application/json"ブラウザをリフレッシュすると、新しいエントリが表示されるはずです。これで、Webサイトに両方のリストが表示されます。本セクション:ドメインオブジェクトと対応するリポジトリを定義しました。RESTに本格的なハイパーメディアコントロールを使用してエクスポートさせます。親子関係で2つの単純なReactコンポーネントを作成しました。サーバーデータを取得し、単純な静的HTML構造としてレンダリングしました。課題?Webページは動的ではありませんでした。新しいレコードを取得するには、ブラウザをリフレッシュする必要がありました。Webページは、ハイパーメディアコントロールまたはメタデータを使用しませんでした。代わりに、/api/employeesからデータをフェッチするためにハードコードされました。cURLを使用してレコードを変更できますが、Webページにはインタラクティブ機能はありません。次のセクションでこれらの欠点に対処します。RESTを使用して従業員データを保存するバックエンド給与サービスを作成する方法を見つけました。欠落していた主な機能は、ハイパーメディアコントロールとリンクによるナビゲーションを使用することでした。代わりに、データを見つけるためにパスをハードコードしました。自由に入手して、フォローしてください。このセクションは、前のセクションのアプリケーションに基づいており、追加のものが追加されています。APIと呼んでいる人々の数にイライラしています。