スポンサーリンク

【SpringBoot】ボタンクリックでページ遷移を行う方法ご紹介。

Java
スポンサーリンク

今回の記事はSpringBootでリンクでページ遷移を行う方法に関してご紹介する記事です。SpringBoot初心者向けの記事となっております。できるだけ分かりやすいように記載していくので是非参考にしてみてください。

スポンサーリンク

SpringBootプロジェクト作成

Eclipse.exeをクリックすると下記のような画面が表示されます。

ここはそのまま触らずで「起動」をクリックしましょう。

プロジェクトの作成、もしくは「ファイル」→「新規」→「プロジェクト」→「Spring BootのSpring スタータープロジェクト」をクリックし、プロジェクトを作成していきます。

名前は適当なものでOKでまずはそのまま「次へ」をクリックします。

最後に「Thymeleaf」と「Spring Web」を追加して、プロジェクトをスタートします。

SpringBootでリンクでページ遷移を行う手順

SpringBootでページ遷移を行う手順に関しては下記です。

  1. 初期表示用のhtmlページを作成
  2. URLをたたいた時に呼び出されるControllerの処理作成
  3. htmlにページ遷移用のボタンを作成
  4. Controllerボタンクリック時に呼ばれる処理作成
  5. 遷移先のhtmlを作成
  6. localhostを起動し画面確認

初期表示用のhtmlページを作成

「ファイル」→「新規」→「templateフォルダ」に「NewFile」というHTMLファイルを作成しました。中身は下記です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello World
</body>
</html>

URLをたたいた時に呼び出されるControllerの処理作成

同様にコントローラーもファイル作成し、名前はなんでもOKです。

下記ファイル名と合わせて記載ください。

package com.example.demo;

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

@Controller
public class HelloController {
	@RequestMapping(value="/")
    public String index() {
        return "NewFile";
    }
}

これで、localhostのURLをたたくと先ほど作成したhtmlを表示できるようになります。

htmlにページ遷移用のボタンを作成

先ほど作成したhtmlにリンクを作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  Hello World
    <form th:action="@{/move}" method="post">
        <p>
            <input type="submit" value="ページ移動" />
        </p>
    </form>
</body>
</html>

Controllerリンククリック時に呼ばれる処理作成

package com.example.demo;

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

@Controller
public class HelloController {
	@RequestMapping(value="/")
    public String index() {
        return "NewFile";
    }
	@PostMapping("/move")
    public String index() {
        return "NewFile2";
    }
}

遷移先のhtmlを作成

同様の手順でhtmlファイルをもう一つ追加します。名前は「NewFile2」とします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
遷移しました
</body>
</html>

localhostを起動し画面確認

ではプロジェクトを起動して下記URLにアクセスします。

http://localhost:8090/

これでページ遷移ができていると思います。

では今回の記事は以上です。ほかにもJava関連の記事を記載しているので、是非サイト内見ていってください。

コメント

タイトルとURLをコピーしました