スポンサーリンク

【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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a th:href="@{/Hello}" >Hello World</a>

</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";
    }
	@RequestMapping(value="/Hello")
    public String index() {
        return "NewFile2";
    }
}

遷移先のhtmlを作成

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a th:href="@{/Hello}" >HelloWorld遷移しました</a>

</body>
</html>

localhostを起動し画面確認

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

http://localhost:8090/

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

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

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Java
スポンサーリンク
スポンサーリンク

コメント

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