⁂ Spring FrameWork/: 기본 익히기(Boot 기반)
[Spring] #6 View와 Controller 연습하기(MVC 중 VC)
김갱환
2022. 11. 1. 14:38
1. view와 controller의 연계를 스프링에서 구현해보기 1
myweb 프로젝트를 진행하면서 게시판을 만들었었다.
이 때 스프링이 아니라 자바를 활용한 jsp 파일로만 이런 부분들을 구현했었다.
이번에는 스프링을 사용하여 게시판을 만들어보려한다.
1) 영역 구분
우선 프론트단이 들어갈 영역과 JSP파일들이 구현될 뷰단 영역, 그리고 컨트롤러 영역을 구분해두려한다.
src/main/resources : CSS / JS / 이미지 파일들이 있는 경로
src/main/webapp/WEB-INF/views : 뷰에 들어갈 JSP 페이지들이 있는 경로
2) application.properties 환경 설정 하기
다음으론 application.properties로 환경 설정을 해보자.
우선 우클릭을 하려 properties에 들어가 인코딩 타입을 UTF-8로 바꿔주었다.
다음으론 톰캣 서버의 포트 번호와 뷰페이지를 사용하기 위한 prefix와 suffix를 등록해주었다.
# Spring Boot는 WAS(Tomcat) 내장되어있음(기본 port 번호 8080)
# 톰캣 서버의 http port 번호 변경
server.port=9095
# 주의사항 JSP, Thymeleaf, Mustache는 공동으로 사용될 수 없음.
# JSP를 뷰페이지로 사용할 경우 pom.xml에 라이브러리를 추가해주어야 한다.
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
그리고 어제 배웠던 것처럼 ModelAndView 객체를 활용하여 명령어를 등록하고 페이지를 연결시켰다.
// URL에서 요청, 응답이 가능한 클래스 지정
@Controller
public class HomeController {
public HomeController () {
System.out.println("---------HomeController() 객체 생성됨");
} // end
// 결과 확인 http://localhost:9095/home.do
// 요청 명령어를 등록하고 실행의 주체는 메서드(함수)
@RequestMapping("/home.do")
public ModelAndView home () {
ModelAndView mav = new ModelAndView();
mav.setViewName("start");
return mav;
} // home() end
} // class end
페이지가 잘 열렸다.
2. view와 controller의 연계를 스프링에서 구현해보기 2
이번에는 사용자의 요청 명령어를 어떻게 받아들이는 지 확인해보자.
이 때 RequestMapping 이란 어노테이션을 활용한다.
@RequestMapping(value="", method= GET | POST)
// value = 명령어 등록
// method = RequestMethod.전달방식
// 만약에 명령어만 써져있다면 GET과 POST를 동시 허용한다는 뜻이다.
이것을 활용하여 사칙연산을 할 수 있는 명령어들을 만들었다.
// 결과 확인 http://localhost:9095/add.do?no1=3&no2=5
// /add.do 명령어를 get 방식으로 요청하면
@RequestMapping(value="/add.do", method = RequestMethod.GET)
public ModelAndView add(HttpServletRequest req) {
// 사용자가 요청한 값이 있다면 값을 가져오기
int no1 = Integer.parseInt(req.getParameter("no1"));
int no2 = Integer.parseInt(req.getParameter("no2"));
int result = no1 + no2;
// view 페이지로 이동하기 위한 클래스
// -> Model
// -> ModelAndView
ModelAndView mav = new ModelAndView();
// application.properties 환경설정의 prefix와 suffix 참조
// /WEB-INF/views/calcResult.jsp 뷰 페이지로 이동
mav.setViewName("calcResult");
// 공유장소 requset 영역에 값 올리기
req.setAttribute("no1", no1);
req.setAttribute("no2", no2);
req.setAttribute("result", result);
req.setAttribute("message", "<h3>두 수 사이의 합</h3>");
req.setAttribute("img", "<img src='images/001.png'>");
return mav;
} // end
@RequestMapping(value="/min.do", method = RequestMethod.GET)
public ModelAndView min(HttpServletRequest req) {
// 사용자가 요청한 값이 있다면 값을 가져오기
int no1 = Integer.parseInt(req.getParameter("no1"));
int no2 = Integer.parseInt(req.getParameter("no2"));
int result = no1 - no2;
// view 페이지로 이동하기 위한 클래스
// -> Model
// -> ModelAndView
ModelAndView mav = new ModelAndView();
// application.properties 환경설정의 prefix와 suffix 참조
// /WEB-INF/views/calcResult.jsp 뷰 페이지로 이동
mav.setViewName("calcResult");
// 공유장소 requset 영역에 값 올리기
mav.addObject("no1", no1);
mav.addObject("no2", no2);
mav.addObject("result", result);
mav.addObject("message", "<h3>두 수 사이의 차</h3>");
mav.addObject("img", "<img src='images/002.png'>");
return mav;
} // end
@RequestMapping(value="/mul.do", method = RequestMethod.GET)
public ModelAndView mul(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
// 사용자가 요청한 값이 있다면 값을 가져오기
int no1 = Integer.parseInt(req.getParameter("no1"));
int no2 = Integer.parseInt(req.getParameter("no2"));
int result = no1 * no2;
// view 페이지로 이동하기 위한 클래스
// -> Model
// -> ModelAndView
ModelAndView mav = new ModelAndView();
// application.properties 환경설정의 prefix와 suffix 참조
// /WEB-INF/views/calcResult.jsp 뷰 페이지로 이동
mav.setViewName("calcResult");
// 공유장소 requset 영역에 값 올리기
mav.addObject("no1", no1);
mav.addObject("no2", no2);
mav.addObject("result", result);
mav.addObject("message", "<h3>두 수 사이의 곱</h3>");
mav.addObject("img", "<img src='images/003.png'>");
return mav;
} // end
@RequestMapping(value="/div.do", method = RequestMethod.GET)
public ModelAndView div(HttpServletRequest req) {
// 사용자가 요청한 값이 있다면 값을 가져오기
int no1 = Integer.parseInt(req.getParameter("no1"));
int no2 = Integer.parseInt(req.getParameter("no2"));
int result = no1/no2;
// view 페이지로 이동하기 위한 클래스
// -> Model
// -> ModelAndView
ModelAndView mav = new ModelAndView();
// application.properties 환경설정의 prefix와 suffix 참조
// /WEB-INF/views/calcResult.jsp 뷰 페이지로 이동
mav.setViewName("calcResult");
// 공유장소 requset 영역에 값 올리기
mav.addObject("no1", no1);
mav.addObject("no2", no2);
mav.addObject("result", result);
mav.addObject("message", "<h3>두 수 사이의 나누기</h3>");
mav.addObject("img", "<img src='images/004.png'>");
return mav;
} // end
3. @RequestParam을 활용하여 사용자가 입력한 값을 한번에 처리하기
이번에는 한 가지 명령어를 받아오는 방식에 따라 다르게 실행시키는 과정을 알아보려 한다.
이 때 사용하는 어노테이션이 있다.
바로 @RequsetParam이다.
이 어노테이션은 사용자의 요청명령어를 한번에 처리해버릴 수 있도록 지원해준다.
1) 형식
@RequestParam("요청변수명") 자료형 변수명
2) 적용
사용자가 요청한 값을 직접 변수에 저장 가능하다.
이 어노테이션을 아래 코드처럼 우리가 사용할 메서드의 변수로 지정해서 담아준다.
@RequestMapping("/diff.do") // GET | POST
public ModelAndView diff(@RequestParam("no1") int a, @RequestParam("no2") int b) {
int result = Math.abs(a-b);
ModelAndView mav = new ModelAndView();
mav.setViewName("calcResult");
mav.addObject("no1", a);
mav.addObject("no2", b);
mav.addObject("result", result);
mav.addObject("message", "<h3>두 수 사이의 차이</h3>");
mav.addObject("img", "<img src='images/005.png'>");
return mav;
} // diff() end
이처럼 메서드 안에 변수명을 직접적으로 지정해주고 저장해주는 유연성을 가진 것이 스프링의 특징이다.
+ 사용자가 요청한 값을 매개변수로 직접 저장할 수도 있다.
// 결과 확인 http://localhost:9095/max.do?no1=3&no2=5
// 사용자가 요청한 값을 매개변수로 직접 저장하여 사용 가능하다
// 단, 사용자가 요청한 변수명과 매개변수명이 동일해야 한다.
@RequestMapping("/max.do") // GET | POST
public ModelAndView max(int no1, int no2) {
int result = Math.max(no1, no2);
ModelAndView mav = new ModelAndView();
mav.setViewName("calcResult");
mav.addObject("no1", no1);
mav.addObject("no2", no2);
mav.addObject("result", result);
mav.addObject("message", "<h3>두 수 중 큰 수는</h3>");
mav.addObject("img", "<img src='images/006.png'>");
return mav;
} // diff() end