HTML、JavaScript、Thymeleafでの画面遷移
フォルダ構成
今回、画面遷移の実験を行うにあたり、プロジェクトをSpring Initializrで「Java Spring Boot+Gradle」の構成を作成しました。
TopController.java
URL「http://localhost:8080/」でトップページを表示するためのコントローラです。サーバーのコントローラから、フロントへ「id」という名前のパラメータを渡しています。ModelAndViewを使用し、パラメータとビューをセットしています。
TopController.java
455 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.example.learn.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class TopController {
@GetMapping("/")
public ModelAndView view() {
ModelAndView model = new ModelAndView();
model.addObject("id", "10000077");
model.setViewName("top");
return model;
}
}PageController.java
遷移先ページのコントローラです。
PageController.java
432 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.example.learn.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class PageController {
@GetMapping("/nextpage")
public ModelAndView viewNextPage() {
ModelAndView model = new ModelAndView();
model.setViewName("nextpage");
return model;
}
}Top.html
トップページのビューファイルです。
Top.html
1.79 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DEMO</title>
<link th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<div>
<h1>ボタンクリックで遷移する</h1>
</div>
<div>
<p>CASE 1</p>
<form name="form1" th:action="@{/nextpage}" method="get">
<button type="submit">遷移先をformタグに記載する</button><br>
</form>
<p>CASE 2</p>
<button onclick="location.href='/nextpage'">遷移先をonClickに記載する</button><br>
<p>CASE 3</p>
<form name="form3" th:action="@{/nextpage}" method="get">
<button type="button" onclick="callCase3()">遷移先をformタグに記載し、javascriptメソッドで遷移する</button><br>
</form>
<p>CASE 4</p>
<form name="form4">
<button type="button" onclick="callCase4()">javascriptメソッドで遷移先を指定して遷移する</button><br>
</form>
<p>CASE 5</p>
<form name="form5" th:action="@{/nextpage(id=${id})}" method="get">
<button type="button" onclick="callCase5()">コントローラからの戻り値を遷移先に含める</button><br>
</form>
</div>
<script>
function callCase3(item) {
document.form3.submit();
}
function callCase4(item) {
document.form4.action = '/nextpage';
document.form4.method = 'get';
document.form4.submit();
}
function callCase5(item) {
document.form5.submit();
}
</script>
</body>
</html>CASE 1 ： 遷移先をformタグに記載する
フロントエンドで処理（判定、チェック、メッセージ表示など）を行う必要がなければ一番スマートな記載です。
CASE 2 ： 遷移先をonClickに記載する
CASE1と出来ることは一緒ですが、CASE1のほうがよりスマートです。
CASE 3 ： 遷移先をformタグに記載し、javascriptメソッドで遷移する
フロントエンドで処理（判定、チェック、メッセージ表示など）を行いたい場合の記載方法です。
CASE 4 ： javascriptメソッドで遷移先を指定して遷移する
formタグに遷移先のactionなどを記載せず、javascriptの中で遷移先を動的に変更したい場合に使用できます。例えば、画面入力値に応じて遷移先の画面を切り替えたい時などに有効です。
CASE 5 ： コントローラからの戻り値を遷移先に含める
GETのURLパラメータに、コントローラから受け取った「id」を付ける方法です。
最終的にはこのような画面になります。
NextPage.html
遷移先ページのビューです。
NextPage.html
302 B
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DEMO</title>
<link th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<h1>Next Page</h1>
<button onclick="location.href='/'">TOPに戻る</button><br>
</body>
</html>main.css
今回の目的からするとCSSは必須ではないので外部ファイル化しました。
main.css
260 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@charset "UTF-8";
p {
margin-bottom: 0px;
}
button {
background-color: beige;
border: 1px solid darkgrey;
border-radius: 5px;
margin-left: 20px;
margin-bottom:10px;
height: 50px;
width: 450px;
text-align: left;
}
button:hover {
cursor: pointer;
}
コメント