09009

[Spring Boot] 게시판 연습 (4) - 게시글 상세조회 본문

Back-End/Spring
[Spring Boot] 게시판 연습 (4) - 게시글 상세조회
09009

list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
<table>
    <tr>
        <th>id</th>
        <th>title</th>
        <th>title(||쓰지 않은 경우)</th>
        <th>writer</th>
        <th>date</th>
        <th>hits</th>
    </tr>
    <tr th:each="board: ${boardList}">
        <td th:text="${board.id}"></td>
        <td><a th:href="@{|/board/${board.id}|}" th:text="${board.boardTitle}"></a></td>
        <td><a th:href="@{/board/${board.id}}" th:text="${board.boardTitle}"></a></td>
        <td th:text="${board.boardWriter}"></td>
        <td th:text="*{#temporals.format(board.boardCreatedTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${board.boardHits}"></td>
    </tr>
</table>
</body>
</html>

 

게시글 상세조회

!! - 경로 상에 있는 값을 가져올 때는 @PathVariable을 사용한다.

BoardController

 

JPA가 제공해주는 메서드 이름 규칙을 따라가면 자동으로 쿼리가 만들어지는 형태가 있다.

조회수 증가와 같이 특수한 목적을 가진 쿼리들은 제공하지 않는다. 별도의 메서드를 정의할 필요가 있다.

조회수 증가 →  update board_table set board_hits = board_hits + 1 where id = ?

BoardService

   public void updateHits(Long id) {
        
    }

 

BoardRepository

별도의 쿼리가 필요한 상태이면 @Query를 사용한다.

- entity 기준으로 쿼리 작성 : entity 기준으로 쿼리 작성 시, 약어와 entity에 정의된 컬럼으로 작성하는 것이 필수

update나 delete 쿼리를 실행해야할 때는 추가적으로 @Modifying 어노테이션을 필수로 작성해야 한다.

 

또는

@Query에 nativeQuery = true 옵션을 주면 실제 DB에서 사용되는 쿼리 사용 가능

 

 

BoardService

!! JPA에서 제공하는 메서드가 아닌 별도의 추가된 메서드를 사용하는 경우, @Transactional을 붙여야 한다. 그렇지 않으면 에러 발생

    @Transactional
    public void updateHits(Long id) {
        boardRepository.updateHits(id);
    }

    public BoardDTO findById(Long id) {
        Optional<BoardEntity> optionalBoardEntity = boardRepository.findById(id);
        if (optionalBoardEntity.isPresent()) {
            BoardEntity boardEntity = optionalBoardEntity.get();
            BoardDTO boardDTO = BoardDTO.toBoardDTO(boardEntity);
            return boardDTO;
        } else {
            return null;
        }
    }

 

detail.html

model에 담아온 데이터를 자바스크립트에서 활용하려면 아래 코드 필요

<script th:inline="javascript">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
</head>
<body>
<table>
    <tr>
        <th>id</th>
        <td th:text="${board.id}"></td>
    </tr>
    <tr>
        <th>title</th>
        <td th:text="${board.boardTitle}"></td>
    </tr>
    <tr>
        <th>writer</th>
        <td th:text="${board.boardWriter}"></td>
    </tr>
    <tr>
        <th>date</th>
        <td th:text="*{#temporals.format(board.boardCreatedTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
    </tr>
    <tr>
        <th>hits</th>
        <td th:text="${board.boardHits}"></td>
    </tr>
    <tr>
        <th>contents</th>
        <td th:text="${board.boardContents}"></td>
    </tr>

</table>
<button onclick="listReq()">목록</button>
<button onclick="updateReq()">수정</button>
<button onclick="deleteReq()">삭제</button>


</body>
<script th:inline="javascript">
    const listReq = () => {
        console.log("목록 요청");
        location.href = "/board/";
    }
    const updateReq = () => {
        console.log("수정 요청");
        const id = [[${board.id}]];
        location.href = "/board/update/" + id;
    }
    const deleteReq = () => {
        console.log("삭제 요청");
        const id = [[${board.id}]];
        location.href = "/board/delete/" + id;
    }
</script>
</html>

'Back-End > Spring' 카테고리의 다른 글

[Spring Boot] 게시판 연습 (6) - 페이징 처리  (0) 2024.01.23
[Spring Boot] 게시판 연습 (5) - 게시글 수정 및 삭제  (0) 2024.01.23
[Spring Boot] 게시판 연습 (3) - 게시글 목록 출력하기  (0) 2024.01.23
[Spring Boot] 게시판 연습 (2) - 게시글 작성 : 게시글 작성 완료하기  (0) 2024.01.23
[Spring Boot] 게시판 연습 (1) - 게시글 작성 : 작성 페이지 이동  (0) 2024.01.23
'Back-End/Spring' Related Articles more
Comments