𝜎 Spring Boot 예제2 (게시글 관리) (っ・∀・）っ

@Autowired·2022년 1월 14일

Spring Boot

목록 보기

10/11

Spring Boot에서 게시글 관리 해보기! ヽ(✿ﾟ▽ﾟ)ノ

사용 IDE : IntelliJ IDEA Ultimate

사용 DB : MySQL

사용 언어 & SDK : Java & Amazon correto 11

정리본입니다 참고용으로만 봐주세요 :D

저번시간엔 게시글 저장, 목록출력, 상세조회까지 했으니 이번에는
게시글 수정 & 삭제 & 페이징처리까지 진행해봅시다 (っ・∀・）っ

이전글
𝜌 Spring Boot 예제1 (게시글 관리) ヽ(✿ﾟ▽ﾟ)ノ

Update & Delete

이번에는 수정을 할 때 비밀번호를 입력받아 비밀번호 일치 시 수정이 되게끔 진행할 예정입니다.
설명은 DTO부터 하겠습니다:D
삭제는 매우 간단하기 때문에 업데이트 페이지에서 같이 진행하겠습니다 그럼 바로 가시죠!! (๑╹∀╹๑)

UpdateDTO

@Data
@NoArgsConstructor
@AllArgsConstructor
public class BoardUpdateDTO {

    private Long boardId;
    private String boardWriter;
    private String boardPassword;
    private String boardTitle;
    private String boardContents;

Update에 관한 DTO 내용은 위와같이 설정하겠습니다.
수정에 필요한 내용만 담는거라 특별한 내용이 없으므로 설명은 생략하겠습니다 :D

html

findById.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>findById.html</h2>
<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>작성자</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성시간</th>
            <th>수정시간</th>
            <th>수정</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th th:text="${boardDetailDTO.boardId}"></th>
            <th th:text="${boardDetailDTO.boardWriter}"></th>
            <th th:text="${boardDetailDTO.boardTitle}"></th>
            <th th:text="${boardDetailDTO.boardContents}"></th>
            <th th:text="${boardDetailDTO.createTime}"></th>
            <th th:text="${boardDetailDTO.updateTime}"></th>
            <!-- findById에 update 폼으로 가기 위한 링크 추가 -->
            <th><a th:href="@{|/board/update/${boardDetailDTO.boardId}|}">수정페이지</a></th>
        </tr>
    </tbody>
</table>
</body>
</html>

업데이트 페이지를 띄우기 위해서는 boardId를 같이 보내줘야합니다.
그래서 타임리프문법 중 하나인 @{||}를 이용해 boardId를 같이 보내주었습니다 :D

update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
	// 아래 코드는 일반 Post 방식으로 수정하는 방법, 설명 생략
        // const update = () => {
        //     const inputPassword = document.getElementById("boardPassword").value
        //     const boardPassword = "[[${boardDetailDTO.boardPassword}]]"
        //     if (inputPassword==boardPassword) {
        //         updateForm.submit();
        //     } else {
        //         alert("비밀번호가 틀렸습니다.")
        //     }
        // }

        const boardUpdate = () => {
            const id = document.getElementById("boardId").value
            const writer = document.getElementById("boardWriter").value
            const title = document.getElementById("boardTitle").value
            const contents = document.getElementById("boardContents").value
            const inputPassword = $("#boardPassword").val(); // ajax로 value값 가져오기
            const password = "[[${boardDetailDTO.boardPassword}]]"
            // const boardDate = document.getElementById("boardDate").value
            const updateData = JSON.stringify({
                boardId: id,
                boardWriter: writer,
                boardTitle: title,
                boardContents: contents,
                boardPassword: password
                // boardPassword: pw,
                // boardDate: boardDate
            })
            console.log(updateData)
            const reqUrl = "/board/"+id
            if (inputPassword == password) { // 비밀번호 일치여부 체크
                $.ajax({
                    type: "put", // method가 put인 메서드로 보낸다는 뜻
                    url: reqUrl, // /board/{boardId}
                    contentType: "application/json", // json을 보낸다면 반드시 작성
                    data: updateData, // 위에서 설정한 updateData를 보냄 (json타입)
                    success: function () {
                        location.href = "/board/"+id;
                    },
                    error: function () {
                        alert("ajax 실패")
                    }
                })
            } else {
                alert("비밀번호가 틀렸습니다")
            }
        }
      
      const boardDelet = () => {
      	const id = document.getElementById("boardId).value
      	reqUrl = "/board/"+id
      	$.ajax({
      	  type: "delete",
      	  url: reqURL,
      	  success: function () {
          	location.href = "/board/"
          },
          error: function () {
          	alert("ajax 실패")
          }
      	})
      }
    </script>
</head>
<body>
<h2>update.html</h2>
<form action="/board/update" method="post" name="updateForm">
    <input type="text" id="boardId" name="boardId" th:value="${boardDetailDTO.boardId}">
    <input type="text" id="boardWriter" name="boardWriter" th:value="${boardDetailDTO.boardWriter}" placeholder="작성자" readonly>
    <input type="text" id="boardPassword" name="boardPassword" placeholder="비밀번호">
    <input type="text" id="boardTitle" name="boardTitle" th:value="${boardDetailDTO.boardTitle}" placeholder="제목">
    <input type="text" id="boardContents" name="boardContents" th:value="${boardDetailDTO.boardContents}" placeholder="내용">
    <!-- <input type="button" th:onclick="update()" value="수정"> -->
    <!-- 위 Post방식으로 수정하는 방법은 생략하겠습니다. -->
    <input type="button" th:onclick="boardUpdate()" value="수정(put)">
    <input type="button" th:onclick="boardDelete()" value="삭제(delete)"
</form>
</body>
</html>

이렇게 update.html 내용을 생성했습니다.
Post방식으로 수정하는 방법은 Spring Framework 부터 많이 써봤기 때문에 생략하였습니다.
내용은 주석으로 처리했으니 필요하신 분들은 주석을 해제하고 사용해보시면 될겁니다!

비밀번호 일치여부 체크는 DTO에서 가져온 값하고 input에 입력한 값을 서로 비교해,
일치하면 form의 내용이 json타입으로 put메서드에 가게끔 설정했습니다.
Controller에서 결과를 받아 수정이 정상적으로 수행되었다면 success에
location.href="/board/"+id 코드를 통해 상세조회 페이지로 가게 설정했습니다.
그럼 html을 전부 만들었으니 Controller로 가보실까요?? (๑˃̵ᴗ˂̵)و

Controller

// 업데이트 페이지 요청
@GetMapping("/update/{boardId}")
public String updateForm(@PathVariable Long boardId, Model model) {
	BoardDetailDTO boardDetailDTO = bs.findById(boardId);
	model.addAttribute("boardDetailDTO",boardDetailDTO);
	return "board/update";
}

// 수정 내용 저장
@PutMapping("/{boardId}")
	public ResponseEntity update2(@RequestBody BoardUpdateDTO boardUpdateDTO) {
	bs.update(boardUpdateDTO);
	return new ResponseEntity(HttpStatus.OK);
}

// 게시글 삭제
@DeleteMapping("/{boardId}")
public ResponseEntity deleteById2(@PathVariable Long boardId) {
	bs.deleteById(boardId);
	return  new ResponseEntity(HttpStatus.OK);
}

업데이트 페이지 요청 & 업데이트 내용 저장에 관한 메서드입니다.
업데이트 페이지에 가기 전 findById를 통해 업데이트 할 내용을 가져가고,
ajax에서 Put 방식으로 수정 내용을 전달받아 수정 완료 시 상태코드 200을 보냅니다!!
ajax에서 200이라는 상태코드를 받게 되면 자동으로 success에 함수를 실행합니다.
또한 ajax에서 json으로 보낸 데이터를 받기 위해선 @RequestBody를 사용해야합니다.
그럼 Service로 넘어가시죠 :D

Service

// 게시글 수정
@Override
public Long update(BoardUpdateDTO boardUpdateDTO) {
	BoardEntity boardEntity = BoardEntity.updateBoard(boardUpdateDTO);
	return br.save(boardEntity).getId();
}

// 게시글 삭제
@Override
public void deleteById(Long memberId) {
	br.deleteById(boardId);
}

회원관리 예제와 마찬가지로 여기서도 Jpa의 save 메서드를 이용했습니다.
새로운 값이 들어온다면 자동으로 insert,
pk가 있는 값이 들어온다면 자동으로 update를 수행합니다.
특별한 내용은 없으므로 설명은 생략하겠습니다 :D

Paging

페이징 처리입니다.
이번에는 Jpa가 제공하는 Page 객체를 이용할 예정이며,
많이 어려우니 잘 따라와주시길 바랍니다 :D
그럼 Page용 DTO부터 생성하러 갑시다 ٩( ᐛ )و

Paging용 DTO

@Data
@NoArgsConstructor
@AllArgsConstructor
public class BoardPagingDTO {

    private Long boardId;
    private String boardWriter;
    private String boardTitle;

}

PagingDTO에서는 별 다른 내용이 없으므로 설명은 생략하고 넘어가겠습니다.

PagingConst

common이라는 패키지 생성, 후 PagingConst Java 클래스 생성

public class PagingConst {

    public static final int PAGE_LIMIT = 5; // 한 페이지에 보여줄 글 갯수
    public static final int BLOCK_LIMIT = 3; // 한 화면에 페이지 갯수

}

페이징처리를 도와주기 위해 PagingConst를 생성했습니다.
눈치가 빠르신 분들이면 각 필드가 무슨 역할을 하는지 아실 수 있습니다.
Jpa에서 페이징 처리를 도와주지만 한 페이지에 보여줄 글 갯수와 페이지 갯수는 직접 설정해줘야 해서
위와 같은 클래스를 생성해주었습니다. 어려운 내용 아니니 잘 따라와 주시길 바랍니다 :D
저는 한 페이지당 글 갯수 5개, 페이지 갯수는 3개로 했습니다.

Controller

Controller에서부터 본격적인 페이징 처리 작업이 시작됩니다.
오타 안나게 잘 따라와주세요 :D
그 전에 삼항 연산자에 대해 알아보는 시간을 가지도록 하겠습니다.

삼항 연산자란?

int num = 10, num2 = 0;

if(num == 10) {
	num2 =5;
} else {
	num2 = 100;
}

// 위 if 와 아래 코드는 같은 결과를 출력
num2 = (num==10)? 5: 100;

// 기본적인 구조
// 변수 = (조건식) ? true일 때 값 : false일 때 값
// 조건이 맞으면 true일 때 값이 변수에 담김, false일 때는 반대

// 단순한 if else일 때 위와 같은 삼항 연산자 사용 가능
// if else에 같은 변수로 값에 차이를 둘 때 주로 사용

이렇게 삼항 연산자에 대해 간략하게 알아보았습니다.
if else와 별 다른 차이점은 없으니 당황하지 마시고 이런 양식의 코드가 나오면
삼항 연산자를 사용했구나 라고 생각하시면 됩니다.
그럼 Controller로 다시 넘어가보겠습니다.

// 페이징처리(board?page=5)
// 5번글(/board/5)
// @PageableDefault(page=1) : 별다른 페이징 요청이 없을 때 (처음 요청) 1페이지를 내보내겠다.
@GetMapping
public String paging(@PageableDefault(page = 1)Pageable pageable ,Model model) {
	Page<BoardPagingDTO> boardList = bs.paging(pageable);
	model.addAttribute("boardList", boardList);

	// startPage, endPage 계산
	// 현재 2페이지 일 때 시작 페이지 1, 끝 페이지 3
	// 현재 7페이지 일 때 시작 페이지 6, 끝 페이지 8
	int startPage = (((int)(Math.ceil((double)pageable.getPageNumber()/PagingConst.BLOCK_LIMIT)))-1)*PagingConst.BLOCK_LIMIT+1;
	int endPage = (startPage+PagingConst.BLOCK_LIMIT-1)<boardList.getTotalPages())?startPage+PagingConst.BLOCK_LIMIT-1 : boardList.getTotalPages();

	model.addAttribute("startPage", startPage);
	model.addAttribute("endPage", endPage);

	return "board/paging";
}

갑자기 어려운 내용이 나왔습니다만 일단 Service까지 설명 하고,
Test 코드를 통해 자세히 알려드리겠습니다.
startPage, endPage는 Spring Framework에서도 썼던 내용이므로 생략하겠습니다.

Service

@Override
public Page<BoardPagingDTO> paging(Pageable pageable) {
	int page = pageable.getPageNumber(); // pageable 객체에서 .get을 통해 page 정보를 꺼낼 수 있음.
	// JPA가 관리하는 페이지 객체는 0번부터 관리
	// 그래서 삼항 연산자가 필요

	// 요청한 페이지가 1이면 페이지 값을 0으로 하고, 1이 아니면 요청 페이지에서 1을 뺀다.
	// page = page-1; // 이런식으로 써도 되지만 삼항연산자를 이용해보겠습니다.
	page = (page==1)? 0:(page-1);
	// Pageable 타입의 pagealbe 객체를 넘겨주는 findAll() 호출
	Page<BoardEntity> boardEntities = br.findAll(PageRequest.of(page, PagingConst.PAGE_LIMIT, Sort.by(Sort.Direction.DESC, "id")));
	// findAll(PageRequest.of(어떤 페이지를, 어떤 갯수로), 정렬 (어떤 정렬 ,"기준으로 삼을 Entity 클래스의 필드이름"))
	// 기준으로 삼을 Entity 클래스의 필드이름에 언더바( _ ) 가 포함되어있으면 JPA 가 인식을 못해 오류 발생
	// findAll의 리턴값은 Page<Entity타입>로 넘어옴. 따라서 DTO로 변환해주는 작업이 필요함.
	// Page<BoardEntity> -> Page<BoardPagingDTO>
	// 기존 DTO에서 변환해주는 작업을 할 필요 없이 Page객체가 제공해주느 메서드를 사용하면 자동으로 변환시켜줌
	// 아래와 같은 변환용 코드로 사용
	Page<BoardPagingDTO> boardList = boardEntities.map(
		board -> new BoardPagingDTO(board.getId(),
					    board.getBoardWriter(),
					    board.getBoardTitle())
					    );
	return boardList;
}

jpa는 페이지를 0부터 관리하기 때문에 1페이지를 요청하려면 0을, 4페이지를 요청하려면 3을 요청해야합니다.
또한 Page<Entity> 객체로 넘어온 데이터를 기존 방식으로 DTO로 변환하면 Jpa의 Page 관련 메서드들을 사용 못하기 때문에 위와 같이 .map()으로 변환 시켜주는 작업을 수행해야 합니다.
자세한 내용은 Test코드에서 확인해보도록 하겠습니다.

Test

@Test
@Transactional
@DisplayName("페이징 테스트")
public void pagingTest() {

	// 글갯수 30개 기준 한페이지 5개 기준 페이징 처리
	// int page = 0; // JPA 기준 1페이지 (첫번째 페이지)
	int page = 5; // JPA 기준 6페이지 (마지막 페이지)
	Page<BoardEntity> boardEntities = br.findAll(PageRequest.of(page, PagingConst.PAGE_LIMIT, Sort.by(Sort.Direction.DESC, "id")));

	// Page 객체가 제공해주는 매서드 확인
	System.out.println("boardEntities.getContent() = " + boardEntities.getContent()); // 요청 페이지에 들어있는 데이터, toString이 없기 때문에 주소값이 출력
	System.out.println("boardEntities.getTotalElements() = " + boardEntities.getTotalElements()); // 전체 글 갯수
	System.out.println("boardEntities.getNumber() = " + boardEntities.getNumber()); // JPA 기준 요청 페이지
	System.out.println("boardEntities.getTotalPages() = " + boardEntities.getTotalPages()); // 전체 페이지 갯수
	System.out.println("boardEntities.getSize() = " + boardEntities.getSize()); // 한 페이지에 보여지는 글 갯수
	System.out.println("boardEntities.hasPrevious() = " + boardEntities.hasPrevious()); // 이전 페이지 존재 여부
	System.out.println("boardEntities.isFirst() = " + boardEntities.isFirst()); // 첫 페이지인지 여부
	System.out.println("boardEntities.isLast() = " + boardEntities.isLast()); // 마지막 페이지인지 여부

	// Page<BoardEntity> -> Page<BoardPagingDTO>
	// 일반적인 방법으로 변환하면 페이징객체가 제공하는 메서드를 사용 못함.
	// .map() : Entity 가 담긴 페이지 객체를 dto 가 담긴 페이지 객체로 변환해주는 역할
	// board : 반복용 변수로 만든 변수, foreach 문의 반복 변수와 동일한 개념
	// 여기서의 반복변수(board)는 Entity 객체임. Entity에 담긴 정보를 BoardPagingDTO에 담음.
	Page<BoardPagingDTO> boardList = boardEntities.map(
		board -> new BoardPagingDTO(board.getId(),
					    board.getBoardWriter(),
					    board.getBoardTitle())
					    );

	// 제대로 변환이 되었다면 Page<BoardPagingDTO>에서도 Jpa의 Page 관련 메서드를 호출할 수 있다.
	System.out.println("boardList.getContent() = " + boardList.getContent());
	System.out.println("boardList.getTotalElements() = " + boardList.getTotalElements());
	System.out.println("boardList.getNumber() = " + boardList.getNumber());
	System.out.println("boardList.getTotalPages() = " + boardList.getTotalPages());
	System.out.println("boardList.getSize() = " + boardList.getSize());
	System.out.println("boardList.hasPrevious() = " + boardList.hasPrevious());
	System.out.println("boardList.isFirst() = " + boardList.isFirst());
	System.out.println("boardList.isLast() = " + boardList.isLast());
}

실제로 실행해보시면 (단, DB에 데이터가 들어있을 때)
값이 전부 잘 나오는거를 확인할 수 있습니다.
이 각종 메서드들은 타임리프를 통해 paging.html에서 사용할 예정이므로 각 메서드가 무슨 역할을 하는지
잘 알아두셔야 합니다. 그럼 html을 만들러 가보겠습니다!! :D

paging.html

paging.html을 만든 뒤 확인하는 방법
현재는 딱히 링크를 만들지 않았으므로 주소창 localhost뒤에 /board 를 붙이면 됩니다.
ex) localhost:8097/board

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<body class="container">

<h2>회원제 게시판</h2>

<table class="table table-hover">
  <thead>
  <tr>
    <th scope="col">글 번호</th>
    <th scope="col">글쓴이</th>
    <th scope="col">글 제목</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="board: ${boardList}">
    <td th:text="${board.boardId}"></td>
    <td th:text="${board.boardWriter}"></td>
    <td><a th:href="@{|/board/${board.boardId}|}" th:text="${board.boardTitle}">제목</a></td>
  </tr>
  </tbody>
</table>

<!--
  /board
  브라우저 주소창에 보이는 주소값 : /board?page=1
  html에서 타임리프로 작성하는 주소값 : /board(page=1)

  /board/*
  /board/?page=1
  /board/(page=1)
-->

<div class="container">
  <ul class="pagination">
    <li class="page-item">
      <!-- 첫페이지로 가는 링크 -->
      <a class="page-link" th:href="@{/board(page=1)}">
        <span>First</span>
      </a>
    </li>

    <li th:class="${boardList.first} ? 'disabled'" class="page-item">
      <!-- 위 코드 해석 : 첫번째 페이지라면 'disabled'라는 속성 부여 -->

      <!-- boardList.first : isFirst() 첫번째 페이지인지 조건을 검 -->
      <!-- # : 아무 요청을 안보냄 -->
      <!-- boardList.number() : getNumber 이전 페이지 요청 -->
      <a class="page-link" th:href="${boardList.first} ? '#' : @{/board(page=${boardList.number})}">  <!-- Page객체가 제공하는 메서드를 사용할 때 이름이 살짝 변경됨. -->
        <!-- 페이지가 첫번째 페이지라면 < 을 눌렀을 때 컨트롤러에 요청을 안함 -->
        <!-- 첫페이지가 아니라면 이전 페이지를 요청 -->
        <span>&lt;</span> <!-- <를 그냥 쓰면 html에서 처리를 못할 수 있기 때문에 html 특수기호 표에 있는 코드를 사용 -->
      </a>
    </li>

    <!-- startPage ~ endPage 까지 숫자를 만들어주는 역할 -->
    <!--
      th:each="page: ${#numbers.sequence(startPage, endPage)}
      th:each -> 반복
      page -> 반복 변수
      ${#number.sequence(시작값, 끝값)} -> 얼마나 반복

    -->
    <li th:each="page: ${#numbers.sequence(startPage, endPage)}"
        th:class="${page == boardList.number + 1} ? 'page-item active'">
      <a class="page-link" th:text="${page}" th:href="@{/board(page=${page})}"></a>
      <!-- 해당 숫자값으로 컨트롤러에 요청 -->
    </li>

    <!--
      다음 페이지 요청
      현재 3페이지를 보고 있다면 다음 페이지는 4페이지임.
      getNumber()값은 2임.
      따라서 4페이지를 보고싶다면 getNumber()+2를 해야 컨트롤러에 4를 요청할 수 있다.
     -->
    <li th:class="${boardList.last} ? 'disabled'">
      <a class="page-link" th:href="${boardList.last} ? '#' : @{/board(page=${boardList.number + 2})}">
        <span>&gt;</span>
      </a>
    </li>

    <li class="page-item">
      <a class="page-link" th:href="@{/board(page=${boardList.totalPages})}">
        <span>Last</span>
      </a>
    </li>
  </ul>
</div>

</body>
</html>

페이징 처리 코드가 많이 복잡하긴 하지만 어쩔 수 없습니다. ŏ̥̥̥̥םŏ̥̥̥̥
설명이 필요하다 생각되는것은 주석으로 달아놓았으니 참고해주세요!
잘 따라오셨다면 페이징처리까지 문제없이 잘 되셨을겁니다 :D

마치며

이렇게 게시글 수정 & 삭제 & 페이징 처리까지 전부 해보았습니다.
회원관리 에제와 비슷한 점이 많아 설명을 많이 생략하긴 했으나 다들 잘 따라오셨을거라 믿습니다 :D
다음에 더 추가되는 내용이 있다면 그때 다시 만나는걸로 하겠습니다!!
다들 다음에 건강한 모습으로 만나요~ ( ღ'ᴗ'ღ )

@Autowired

즐겁다!

이전 포스트

𝜌 Spring Boot 예제1 (게시글 관리) ヽ(✿ﾟ▽ﾟ)ノ

다음 포스트

𝜎 Spring Boot 예제2 (게시글 관리) (っ・∀・）っ

Spring Boot

Update & Delete

UpdateDTO

html

findById.html

update.html

Controller

Service

Paging

Paging용 DTO

PagingConst

Controller

삼항 연산자란?

Service

Test

paging.html

마치며

𝜌 Spring Boot 예제1 (게시글 관리) ヽ(✿ﾟ▽ﾟ)ノ

𝜏 Spring Boot 예제3 (게시글 관리) ◟( ˘•ω•˘ )◞

0개의 댓글