본문 바로가기
멀티캠퍼스 풀스택 과정/백엔드

Spring:2 home.jsp와 연결 (@어노테이션), Model, View, Controller

by 이쟝 2022. 3. 8.

2022.03.07 - [멀티캠퍼스 풀스택 과정/백엔드] - Spring:1 [Spring환경설정] STS4 설치후 프로젝트 생성하고 출력

 

 

1. img와 css, js를 사용하기 

webapp 하위폴더로 img와 js_css폴더를 생성하고, script.js와 style.css 파일 생성한다.

resources는 webapp에 포함되어 있다. resource 바로 위에 생성됨!

servlet-context.xml을 이용해서 각 파일을 hom.jsp와 연결해주어야 한다.
.js와 .css 파일 처럼 정적인 리소스들을 처리하기 위해서 Resources 매핑이 필요하다.

 

 

 

<resource mapping>을 안하게 되면
org.springframework.web.servlet.DispatcherServlet noHandlerFound
경고: No mapping found for HTTP request with URI 이렇게 오류가 난다.

-> /js_css/style.css라는 요청이 들어오면 /resources/js_css/style.css로 연결시켜 주는 것이다. 
즉, mapping으로 들어온 요청에 대해 location으로 매핑시켜준다.

 

2. HomeController로 view(home.jsp)에 데이터 보내기

src/main/java에 기본으로 설치된 HomeController.java를 열어서 주석문을 다 없애고 내용을 적는다.

HomeController.java

package com.mycampus.myapps;

import java.util.Locale;

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

@Controller
public class HomeController {
	
	//@RequestMapping(value = "/", method = RequestMethod.GET)
	//@RequestMapping(value = "/")
	@RequestMapping("/")
	public String home(Locale locale, Model model) {
		// Model은 뷰페이지로 보내는 데이터를 세팅할 수 있다.
		model.addAttribute("msg","HomeController.java에서 msg의 데이터");
		
		return "home";
	}
	
}

 

@Controller 해당 클래스가 Controller임을 나타내기 위한 어노테이션 
@RequestMapping

 요청에 대해 어떤 Controller, 어떤 메소드가 처리할지를 맵핑하기 위한 어노테이션
클라이언트는 url로 요청을 전송하고,
요청 url을 어떤 메서드가 처리할 지 여부를 결정하는 것

 

1. @RequestMapping(value = "/", method = RequestMethod.GET) = @RequestMapping(value = "/") = @RequestMapping("/")
-> method가 정의되지 않으면 어떤 방식으로든 접근할 수 있고, method가 정의된다면 그 방식으로만 접근할 수 있다. (method = RequestMethod.POST 일 수도 있다.)

2. 반환형이 String이면 뷰 파일명을 반환한다. 그래서 return은 home이다. 뷰는 home.jsp이기 때문에

3. Model: model attributes를 저장하는 interface로 Model에 Attributes를 추가하기 위해 고안되었다. 
- model은 view(클라이언트가 보는 페이지)에 데이터를 보낼 수 있다. 변수(msg)와 값("HomeCon~")로 이루어져있다. 

Client가 "/"경로로 요청이 올 경우에 home()이 호출된다. model 객체의 addAttribute 메서드를 통해 Key/Value값을 임시로 저장한다. Controller는 Model에 데이터를 저장하고 ViewName을 Return하면서 View로 넘어간다. 이때 View는 Model에 저장된 Value값을 참고해 결과를 화면에 출력한다.

3. 새로운 Controller.java 클래스를 생성해 데이터 주고 받기

1. ModelAndView 객체를 이용하기

- web MVC Framework에서 Model 과 View 둘 다 합친 클래스여서 객체를 생성해서 사용한다.(Model과 같이 Interface가 아니다) -> import org.springframework.web.servlet.ModelAndView;
- 매개변수는 없다.
- Handler가 return한 Model과 View를 나타내고, web.xml에 있는 DispatchderServlet에 의해 분석된다.
- View는 ViewResolver 객체에 의해 명시된 String view name를 가져와 사용할 수 있다.
ModelAndView 객체에서 Attribute를 정의하고, 리턴할 ViewName을 정의(이동하고자 하는 View를 저장)하고 최종 Return은 ModelAndView Type으로 반환한다.
Controller가 생성되는 곳은 src/main/java안에 패키지

 

 

home.jsp

<body>
    <ul>           <!-- 서버로 변수와 값을 보내기 -->
        <li><a href="t1?num=100&name=홍길동">서버에 접속하기1(get방식)</a></li>
    </ul>
</body>

result.jsp

<body>
    <h2>t1 매핑</h2>
    <p>num : ${num}<br/> name : ${name}</p>
</body>

MappingController.java

package com.mycampus.myapps;

import javax.servlet.http.HttpServletRequest;

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

@Controller
public class MappingController {
	
	@RequestMapping("/t1") 
	public ModelAndView test1(HttpServletRequest request) {
		
		// 클라이언트에서 받은 num과 name데이터를 변수로 
		int number = Integer.parseInt(request.getParameter("num"));
		String name = request.getParameter("name");
		
                // 객체 생성
		ModelAndView mav = new ModelAndView();
		
		// 클라이언트(뷰페이지)로 서버에서 데이터를 다시 보내기
		mav.addObject("num", number+100);  
		mav.addObject("name", name+"님");
		mav.setViewName("/result");  // result.jsp파일에게(views파일명이니까 views폴더안에 자동으로)
		
		return mav; // WEB-INF/views/result.jsp파일로 정보 보내기
	}
}
Get방식 접속을 했을 때(여러 방식)

웹 url a 태그 location.href reponse.sendRedirect meta 태그  jstl-redirect 태그
예) url -> http://localhost:9090/myapps/t1 // a태그 -> <a href="/myapps/t1"></a>

1. mav.addObject -> Attribute를 정의한다. (데이터를 저장)
2. mav.setViewName -> 리턴할 ViewName을 정의한다. (이동하고자 하는 View를 저장)
3. return mav:최종 리턴은 ModelAndView Type으로 반환한다.
더보기

 

- 서버에 접속하기(get방식)을 누르면 result.jsp로 이동!
- get방식이라서 url주소창에 데이터가 표시된다. 
- num과 name은 mapping controller에서 가공된 데이터이다. 

2. Model 객체를 이용하기

home.jsp

<ul>
	<li><a href="t1?num=100&name=홍길동">서버에 접속하기1(get방식)</a></li>
	<li><a href="t2?num=100&name=김길동">서버에 접속하기2(get방식)</a></li>
</ul>

result.jsp

<body>
    <p>num : ${num}<br/> name : ${name}</p>
</body>

MappingController.java

package com.mycampus.myapps;

import javax.servlet.http.HttpServletRequest;

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

@Controller
public class MappingController {
	
	@RequestMapping("/t1") 
	public ModelAndView test1(HttpServletRequest request) {
		
		....
	}
	
	@RequestMapping(value = "/t2")            // model은 선택
	public String test2(int num, String name, Model model) { // 변수명은 home.jsp와 같아야 함
		model.addAttribute("num", num*2);
		model.addAttribute("name", name+"씨");
		return "result"; // return은 데이터를 보낼 파일
	}
}

3. VO(value Object)를 이용하기

home.jsp

<ul>
	<li><a href="t1?num=100&name=홍길동">서버에 접속하기1(get방식)</a></li>
	<li><a href="t2?num=100&name=김길동">서버에 접속하기2(get방식)</a></li>
	<li><a href="t3?num=200&name=이길동">서버에 접속하기3(get방식)</a></li>
</ul>

DataVO.java 와 result.jsp

<!-- DataVO.java -->
package com.mycampus.myapps;

public class DataVO {
	private int num;
	private String name;
	
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

<!-- result.jsp -->
<p>num : ${num}<br/> name : ${name}</p>
<hr/>
<p>num : ${vo.num}<br/> name : ${vo.name}</p>
<!-- 맵핑컨트롤러의 변수이름(vo)가 없으면 안된다. -->

MappingController.java

package com.mycampus.myapps;

import javax.servlet.http.HttpServletRequest;

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

@Controller
public class MappingController {
	
	@RequestMapping("/t1") 
	public ModelAndView test1(HttpServletRequest request) {
		
		...
	}
	
	@RequestMapping(value = "/t2")            // model은 선택
		...
	}
	
	 // 변수가 많을 경우
	@GetMapping("/t3")
	public ModelAndView test3(DataVO vo) { // 매개변수로 vo를 직접 사용할 수 있다. 
		
		ModelAndView mav = new ModelAndView();
		mav.addObject("vo", vo);
		mav.setViewName("main/result");
		
		return mav;
	}
}

4. @ReqeustParam을 매개변수로 받기

home.jsp

<ul>
	<li><a href="t1?num=100&name=홍길동">서버에 접속하기1(get방식)</a></li>
	<li><a href="t2?num=100&name=김길동">서버에 접속하기2(get방식)</a></li>
	<li><a href="t3?num=200&name=이길동">서버에 접속하기3(get방식)</a></li>
	<li><a href="t4?num=200&name=고길동">서버에 접속하기4(get방식)</a></li>
</ul>

MappingController.java

package com.mycampus.myapps;

import javax.servlet.http.HttpServletRequest;

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

@Controller
public class MappingController {
	
	@RequestMapping("/t1") 
	public ModelAndView test1(HttpServletRequest request) {
		...
	}
	
	@RequestMapping(value = "/t2")            
		...
	}

	@GetMapping("/t3")
	public ModelAndView test3(DataVO vo) { 
		...
	}
	
	@GetMapping(value = "/t4")                             //200  새로 선언된 변수 //고길동 새로 선언된 변수
	public String test4(Model model, @RequestParam("num") int number, @RequestParam("name") String name) {
		
		model.addAttribute("num", number);
		model.addAttribute("name", name);
		return "result";
	}
}
@RequestParam Controller 메소드의 파라미터와 웹요청 파라미터와 맵핑하기 위한 어노테이션

 

저작자표시

'멀티캠퍼스 풀스택 과정 > 백엔드' 카테고리의 다른 글

Spring:4 spring(maven project)를 Mybatis, Mysql과 연결하기(환경설정)-1  (0) 2022.03.16
Spring:3 Spring MVC 흐름도  (0) 2022.03.08
Spring:1 [Spring환경설정] STS4 설치후 프로젝트 생성하고 출력  (0) 2022.03.07
백엔드2-2. Servlet-2 ServletConfig, ServletContext(초기화)  (0) 2022.03.05
백엔드2-1. Servlet-1 Servlet기초와예제, HttpServlet, web-xml, url(get,post방식)  (0) 2022.03.05

관련글

티스토리툴바