SpringBoot①（基本・viewとcontrolでの値の受け渡し）

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

<h2>その１「Springbootでindex.html表示」</h2>

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

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

```java
@Controller
public class ClassName {
		 @RequestMapping(value = "/")
}
	  
```
解説：
＠controllerでコントローラだよ
@<span>RequestMapping(value = "スラッシュはコンテキストルートを表す"）

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

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

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

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

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

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

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

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



<h2>その２「Tymeleafを使ってみる」</h2>

```html
<!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

```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なので

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

```java
mod.addObject("res", "hello world");
```
引数1個目はの"res"はhtmlであった、"$res"
2個目は表示する文字が入る。

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


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

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

<h4>１.URL欄ににコンテキストルートを入力。</h4>
sample.javaでリクエストを受け取る

```java
@Controller
public class Sample {
	
	@RequestMapping(value="/")
	public String index() {
		return "sample";
	}
```
その１と同じ方法でsample.htmlを呼び出す


<h4>２.htmlが表示</h4>


```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}"の中身がないので表示はされません。

<h4>３.textに文字を入れて、submitする</h4>

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

<h4>４.submitされた値を受け取る</h4>

```java
@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;
	   }
```

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

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

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

```java
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;
	   }
}
```


```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>
```


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


<h2> その4「javaの引数をひとつに」</h2>
このままだと、inputの数が30あったら引数も30になってしまう。
そんな時に使うのは@ModelAttribute
以下のように使う


```java
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;
		}
	 }
}

```

<h4>解説：</h4>
```java
@RequestMapping(value="/req")
	   public ModelAndView respons(@ModelAttribute 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>

```

その３との違いはここ

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

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