« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Kim VamPa

[Spring][쇼핑몰 프로젝트][28] 상품 상세 페이지 이미지 출력 - 2 본문

스프링 프레임워크/쇼핑몰 프로젝트

[Spring][쇼핑몰 프로젝트][28] 상품 상세 페이지 이미지 출력 - 2

Kim VamPa 2021. 7. 6. 12:21

728x90

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

상품 상세 페이지 이미지 출력

저번 포스팅은 서버 측 작업을 하였고, 이번 포스팅에서는 뷰(view)에서 서버에 요청하여 전달받은 이미지 정보를 통해 이미지가 출력이 되도록 작업을 하고자 합니다.

순서

1. 태그 및 css 추가

이미지가 출력될 태그를 추가해주겠습니다. goodsDetail.jsp파일에서 그림 1-1에 표시한 위치에 아래의 코드를 추가해줍니다.('책 목차' 입력란과 '수정 버튼' 사이)

                    		<div class="form_section">
                    			<div class="form_section_title">
                    				<label>상품 이미지</label>
                    			</div>
                    			<div class="form_section_content">

									<div id="uploadReslut">
																		
									</div>
                    			</div>
                    		</div>

추가해준 태그의 css를 추가해주겠습니다. 추가해줄 코드가 짧기 때문에 goodsDetail.jsp 에 <style> 태그를 추가해줘서 css 코드를 추가하겠습니다. <head> 태그 내부에 아래의 코드를 추가해줍니다.

<style type="text/css">
	#result_card img{
		max-width: 100%;
	    height: auto;
	    display: block;
	    padding: 5px;
	    margin-top: 10px;
	    margin: auto;	
	}
</style>

2. javascript 코드

2.1 이미지 있는 경우

페이지에 접속하자마자 실행되도록 하기 위해서 기존 작성되어 있는 $(document).ready(functino() 메서드 구현부에서 코드를 추가해주겠습니다.

먼저 goodsDetail.jsp 페이지로 접속을 할 때 서버로부터 전달받은 bookId를 값으로 갖는 변수를 선언합니다. 더불어 id속성 값이 uploadResult 인 <div> 요소에 편하게 접근하기 위해서 해당 요소를 값으로 하는 변수를 선언하였습니다.

		/* 이미지 정보 호출 */
		let bookId = '<c:out value="${goodsInfo.bookId}"/>';
		let uploadReslut = $("#uploadReslut");

이제는 서부로부터 이미지 정보 요청을 위해서 getJSON 메서드를 작성할 차례입니다. 이전 포스팅에서 설명을 하였지만 간략히 한 번 더 설명을 하면, GET 방식으로 요청 및 응답을 하는 서버로부터 JSON으로 인코딩 된 데이터를 전달받기 위해 사용하는 메서드입니다.

사용방법은 아래와 같습니다. getJOSN() 메서드를 작성하고 첫 번째 인자로는 서버에 요청할 GET방식의 url을, 두 번째 인자는 서버에 요청을 할 때 전달할 데이터, 세 번째 인자는 성공적으로 서버로부터 데이터를 전달받았을 때 실행할 콜백함 수를 작성하면 됩니다. (자세한 사항은 아래의 jquery 공식 문서를 참고하시면 됩니다.)

https://api.jquery.com/jquery.getjson/

getJSON(url[,data][,success]);

앞서 변수를 선언해준 코드 아래에 아래와 같이 getJSON 코드를 추가해줍니다. 첫 번째 인자로는 저번 포스팅에서 작성한 url 매핑 메서드를 요청하기 위해서 '/getAttachList'을 작성하였고, 서버에 bookId 데이터를 전달하기 위해서 객체 초기자를 사용하여 bookId를 두 번째 인자로 작성하였습니다. 세 번째는 성공적으로 서버로부터 이미지 정보를 전달받았을 때 실행할 콜백 함수를 작성하였습니다.

			/* 이미지 정보 호출 */
			let bookId = '<c:out value="${goodsInfo.bookId}"/>';
			let uploadReslut = $("#uploadReslut");			
			
			$.getJSON("/getAttachList", {bookId : bookId}, function(arr){	
				
			});

콜백함수 구현부에 먼저 두 가지 변수를 추가해주었습니다. 첫 번째 변수는 uploadResult 태그 내부에 삽입될 태그 코드(String 데이터)를 값으로 가집니다. 두 번째 변수는 서버로부터 전달받은 이미지 정보 객체를 값으로 가집니다.

(우리가 이전 포스팅에서 작성한 서버의 메서드가 여러 개의 이미지를 반환할 수 있도록 코드를 작성했기 때문에 뷰(view)에서는 이미지 정보를 배열 형태로 전달받게 됩니다. 현재 우리가 작성하고 있는 상품 이미지의 경우 하나의 이미지만 저장하고 출력하도록 하고 있기 때문에 서버로부터 전달받은 이미지 정보 배열의 첫 번째 요소를 변수로 지정해주었습니다.)

			/* 이미지 정보 호출 */
			let bookId = '<c:out value="${goodsInfo.bookId}"/>';
			let uploadReslut = $("#uploadReslut");			
			
			$.getJSON("/getAttachList", {bookId : bookId}, function(arr){	
				
				let str = "";
				let obj = arr[0];				
				
			});

선언 해준 str 변수에 uploadResult 태그에 삽입될 코드를 값으로 부여해줍니다.

			/* 이미지 정보 호출 */
			let bookId = '<c:out value="${goodsInfo.bookId}"/>';
			let uploadReslut = $("#uploadReslut");			
			
			$.getJSON("/getAttachList", {bookId : bookId}, function(arr){	
				
				let str = "";
				let obj = arr[0];	
				
				let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
				str += "<div id='result_card'";
				str += "data-path='" + obj.uploadPath + "' data-uuid='" + obj.uuid + "' data-filename='" + obj.fileName + "'";
				str += ">";
				str += "<img src='/display?fileName=" + fileCallPath +"'>";
				str += "</div>";				
				
			});

html() 메서드를 사용해서 str변수에 저장된 값들이 uploadReuslt 태그 내부에 추가되도록 해줍니다.

			/* 이미지 정보 호출 */
			let bookId = '<c:out value="${goodsInfo.bookId}"/>';
			let uploadReslut = $("#uploadReslut");			
			
			$.getJSON("/getAttachList", {bookId : bookId}, function(arr){	
				
				let str = "";
				let obj = arr[0];	
				
				let fileCallPath = encodeURIComponent(obj.uploadPath + "/s_" + obj.uuid + "_" + obj.fileName);
				str += "<div id='result_card'";
				str += "data-path='" + obj.uploadPath + "' data-uuid='" + obj.uuid + "' data-filename='" + obj.fileName + "'";
				str += ">";
				str += "<img src='/display?fileName=" + fileCallPath +"'>";
				str += "</div>";		
				
				uploadReslut.html(str);						
				
			});

2.2 이미지 없는 경우

서버로부터 이미지 정보를 요청하였지만 전달받은 이미지가 없는 경우 앞서 작성한 콜백 함수 구현부의 코드들이 실행 될 필요가 없습니다. 따라서 콜백함수 구현부 제일 상단에 if 함수를 통해 서버로부터 전달받은 배열에 데이터가 없을 경우 콜백 함수를 바로 빠져나갈 수 있도록 코드를 추가해줍니다.

				if(arr.length === 0){			
					return;
				}

이미지가 없는 경우 좀 더 직관적으로 이미지가 없음을 알 수 있도록, '이미지 없음' 문구가 적힌 이미지가 출력되도록 해보겠습니다. 먼저 src/main/webapp/resources/img 경로에 출력시키고자 하는 이미지를 저장해줍니다. 저의 경우 그림판으로 간단히 만들었습니다.

앞서 이미지가 없을 경우 콜백 함수를 빠져나가도록 하기 위해 추가해준 if 코드 구현부에 아래의 코드를 추가하여 저장한 이미지가 출력이 되도록 하였습니다.

					let str = "";
					str += "<div id='result_card'>";
					str += "<img src='/resources/img/goodsNoImage.png'>";
					str += "</div>";
					
					uploadReslut.html(str);

3. 테스트

작성한 코드들이 정상적으로 동작하는지 테스트하기 위해 서버를 구동시켜 제품 상세 페이지에 접속하여 확인합니다. 한 번은 이미지가 있는 상품을 다른 한 번은 이미지가 없는 상품의 제품 상세 페이지에 접속합니다.

REFERENCE

코드로배우는 스프링 웹 프로젝트(남가람북스)

DATE

2020.07.06

728x90

저작자표시

'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글

[Spring][쇼핑몰 프로젝트][29] 상품 이미지 수정 - 2(삭제, 재등록) (3)	2021.07.14
[Spring][쇼핑몰 프로젝트][29] 상품 이미지 수정 - 1(이미지 출력) (0)	2021.07.13
[Spring][쇼핑몰 프로젝트][28] 상품 상세 페이지 이미지 출력 - 1 (9)	2021.07.05
[Spring][쇼핑몰 프로젝트][27] 업로드 이미지 정보 등록 - 5 (트랜잭션 적용) (3)	2021.06.15
[Spring][쇼핑몰 프로젝트][27] 업로드 이미지 정보 등록 - 4 (10)	2021.06.14