글 수정 기능 추가 및 페이징 처리

src/main/java/com/example/blog/controller/BoardController.java

@@ -26,6 +26,13 @@ public String index(Model model , @PageableDefault(size = 5, sort = "createDate"
  return "index"; // view
  }
 
+ // 글 수정하기
+ @GetMapping("/board/{id}/updateForm")
+ public String updateForm(@PathVariable int id, Model model) {
+ model.addAttribute("board", boardService.boardDetail(id));
+ return "board/updateForm";
+ }
+
  // 글 상세보기
  @GetMapping("/board/{id}")
  public String findById(@PathVariable int id, Model model) {

src/main/java/com/example/blog/controller/api/BoardApiController.java

@@ -28,6 +28,15 @@ public ResponseDto<Integer> deleteById(@PathVariable int id){
  boardService.boardDelete(id);
  return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
  }
+
+ // 게시글 수정
+ @PutMapping("/api/board/{id}")
+ public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board) {
+// System.out.println("Content : "+ board.getContent());
+// System.out.println("Title : " + board.getTitle());
+ boardService.updateBoard(id, board);
+ return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
+ }
 }
 
 /* // 전통적인 방식

src/main/java/com/example/blog/service/BoardService.java

@@ -42,8 +42,22 @@ public Board boardDetail(int id) {
  return new IllegalArgumentException("존재하지 않는 게시글입니다.");
  });
  }
+
+ // 글 삭제하기
  @Transactional
  public void boardDelete(int id) {
  boardRepository.deleteById(id);
  }
+
+ // 글 수정하기
+ @Transactional
+ public void updateBoard(int id, Board requestBoard) {
+ Board board = boardRepository.findById(id)
+ .orElseThrow(() -> {
+ return new IllegalArgumentException("존재하지 않는 게시글입니다.");
+ }); // 영속화 완료
+ board.setTitle(requestBoard.getTitle());
+ board.setContent(requestBoard.getContent());
+ // 해당 함수 종료 시(Service가 종료될 때) 트랜잭션이 종료 -> 이 때 더티체킹 -> 자동 업데이트 db flush.
+ }
 }

src/main/resources/application.yml

@@ -18,7 +18,7 @@ spring:
  use-new-id-generator-mappings: 'false'
  naming:
  physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
- show-sql: 'true'
+ #show-sql: 'true'
  open-in-view: 'true'
  properties:
  hibernate:

src/main/resources/static/js/board.js

@@ -6,6 +6,9 @@ let index = {
  $("#btn-delete").on("click", () => {
  this.deleteById();
  });
+ $("#btn-update").on("click", () => {
+ this.update();
+ });
  },
 
  save: function () {
@@ -33,7 +36,7 @@ let index = {
  },
 
  deleteById: function () {
- var id = $("#id").text();
+ let id = $("#id").text();
 
  $.ajax({
  type : "DELETE",
@@ -49,6 +52,32 @@ let index = {
  alert(JSON.stringify(error));
  }); // ajax 통신을 이용해서 3개의 데이터를 json으로 변경 -> insert 요청
 
+ },
+
+ update: function () {
+ let id = $("#id").val();
+
+ let data ={
+ title : $("#title").val(),
+ content : $("#content").val()
+ };
+
+ $.ajax({
+ type : "PUT",
+ url : "/api/board/" + id,
+ data : JSON.stringify(data),
+ contentType : "application/json; charset=utf-8",
+ dataType : "json"
+ }).done(function(resp){
+ // 성공 시
+ alert("게시글이 수정되었습니다.");
+ // console.log(resp);
+ location.href="/";
+ }).fail(function(error){
+ // 실패 시
+ alert(JSON.stringify(error));
+ }); // ajax 통신을 이용해서 3개의 데이터를 json으로 변경 -> insert 요청
+
  }
 }
 

src/main/webapp/WEB-INF/views/board/detail.jsp

@@ -6,11 +6,11 @@
 <div class="container">
  <button class="btn btn-secondary" onclick="history.back()">돌아가기</button>
  <c:if test="${board.user.id == principal.user.id}">
- <button id="btn-update" class="btn btn-warning" href="#">수정</button>
+ <a class="btn btn-warning" href="/board/${board.id}/updateForm">수정</a>
  <button id="btn-delete" class="btn btn-danger" href="#">삭제</button>
  </c:if>
  <br/><br/>
- <div>
+ <div ustify-content-end>
  글 번 호 : <span id="id"><i>${board.id}</i></span><br/>
  작 성 자 : <span><i>${board.user.username}</i></span><br/>
  작 성 일 : <span><i>${board.createDate}</i></span><br/>

src/main/webapp/WEB-INF/views/board/saveForm.jsp

@@ -7,12 +7,10 @@
 
  <form>
  <div class="form-group">
- <label for="title">Title</label>
  <input type="text" class="form-control" placeholder="Enter title" id="title">
  </div>
 
  <div class="form-group">
- <label for="content">Content:</label>
  <textarea class="form-control summernote" rows="5" id="content"></textarea>
  </div>
  </form>

src/main/webapp/WEB-INF/views/board/updateForm.jsp

@@ -0,0 +1,30 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<!-- 헤더 시작 -->
+<%@ include file="../layout/header.jsp"%>
+<!-- 헤더 끝 -->
+
+<div class="container">
+ <input type="hidden" id="id" value="${board.id}" />
+ <form>
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Enter title" id="title" value="${board.title}">
+ </div>
+
+ <div class="form-group">
+ <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: 300
+ });
+</script>
+<script src="/js/board.js"></script>
+<!-- 푸터 시작 -->
+<%@ include file="../layout/footer.jsp"%>
+<!-- 푸터 끝 -->