Spring Boot Ajax/JavaScript/API連携

Spring BootのWEB画面上でREST APIを利用してみた

今回は、クライアント側/サーバー側で2つのSpring Bootプロジェクトを作成し、クライアント側からサーバー側へ、RESTと呼ばれる設計原則に従ったAPI接続をすることで、サーバー側の情報を取得しクライアント側の画面に表示するサンプルプログラムを作成してみたので、共有する。

REST APIについては、以下のサイトを参照のこと。
https://qiita.com/masato44gm/items/dffb8281536ad321fb08

前提条件

下記記事のSpring Boot WEBプロジェクトの作成が完了していること。

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...

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

なお、IntelliJ IDEAにおいて、複数のプロジェクトを同時に開く方法については、以下の記事を参照のこと。

IntelliJ IDEA上で新しいプロジェクトを開いてみた今回は、IntelliJ IDEAにおいて、複数のプロジェクトを同時に開いてみたので、その手順を共有する。 前提条件 下記記事に...

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

作成したサーバー側(demo_server)サンプルプログラムの構成は以下の通り。
サーバー側のプログラム構成

build.gradleの内容は以下の通り。

また、application.ymlの内容は以下の通りで、ポート番号:8085 で起動する設定とし、DB接続情報も定義している。

また、user_dataテーブルにアクセスする仕組みは、以下の「UserData.java」と「UserDataRepository.java」で定義している。

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

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

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

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

作成したクライアント側(demo)サンプルプログラムの構成は以下の通り。
クライアント側のプログラム構成

build.gradleの内容は以下の通り。

また、application.ymlの内容は以下の通りで、ポート番号:8084 で起動する設定となっている。

さらに、REST API接続するために、RestTemplateを利用するため、以下のConfigクラス内で、RestTemplateのBeanクラスを定義している。

また、サーバーから取得するユーザーデータは、以下のクラスで定義している。項目値はサーバー側と同じ内容になっている。

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

RestTemplateを利用して、サーバー側のURL「http://localhost:8085/getUserData」にアクセスし、ユーザーデータ(UserData)オブジェクトを取得している。その後、取得したユーザーデータをデコードし、Modelオブジェクトに設定した上で、index.htmlに遷移する仕組みになっている。

また、index.htmlの内容は以下の通りで、初期表示画面を定義し、ユーザーデータ(UserData)を画面上に表示している。

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

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

要点まとめ

  • APIを利用してサーバー側のURLにアクセスする動作を確認するには、クライアント側/サーバー側それぞれでSpring Bootプロジェクトを作成し、クライアント側/サーバー側両方のSpring Bootアプリケーションを起動する。
  • API接続を行って、UserDataオブジェクトのJSON文字列からUserDataオブジェクトを取得するには、RestTemplateクラスのgetForObjectメソッドを利用し、第一引数にURL、第二引数にUserDataのクラスオブジェクトを指定すればよい。