Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その６ )( 検索/一覧画面 ( MyBatis-Spring版 ) 作成 )
概要
Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その５ )( Controllerクラス＋Thymeleafテンプレートファイル作成 ) の続きです。
- 今回の手順で確認できるのは以下の内容です。
- 検索/一覧画面 ( MyBatis-Spring版 ) の作成、確認
- まずは検索条件の入力→一覧表示を単に実装します。ページネーションは実装しません。
- これまでは Git/GitHub や IntelliJ IDEA の使い方についても詳細を記載していましたが、今回から省略していきます。
ソフトウェア一覧
参考にしたサイト
5.5. 入力チェック — TERASOLUNA Global Framework Development Guideline 1.0.1.RELEASE documentation
http://terasolunaorg.github.io/guideline/1.0.1.RELEASE/ja/ArchitectureInDetail/Validation.htmlMyBatis-Spring
http://mybatis.github.io/spring/ja/spring boot '1.1.6' project. to '1.2.0.RC1' : Cannot subclass final class class com.sun.proxy.$Proxy88
https://github.com/spring-projects/spring-boot/issues/1929- 別に作成していた GitHub 内の Repository でこの Issue へのリンクを自分の Isuue に書いていたら、相手の Issue に自分の Issue 名 ( 日本語 ) が表示されていました。うかつにリンクは貼れないですね。知りませんでした。Issue は削除できないので、あわてて Repository を削除しましたよ。。。
手順
1.0.x-makecountrylist ブランチの作成
- IntelliJ IDEA 上で 1.0.x-makecountrylist ブランチを作成します。
Form クラスの作成、Controller クラスの修正
画面からの入力項目を格納する Form クラスを作成し、画面からの値を受け取れるよう Controller クラスのメソッドの引数に設定します。Bean Validation も試しています ( 単に試してみたかっただけであまり意味はありませんが )。
src/main/java/ksbysample/webapp/basic/web の下に CountryListForm.java を作成します。作成後、リンク先の内容に変更します。
src/main/java/ksbysample/webapp/basic/web の下の CountryListController.java の内容を リンク先のその１の内容に変更します。
src/main/resources/templates の下の countryList.html の内容を リンク先のその１の内容に変更します。
Bean Validation のエラーメッセージを定義するファイルを作成します。IntelliJ IDEA ではデフォルトで native2ascii が無効になっていますので有効にします。メイン画面のメニューから「File」->「Settings...」を選択します。
「Settings」ダイアログが表示されます。画面左側で「Editor」->「File Encodings」を選択後、画面右側の下部に表示される「Transparent native-to-ascii conversion」をチェックして「OK」ボタンをクリックします。
src/main/resources の下に ValidationMessages_ja_JP.properties を作成します。作成後、リンク先の内容に変更します。
Gradle tasks View から bootRun を実行してから、検索条件入力→検索ボタンクリックしてみると、以下の画像のようにエラーメッセージが表示されます。Ctrl+F2 を押して Tomcat を停止します。
- ここではエラーメッセージが出ることを確認するために input タグの maxlength 属性を一旦削除して動作確認しています。
Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL が表示されることを確認します。
commit します。
「Code Analysis」ダイアログが表示されますので、「Review」ボタンをクリックします。
ValidationMessages_ja_JP.properties で Unused property という Warning が出力されています。使用していることを正しく検知できていないようなので、設定を無効にします。メイン画面のメニューから「File」->「Settings...」を選択します。
「Settings」ダイアログが表示されます。画面左側で「Editor」->「Inspections」を選択後、画面右側の検索文字列の入力フィールドに "Unused property" と入力した後、リストに表示される「Unused Property」のチェックを外して「OK」ボタンをクリックします。
「Code Analysis」にはあと "Attribute th:... is not allowed here" の Warning が表示されていますので、エディタ上で 「Add th:... to custom html attributes」 を選択して追加して解消します。
再度 commit します。今度は「Code Analysis」ダイアログが出ずに commit されます。
ApplicationConfig.java への Bean の追加
- MyBatsi3 のための SqlSessionFactory を返す Bean を定義します。src/main/java/ksbysample/webapp/basic/config の下の ApplicationConfig.java をエディタで開き、リンク先の内容に変更します。
Entity クラスの作成
src/main/java/ksbysample/webapp/basic/domain の下に Country.java を作成します。作成後、リンク先の内容に変更します。
- できれば自動生成させたかったのですが、方法が分かりませんでした。。。
MyBatis3 のマッピングファイル、Mapper クラスの作成
src/main/resources の下に ksbysample/webapp/basic/service ディレクトリを作成し、その下に CountryMapper.xml を作成します。
※以前 Eclipse で Spring Boot を試していた時は src/main/java/ksbysample/webapp/basic/service の下に CountryMapper.xml と CountryMapper.java を一緒に置いておけばきちんと認識してくればのですが、今回試したら
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): ksbysample.webapp.basic.service.CountryMapper.selectCountryのエラーが出て認識してくれませんでした。jar ファイルを作成した時も CountryMapper.xml が jar ファイル内に出力されませんでした。resources ディレクトリの下に配置すると正常に動作する＆jar ファイルにも出力してくれたので、こうしています。Project View で src/main/resources を選択した後コンテキストメニューを表示し、「New」->「Directory」を選択します。「New Directory」ダイアログが表示されたら ksbysample/webapp/basic/service と入力した後「OK」ボタンをクリックします。"/" 区切りで入力すると複数階層のディレクトリを一気に作成してくれます。
src/main/resources/ksby/sample/webapp/basic/service の下にCountryMapper.xml を作成後、リンク先の内容に変更します。
src/main/java/ksbysample/webapp/basic/service の下に CountryMapper.java を作成します ( CountryMapper.java はクラスではなくインターフェースです )。作成後、リンク先の内容に変更します。
Service クラスの作成
src/main/java/ksbysample/webapp/basic/service の下に CountryService.java を作成します。作成後、リンク先の内容に変更します。
Gradle tasks View から bootRun タスクを実行し、Started Application のログが表示されることを確認します。確認後、Ctrl+F2 を押して Tomcat を停止します。
Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL が表示されることを確認します。
ここで一旦 commit します。commit時に「Code Analysis」ダイアログが表示されますが、「Review」ボタンをクリックして内容を確認したところ全て問題ない内容でしたので「Commit」ボタンをクリックして commit します。
Controller クラス及び Thymeleaf テンプレートファイルの修正
src/main/java/ksbysample/webapp/basic/web の下の CountryListController.java をエディタで開き、リンク先のその２の内容に変更します。
src/main/resources/templates の下の countryList.html をエディタで開き、リンク先のその２の内容に変更します。
動作確認
Gradle tasks View から bootRun タスクを実行します。
ブラウザで http://localhost:8080/countryList にアクセスして検索/一覧画面を表示した後、検索条件を入力して「検索」ボタンを押したらマッチする country テーブルのデータが表示されることを確認します。確認後、Ctrl+F2 を押して Tomcat を停止します。
Gradle tasks View から build タスクを実行し BUILD SUCCESSFUL が表示されることを確認しますが、BUILD SUCCESSFUL が出るまで 5分程度かかったため原因を調査します。
Project View の一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し「Run 'Tests in 'ksbysample...' with Coverage」を選択してテストを実行すると、ログに
Access to DialectResolutionInfo cannot be null when 'hibernate.dialect' not setと出力されたので、application-develop.properties, application-product.properties をエディタで開き、リンク先の内容を追加します。再度「Run 'Tests in 'ksbysample...' with Coverage」を実行しますが、ログに
Please provide a logging library and configure a valid spyLogDelegator name in the properties file.と出力されました。メイン画面のメニューから「Run」->「Edit Configurations...」を選択して「Run/Debug Configurations」ダイアログを表示した後、画面左側で「Defaults」->「JUnit」を選択し、画面右側の「VM options」に-Dlog4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegatorを追加して「OK」ボタンをクリックします。再度「Run 'Tests in 'ksbysample...' with Coverage」を実行すると、Run View に All Tests Passed の文字が表示されます。ただし時間がかかる点が変わらないので引き続き調査します。
いろいろ試してとりあえず分かったことは以下のことでした。解決策がわからないので一旦後に回します。
- テストクラスで
andExpect(status().isOk())だけであれば時間はかからない。 - その後の
.andExpect(content().contentType("text/html;charset=UTF-8"))以降を書くと時間がかかるようになる。 - CountryControllerTest クラスのテストメソッドが testInput, testConfirm, testUpdate, testComplete の４つに分かれているのを１つにまとめてみても、時間がかかる点は変わらない。
- setUp メソッド内で
MockMvcBuilders.webAppContextSetup(this.context).build();ではなくMockMvcBuilders.standaloneSetup(new CountryController()).build();と書けば早くなると書いている Webサイトを見かけたが、試してみたらエラーになる点は変わらず (java.lang.AssertionError: Content type not setやorg.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 途中でファイルの末尾に達しました。(.andExpect(content().contentType("text/html;charset=UTF-8"))をコメントアウトした場合 ) のエラーメッセージが出る )。 - Spring Boot で Thymeleaf を使用する Controller のテストをする場合、HTML の内容確認はせずに Model にセットされた値のチェックだけした方がよいのではないかと思いましたが、調査に時間を取られ過ぎたので一旦保留にします。
- テストクラスで
commit します。commit時に「Code Analysis」ダイアログが表示されますので、「Review」ボタンをクリックします。
「Code Analysis」に "Attribute th:... is not allowed here" の Warning が表示されていますので、エディタ上で 「Add th:... to custom html attributes」 を選択して追加して解消します。ApplicationConfig.java に Warning が表示されますが、そちらは無視します。
再度 commit します。「Code Analysis」ダイアログが出たら「Commit」ボタンをクリックします。
GitHub へ Push、1.0.x-makecountrylist -> 1.0.x へ Pull Request、1.0.x でマージ、1.0.x-makecountrylist ブランチを削除
git rebase -i HEAD~4 で commit を１つにします。
git commit --amend でコミットメッセージを変更します。
GitHub で Pull Request を作成します。
IntelliJ IDEA で 1.0.x へ切り替えた後、1.0.x-makecountrylist を merge します。
GitHub へ Push します。
ローカル及び GitHub の 1.0.x-makecountrylist を削除します。
ソースコード
CountryListForm.java
package ksbysample.webapp.basic.web; import lombok.Data; import javax.validation.constraints.Pattern; import javax.validation.constraints.Size; @Data public class CountryListForm { @Size(max = 3, message = "{error.size.max}") private String code; @Size(max = 52, message = "{error.size.max}") private String name; @Pattern(regexp = "^(|Asia|Europe|North America|Africa|Oceania|Antarctica|South America)$", message = "{countryListForm.continent.pattern}") private String continent; @Size(max = 45, message = "{error.size.max}") private String localName; }
CountryListController.java
■その１
@RequestMapping public String index(@Validated CountryListForm countryListForm , BindingResult bindingResult , Model model) { if (bindingResult.hasErrors()) { return "countryList"; } return "countryList"; }
- index メソッドの引数に countryListForm, bindingResult, model を追加します。
- countryListForm の Bean Validation でエラーが発生した場合には検索/一覧画面を表示する処理を追加します。
■その２
@Controller @RequestMapping("/countryList") public class CountryListController { @Autowired private CountryService countryService; @RequestMapping public String index(@Validated CountryListForm countryListForm , BindingResult bindingResult , Model model) { if (bindingResult.hasErrors()) { return "countryList"; } List<Country> countryList = countryService.findCountry(countryListForm); model.addAttribute("countryList", countryList); return "countryList"; } }
- countryService を @Autowired する部分と、countryService を使用して country テーブルを検索する return の前の２行を追加します。
countryList.html
■その１
<form method="post" action="/countryList" th:action="@{/countryList}" th:object="${countryListForm}" class="form-horizontal"> <div class="form-group" th:classappend="${#fields.hasErrors('*{code}')} ? 'has-error' : ''"> <label for="code" class="control-label col-sm-2">Code</label> <div class="col-sm-10"> <div class="row"><div class="col-sm-2"><input type="text" name="code" id="code" maxlength="3" class="form-control input-sm" th:field="*{code}"/></div></div> <div class="row" th:if="${#fields.hasErrors('*{code}')}"><div class="col-sm-10"><p class="form-control-static text-danger"><small th:errors="*{code}"></small></p></div></div> </div> </div> <div class="form-group" th:classappend="${#fields.hasErrors('*{name}')} ? 'has-error' : ''"> <label for="name" class="control-label col-sm-2">Name</label> <div class="col-sm-10"> <div class="row"><div class="col-sm-6"><input type="text" name="name" id="name" maxlength="52" class="form-control input-sm" th:field="*{name}"/></div></div> <div class="row" th:if="${#fields.hasErrors('*{name}')}"><div class="col-sm-10"><p class="form-control-static text-danger"><small th:errors="*{name}"></small></p></div></div> </div> </div> <div class="form-group" th:classappend="${#fields.hasErrors('*{continent}')} ? 'has-error' : ''"> <label for="continent" class="control-label col-sm-2">Continent</label> <div class="col-sm-10"> <div class="row"><div class="col-sm-3"><input type="text" name="continent" id="continent" class="form-control input-sm" th:field="*{continent}"/></div></div> <div class="row" th:if="${#fields.hasErrors('*{continent}')}"><div class="col-sm-10"><p class="form-control-static text-danger"><small th:errors="*{continent}"></small></p></div></div> </div> </div> <div class="form-group" th:classappend="${#fields.hasErrors('*{localName}')} ? 'has-error' : ''"> <label for="localName" class="control-label col-sm-2">LocalName</label> <div class="col-sm-10"> <div class="row"><div class="col-sm-5"><input type="text" name="localName" id="localName" maxlength="45" class="form-control input-sm" th:field="*{localName}"/></div></div> <div class="row" th:if="${#fields.hasErrors('*{localName}')}"><div class="col-sm-10"><p class="form-control-static text-danger"><small th:errors="*{localName}"></small></p></div></div> </div> </div> <div class="text-center"> <button type="submit" value="検索" class="btn btn-primary">検索</button> <button type="reset" value="クリア" class="btn btn-default">クリア</button> </div> </form>
- 検索条件の入力フォームを上記のように変更します。
- formタグに th:action, th:object 属性を追加します。
- 各
<div class="form-group"に th:classappend を追加します。 - エラー発生時は各入力フィールドの下にエラーメッセージを表示させるようにするために、input タグ周りを大きく変更しています。また input タグに maxlength 属性を追加しています(Bean Validation によるエラーチェック発生時の動作を見たい場合には maxlength を削除して下さい)。
■その２
<table class="table table-condensed table-bordered table-striped"> <tr class="info"> <th>Code</th> <th>Name</th> <th>Continent</th> <th>LocalName</th> </tr> <tr th:each="country : ${countryList}"> <td th:text="${country.code}">ABW</td> <td th:text="${country.name}">Aruba</td> <td th:text="${country.continent}">North America</td> <td th:text="${country.localName}">Aruba</td> </tr> </table>
th:each="country : ${countryList}"とその下の th:text の部分を追加します。
ValidationMessages_ja_JP.properties
error.size.max = {max}文字以内で入力して下さい。
countryListForm.continent.pattern = Asia, Europe, North America, Africa, Oceania, Antarctica, South America のいずれかの文字列を入力して下さい。
ApplicationConfig.java
package ksbysample.webapp.basic.config; import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.autoconfigure.jdbc.DataSourceBuilder; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import javax.sql.DataSource; @Configuration @MapperScan("ksbysample.webapp") public class ApplicationConfig { @Bean @ConfigurationProperties("spring.datasource") public DataSource dataSource() { return DataSourceBuilder.create().build(); } @Bean public SqlSessionFactory sqlSessionFactory() throws Exception { SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean(); sqlSessionFactoryBean.setDataSource(dataSource()); sqlSessionFactoryBean.setTypeAliasesPackage("ksbysample.webapp"); return sqlSessionFactoryBean.getObject(); } }
@Configurationの下に@MapperScan("ksbysample.webapp")を追加します。@MapperScan で定義したパッケージの下にあるマッピングファイルが自動的にスキャンされるようになります。- sqlSessionFactory Bean を追加します。
Country.java
package ksbysample.webapp.basic.domain; import lombok.Data; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import java.math.BigDecimal; @Entity @Data public class Country { @Id @Column(nullable = false) private String code; @Column(nullable = false) private String name; @Column(nullable = false) private String continent; @Column(nullable = false) private String region; @Column(nullable = false, precision = 8, scale = 2) private BigDecimal surfaceArea; private Long indepYear; @Column(nullable = false) private Long population; @Column(precision = 2, scale = 1) private BigDecimal lifeExpectancy; @Column(precision = 8, scale = 2) private BigDecimal gNP; @Column(precision = 8, scale = 2) private BigDecimal gNPOld; @Column(nullable = false) private String localName; @Column(nullable = false) private String governmentForm; @Column(nullable = false) private String headOfState; private Long capital; @Column(nullable = false) private String code2; }
CountryMapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="ksbysample.webapp.basic.service.CountryMapper"> <select id="selectCountry" parameterType="countryListForm" resultType="Country"> select co.Code , co.Name , co.Continent , co.Region , co.SurfaceArea , co.IndepYear , co.Population , co.LifeExpectancy , co.GNP , co.GNPOld , co.LocalName , co.GovernmentForm , co.HeadOfState , co.Capital , co.Code2 from country co <where> <if test="countryListForm.code != null and countryListForm.code != ''"> co.Code like '%${countryListForm.code}%' </if> <if test="countryListForm.name != null and countryListForm.name != ''"> and co.Name like '%${countryListForm.name}%' </if> <if test="countryListForm.continent != null and countryListForm.continent != ''"> and co.Continent like '%${countryListForm.continent}%' </if> <if test="countryListForm.localName != null and countryListForm.localName != ''"> and co.LocalName like '%${countryListForm.localName}%' </if> </where> order by co.Code </select> </mapper>
CountryMapper.java
package ksbysample.webapp.basic.service; import ksbysample.webapp.basic.domain.Country; import ksbysample.webapp.basic.web.CountryListForm; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Service; import java.util.List; @Service public interface CountryMapper { public List<Country> selectCountry(@Param("countryListForm") CountryListForm countryListForm); }
CountryService.java
package ksbysample.webapp.basic.service; import ksbysample.webapp.basic.domain.Country; import ksbysample.webapp.basic.web.CountryListForm; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class CountryService { @Autowired private CountryMapper countryMapper; public List<Country> findCountry(CountryListForm countryListForm) { return countryMapper.selectCountry(countryListForm); } }
application-develop.properties, application-product.properties
hibernate.dialect = org.hibernate.dialect.MySQLDialect
履歴
2015/01/19
初版発行。
