반응형
1. 🤍글 상세보기 구현하기
1. Index.jsp 글 상세보기 버튼에 <a>태그 추가
2. BoardController 작성
<java />
//글 상세보기 @GetMapping("/board/{id}") public String findById(@PathVariable int id, Model model) { model.addAttribute("board", boardService.글상세보기(id)); return "board/detail"; }
3. BoardService 작성
<java />
public Board 글상세보기(int id) { return boardRepository.findById(id) .orElseThrow(()->{ return new IllegalArgumentException("글 상세보기 실패: 아이디를 찾을 수 없습니다."); }); }
4. detail.jsp 작성
- 작성자 본인만 수정, 삭제가 가능하도록(작성자와 로그인한 사용자 아이디가 같을 때) <c:if> 조건문을 넣었다.
<html />
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="../layout/header.jsp"%> <div class="container"> <button class="btn btn-secondary" onclick="history.back()">돌아가기</button> <c:if test="${board.user.id == principal.user.id }"> <a href="/board/${board.id }/updateForm" class="btn btn-warning">수정</a> <button id="btn-delete" class="btn btn-danger">삭제</button> </c:if> <br> <div> 글번호: <span id="id"><i>${board.id } </i></span> 작성자: <span><i>${board.user.username} </i></span> </div> <div class="form-group"> <h3>${board.title }</h3> </div> <hr/> <div class="form-group"> <div>${board.content }</div> </div> <hr/> </div> <script src="/js/board.js"></script> <%@include file="../layout/footer.jsp"%>
5. 글 상세보기 구현 완료
2. 🤍글 삭제하기 구현하기
1. 글 삭제버튼 클릭 시 삭제되도록 코드 추가
<javascript />
let index = { init: function() { $("#btn-save").on("click", () => { this.save(); }); $("#btn-delete").on("click", () => { this.deleteById(); }); }, deleteById: function() { let id = $("#id").text(); $.ajax({ type: "DELETE", url: "/api/board/" + id, dataType: "json" }).done(function(resp) { alert("삭제가 완료되었습니다."); //console.log(resp); location.href = "/"; }).fail(function(error) { alert(JSON.stringify(error)); }); } }
2. BoardApiController 작성
<java />
@DeleteMapping("/api/board/{id}") public ResponseDto<Integer> deleteById(@PathVariable int id){ boardService.글삭제하기(id); return new ResponseDto<Integer>(HttpStatus.OK.value(),1); }
3. BoardService 작성
<java />
@Transactional public void 글삭제하기(int id) { boardRepository.deleteById(id); }
4. 삭제 완료
3. 🤍글 수정하기 구현하기
1. BoardController 작성
<java />
//글 수정하기 @GetMapping("/board/{id}/updateForm") public String updateForm(@PathVariable int id, Model model) { model.addAttribute("board",boardService.글상세보기(id)); return "board/updateForm"; }
2. 수정하기는 버튼 대신 <a>링크를 걸어둔다.
3. update 자바스크립트 코드 작성
<javascript />
let index = { init: function() { $("#btn-save").on("click", () => { this.save(); }); $("#btn-delete").on("click", () => { this.deleteById(); }); $("#btn-update").on("click", () => { this.update(); }); }, 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("글 수정이 완료되었습니다."); location.href = "/"; }).fail(function(error) { alert(JSON.stringify(error)); }); } }
4. updateForm.jsp 작성
<html />
<%@ 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"> <input type="text" class="form-control" value="${board.title }" placeholder="Enter title" id="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({ tabsize: 2, height: 300 }); </script> <script src="/js/board.js"></script> <%@include file="../layout/footer.jsp"%>
5. BoardApiController 작성
<java />
@PutMapping("/api/board/{id}") public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board){ boardService.글수정하기(id, board); return new ResponseDto<Integer>(HttpStatus.OK.value(),1); }
6. 글 수정 구현 완료
반응형
'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글
| 스프링부트 공부기록(27) - 영화 리뷰 프로젝트 :: 파일 업로드 처리, 영화 포스터 업로드 구현하기 (0) | 2022.03.20 |
|---|---|
| 스프링부트 공부기록(26) - 영화 리뷰 프로젝트 :: 다대다 관계 설계 (0) | 2022.03.20 |
| [스프링부트 블로그 만들기] 글쓰기, 글 목록보기, 페이징 구현하기 (0) | 2022.03.19 |
| [스프링부트 블로그 만들기] 비밀번호 해쉬화(암호화), 스프링 시큐리티 로그인 구현하기 (0) | 2022.03.19 |
| 스프링부트 공부기록(25) - 게시판 프로젝트, @RestController, JSON, Ajax 댓글 처리 (1) | 2022.03.19 |
