반응형
🤍글 상세보기 구현하기
1. Index.jsp 글 상세보기 버튼에 <a>태그 추가
2. BoardController 작성
//글 상세보기
@GetMapping("/board/{id}")
public String findById(@PathVariable int id, Model model) {
model.addAttribute("board", boardService.글상세보기(id));
return "board/detail";
}
3. BoardService 작성
public Board 글상세보기(int id) {
return boardRepository.findById(id)
.orElseThrow(()->{
return new IllegalArgumentException("글 상세보기 실패: 아이디를 찾을 수 없습니다.");
});
}
4. detail.jsp 작성
- 작성자 본인만 수정, 삭제가 가능하도록(작성자와 로그인한 사용자 아이디가 같을 때) <c:if> 조건문을 넣었다.
<%@ 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. 글 상세보기 구현 완료
🤍글 삭제하기 구현하기
1. 글 삭제버튼 클릭 시 삭제되도록 코드 추가
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 작성
@DeleteMapping("/api/board/{id}")
public ResponseDto<Integer> deleteById(@PathVariable int id){
boardService.글삭제하기(id);
return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
}
3. BoardService 작성
@Transactional
public void 글삭제하기(int id) {
boardRepository.deleteById(id);
}
4. 삭제 완료
🤍글 수정하기 구현하기
1. BoardController 작성
//글 수정하기
@GetMapping("/board/{id}/updateForm")
public String updateForm(@PathVariable int id, Model model) {
model.addAttribute("board",boardService.글상세보기(id));
return "board/updateForm";
}
2. 수정하기는 버튼 대신 <a>링크를 걸어둔다.
3. update 자바스크립트 코드 작성
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 작성
<%@ 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 작성
@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 |