Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@shunnami(miffiy)

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

Last updated at Posted at 2020-10-10

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

その１「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になってしまう。 そんな時に使うのは@ModelAttribute 以下のように使う 
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 @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>

その３との違いはここ

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

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

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?