かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

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

概要

記事一覧はこちらです。

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

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

参照したサイト・書籍

目次

  1. 確認画面の Controller クラスを作成する
  2. 完了画面の Controller クラスを作成する
  3. Thymeleaf テンプレートファイルを変更する
  4. 画面遷移用の js ファイルを実装する
  5. 動作確認
  6. 次回は。。。

手順

確認画面の 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.w3.org/1999/xhtml">
<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/ にアクセスして入力画面3を表示します。

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

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

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

次回は。。。

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

履歴

2017/08/11
初版発行。
2017/08/13
* DB のマイグレーションツールを Liquibase → Flyway に変更しました。