Spring Boot Ajax/JavaScript/API連携

Spring BootのWEB画面上でREST APIを使ってリストを取得してみた

前回は、クライアント側からサーバー側で、REST API接続によりユーザーデータを取得しクライアント側の画面に表示していたが、今回は、REST API接続によりユーザーデータのリストを取得しクライアント側の画面に表示するサンプルプログラムを作成してみたので、共有する。

前提条件

下記記事のREST API接続するサンプルプログラムの作成が完了していること。

Spring BootのWEB画面上でREST APIを利用してみた今回は、クライアント側/サーバー側で2つのSpring Bootプロジェクトを作成し、クライアント側からサーバー側へ、RESTと呼ばれる...

また、Oracle上でuser_dataテーブルを作成し、以下のデータが作成できていること。

サーバー側のプログラムの作成と実行

作成したサーバー側(demo_server)サンプルプログラムの構成は以下の通り。
サンプルプログラムの構成_サーバー側
なお、上記の赤枠は、前提条件のプログラムから変更したプログラムである。

コントローラクラスの内容は以下の通りで、ユーザーデータリストを取得し、性別を表示用(男,女)に変換し、エンコードするメソッド(getUserDataList)を用意している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-rest-api-list/demo_server

上記プログラムを作成し、Spring Bootアプリケーションを起動し、「http://localhost:8085/getUserDataList」にアクセスした結果は以下の通り。
サンプルプログラムの実行結果_サーバー側
文字エンコードを実施しているため、日本語の文字はエンコードされているが、user_dataテーブルの全データがJSON形式で表示されることが確認できる。

クライアント側のプログラムの作成と実行

作成したクライアント側(demo)サンプルプログラムの構成は以下の通り。
サンプルプログラムの構成_クライアント側
なお、上記の赤枠は、前提条件のプログラムから変更したプログラムである。

コントローラクラスの内容は以下の通り。

また、index.htmlの内容は以下の通りで、初期表示画面を定義し、user_dataテーブルの全データの値を画面上に表示している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-rest-api-list/demo

サーバー・クライアント両方のSpring Bootアプリケーションを起動し、「http:// (ホスト名):8084」とアクセスすると、以下の画面が表示されることが確認できる。
サンプルプログラムの実行結果_クライアント側

なお、本サンプルプログラムでは@Controllerアノテーションと@ResponseBodyアノテーションを併用しているが、Spring 4.0以降では、代わりに@RestControllerアノテーションを利用することができる。その内容は、以下のサイトを参照のこと。
https://www.codeflow.site/ja/article/spring-controller-vs-restcontroller

要点まとめ

  • API接続を行って、リストのJSON文字列からUserDataオブジェクトを取得するには、RestTemplateクラスのexchangeメソッドを利用し、第一引数にURL、第二引数にHttpMethod.GET、第四引数にリスト型のParameterizedTypeReferenceクラスのインスタンスを指定すればよい。