今回の記事はSpringBootでリンクでページ遷移を行う方法に関してご紹介する記事です。SpringBoot初心者向けの記事となっております。できるだけ分かりやすいように記載していくので是非参考にしてみてください。
SpringBootプロジェクト作成
Eclipse.exeをクリックすると下記のような画面が表示されます。
ここはそのまま触らずで「起動」をクリックしましょう。
プロジェクトの作成、もしくは「ファイル」→「新規」→「プロジェクト」→「Spring BootのSpring スタータープロジェクト」をクリックし、プロジェクトを作成していきます。
名前は適当なものでOKでまずはそのまま「次へ」をクリックします。
最後に「Thymeleaf」と「Spring Web」を追加して、プロジェクトをスタートします。
SpringBootでリンクでページ遷移を行う手順
SpringBootでページ遷移を行う手順に関しては下記です。
- 初期表示用のhtmlページを作成
- URLをたたいた時に呼び出されるControllerの処理作成
- htmlにページ遷移用のボタンを作成
- Controllerボタンクリック時に呼ばれる処理作成
- 遷移先のhtmlを作成
- 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/
localhost
これでページ遷移ができていると思います。
では今回の記事は以上です。ほかにもJava関連の記事を記載しているので、是非サイト内見ていってください。
コメント