【業務で使用することになり勉強を始めました。全くの素人であるし間違っていることが多いです。随時更新。】

その１「Springbootでindex.html表示」

　・MVCモデルを使っている。
　・STSで実施。
　・パッケージエクスプローラのspringスタータープロジェクト作成。
　・依存関係でSpringBootDevToolsとspringwebとThymeleafを選択
　・src/main/javaにパッケージが作られデフォルトでapplication.javaが作られる。
　　application.javaにはmainが入っているので、実行はここから
　・controllerはパッケージに置く
　・viewはsrc/main/resources/templateに置く。

まずはcontroller
こいつはコントローラだよってことで@Controllerを書く
コンテキストルート（http://localhost:0808/) に接続したいというリクエスト対して @RequestMappingというアノテーションを使用して応える。

@Controller
public class ClassName {
		 @RequestMapping(value = "/")
}

解説：
＠controllerでコントローラだよ
@RequestMapping(value = "スラッシュはコンテキストルートを表す"）

@RequestMappingは、valueのパスとリクエストが一致した場合にお仕事を始める。
お仕事とはメソッドを動かすこと。
今のままだとメソッドがないので
メソッド追加！！

@Controller
public class ClassName {
		 @RequestMapping(value = "/")

  public String respons() {
		   return "index.html";
  }

}

解説：
@RequestMapping(value = "/")の後のrespons(名前はなんでもいい）メソッドが動く

 public String void respons() {
		   return "index.html";
 }

returnをindex.htmlとすることで、ブラウザにindex.htmlが表示される。
もちろん、ここをmain.htmlなんかにすればtemplate配下のmain.htmlが表示される。

ちなみにindex.htmlは省略できる。

 public String respons() {
		   return "index";
 }

その２「Tymeleafを使ってみる」

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 th:text="${res}"></h1>
</body>
</html>

解説：
htmlタグはコピペしました。
これを記述することでh1タグにあるthオプションを使えるようになる。
"${res}"の中身がブラウザで表示される
「res」の中身はjavaで書く

次はjava

package com.samle.spring;

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

@Controller
public class Sample {

	@RequestMapping(value="/")
	public ModelAndView sample() {
		ModelAndView mod = new ModelAndView();
		mod.setViewName("sample");
		mod.addObject("res", "hello world");
		return mod;
	}
}

その１と違うところはModelAndViewという奴
sampleメソッドではこのmodを返すことになる。

つまり、modに詰めた値がブラウザに表示される。

まずどこにmodを返すのか？
返す場所を記述する
今回はsample.htmlなので

mod.setViewName("sample");

次は二つのことを同時におこなう
１.まだmodの中は空なので値を詰める。
2.詰められた値をsample.htmlのどこに表示するのかを決める

mod.addObject("res", "hello world");

引数1個目はの"res"はhtmlであった、"$res"
2個目は表示する文字が入る。

上手くいけばHelloWorldが表示されるはず

その３「リクエストパラメータを使って動的な表示」

次はsubmitを使って表示を変える。
そろそろ複雑になってくるので、順を追って見ていきます。

１.URL欄ににコンテキストルートを入力。

sample.javaでリクエストを受け取る

@Controller
public class Sample {
	
	@RequestMapping(value="/")
	public String index() {
		return "sample";
	}

その１と同じ方法でsample.htmlを呼び出す

２.htmlが表示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

　<form action="/req">
  	<p>姓</p><input type="text" name="firstName"><br>
  	<p>名前</p><input type="text" name="lastName">
  	<button type="submit">送信</button>
  </form>

　<h1 th:text="${res}"></h1>
</body>
</html>

この段階ではth:text="${res}"の中身がないので表示はされません。

３.textに文字を入れて、submitする

formタグのactionが/reqとなっているのでjavaの方で設定して、入力を受け取る

４.submitされた値を受け取る

@RequestMapping(value="/req")
	   public ModelAndView respons(@RequestParam("firstName") String first,
			                       @RequestParam("lastName") String last) {

		   ModelAndView mod = new ModelAndView();
		   mod.setViewName("sample");
		   mod.addObject("res", "フルネーム" + first + "　" + last + "さん");
		   
		   return mod;
	   }

受け取る時は@RequestMapping(value="/req)とすることで受け取ることができます。

あとはその２でやった内容と同じです。

見事フルネームを出すことができれば成功！

package com.samle.spring;

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

	@RequestMapping(value="/req")
	   public ModelAndView respons(@RequestParam("firstName") String first,
			                       @RequestParam("lastName") String last) {

		   ModelAndView mod = new ModelAndView();
		   mod.setViewName("sample");
		   mod.addObject("res", "フルネーム" + first + "　" + last + "さん");
		   
		   return mod;
	   }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

　<form action="/req">
  	<p>姓</p><input type="text" name="firstName"><br>
  	<p>名前</p><input type="text" name="lastName">
  	<button type="submit">送信</button>
  </form>

　<h1 th:text="${res}"></h1>
</body>
</html>

sampleクラス内に@RequesrMappingを２つ書くことで出し分け可能。

その4「javaの引数をひとつに」

このままだと、inputの数が30あったら引数も30になってしまう。そんな時に使うのは以下のように使う

package com.samle.spring;

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

@Controller
public class Sample {
	
	
	@RequestMapping(value="/")
	public String index() {
		return "sample";
	}
	
	


/*
こっから新しい内容
*/
	@RequestMapping(value="/req")
	   public ModelAndView respons(@ModelAttribute Param p) {

		   ModelAndView mod = new ModelAndView();
		   mod.setViewName("sample");
		   mod.addObject("res", p);
		   
		   return mod;
	  }
	
	
	public static class Param{
		private String firstName;
		private String lastName;
			
		public String getFirstName(){ 
			return firstName; 
		}
		
		public String getLastName(){
			return lastName; 
		}
		
		public void setFirstName(String firstName) {
			this.firstName = firstName;
		}
		
		public void setLastName(String lastName) {
			this.lastName = lastName;
		}
	 }
}

解説：

```java (value="/req") public ModelAndView respons( Param p) {

	   ModelAndView mod = new ModelAndView();
	   mod.setViewName("sample");
	   mod.addObject("res", p);
	   
	   return mod;
  }

modelAttributeを引数の中に書くと、modelAttribute後の名前に等しいオブジェクトをNewする。
上記のコードであれば、paramクラスのpインスタンスがnewされるのと同時に
リクエストパレメータの値をsetする
あとはpインスタンスをmodに詰める

中身を呼び出すには、"${res.name}"と書けばいい
次はhtml

```html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
　<form action="/req">
  	<p>姓</p><input type="text" name="firstName"><br>
  	<p>名前</p><input type="text" name="lastName">
  	<button type="submit">送信</button>
  </form>

  <div th:if="${res}">
  <h1 th:text=" 'あなたは' + ${res.firstName} + ' ' + ${res.lastName} + 'ですね' "></h1>
  </div>
</body>
</html>

その３との違いはここ

<div th:if="${res}">
  <h1 th:text=" 'あなたは' + ${res.firstName} + ' ' + ${res.lastName} + 'ですね' "></h1>
  </div>

th:ifはresの中身がnullならfalseとなってdivタグの中は読まれない。
なぜこうするのかというと
初めにコンテキストルートで表示される時＄{res.firstName}の中身が空なので
エラーになってしまうから。
${res.firstName}を読ませないためにifで囲う必要がある