Spring-MyWeb 삭제,무한 스크롤 페이징

22.06.27 삭제,무한 스크롤 페이징

게시글의 이미지 파일 전송 요청

파일 전송은 get방식 X 무조건 post 방식으로 진행해야 한다.

snsList.jsp

snsList.jsp에서 getList()호출 할때 이미지 영역에서
이미지 호출 요청이 들어간다.

<!-- 이미지영역 -->
<img src="<c:url value='/snsBoard/display?fileLoca=` + 
   list[i].fileloca + `&fileName=` + list[i].filename + `' />">

SnsBoardController

게시글의 이미지 파일 전송 요청
이 요청은 img태그에 의해서 요청이 들어오고 있다.
snsList.jsp 페이지가 로딩되면서, 글 목록을 가져오고 있고, JS를 이용해서
화면을 꾸밀 때 img 태그에 src에 작성된 요청 url을 통해 자동으로 요청이 들어온다.
요청을 받아서 경로에 지정된 파일을 보낼 예정이다.

<script>
@GetMapping("/display")
public ResponseEntity<byte[]> getFile(String fileLoca, String fileName) {
		
	System.out.println("fileName: " + fileName);
	System.out.println("fileLoca: " + fileLoca);
		
	File file = new File("C:\\Users\\jwons\\OneDrive\\바탕 화면\\upload\\" + fileLoca + "\\" + fileName);
	System.out.println(file);
	
	ResponseEntity<byte[]> result = null;
		
	HttpHeaders headers = new HttpHeaders();
	//응답 헤더 파일에 여러가지 정보를 담아서 전송하는 것도 가능하다.
	try {
		//.probeContentType() 파라미터로 전달받은 파일의 타입을 문자열로 변환해 주는 메서드.
		//사용자에게 보여주고자 하는 데이터가 어떤 파일인지를 검사해서 응답상태 코드를 다르게 리턴할 수도 있다.
		headers.add("Content-Type", Files.probeContentType(file.toPath()));
		
		//ResponseEntity<>(응답 객체에 담을 내용, 헤더에 담을 내용, 상태 메세지)
		//FileCopyUtils 파일 및 스트림 데이터 복사를 위한 간단한 유틸리티 메서드의 집합체.
		//file 객체 안에 있는 내용을 복사해서 byte 배열로 변환해서 바디에 담아 화면에 전달.
		result = new ResponseEntity<byte[]>(FileCopyUtils.copyToByteArray(file), headers, HttpStatus.OK);
	} catch (IOException e) {
		e.printStackTrace();
	}
	return result;
}
</script>

상세보기

이미지 클릭시에 모달 열기

snsList.jsp

이미지 영역에 a태그 추가해서 href에 bno를 추가한다.

<div class="image-inner">
	<!-- 이미지영역 -->
	<a href="` + list[i].bno + `">
		<img src="<c:url value='/snsBoard/display?fileLoca=` + 
        list[i].fileloca + `&fileName=` + list[i].filename + `'/>">
	</a>
</div>

jQuery
비동기 방식으로 처리되는 getList( )의 태그말고 실제 존재하는 태그에 이벤트 걸기!
@PathVariable 방식으로 bno 함께 전달.
a태그를 클릭하면 상세 보기 모달창이 열린다.
컨트롤러에서 data를 얻어와서 모달 열기전에 값을 뿌린후에 .modal('show')

<script>
//상세보기 처리(모달창 열기)
$('#contentDiv').on('click', '.image-inner a', function(e) {
	e.preventDefault(); //a의 고유 기능 중지
	
	//글 번호 얻어오기
	const bno = $(this).attr('href');
	
	$.getJSON(
		'<c:url value="/snsBoard/getDetail/"/>'	+ bno,
		function(data) {
			console.log(data);
			
			//미리 준비한 모달창에 뿌릴 거당.(모달 위에 있어용)
			//값을 제 위치에 잘 뿌려주시고 모달을 열어주세요
			const src = '<c:url value="/snsBoard/display?fileLoca=' + data.fileloca + '&fileName=' + data.filename'"/>'
			$('#snsImg').attr('src', src); //이미지 경로 처리
			$('#snsWriter').html(data.writer); //작성자 처리
			$('snsRegdate').html(timeStamp(data.regdate)); //날짜 처리
			$('#snsContent').html(data.content); //내용 처리
			$('#snsModal').modal('show'); //모달 열기						
		}
	); //end getJSON
}); //상세보기 처리 끝
</script>

SnsBoardController

//상세보기 처리
@GetMapping("/getDetail{bno}")
@ResponseBody
public SnsBoardVO getDetail(@PathVariable int bno) {	
	return service.getDetail(bno);
}

SnsBoardService

@Override
public SnsBoardVO getDetail(int bno) {
	return mapper.getDetail(bno);
}

SnsBoardMapper

<select id="getDetail" resultType="sns">
	SELECT * FROM snsboard
	WHERE bno=#{bno}
</select>

삭제

snsList.jsp

getList( )에서 진행되는 str과정에 삭제하기 부분에 href에 bno넣기.

<div class="link-inner">
	<a href="##"><i class="glyphicon glyphicon-thumbs-up"></i>좋아요</a>
	<a href="##"><i class="glyphicon glyphicon-comment"></i>댓글달기</a> 
	<a href="` + list[i].bno + `"><i class="glyphicon glyphicon-remove"></i>삭제하기</a>
</div>`;

jQuery
삭제 처리
삭제하기 링크를 클릭했을 때 이벤트를 발생 시켜서
비동기 방식으로 삭제를 진행해 주세요. (삭제 버튼은 한 화면에 여러개 겠죠?)
서버쪽에서 권한을 확인 해 주세요. (작성자와 로그인 중인 사용자의 id를 비교해서)
일치하지 않으면 문자열 "noAuth" 리턴, 성공하면 "Success" 리턴.
url: /snsBoard/delete, method: post

<script>
$('#contentDiv').on('click', '.link-inner a', function(e) {
	e.preventDefault();
	
	const bno = $(this).attr('href'); //글 번호
	
	$.ajax({
		url: '<c:url value="/snsBoard/delete"/>',
		type: 'post',
		data: bno,
		contentType: 'application/json',
		success: function(result) {
			if(result === 'noAuth'){
				alert('권한이 없습니다.');
			} else if(result === 'fail'){
				alert('삭제에 실패했습니다. 관리자에게 문의하세요.');
			} else {
				alert('게시물이 정상적으로 삭제되었습니다.');
				getList(1, true); //삭제가 반영된 글 목록을 새롭게 보여줘야 하기 때문에 리셋 여부를 true
			}
		},
		error: function() {
			alert('삭제에 실패했습니다. 관리자에게 문의해 주세요.');
		}		
	}); //end ajax
}); //삭제 처리 끝.
</script>

SnsBoardController

<script>
//삭제 처리
@PostMapping("/delete")
@ResponseBody
public String delete(@RequestBody int bno, HttpSession session) {
	System.out.println("삭제 글 번호: " + bno);
	SnsBoardVO vo = service.getDetail(bno);
		
	UserVO user = (UserVO)session.getAttribute("login");
		
	if(user == null || !user.getUserId().equals(vo.getWriter())) {
		return "noAuth";
	}
	service.delete(bno);
		
	//글이 삭제되었다면 더이상 이미지도 존재할 필요가 없으므로 로컬 경로의 이미지도 함께 지목해서 삭제
	File file = new File(vo.getUploadpath() + "\\" + vo.getFilename());
	System.out.println("파일 삭제 완료!");
	
	return file.delete() ? "Success" : "fail"; //파일 삭제 메서드
}
</script>

SnsBoardService

@Override
public void delete(int bno) {
	mapper.delete(bno);
}

SnsBoardMapper

<delete id="delete">
	DELETE FROM snsboard
	WHERE bno=#{bno}
</delete>

무한스크롤 페이징

snsList.jsp

<script>
//무한 스크롤
$(window).scroll(function() {
	//윈도우(device)의 높이와 현재 스크롤 위치 값을 더한 뒤, 문서(컨텐츠)의 높이와 비교해서 같다면 로직을 수행.
	//문서 높이 - 브라우저 창 높이 = 스크롤 창의 끝 높이와 같다면 -> 새로운 내용을 불러오자.
	if(Math.round($(window).scrollTop()) === $(document).height() - $(window).height()){
		//사용자의 스크롤이 바닥에 닿았을 때, 페이지 변수의 값을 하나 올리고
		//reset여부는 false를 주셔서 누적해서 계쏙 불러 오시면 됩니다.
		//게시글을 몇 개 씩 불러 올지는 페이징 알고리즘에서 정해 주시면 됩니다.
		getList(++page, false);
	}
});
</script>