6月11日 – 2020年度Webアプリ

Spring Boot 2 を使ったWebサイト作成

IndexController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

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

	@RequestMapping("/sum/{num}")
	public String sum(@PathVariable int num, Model model) {
		model.addAttribute("msg", num);
		return "index";
	}
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<h1>Hello spring boot</h1>
<p th:text="${msg}">test</p>
</body>
</html>

1からnumまでの合計を計算して表示する。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

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

	@RequestMapping("/sum/{num}")
	public String sum(@PathVariable int num, Model model) {
		int sum = 0;
		for (int i = 1; i <= num; i++) {
			sum += i;
		}
		model.addAttribute("msg", sum);
		return "index";
	}
}

入力フォームを使ってみる

コントローラに新しいURLのマッピングを追加する。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

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

	@RequestMapping("/sum/{num}")
	public String sum(@PathVariable int num, Model model) {
		int sum = 0;
		for (int i = 1; i <= num; i++) {
			sum += i;
		}
		model.addAttribute("msg", sum);
		return "index";
	}

	@RequestMapping(value = "/form", method = RequestMethod.GET)
	public ModelAndView form(ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前を入力してください。");
		mav.setViewName("form");
		return mav;
	}
}

templatesフォルダに form.html を追加する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<h1>入力フォーム</h1>
</body>
</html>

入力フォームをHTMLに追加してClickボタンも用意する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<h1>入力フォーム</h1>
<form method="post" action="/form">
  <p th:text="${msg}"></p>
  <input type="text" name="name" th:value="${value}" />
  <input type="submit" value="Click" />
</form>
</body>
</html>

コントローラにPOSTメソッドを受け取るためのメソッドを追加する。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

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

	@RequestMapping("/sum/{num}")
	public String sum(@PathVariable int num, Model model) {
		int sum = 0;
		for (int i = 1; i <= num; i++) {
			sum += i;
		}
		model.addAttribute("msg", sum);
		return "index";
	}

	@RequestMapping(value = "/form", method = RequestMethod.GET)
	public ModelAndView form(ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前を入力してください。");
		mav.setViewName("form");
		return mav;
	}

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav) {
		mav.setViewName("form");
		return mav;
	}
}

入力された名前でメッセージを作って表示するように修正してみる。

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public ModelAndView post(@RequestParam("name") String name,  ModelAndView mav) {
		mav.addObject("msg", "こんにちは" + name + "さん！");
		mav.setViewName("form");
		return mav;
	}

POSTの結果でも「あなたのお名前をと性格を入力してください。」のメッセージを表示するようにして、結果は入力フォームの下に表示するように修正する。

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public ModelAndView post(@RequestParam("name") String name,  ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前と性格を入力してください。");
		mav.addObject("result", "こんにちは" + name + "さん！");
		mav.setViewName("form");
		return mav;
	}

form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<h1>入力フォーム</h1>
<form method="post" action="/form">
  <p th:text="${msg}"></p>
  <input type="text" name="name" th:value="${value}" />
  <input type="text" name="prop" th:value="${value}" />
  <input type="submit" value="Click" />
  <p th:text="${result}"></p>
</form>
</body>
</html>

診断メーカーっぽくしてみる。

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public ModelAndView post(@RequestParam("name") String name,
			@RequestParam("prop") String prop, ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前と性格を入力してください。");
		int v = (name + prop).hashCode() % 101;
		v = Math.abs(v);
		mav.addObject("result", "こんにちは！　" + name + "さんの" + prop + "度は" + v + "％です！");
		mav.setViewName("form");
		return mav;
	}