概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その１２ )( HTML を Thymeleaf テンプレートファイルにする + Controller クラスを作成する ) の続きです。

今回の手順で確認できるのは以下の内容です。
- 前回からの続きです。今回は確認画面、完了画面の Thymeleaf テンプレートファイルと Controller クラスを実装します。

参照したサイト・書籍

手順

確認画面の Controller クラスを作成する

src/main/java/ksbysample/webapp/bootnpmgeb/web/inquiry の下に InquiryConfirmController.java を新規作成し、以下の内容を記述します。

package ksbysample.webapp.bootnpmgeb.web.inquiry;

import ksbysample.webapp.bootnpmgeb.constants.UrlConst;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.util.UriComponentsBuilder;

/**
 * 確認画面用 Controller クラス
 */
@Controller
@RequestMapping("/inquiry/confirm")
public class InquiryConfirmController {

    private static final String TEMPLATE_BASE = "web/inquiry";
    private static final String TEMPLATE_CONFIRM = TEMPLATE_BASE + "/confirm";

    /**
     * 確認画面　初期表示処理
     *
     * @return 確認画面の Thymeleaf テンプレートファイルのパス
     */
    @GetMapping
    public String index() {
        return TEMPLATE_CONFIRM;
    }

    /**
     * 確認画面　「送信する」ボタンクリック時の処理
     *
     * @return 完了画面の URL
     */
    @PostMapping("/send")
    public String send(UriComponentsBuilder builder) {
        return UrlBasedViewResolver.REDIRECT_URL_PREFIX
                + builder.path(UrlConst.URL_INQUIRY_COMPLETE).toUriString();
    }

}

完了画面の Controller クラスを作成する

src/main/java/ksbysample/webapp/bootnpmgeb/web/inquiry の下に InquiryCompleteController.java を新規作成し、以下の内容を記述します。

package ksbysample.webapp.bootnpmgeb.web.inquiry;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 完了画面用 Controller クラス
 */
@Controller
@RequestMapping("/inquiry/complete")
public class InquiryCompleteController {

    private static final String TEMPLATE_BASE = "web/inquiry";
    private static final String TEMPLATE_COMPLETE = TEMPLATE_BASE + "/complete";

    /**
     * 完了画面　初期表示処理
     *
     * @return 完了画面の Thymeleaf テンプレートファイルのパス
     */
    @GetMapping
    public String index() {
        return TEMPLATE_COMPLETE;
    }

}

Thymeleaf テンプレートファイルを変更する

完了画面は js ファイルを作成する必要がなかったので、以下の点を変更します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{web/common/fragments :: common_header(~{::title}, ~{::link}, ~{::style})}">
  <title>入力フォーム - 完了画面</title>
</head>

<body class="skin-blue layout-top-nav">
<div class="wrapper">

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        完了画面
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="text-center">
            <p>お問い合わせありがとうございました。</p>
            <a href="/inquiry/input/01/"><button class="btn bg-green"><i class="fa fa-reply"></i>　入力画面へ</button></a>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

</body>
</html>

「入力画面へ」ボタンのリンクを <a href="/inquiry/input01.html"> → <a href="/inquiry/input/01/"> へ変更します。
<script src="/js/inquiry/complete.js"></script> を削除します。

画面遷移用の js ファイルを実装する

webpack.config.js を以下のように変更します。

module.exports = {
    entry: {
        "js/app": ["./src/main/assets/js/app.js"],
        "js/inquiry/input01": ["./src/main/assets/js/inquiry/input01.js"],
        "js/inquiry/input02": ["./src/main/assets/js/inquiry/input02.js"],
        "js/inquiry/input03": ["./src/main/assets/js/inquiry/input03.js"],
        "js/inquiry/confirm": ["./src/main/assets/js/inquiry/confirm.js"]
    },
    output: {
        path: __dirname + "/src/main/resources/static",
        publicPath: "/",
        filename: "[name].js"
    }
};

"js/inquiry/confirm": ["./src/main/assets/js/inquiry/confirm.js"] を追加します。

js ファイル実装前に npm run server コマンドを実行します。起動していた場合には一旦終了させてから実行し直します。

src/main/assets/js/inquiry の下に confirm.js を新規作成し、以下の内容を記述します。

var $ = require("admin-lte/plugins/jQuery/jquery-2.2.3.min.js");

$(document).ready(function () {
    $(".js-btn-input01").on("click", function (event) {
        location.href = "/inquiry/input/01/";
        return false;
    });

    $(".js-btn-input02").on("click", function (event) {
        location.href = "/inquiry/input/02/";
        return false;
    });

    $(".js-btn-input03").on("click", function (event) {
        location.href = "/inquiry/input/03/";
        return false;
    });

    $(".js-btn-send").on("click", function (event) {
        $("#confirmForm").attr("action", "/inquiry/confirm/send/");
        $("#confirmForm").submit();
        return false;
    });
});

動作確認

Tomcat を起動します。

ブラウザを起動し http://localhost:8080/inquiry/input/03/ にアクセスして入力画面３を表示します。

f:id:ksby:20170811133503p:plain

「確認画面へ」ボタンをクリックすると確認画面へ遷移します。アドレスバーに表示される URL は http://localhost:8080/inquiry/confirm/ に変わっています。

f:id:ksby:20170811133748p:plain

「送信する」ボタンをクリックすると完了画面へ遷移します。アドレスバーに表示される URL は http://localhost:8080/inquiry/complete/ に変わっています。

f:id:ksby:20170811133943p:plain

「入力画面へ」ボタンをクリックすると入力画面１へ遷移すること、確認画面で「修正する」ボタンをクリックすると入力画面１～３の画面へ遷移することも確認できました。

npm run server コマンド、Tomcat を停止します。

次回は。。。

browser-sync の自動リロードような利便性を Tomcat で起動した時にも欲しいなあと思いました。browser-sync の proxy 機能を利用して browser-sync –> Tomcat 連携することで自動リロードできないか試してみます。
その後で Flyway によるテーブル作成処理を実装します。

履歴

2017/08/11
初版発行。
2017/08/13
* DB のマイグレーションツールを Liquibase → Flyway に変更しました。
2017/09/02
<html xmlns:th="http://www.w3.org/1999/xhtml"> と間違えて記述していた箇所があったので <html xmlns:th="http://www.thymeleaf.org"> へ修正した。