(3) 新しいページ(画面)を作成 [Spring Boot]
はじめに
今回は新しいページを作成する方法を解説します。
今回作成する内容
概要
新規のWEBページを追加します。
画面
作成されている画面の内容
- コントローラー(AppController.java)
- 画面/HTMLファイル(index.html)
コントローラー(AppController.java)
MVCでいうコントローラーの部分がこのAppController.javaです。
クライアントからのリクエストを受け付けてレスポンスを返すサーバ側の処理部分。
リクエストのパスをRequestMappingアノテーションで指定し、表示するHTMLファイル名を戻り値に設定します。
パスとHTMLファイルを指定
設定値
パス | HTMLファイル名 |
---|---|
/ | index (拡張子は省略) |
画面/HTMLファイル (Index.html)
MVCでいうビューの部分。
resourceの中の「templates」フォルダに格納するのがルール。
HTMLで画面に表示する内容を記載しています。
新しいWEBページの作成手順
- コントローラー(AppController.java)にsecondの処理を追加
- 画面(second.html)を作成
新規作成するページ内容
パス | HTMLファイル |
---|---|
second | second |
1. コントローラー(AppController.java)にsecondの処理を追加
ポイント
新たにsecondというメソッドを定義し、パスとHTMLファイルにsecondを設定する。
AppController.java
@Controller public class AppController { @RequestMapping("/") public String index(){ return "index"; } // ↓↓↓ 以下の処理を追加 ↓↓↓ @RequestMapping("/second") public String second(){ return "second"; } }
2. 画面(second.html)を作成
ポイント
templatesフォルダにindex.htmlをコピーして作成した「second.html」というファイルを新規作成
second.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>second</title> </head> <body> <h3>WEBプログラミング入門 2ページ</h3> 2番目のページ </body> </html>
動作確認
新しいページが作成出来たので起動して確認します
アプリケーションを起動
画面表示
- ブラウザで「http://localhost:8080/second」と入力する
- 作成された画面が表示されれば確認完了です
おわりに
今回は新しいWEBページを作成しました。
静的なページは作成できたので、次回はクライアントからデータを受け取り、その値によりページの表示が変わる動的なWEBページを作成します。