ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Spring MVC2 - 2.
    JAVA/웹 프로그래밍 - Spring 2020. 12. 16. 21:19

    아래의 글을 이어서 시작해보자.

    designatedroom87.tistory.com/340

     

    Spring MVC2 - 1. 기본 설정

    프로젝트를 생성시에 maven 프로젝트로 생성을 한다. File -> New -> Maven Project를 선택하고 Next를 선택한다. create simple project를 체크하고 Next를 선택한다. artifact id는 프로젝트 이름이다. war는..

    designatedroom87.tistory.com

     

    src/main/java폴더의 controller 패키지의 IndexController.java의 내용이 아래의 내용이다.

    mv.addObject함수의 매개변수는 index.jsp 혹은 /WEB-INF/index.jsp으로 매개변수를 설정했다.

    여기서는 짧게 아래와 같이 index라고 적겠다.

    그러면 이를 가능하도록 해주는 무언가를 해야하는데, 이가 바로 ViewResolver라는 것을 이용하면 된다.

    이는 조금 뒤에 보자.

    IndexController.java

     

    웹 페이지 요청 시에 IndexController가 실행이 된다.

    그 이유는 dispatcher-servlet.xml 파일에서 이를 설정했기 때문이다.
    Controller를 상속받을 때는 미구현 함수를 구현해야 한다. ( Controller는 인터페이스이기 때문이다. )
    dispatcher-servlet.xml파일을 살펴보자.

    dispatcher-servlet.xml

    위의 id는 이 url로 들어오면, 지정한 class(컨트롤러를 실행하라는 의미이다. 

    즉, 여기서의 url은 /index 이며, 지정한 컨트롤러는 IndexController이다.

     

    mv.setViewName("index"); 로 매개변수가 "index"로 변경되었으니, 이에 대한 처리가 필요하다.

    이는 dispatcher-servlet.xml 파일에서 처리한다.

    아래의 태그를 추가한다.

    그리고 나서, Maven -> Update Project를 실행해주자.

     

    dispatcher-servlet.xml

    더보기
    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
    
    <!-- URL 설정 -->
    <bean id="/index" class="controller.IndexController"></bean>
    
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <!-- 클래스를 실행시에 아래의 값들이 실행된다. -->
    	<property name="order" value="2" />		<!-- value=2는 우선순위를 의미. 낮을 수록 먼저 실행된다. -->
    	<property name="prefix" value="/WEB-INF/" />
    	<property name="suffix" value=".jsp" />
    </bean>
    
    </beans>

     


    WEB-INF폴더에 view폴더를 하나 생성한다.

    index.jsp를 view폴더로 이동시킨다. 그리고 디스패처서블릿xml에서 다음과 같이 수정해야 한다.

    prefix있는 부분을 아래의 문장으로 변경하자.
    <property name="prefix" value="/WEB-INF/view/" />

     

    이미지를 띄워보자. 이미지는 index.jsp에서 띄울 것이다.

    WEB-INF폴더에 static폴더를 하나 만든다. 이미지 파일을 static폴더에 집어넣자.

    이미지는 Tomcat이 설치된 폴더에서 tomcat이라 검색하면 tomcat.gif파일이 있는데, 이 파일을 쓸 것이다.

    그리고 index.jsp 파일에 아래의 문장을 추가하자. 아래의 문장도  url이다.

    <img src="/static/tomcat.gif"> 

     

    index.jsp

     

    실행을 해보자. 그런데 이미지는 뜨지 않을 것이다.

    실행은 서버를 실행하고 웹 페이지를 하나 띄워, http://localhost:9090/index 라고 주소를 입력한다.

    웹 페이지에 다음과 같이 뜨는데, 이미지는 안 보인다.

    뜨지 않는 이유는 dispatcher-servlet.xml 에서 검색을 못했다는 의미이다. ( 등록이 안되어 있어서 그렇다. )

    dispatcher-servlet 에서 건드릴수 있도록 해줘야 한다.

    일단 WEB-INF폴더에 자식으로 묶여있는 static폴더를 webapp폴더 내로 이동시켜보자.
    http://localhost:9090/index 로 실행해도 안 된다.

    적용하는 방법은 dispatcher-servlet.xml에 아래의 한 줄을 </beans> 태그 바로 위에 추가한다.

    <mvc:resources location="/static" mapping="/**"></mvc:resources>

    위의 문장에서 mapping="/**"의 의미는 안에 있는 안의 모든 내용에 대한 접근을 허용 하는 것이다.

     

    위에서 resousresources에 붉은 글씨로 뜨는 이유는 Namespaces에서 이에대한 내용을 추가해주면 된다.

    dispatcher-servlet.xml 파일에 좌측하단에 다음과 같은 목록이 있다. 여기서 Namespaces탭을 선택하자.

    아래에서 mvc를 선택하면 선택창이 뜨는데 OK를 누르면 끝이다.

    그리고 저장하면 에러가 뜨지 않는다.  서버를 실행하고 http://localhost:9090/index 로 접속해보자.

    그러면 그림이 뜬다. 

    그리고 static폴더의 하위로 img폴더를 만들어서 이미지 tomcat.gif 파일을 img폴더에 옮겨보자.

    다음의 계층구조가 된다.

    그리고 이미지 파일의 위치가 변경되었으니, index.jsp파일에서 이미지의 주소를 다음의 내용으로 변경하자.

    <img src="/static/img/tomcat.gif">

     

    index.jsp

     

    그리고 서버를 재 실행해보자. 특별한 설명이 없으면 http://localhost:9090/index 로 접속한다. 앞으로 생략한다.

    이미지가 잘 뜬다.

     

    이번에는 index.jsp에서의 글자의 스타일을 변경해보자.

    static폴더에 css폴더를 만들고 style.css파일을 만들자.

    style.css

     

    그리고 index.jsp파일의 헤더 태그에 아래 한줄 적어서 모든 글자가 붉게 만들어 보자.

    <link rel="stylesheet" href="/static/css/style.css">

     

    index.jsp

    서버를 재 실행해보자. 글자가 붉은 색으로 변경되었다. 이미지 또한 잘 뜬다.

     

     

    이번에는 index.jsp에 버튼을 하나 만들어서, 버튼이 클릭되면 알람창을 띄워보자.

    알람창은 javascript를 이용해서 띄워보자.

    static폴더에 js폴더를 하나 만든다.

    index.js 파일을 하나 만들고 내용은 아래와 같다. 함수의 역할은 버튼이 눌리면 alert창을 띄우는 내용이다.

    index.js 

     

    index.jsp로 와서 내용을 수정하자. header태그에 아래의 문장을 추가하자.

    <script src="/static/js/index.js">

     

    index.jsp

     

    index.jsp

    더보기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>index.jsp</title>
    
    <link rel="stylesheet" href="/static/css/style.css">
    
    <script src="/static/js/index.js"></script>
    
    </head>
    <body>
    index.jsp <br>
    ${data} <br>
    <img src="/static/img/tomcat.gif"> <br>
    <button onclick="button()">js테스트</button>
    </body>
    </html>

     

     

     

    src/main/java폴더에 controller패키지에 HomeController.java를 만든다. 일반 자바 파일로 만들면 된다.

    기존에 만든 IndexController와 약간 모양이 다를 것이다.

    어노테이션을 사용하면 Controller라고 상속을 받지않고 만들 수 있다.

    IndexController는 Controller를 상속해서 만들었으니, HomeController는 그러지 않는다.

     

    dispatcher-servlet.xml 로 가서 아래의 한 줄 추가하자.

    아래의 문장을 추가하는 이유는 @Controller를 스캔할 수 없어서 이에 대한 내용을 스캔할 수 있게 만들기 위함이다.

    <context:component-scan base-package="controller"></context:component-scan>

     

    아래에 붉은 글씨로 뜨는 이유는 Namespaces에서 context를 추가하면 된다.

     

    dispatcher-servlet.xml

     

    dispatcher-servlet.xml

    더보기
    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xmlns:mvc="http://www.springframework.org/schema/mvc"
    	xmlns:context="http://www.springframework.org/schema/context"
    	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
    		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    
    <!--	해당하는 컨트롤러를 스캔하기 위해 추가 (Component가 있는지 없는지 체크를 한다.)
    		스캔을 해야 HomeController의 @Controller를 확인할 수 있다.
    -->
    <context:component-scan base-package="controller"></context:component-scan>
    
    <!-- URL 설정 -->
    <bean id="/index" class="controller.IndexController"></bean>
    
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <!-- 클래스를 실행시에 아래의 값들이 실행된다. -->
    	<property name="order" value="2" />		<!-- value=2는 우선순위를 의미. 낮을 수록 먼저 실행된다. -->
    	<property name="prefix" value="/WEB-INF/view/" />
    	<property name="suffix" value=".jsp" />
    </bean>
    
    <mvc:resources location="/static" mapping="/**"></mvc:resources>
    
    </beans>

     

     

    HomeController.java

    더보기
    package controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    /*
    	 spring에서는 
    	 java에서 객체 생성은 @Component를 이용했고
    	 Web에서는 @Controller를 이용한다.
     */
    
    @Controller
    public class HomeController {
    	
    	@RequestMapping("/test")
    	void test() {	System.out.println("test");	}
    }

     

    서버를 실행하고, 웹 주소에 http://localhost:9090/test를 입력한다.

    콘솔 창에 test라고 적혀있으면 된다.

    실행을 하면 에러가 발생한다. dispatcher-servlet.xml 설정에서 문제가 있었기 때문이다.

    해결방법은 간단하다. dispatcher-servlet.xml의 맨 미자막 문장을 보자. 

    <mvc:resources location="/static" mapping="/**"></mvc:resources>

    위의 문장을 주석처리하자.

     

    아래와 같이 주석처리를 하고 재실행해서 http://localhost:9090/test으로 접속해보자.

    콘솔 창에 다음과 같이 test라고 적혀있다.

     

    그리고 HomeController.java 를 다음과 같이 내용을 추가해보자.

    그리고 실행을 하는데 각 각 웹 페이지 주소에 

    http://localhost:9090/test

    http://localhost:9090/test1

    http://localhost:9090/test2 를 입력해보자.

    HomeController.java

    더보기
    package controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    /*
    	 spring에서는 
    	 java에서 객체 생성은 @Component를 이용했고
    	 Web에서는 @Controller를 이용한다.
     */
    
    @Controller
    public class HomeController {
    	
    	@RequestMapping("/test")
    	void test() {	System.out.println("test");	}
    	
    	@RequestMapping("/test1")
    	ModelAndView test1() 	//	web 페이지로 되돌려 준다.
    	{
    		ModelAndView mv = new ModelAndView();
    		
    		mv.addObject("data","test1");
    		 
    		mv.setViewName("index");  //	viewResolver가 설정이 되어 있어서 index라고 보낼 수 있다.
    		
    		return mv;
    	}
    	
    	@RequestMapping("/test2")
    	ModelAndView test2() 	//	web 페이지로 되돌려 준다.
    	{
    		ModelAndView mv = new ModelAndView();
    		
    		mv.addObject("data","test2");
    		 
    		mv.setViewName("index");  //	viewResolver가 설정이 되어 있어서 index라고 보낼 수 있다.
    		
    		return mv;
    	}
    }

     

     

    문제가 있다. test1과 test2입력 시에 static의 css가 적용이 안 되어 있다. js도 적용이 안 되어 있다.

    이 문제는 나중에 처리해보도록 하자.

     

    그리고 앞에서 spring의 설정파일에서 bean 태그를 제거했었다.

    여기서도 설정파일인 dispatcher-servlet.xml의 bean 태그를 제거할 수 있다.

    우선 dispatcher-servlet.xml 파일의 아래의 내용을 주석 처리하자.

     

    그리고 bean의 생성을 HomeController에서 하도록 하자.

    HomeController.java에서 아래의 메소드를 추가한다.

     

    dispatcher-servlet.xml

    더보기
    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xmlns:mvc="http://www.springframework.org/schema/mvc"
    	xmlns:context="http://www.springframework.org/schema/context"
    	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
    		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    
    <!--	해당하는 컨트롤러를 스캔하기 위해 추가 (Component가 있는지 없는지 체크를 한다.)
    		스캔을 해야 HomeController의 @Controller를 확인할 수 있다.
    -->
    <context:component-scan base-package="controller"></context:component-scan>
    
    <!-- URL 설정 -->
    <bean id="/index" class="controller.IndexController"></bean>
    
    <!-- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    클래스를 실행시에 아래의 값들이 실행된다.
    	<property name="order" value="2" />		value=2는 우선순위를 의미. 낮을 수록 먼저 실행된다.
    	<property name="prefix" value="/WEB-INF/view/" />
    	<property name="suffix" value=".jsp" />
    </bean> -->
    
    <!-- <mvc:resources location="/static" mapping="/**"></mvc:resources>  -->
    
    </beans>

     

    HomeController.java

    더보기
    package controller;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    import org.springframework.web.servlet.ViewResolver;
    import org.springframework.web.servlet.view.InternalResourceViewResolver;
    
    /*
    	 spring에서는 
    	 java에서 객체 생성은 @Component를 이용했고
    	 Web에서는 @Controller를 이용한다.
     */
    
    @Controller
    public class HomeController {
    	
    	@RequestMapping("/test")
    	void test() {	System.out.println("test");	}
    	
    	@RequestMapping("/test1")
    	ModelAndView test1() 	//	web 페이지로 되돌려 준다.
    	{
    		ModelAndView mv = new ModelAndView();
    		
    		mv.addObject("data","test1");
    		 
    		mv.setViewName("index");  //	viewResolver가 설정이 되어 있어서 index라고 보낼 수 있다.
    		
    		return mv;
    	}
    	
    	@RequestMapping("/test2")
    	ModelAndView test2() 	//	web 페이지로 되돌려 준다.
    	{
    		ModelAndView mv = new ModelAndView();
    		
    		mv.addObject("data","test2");
    		 
    		mv.setViewName("index");  //	viewResolver가 설정이 되어 있어서 index라고 보낼 수 있다.
    		
    		return mv;
    	}
    	
    	@Bean	//	bean 생성
    	public ViewResolver customViewResolver()
    	{
    		InternalResourceViewResolver internalResourceViewResolver = new InternalResourceViewResolver();
    		
    		internalResourceViewResolver.setPrefix("/WEB-INF/view/");
    		internalResourceViewResolver.setSuffix(".jsp");
    			
    		return internalResourceViewResolver;
    	}
    }

     

    http://localhost:9090/test로 접속해보자. 아래와 같이 콘솔 창에 test라고 적혀있을 것이다.

    댓글

Designed by Tistory.