33. 글 삭제

detail.jsp에서 글 번호, 작성자 추가 + 삭제 버튼 id 추가.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<div class="form-group">
		글 번호 : <span id="id">${board.id }</span> <br>
		작성자 : <span id="username">${board.user.username}</span>		
	</div>
	<hr>
	<div class="form-group">
		<h3>${board.title }</h3>
	</div>
	<hr>
	<div class="form-group">
		<p>${board.content }</p>
	</div>
	<div class="d-flex justify-content-end">
		<button class="btn btn-secondary" onclick="history.back()">뒤로가기</button>
		<button id="btn-update"  class="btn btn-info">수정</button>
		<c:if test="${board.user.id == principal.user.id }">
			<button id="btn-delete"  class="btn btn-danger">삭제</button>
		</c:if>
	</div>
</div>

<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

board.js 에 deleteById 함수 추가.

let index = {
	init: function() {
		$("#btn-save").on("click", ()=>{
			this.save();
		});
		$("#btn-update").on("click", ()=>{
			this.update();
		});
		$("#btn-delete").on("click", ()=>{
			this.deleteById();
		});
	},
	
	save: function() {
		let data = {
			title: $("#title").val(),
			content: $("#content").val(),			
		}; 
		
		$.ajax({			
			type: "POST",
			url: "/api/boardWrite",
			data: JSON.stringify(data), 
			contentType: "application/json; charset=utf-8",
			dataType: "json"
		}).done(function(resp){			
			alert("글쓰기가 완료되었습니다.");
			location.href="/";
		}).fail(function(error){
			alert(JSON.stringify(error));			
		}); 
	},
	
	deleteById: function() {		
		var id = $("#id").text();
		
		$.ajax({			
			type: "DELETE",
			url: "/api/boardDelete/"+id,
			dataType: "json"
		}).done(function(resp){			
			alert("삭제가 완료되었습니다.");
			location.href="/";
		}).fail(function(error){
			alert(JSON.stringify(error));			
		}); 
	}
	
}

index.init();

span 태그로 작성자 id를 받았기 때문에 .text()로 값을 가져옴.

 

BoardApiController 수정

	@DeleteMapping("/api/boardDelete/{id}")
	public ResponseDto<Integer> deleteById(@PathVariable int id) {
		boardService.글삭제하기(id);
		return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
	}

 

BoardService에 글삭제하기 메서드 추가

	@Transactional
	public void 글삭제하기(int id) {
		boardRepository.deleteById(id);	
		System.out.println("글삭제 id: "+id);
	}