Spring Boot によるWebアプリ開発

2021システム開発実習

SpringBoot

Spring Bootを使ってWebアプリを作成する

更新日：

プロジェクトの作成

新規プロジェクトを作成する。

プロジェクトの種類は、Springスターター・プロジェクト
名前: shindan
グループ: jp.kpc
成果物: shindan
パッケージ: jp.kpc

パースペクティヴの変更

[ウィンドウ]-[パースペクティブ]-[パースペクティブを開く]-[その他] で開いたダイアログから「JavaEE」を選択する。

pom.xmlを修正

pom.xml を開いて8行目の 2.5.6 を 2.2.1.RELEASE に変更して保存する。

一般では不要な本校で必要な操作

通常は、必要なファイルを自動的にインターネットからダウンロードしてくれるのですが、学校のネットワークの制限のためにダウンロードができません。

なので、こちらを参照して必要なファイルをコピーしてください。

コピーした後、Eclipse で shindan プロジェクトを右クリックして「リフレッシュ」を選択する。

さらに、Eclipse で shindan プロジェクトを右クリックして[Maven]-[プロジェクトの更新]を選択する。

「マーカー」タブを見ると、Maven構成問題として「不明」というエラーが出ているが、右クリックして「削除」しておく。

プロジェクトを右クリックし[実行]-[SpringBootアプリケーション」を選択する。

「コンソール」タブの一番下に「Started ShindanApplication in x.xxx seconds (JVM running for ..」のメッセージが出ていれば、Webアプリケーションの起動に成功している。

Webアプリケーションが動作している状態で http://localhost:8080/ にアクセスすれば「Whitelabel Error Page」と表示される。

自作HTMLページを表示する

URL=”/” にアクセスしたときに何かを表示できるようにする。

IndexControllerを作成する。
src/main/java の中にある jp.kpc を右クリックし[新規]-[クラス]を選択する。
名前に「IndexController」と入力し「完了」をクリック。

SpringBoot に対して、このクラスがコントローラであることを教えるために、@Controller アノテーションを追加する。
public class の前の行で「@Cont」を入力してCtrl+スペースを入力すると候補がリストアップされる。
org.springframework.stereotype のControllerを選択する。

package jp.kpc;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class IndexController {
    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

SpringBootアプリケーションを起動して、 http://localhost:8080/ にアクセスすると、エラーになるが、先ほどと違うエラーになっていることがわかる。

エラーメッセージを読むと、indexテンプレートが見つからないという意味なので、次はテンプレートを作成する。

src/main/resources の下にある templates を右クリックして[新規]-[その他]を選択する。
「HTMLファイル」を選択し「次へ」をクリック。
ファイル名を index.html にして「次へ」をクリック。
「新規HTMLファイル(5)」を選択して「完了」をクリック。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
</head>
<body>
 
<h1>診断ページ</h1>
 
</body>
</html>

SpringBoot アプリケーションを再起動して http://localhost:8080/ にアクセスすると、「診断ページ」と表示される。

入力フォームを追加

index.html に入力フォームを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
</head>
<body>

<h1>診断ページ</h1>

<form action="/form" method="post">
	おなまえ: <input type="text" name="name" />
	<br />
	診断: <input type="text" name="eval" />
	<br />
	<input type="submit" value="診断" />
</form>


</body>
</html>

コントローラで入力パラメータを受け取る

入力フォームに入力された文字列をコントローラで取得する。

package jp.kpc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping("/form")
	public ModelAndView form(ModelAndView mav,
			@RequestParam("name") String name,
			@RequestParam("eval") String eval) {
		int percent = (name + eval).hashCode() % 101;
		percent = Math.abs(percent);
		String result = name + " さんの " + eval + " 度は " + percent + "％です。";
		mav.addObject("result", result);
		mav.setViewName("index");
		return mav;
	}
}

診断結果を表示する

index.html に診断結果を表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
</head>
<body>

<h1>診断ページ</h1>

<form action="/form" method="post">
	おなまえ: <input type="text" name="name" />
	<br />
	診断: <input type="text" name="eval" />
	<br />
	<input type="submit" value="診断" />
</form>


<p th:text="${result}"></p>

</body>
</html>

診断の履歴を表示する

コントローラでは、Listを使用して診断履歴を保存する。

package jp.kpc;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	private List<String> list = new ArrayList<>();

	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping("/form")
	public ModelAndView form(ModelAndView mav,
			@RequestParam("name") String name,
			@RequestParam("eval") String eval) {
		int percent = (name + eval).hashCode() % 101;
		percent = Math.abs(percent);
		String result = name + " さんの " + eval + " 度は " + percent + "％です。";
		list.add(result);
		mav.addObject("result", result);
		mav.addObject("list", list);
		mav.setViewName("index");
		return mav;
	}
}

index.html では、list で渡された履歴を表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>診断ページ</title>
</head>
<body>

<h1>診断ページ</h1>

<form action="/form" method="post">
	おなまえ: <input type="text" name="name" />
	<br />
	診断: <input type="text" name="eval" />
	<br />
	<input type="submit" value="診断" />
</form>


<p th:text="${result}"></p>

<h3>これまでの診断結果</h3>
<ul th:each="result : ${list}">
	<li th:text="${result}"></li>
</ul>


</body>
</html>

-SpringBoot

Copyright© 2021システム開発実習 , 2025 All Rights Reserved Powered by STINGER.