34. 글 수정

글 수정 폼으로 넘어가기 위한 detail.jsp 수정

<%@ 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>
		<c:if test="${board.user.id == principal.user.id }">
			<button class="btn btn-info" onclick="location.href='/board/${board.id}/updateForm'">수정</button>
			<button id="btn-delete"  class="btn btn-danger">삭제</button>
		</c:if>
	</div>
</div>

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

BoardController에 updateForm 메서드 추가

	@GetMapping("/board/{id}/updateForm'")
	public String updateForm(@PathVariable int id, Model model) {
		model.addAttribute("board", boardService.글상세보기(id));
		return "board/updateForm";
	}

updateForm.jsp 생성

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

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

<div class="container">
	<form>
		<input type="hidden"  id="id"  value="${board.id }">		
		<div class="form-group">
			<label for="title">Title</label> <input type="text" class="form-control" id="title" placeholder="제목을 입력해주세요."  value="${board.title }" required>
		</div>
		<div class="form-group">
			<label for="content">Content:</label>
			<textarea class="form-control summernote" rows="5" id="content">${board.content }</textarea>
		</div>
	</form>
	<button id="btn-update" class="btn btn-primary">글수정 완료</button>
</div>

<script>
      $('.summernote').summernote({
        placeholder: '내용을 입력해주세요.',
        tabsize: 2,
        height: 400
      });
</script>
<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

board.js 에 update 함수 추가

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() {		
		let 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));			
		}); 
	},
	
	update: function() {
		let id = $("#id").val();
		
		let data = {
			title: $("#title").val(),
			content: $("#content").val(),			
		}; 
		
		$.ajax({			
			type: "PUT",
			url: "/api/boardUpdate/" + id,
			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));			
		}); 
	}
	
}

index.init();

BoardApiController에 update 메서드 추가

	@PutMapping("/api/boardUpdate/{id}")
	public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board) {
		boardService.글수정하기(id, board);
		return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
	}

BoardService에 글수정하기 메서드 추가

	@Transactional
	public void 글수정하기(int id, Board requestBoard) {
		Board board = boardRepository.findById(id)
				.orElseThrow( () -> {
					return new IllegalArgumentException("글 찾기 실패: id를 찾을 수 없습니다.");
				}); //영속화 완료
		board.setTitle(requestBoard.getTitle());
		board.setContent(requestBoard.getContent());
		//서비스 종료시 트랜잭션 종료 -> 더티체킹 -> DB flush로 자동 업데이트 됨.
	}