SpringBoot

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(2)【サーバサイド〜SpringBoot起動まで】

更新日:

前回、SpringBootプロジェクトの雛形作成とデータベース作成まで実施しましたので、今回はWebアプリ制作に取り掛かります。

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(1)【環境構築】

 

イメージ

正確では無いかもしれませんが、倉庫から品出して店頭に並べることをイメージします。

Controllerは司令塔であり、裏方であるServiceに対し必要な品を要求します。「A店に納品よろしく」くらいのイメージです。

Serviceは司令塔の指示に従い倉庫番であるMapperに対して具体的に指示(「quesiton社のID:2の品をよろしく」みたいな)を出します。MapperはMyBatisというツールを利用して倉庫からquestion社のID:2の品を探してきてServiceが扱える荷車(Entity)にquestion社の指定の品を納品します。ControllerはServiceから受け取った品を前線であるHTMLに渡します。HTMLはThymeleafというテンプレートエンジンを使って、品を店頭に並べます。ここで店頭に並べることがWebページにデータを表示することを表します。

パッケージ作成

まずsrc/main/java/com.example.demo配下に以下のパッケージを作成します。

com.example.demoを右クリック>新規>パッケージから作成できます。

クラス雛形作成

上図の構成となるようクラスファイルを作成します。

クラスファイルにJavaソースコードを入力していきます。

 

MyBatis用XML作成

MyBatisを用いてデータベースにアクセスするためのXMLファイルを作成します。

QuestionMapper.javaを配置したsrc/main/java/com/example/demo/repositoryに対応するresourceフォルダ

src/main/resource/com/example/demo/repositoryにQuestionMapper.xmlという名前のファイルを作成します。

 

Mapper作成

マッパーはマッピングするものということで、MyBatisによるデータベースとWebアプリ内のオブジェクトのマッピングを行います。

上記で作成したQuestionMapper.xmlのid名とQuestionMapper.javaのメソッド名を一致させています。

これによりWebアプリ内でメソッドを呼び出すことでデータベースからデータを取得することができます。

 

 

Entity作成

先のMapperによりデータベースから取得したデータをWebアプリ内で取り扱うための箱であるEntityを作成します。

Service作成

次にControllerからの処理を行う窓口であるインターフェースを作成します。

インターフェースは窓口でしかないので、処理の中身をQuestionServiceImpl.javaに記載します。

Controller作成

サーバーサイドの仕上げとしてQuestionController.javaを作成します。 

Controllerは順を追って説明します。

 

サーバサイドのトップページ処理


ブラウザからlocalhost:8085/questionでアクセスした際に行う処理となります。

questionテーブルに登録されている問題数を取得して、index.htmlに送っています。

フロントエンドのトップページ処理


フロントエンドのindex.htmlをsrc/main/java/resources/template直下に作成します。

 

SpringBootアプリケーション起動

ここで、SpringBootアプリケーションを起動してみます。

Eclipseのプロジェクトを右クリック>実行>SpringBootアプリケーションから起動します。

コンソール画面に下図のような出力が現れ、Started QuestionSampleApplicationとなれば無事に起動しています。

ブラウザにlocalhost:8085/questionと打ち込んでみます。

以下の画面となれば成功です。

長くなりましたので今回はここまでとして、次回は仕上げに入ります。

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(3)【Controller,フロントエンド作成】

-SpringBoot
-, , , ,

Copyright© ITエンジニアへの転身 , 2021 All Rights Reserved Powered by STINGER.