Spring Boot＋Thymeleaf 画面とコントローラを作成してフォーム入力内容の送信と表示｜STS4

Eclipse Spring


ここでは、
画面とコントローラを作成します。画面のフォームに入力した内容を送信して、別の画面に表示する方法を紹介します。

開発環境


・Windows10 64bit

・Eclipse 2018-12（Eclipse 4.10）

・Java 8

・Spring Boot 2.1.3（Spring Tool Suite 4）

※下記の記事で構築した開発環境を利用

Spring Tool Suite 4の開発環境構築（Eclipseにインストール）｜STS4

・Thymeleaf（テンプレートエンジン）

プロジェクトを作成

ここでは、プロジェクトを作成します。

まずは、「ファイル」>「新規」>「その他」を選択します。「ウィザードを選択」画面で、「Spring スターター・プロジェクト」を選択して、「次へ」ボタンをクリックします。


次に、「新規Spring スターター・プロジェクト」画面で、プロジェクトの名前「demo」を入力して、「次へ」ボタンをクリックします。「新規Spring スターター・プロジェクト依存関係」画面で、「Web」と「Thymeleaf」にチェックして、「次へ」ボタンをクリックして、表示された画面で「完了」ボタンをクリックします。




これで、プロジェクトの作成は完了です。

実装方法


ここでは、コントローラとビューを作成します。

コントローラを作成

プロジェクト・エクスプローラーの「com.example.demo」配下にコントローラを作成します。

・コントローラクラス
DemoController.java

まず、「com.example.demo」を右クリックして、「新規」>「クラス」を選択します。「新規Javaクラス」画面で、クラスの名前「DemoController」を入力して、「完了」ボタンをクリックします。



次に、作成した「DemoController.java」を以下の内容に編集します。

・ソースコード
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class DemoController {
    
    @GetMapping({"/", "/index"})
    public String index() {
        return "index";
    }
    
    @PostMapping("/result")
    public ModelAndView result(@RequestParam("demoText")String demoText, ModelAndView mv) {
        
        mv.setViewName("result");
        mv.addObject("demoText", demoText);
        
        return mv;
    }

}




これで、コントローラの作成は完了です。

ビューを作成

プロジェクト・エクスプローラーの「templates」配下にビューを作成します。

・送信画面
index.html

・表示画面
result.html


まず、「templates」を右クリックして、「新規」>「その他」を選択します。「ウィザードを選択」画面で、「HTMLファイル」を選択して、「次へ」ボタンをクリックします。「新規HTMLファイル」画面で、ファイル名「index.html」を入力して、「完了」ボタンをクリックします。同様に、「result.html」を作成します。




次に、作成したHTMLファイルを以下の内容に編集します。

ソースコード（index.html）
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>index page</title>
</head>
<body>
  <form action="/result" method="post">
    <input type="text" id="demoText" name="demoText" />
    <button type="submit" name="action" value="send">送信</button>
  </form>
</body>
</html>


ソースコード（result.html）
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>result page</title>
</head>
<body>
  <p th:text="${demoText}"></p>
</body>
</html>



これで、ビューの作成は完了です。

動作確認


まず、「demo」を右クリックして、「実行」>「Spring Boot App」を選択します。コンソールに出力された内容をみて、Spring Bootが起動したことを確認します。 



次に、ブラウザで「http://localhost:8080/」にアクセスして、送信画面を表示します。送信画面で、テキストボックスを入力して、「送信」ボタンをクリックすると、表示画面に入力した内容が表示されます。




 これで、動作確認は完了です。


スポンサーリンク

0 件のコメント :

コメントを投稿