[Spring] #6 View와 Controller 연습하기(MVC 중 VC)

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