2024.07.15 - [분류 전체보기] - Web Application(1) / 화면에서 자바로 데이터 전송(1. Form Data) / 요청 url 매핑 방식
Web Application(1) / 화면에서 자바로 데이터 전송(1. Form Data) / 요청 url 매핑 방식
[과제] 1. NameTelController 에서 '데이터 전송방식' 구현 (form submit 방식) 2. NAME_TEL 테이블 생성 3. name-tel.jsp 생성 (요청 url 매핑 방식 구현) 1. Spring Application 구동WAS 구동 시 web.xml 읽은 후 ServletConta
maverick11471.tistory.com
2024.07.15 - [분류 전체보기] - Web Application(2) / 화면에서 전송한 데이터 받기
Web Application(2) / 화면에서 전송한 데이터 받기
2024.07.15 - [분류 전체보기] - Web Application(1) / 화면에서 자바로 데이터 전송(1. Form Data) / 요청 url 매핑 방식 Web Application(1) / 화면에서 자바로 데이터 전송(1. Form Data) / 요청 url 매핑 방식[과제] 1. Na
maverick11471.tistory.com
이전에는 화면에서 전송한 데이터를 받는 방법을 알아보았다.
이번에는 자바에서 화면단으로 데이터 전송하는 방법을 알아보겠다.
[과제]
1. NameTelController 수정 (데이터 받는 여러가지 방식 확인)
2. name-tel.jsp 수정
< 지난 시간 >
1. 화면단에서 전송한 데이터 받기
1-1. HttpServletRequest 객체를 통해서 파라미터 받기
1-2. @RequestParam 어노테이션을 통한 데이터 받기
1-3. @RequestParam으로 전송된 데이터 모두를 Map 객체에 매핑
1-4. Command 객체와 @ModelAttribute 어노테이션을 이용한 데이터 받기
< 이번 시간 >
2. 자바에서 화면단으로 데이터 전송
2-1. Model 객체를 통한 데이터 전송, Model 객체의 addAttribute(키, 밸류)로 데이터 매핑해서 화면단으로 전송
2-2. HttpServletRequest 객체를 통한 데이터 전송
2-3. HttpSession 객체를 이용한 데이터 전송
[기본 공통사항]
- NameTelController
@Controller
public class NameTelController {
private NameTelService nameTelService;
@Autowired
public NameTelController(NameTelService nameTelService) {
this.nameTelService = nameTelService;
}2-1. Model 객체를 통한 데이터 전송, Model 객체의 addAttribute(키, 밸류)로 데이터 매핑해서 화면단으로 전송
① NameTelController 수정
// 조회 기능
@GetMapping("/name-tel.do")
public String nameTelGet(@ModelAttribute NameTelDto nameTelDto) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
return "name-tel";
}
// 등록 기능
@PostMapping("/name-tel.do")
public String nameTelPost(@ModelAttribute NameTelDto nameTelDto, Model model) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
nameTelService.postNameTel(nameTelDto);
model.addAttribute("nm", nameTelDto.getName());
model.addAttribute("tl", nameTelDto.getTel());
return "name-tel";
② name-tel.jsp 수정
- method = post 방식으로 변경
- NameTelController 에서 model로 key 값을 지정해 둔 nm과 tl을 화면단에서 받아서(el표기법) 구
<body>
<form action="/name-tel.do" method="post">
<input type="text" name="name">
<input type="text" name="tel">
<input type="submit" value="전송">
</form>
<!--java에서 전송한 데이터를 el표기법을 이용해서 표출한다.
자바에서도 데이터를 전송할 때 키: 밸류 매핑된 데이터로 오기때문에
키를 이용해서 밸류값을 사용한다.-->
<div>
<p>${nm}</p>
<p>${tl}</p>
</div>
</body>
- post 방식이기 때문에 주소값의 값이 보이지 않는다.
[추가]
이 때 변수를 일일이 지정하지 않고 클래스로 지정해서 사용할 수 있다.
① NameTelController 수정
[이전]
model.addAttribute("nm", nameTelDto.getName());
model.addAttribute("tl", nameTelDto.getTel());
[이후]
model.addAttribute("nameTelDto", nameTelDto);② name-tel.jsp 수정
[이전]
<p>${nm}</p>
<p>${tl}</p>
[이후]
<!--자바에서 전송한 데이터가 클래스타입일 경우 전송한 키.
그 클래스의 멤버변수명으로 데이터를 꺼내서 사용할 수 있다.-->
<p>${nameTelDto.name}</p>
<p>${nameTelDto.tel}</p>
그런데 addAttribute가 너무 많으면 귀찮지 않은가?
그럴때 2-2 방법을 사용하면 된다.
2-2. HttpServletRequest 객체를 통한 데이터 전송 : List 의 경우는 어떻게 할까?
① NameTelController 수정
- 파라미터에 HttpServletRequest request 추가
- model.addAttribute 수정
- request.setAttribute 추가
// 조회 기능
@GetMapping("/name-tel.do")
public String nameTelGet(@ModelAttribute NameTelDto nameTelDto) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
return "name-tel";
}
// 등록 기능
@PostMapping("/name-tel.do")
public String nameTelPost(@ModelAttribute NameTelDto nameTelDto, Model model, HttpServletRequest request) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
nameTelService.postNameTel(nameTelDto);
// [이전] model.addAttribute("nameTelDto", nameTelDto);
model.addAttribute("nameTelList", nameTelService.getNameTelList());
request.setAttribute("nameTelList", nameTelService.getNameTelList());
return "name-tel";
② name-tel.jsp 수정
<body>
<form action="/name-tel.do" method="post">
<input type="text" name="name">
<input type="text" name="tel">
<input type="submit" value="전송">
</form>
<!--jstl의 forEach 구문으로 List 형태로 자바에서 넘어온 데이터를 하나씩 꺼내서 표출한다.-->
// aaa는 특별한 의미가 없다. nameTelList에서 하나씩 꺼내겠다는 의미이다.
// ${nameTelList} == NameTelController 에서 attribute 키값
<c:forEach items="${nameTelList}" var="aaa">
<div>
<p>${aaa.name}</p>
<p>${aaa.tel}</p>
</div>
</c:forEach>
</body>
이전에 입력했던 값들이 전부 나온다.
2-3. HttpSession 객체를 이용한 데이터 전송 : 웹 서버 시행 후 30분간 유지
(확인경로: tomcat - config - web.xml : session-config 검색 (timeout 30))
① NameTelController 수정
-파라미터 변경
-session.setAttribute 추가
// 조회 기능
@GetMapping("/name-tel.do")
public String nameTelGet(@ModelAttribute NameTelDto nameTelDto) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
return "name-tel";
}
// 등록 기능
@PostMapping("/name-tel.do")
public String nameTelPost(@ModelAttribute NameTelDto nameTelDto, Model model, HttpSession session) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
nameTelService.postNameTel(nameTelDto);
model.addAttribute("nameTelList", nameTelService.getNameTelList());
// 2-3. HttpSession 객체를 이용한 데이터 전송
// Model 객체와 HttpServletRequest 객체는 하나의 요청이 시작될 때 생성돼서 요청이 종료되면 사라지는 객체
// HttpSession 객체는 사용자가 웹 어플리케이션에 접속하는 순간 생성되는 객체
// WEB Server(web.xml)에 설정되어 있는 시간동안 유지되는 객체(기본 값은 30분으로 설정되어 있고 사용자가 웹 어플리케이션에서
// 다른 동작(이벤트나 요청)을 발생시키면 계속해서 30분으로 초기화된다.
// 해당 요청에 한정되지 않고 다른 페이지들에서도 HttpSession에 담겨있는 데이터를 사용할 수 있다.
// 주로 로그인한 사용자의 정보를 담아둘 때 사용된다.
session.setAttribute("nameTelList", nameTelService.getNameTelList());
return "name-tel";
② name-tel.jsp 동일
<body>
<form action="/name-tel.do" method="post">
<input type="text" name="name">
<input type="text" name="tel">
<input type="submit" value="전송">
</form>
<!--jstl의 forEach 구문으로 List 형태로 자바에서 넘어온 데이터를 하나씩 꺼내서 표출한다.-->
// aaa는 특별한 의미가 없다. nameTelList에서 하나씩 꺼내겠다는 의미이다.
// ${nameTelList} == NameTelController 에서 attribute 키값
<c:forEach items="${nameTelList}" var="aaa">
<div>
<p>${aaa.name}</p>
<p>${aaa.tel}</p>
</div>
</c:forEach>
</body>[보너스] post를 해야만 model이 보였는데, 이를 GET에 구현하여 기능을 분리하는 방법
* redirect: 다른 요청을 호출
* 흔히 쓰이는 예로 네이버 로그인(post 방식) 후 메인페이지가 보이는 장면(get 방식)을 생각하면 쉽다.
① NameTelController 수정
- model.addAttribute를 get방식에 구현하여 웹 서버 실행시 바로 jsp가 보일 수 있도록 시행
- redirect를 활용하여 post 이후 name-tel.jsp 로 바로 이동할 수 있도록 구현
// 조회 기능 변경
@GetMapping("/name-tel.do")
public String nameTelGet(Model model) {
System.out.println("nameTelGet 메소드 실행");
// model.addAttribute를 get방식에 구현하여 웹 서버 실행시 바로 jsp가 보일 수 있도록 시행
model.addAttribute("nameTelList", nameTelService.getNameTelList());
return "name-tel";
}
// 등록 기능
@PostMapping("/name-tel.do")
public String nameTelPost(@ModelAttribute NameTelDto nameTelDto, Model model, HttpSession session) {
System.out.println("name: " + nameTelDto.getName());
System.out.println("tel: " + nameTelDto.getTel());
nameTelService.postNameTel(nameTelDto);
model.addAttribute("nameTelList", nameTelService.getNameTelList());
session.setAttribute("nameTelList", nameTelService.getNameTelList());
// redirect를 활용하여 post 이후 name-tel.jsp 로 바로 이동할 수 있도록 구현
return "redirect:/name-tel.do";
- 전송을 누르지 않아도 List들이 나열되어 있고,
- 전송을 누른 후에도 .jsp 화면으로 넘어갈 수 있도록 되어있다.
'백엔드 > Spring Framework' 카테고리의 다른 글
| Ajax(Asynchronous Javascript And Xml) (0) | 2024.07.16 |
|---|---|
| el 표기법과 JSTL (0) | 2024.07.16 |
| Web Application(2) / 화면에서 전송한 데이터 자바로 받기 (0) | 2024.07.15 |
| Web Application(1) / 화면에서 자바로 데이터 전송(1. Form Data) / 요청 url 매핑 방식 (0) | 2024.07.15 |
| IMPL 클래스에서 DAO 클래스를 이용하는 법 (0) | 2024.07.15 |
