ㅁ 폴더 생성
- src/main/webapp/resources에 images 폴더, js(js 파일 보관) 폴더를 만든다.
- src/main/webapp에 assets 폴더를 만든다.
- src/main/webapp/assets에 images 폴더, js(js 파일 보관) 폴더를 만든다.
ㅁ 파일 생성
- src/main/webapp/resources/images에 아무 사진 파일 5개를 둔다.
- src/main/webapp/assets/images에 아무 사진 파일 5개를 둔다.
- src/main/webapp/assets/js에만 jquery-3.7.1.min.js를 가져와서 둔다.
function test() {
alert("안녕하세요");
}
- src/main/webapp/resources/js에 일반 파일로 sample.js를 만든다.
ㅁ main.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- / 또는 /main.do라는 url mapping으로 요청시 해당 /WEB-INF/views/main.jsp가 보여지도록 한다. -->
<h1>메인페이지입니다</h1>
<h3>1. 정적 자원 확인</h3>
<img src="${ contextPath }/resources/images/1.jpeg" width="100">
</body>
</html>
- jpg가 아니라 jpeg 파일이었다.
- 이미지 경로에 문제가 있으면 404 오류가 발생한다.
ㅁ main.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${ contextPath }/resources/js/sample.js"></script>
</head>
<body>
<!-- / 또는 /main.do라는 url mapping으로 요청시 해당 /WEB-INF/views/main.jsp가 보여지도록 한다. -->
<h1>메인페이지입니다</h1>
<h3>1. 정적 자원 확인</h3>
<img src="${ contextPath }/resources/images/1.jpeg" width="100" onclick="test();">
</body>
</html>
- 이미지를 클릭하면 alert로 "안녕하세요"가 뜬다.
ㅁ main.jsp 수정
- 엑박, 눌러도 안나옴.
- 404 오류.
- 경로엔 문제가 없다. resources일 때는 문제가 없었는데 assets로 하니까 문제가 발생한다.
- 정적인 자원도 등록을 해야 한다.
- resources는 원래 있던 폴더였던데다가 정적 자원 ~ 등록되어 있어서 문제가 없었던 것이다.
- 정적인 자원에 대한 폴더를 내가 임의대로 만들었다면 servlet-context.xml에 등록을 해야 한다.
ㅁ servlet-context.xml에 정적 자원 폴더 등록하기
<?xml version="1.0" encoding="UTF-8"?>
<!-- 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/" />
<!-- 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/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
<context:component-scan base-package="com.br.mvc" />
</beans:beans>
※ <resources> 태그
- 정적인 자원(이미지, 오디오, 비디오, css, js 등)들을 관리하는 디렉토리(폴더)의 경로를 설정하는 태그.
- 여러개 작성 가능.
- webappRoot가 컨텍스트 패스라고 보면 된다.
컨텍스트패스/resources
ㅁ servlet-context.xml에 resources 태그 추가하고 main.jsp 새로고침
<?xml version="1.0" encoding="UTF-8"?>
<!-- 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="/assets/**" location="/assets/" />
<!-- 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/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
<context:component-scan base-package="com.br.mvc" />
</beans:beans>
- <resources mapping="/assets/**" location="/assets/" />를 추가했다.
- 이미지도 잘 보이고 클릭했을 때 alert도 뜬다.
