📝 게시글 작성
- 이번 시간에는 게시글과 관련된 기능들을 구현해볼텐데, 먼저 글쓰기 기능을 구현해보도록 하겠습니다.
- 우선 BoardController 클래스에 다음과 같이 함수를 추가 해주었습니다.
- 이후 header.jsp 파일에 설정되어있는 경로를 모호하지 않도록 다음과 같이 변경해주었습니다.
- 다음으로 views 파일 아래에 board 폴더를 생성하고 loginForm.jsp 파일을 복사하여 해당 폴더 아래에 'saveForm'이라는 이름으로 붙여넣기 해줍니다.
- 이제 saveForm.jsp 파일의 내용을 다음과 같이 수정해줍니다.
- 추가로 <script> 태그를 작성해줍니다.
- 여기서 위쪽의 스크립트 태그는 'summernote' 라이브러리를 사용하기 위한 것으로 이를 위해서는 추가로 header.jsp 파일에 다음의 태그를 추가해주어야 합니다.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>summernote는 HTML5 기반의 깔끔한 UI와 함께 자주 사용하는 여러 기능을 제공해주는 오픈소스 웹 에디터입니다.
- 이후 글쓰기 탭으로 이동해보면 다음과 같이 구현된 것을 확인할 수 있습니다.
- 다음으로 user.js 파일을 복사한 'board.js' 파일을 생성하고 해당 파일의 내용을 다음과 같이 수정해줍니다.
let index = {
init: function(){
$("#btn-save").on("click", () => {
this.save();
});
},
save: function(){
let data = {
title: $("#title").val(),
content: $("#content").val(),
};
$.ajax({
type: "POST",
url: "/api/board",
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();- 글쓰기를 완료하면 글의 제목과 내용 뿐만 아니라 작성자에 대한 정보 또한 가져와야하므로 PrincipalDetail 클래스에 다음과 같이 @Getter 어노테이션을 달아줌으로써 User 객체를 가져올 수 있도록 해줍니다.
- 다음으로 repository 패키지 아래에 BoardRepository 클래스를 생성하여 다음과 같이 구현해줍니다.
- 이어서 service 패키지 아래에 BoardService 클래스를 생성하여 다음과 같이 구현해줍니다.
- 마지막으로 api 패키지 아래에 BoardApiController 클래스를 생성한 뒤 다음과 같이 구현해줍니다.
- 이로써 글쓰기를 완료할 시 데이터베이스에 저장하는 과정까지 완료하였으며 테스트를 진행하여 결과를 확인해봅니다.
📝 게시글 출력
- 이번에는 우리가 적은 글을 메인 페이지에서 볼 수 있도록 구현해보겠습니다.
- 우선 BoardService 클래스에 전체 글 목록을 가져오는 함수를 구현해주었습니다.
- 이후 BoardController에서 위에서 가져온 게시글 목록들을 Model 객체에 담아, 이를 index.jsp 파일에서 사용할 수 있도록 해주었습니다.
- 이어서 index.jsp 파일을 다음과 같이 수정해줍니다.
- header.jsp 파일에 있는 jstl 태그 라이브러리를 사용하였으며, 위와 같은 방식으로 각각의 Board 객체를 뽑아 쓸 수 있습니다.
- 모든 작업을 완료했으면 프로젝트를 실행하여 결과를 확인합니다.
📝 게시글 페이징
- 이어서 글이 많아질 경우 이를 페이징하는 기능을 추가해보도록 하겠습니다.
- 페이징 기능은 생각보다 간단하게 구현할 수 있습니다.
- 지난 시간에 테스트했던 Pageable 객체를 이용한 방법을 살짝만 응용하는 방식으로 구현할 수 있는데, 그 방법은 다음과 같습니다.
- 우선 위에서 BoardService 클래스에 작성했던 글목록 함수를 다음과 같이 수정해줍니다.
- 이어서 BoardController 클래스로 이동한 뒤 마찬가지로 다음과 같이 함수를 수정해줍니다.
- 이렇게 하면 index.jsp 파일에서는 Board 객체가 아닌 Pageable 객체를 받는 것이므로 다음과 같이 코드를 수정해야 합니다.
- 다음으로 사용자가 페이징을 하기 위해서는 버튼이 필요하므로 아래 코드를 index.jsp 파일에 추가해줍니다.
- 여기서 boards.first 와 boards.last는 True 또는 False 값을 가지며 각각 첫 번째 페이지 또는 마지막 페이지인지를 확인하기 위해서 사용합니다. 또한 boards.number는 현재 페이지를 의미합니다.
- 이후 글을 여러 개 추가한 뒤 테스트 해보면 버튼을 누름에 따라 페이지가 바뀌는 것을 확인할 수 있을 것이며, 첫 번째 페이지에서는 Previous 버튼이, 마지막 페이지에서는 Next 버튼이 비활성화 되는 것을 확인할 수 있습니다.
📝 게시글 상세보기
- 이번에는 글 상세보기 기능을 구현해보도록 하겠습니다.
- 우선 index.jsp 파일에 있는 상세보기 버튼의 href 속성을 다음과 같이 수정해줍니다.
- 이후 BoardService 클래스에 글상세보기 함수를 추가해주었습니다.
- 해당 함수는 경로를 통해 Board 객체의 id를 받아와서 데이터를 가져오는 역할을 수행합니다.
- 다음으로 BoardController 클래스에 다음과 같이 함수를 추가해주었습니다.
- 이어서 board 폴더 아래에 saveForm.jsp 파일을 복사 붙여넣기 하고 파일명을 detail.jsp로 변경한 뒤 아래와 같이 수정해주었습니다.
- 위 작업을 모두 완료했으면 페이지를 실행하여 결과를 확인합니다.
📝 게시글 삭제
- 이번에는 글 삭제를 수행해보도록 하겠습니다.
- 우선 detail.jsp 파일을 다음과 같이 수정해줍니다.
- 다음으로 board.js 파일에 다음과 같이 자바스크립트 코드를 추가해줍니다.
- 다음으로 BoardService 클래스에 글 삭제를 위한 함수를 추가해줍니다.
- 이어서 BoardApiController 클래스에 위 함수를 사용하여 글을 삭제하고 실행 결과를 반환하는 함수를 추가해줍니다.
- 이후 페이지를 실행하여 테스트해보면 글이 잘 삭제되는 것을 확인할 수 있습니다.
- 추가로 위에서 <c:if> 문을 통해 조건처리를 수행해주었으므로 만약 다른 사용자가 게시글을 볼 경우에는 아래와 같이 삭제 버튼이 보이지 않는 것을 확인할 수 있습니다.
📝 게시글 수정
- 마지막으로 글 수정 기능을 추가해보도록 하겠습니다.
- 우선 글 수정 버튼 역시 해당 글의 작성자에게만 보여져야 하므로 detail.jsp 파일을 다음과 같이 수정해주었습니다.
- 추가로 기존의 <button> 태그를 <a> 태그로 바꾸어 내부적으로 하이퍼링크를 추가해주었습니다.
- 다음으로 BoardService 클래스에 다음과 같이 글 수정을 위한 함수를 구현해줍니다.
- 위 함수는 영속화와 함께 실행이 종료될 시 더티 체킹(Dirty Checking)이 발생하여 DB의 데이터를 자동으로 업데이트 해줍니다.
- 이어서 BoardController 클래스에 다음과 같이 함수를 추가해줍니다.
- 위 함수에서는 이전에 작성한 글상세보기 함수를 재활용하고 있습니다.
- 이제 updateForm.jsp 파일을 board 폴더 아래에 추가하여 아래와 같이 구현해줍니다. 이는 기존 saveForm.jsp 파일의 코드를 일부 수정한 것입니다.
- 이어서 board.js 파일에 다음과 같이 코드를 추가해줍니다.
- 이후 BoardApiController 클래스에 다음과 같이 함수를 추가해줍니다.
- deleteById 함수의 경로와 동일한 경로를 요청받고 있으나 매핑 방식이 다르기 때문에 상관 없습니다.
- 이후 테스트를 진행하여 글 수정이 잘 이루어지는지 확인합니다.
💡 알게 된 점
- 간단한 CRUD를 경험
- Pageable 객체를 사용해 데이터를 페이징하는 방법
- 더티 체킹
📌 Reference
GitHub - Daegwon-Kim/SpringBoot-JPA-Blog
Contribute to Daegwon-Kim/SpringBoot-JPA-Blog development by creating an account on GitHub.
github.com
'🚗 Backend Toy Project > 스프링 부트 게시판' 카테고리의 다른 글
| [스프링부트 게시판] 20. 카카오 로그인 (0) | 2022.05.16 |
|---|---|
| [스프링부트 게시판] 19. 회원정보 수정 (0) | 2022.05.15 |
| [스프링부트 게시판] 17. 비밀번호 해쉬 후 회원가입 및 로그인하기 (0) | 2022.05.12 |
| [스프링부트 게시판] 16. 스프링 시큐리티 체험해보기 (0) | 2022.05.12 |
| [스프링부트 게시판] 15. 로그인 기능 구현하기 (0) | 2022.05.10 |