Review Mapping Basics

DispatcherServlet Context & Controller

  • Beans에 등록된 매핑 경로는 DispatcherServlet Context의 탐색 범위 내의 Controller에 규정되어 있어야 매핑 가능
<beans:beans>

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<!-- <resources mapping="/resources/**" location="/resources/" /> -->
	<resources mapping="/image/**" location="/WEB-INF/image/" />
	<resources mapping="/js/**" location="/WEB-INF/js/" />
	<resources mapping="/css/**" location="/WEB-INF/css/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/" /> <!-- 폴더를 국한하지 않고 어느 jsp파일이나 호출가능 -->
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="spring.mvc.test" />

</beans:beans>
  • WEB-INF>spring>appServlet>servlet-context.xml
  • DispatcherServlet Context는 <resources>와 <beans:property>태그의 데이터에 따라 절대 경로와 가상 경로를 매핑
  • 또한 DispatcherServlet Context는 오로지 <context:component-scan>의 데이터에 속하는 클래스 내의 Controller만 탐색하여 매핑하므로, 이 탐색 범위를 넓히려면 ,(comma) 등을 이용하여 다수의 base-package를 입력하거나 와일드카드(*)를 이용해야 함

Root Mapping

@Controller
public class HomeController {

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		return "home";
	}
}
  • root 페이지 지정은 기본적으로 @RequestMapping 어노테이션으로 value를 ‘/’라고 설정함으로 이루어짐
  • 하지만 index 파일이 존재한다면, ‘/’로 설정된 root 페이지보다 index 파일을 우선적으로 root로 인식

Redirect Page

<!--index.jsp-->
<body>
	<c:redirect url="board/form1"/> <!-- 바로 redirect되어서 이동 -->
</body>
  • <c:redirect>를 통해 페이지를 redirect 가능
  • Server Runtime이 redirect 메시지를 인식 시 곧바로 페이지는 대상 페이지로 이동하여, 이를 이용하여 root 페이지를 변경한 것과 같은 효과 부여 가능
  • 위의 사례에서는 index 파일로서 ‘test/’가 root가 되어야 하지만, 실제로는 ‘test/board/’의 form1이 root처럼 활용됨

Mapping_Addtional

Mapping Addr Duplicated

  • 하나의 Controller에서 모든 매핑 주소가 같은 경로를 거친다면, 해당 주소를 모든 매핑 경로로 지정 및 입력해야 함
  • 이를 간략화하기 위해 Controller 자체에 중복 경로를 내장 가능
@Controller
@RequestMapping("/board")
public class BoardController {

	@GetMapping("/form1")
	//매핑 메서드

	@PostMapping("/form2")
	//매핑 메서드

	//기타 매핑 메서드
}
  • 각 메서드마다 지정된 매핑 주소는 ‘form1, form2’ 등이지만, @RequestMapping 주소에 의해 모두 ‘/board’ 경로를 거치게 됨
  • 따라서 ‘/form1, /form2’가 아닌 ‘/board/form1, /board/form2’의 주소를 가짐

Add Unrequired Values

<body>
	<form action="process" method="post">
		작성자: <input type="text" name="name"><br>
		날짜: <input type="date" name="date"><br>
		성별: <input type="radio" name="gender" value=""><input type="radio" name="gender" value=""><br>
		
		<input type="submit" value="전송">
	</form>
</body>
  • <form>을 통해 name, date, gender 3개의 값을 가상 경로 ‘process’에 전달
  • 이 경우 ‘process’ 경로의 파일에서는 3개의 값만을 활용 가능
@Controller
public class BoardController {

	@PostMapping("/process")
	public ModelAndView process1(@RequestParam String name,@RequestParam String date,
			@RequestParam String gender,/*@RequestParam(defaultValue = "행복한 하루 되세요") String msg*/
			@RequestParam(required = false) String msg,
			@RequestParam(defaultValue = "1") int currentPage) {
		//required=true 가 기본값,항목이 없어도 에러가 안나게 하려면 false
		
		ModelAndView model=new ModelAndView();
		model.addObject("name", name);
		model.addObject("date", date);
		model.addObject("gender", gender);	
		model.addObject("msg", msg);
		model.addObject("currentPage", currentPage);
		
		model.setViewName("board/result");
		
		return model;
	}
  • @RequestParam( defaultValue )를 이용하면 <form>을 통해 받지 않은 값도 매핑 주소에 전달 가능 (대신 여타 조건이 없다면 항상 defaultValue에 해당하는 값만 전달)
  • 또한 @RequestParam( required = false )를 통해 전달 받지 못한 값을 변수로써 활용할 수 있게 됨 (모든 @RequestParam은 디폴트로 required 값이 true이며, 이는 전달 받은 값임을 증명) (이 경우도 여타 조건이 없으면 null 값 전달)

Applying CSS & JS on Files

@charset "EUC-KR";

table{
	border: 2px solid gray;
}
tr,th,td{
	border: 1px dotted green;
}
  • WEB-INF>css>style.css
  • css 파일에 css 설정
$(function(){
 	$("#myimg").attr("src","../image/02.png");
 	
 	$("#myimg").hover(function(){
 		$(this).attr("src","../image/11.png");
 	},function(){
 		$(this).attr("src","../image/02.png");
 	});
 });
  • WEB-INF>js>script.js
  • 자바 스크립트 설정
<head>
	<link rel="stylesheet" href="../css/style.css"> <!--css링크-->
	<script type="text/javascript" src="../js/script.js"></script> <!--js링크-->
</head>
  • 설정한 css, js 기능을 사용하고자 할 경우, 반드시 적절한 경로를 통해 해당 파일의 링크를 지정해야 함

Pass Values through DTO & Map

DTO Method

@Controller
public class ShopController {

	@PostMapping("/shop/process2")
	public String process2(@ModelAttribute ShopDto dto) {
		
		if(dto.getSang()==null){
			dto.setSang("재고없음"); //dto의 getter,setter 활용가능
		}

		return "shop/shopResult";
	}
}
  • @ModelAttribute : 폼의 데이터를 읽어서 dto에 넣고 model에 저장
  • @ModelAttribute 자체가 앞 글자 소문자로 변환해서 넘겨줌 (shopDto 객체로 전달 가능)
  • 만약 다른 이름 원하면 @ModelAttribute("이름") (@ModelAttribute(”thisIsDto”)라고 설정하면 thisIsDto로 process2 파일에서 전달 받음)

Map Method

@Controller
public class ShopController {

	@PostMapping("/shop/process3")
	public ModelAndView process3(@RequestParam Map<String, String> map) {
		
		ModelAndView model=new ModelAndView();
		model.setViewName("shop/mapResult");

		model.addObject("java", map.get("java"));
		model.addObject("spring", map.get("spring"));
		
		return model;
	}
}
  • <form>의 name 값이 key값으로, 입력 값은 value값으로 저장
  • Map을 통해 자동으로 값을 저장 시에는 @RequestParam 생략 불가

Review JSTL Format

<div style="color: ${shopDto.color}">
	상품명: ${shopDto.sang }<br>
	수량: <fmt:formatNumber value="${shopDto.su }" pattern="#,##0"/><br>
	단가: <fmt:formatNumber value="${shopDto.price }" type="currency"/><br>
	총금액: <fmt:formatNumber value="${shopDto.su*shopDto.price }" type="currency"/>
</div>
  • dto 방식으로 값을 전달 받음
  • Number 포맷에서 pattern 속성은 숫자 형식 지정 시 사용 (#: 없을 시 표기 x / 0: 항상 표기)
  • Number 포맷에서 type 속성은 화폐 등 형식 지정 시 사용

Passing Multiple Values

<body>
	<form action="result" method="post">
		<table>
				<th>취미</th>
				<td>
					<input type="checkbox" name="hobby" value="축구">축구
					<input type="checkbox" name="hobby" value="야구">야구
					<input type="checkbox" name="hobby" value="농구">농구
					<input type="checkbox" name="hobby" value="배구">배구
					<input type="checkbox" name="hobby" value="당구">당구
				</td>
			</tr>
			<tr><td colspan="2" align="center"><button type="submit">전송</button></td></tr>
		</table>
	</form>
</body>
  • 위처럼 checkbox를 통해 값을 전달 시 다중 값이 전달될 수 있음
@Controller
public class InfoController {
	
	@PostMapping("/info/result")
	public String process(@ModelAttribute("dto") InfoDto dto) {
		
		if(dto.getHobby()==null)
			dto.setHobby("없음");

		System.out.println(dto.getHobby()); //출력 확인... 축구,야구,농구,배구,당구

		return "info/infoWrite";
	}
}
  • 이를 DTO를 통한 매핑 메서드를 이용하여 전달 시 ,(comma)로 연결된 문자열 형태로 나타남
  • 하지만 이는 Object 형태로, 사실상 배열의 형태로 저장됨
<c:forEach var="hobbies" items="${dto.hobby }">
	<c:out value="[${hobbies }] "/>
</c:forEach>
  • 또는
<c:if test="${empty dto.hobby }">없음</c:if>
<c:if test="${!empty dto.hobby}">
	<c:forEach var="h" items="${dto.hobby }">
		[${h }]
	</c:forEach>
</c:if>
  • 이러한 다중 값은 JSTL 반복문인 <c:forEach>를 통해 출력
profile
초보개발자

0개의 댓글