nyximos.log

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 09 글수정 본문

Programming/Spring Boot

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 09 글수정

nyximos 2022. 9. 5. 16:52

Spring Boot + Gradle + MySQL + JPA + Thymeleaf  환경에서 간단한 CRUD 예제를 만들어보자
이번 포스팅에서는 게시물 수정를 구현해보자.
 

주요 기능

회원가입
로그인
게시글 등록
게시글 수정
게시글 삭제
게시글 조회 (일반 회원 조회수와 운영자 회원 조회수 따로 구분)
게시글 추천 

 

 

 

detail.html

수정페이지로 이동하기 위한 버튼에 로그인한 아이디가 같을 때만 수정페이지로 이동해준다.

$('#update').click((event) => {
    if (localStorage.getItem('id') != memberId) {
        alert('권한이 없습니다');
    } else {
        location.href = "http://localhost:8086/update/" + id;
    }
})

 

WebController

boardService에서 가져온 UpdateDTO를 Model에 담아 update를 클라이언트에게 넘긴다.

@GetMapping("/update/{id}")
public String update(@PathVariable Long id, Model model) {
    UpdateDTO post = boardService.getUpdateDTO(id);
    model.addAttribute("post", post);
    return "update";
}

 

 

BoardService

UpdateDTO getUpdateDTO(Long id);

 

 

BoardServiceImpl

@Override
public UpdateDTO getUpdateDTO(Long id) {
    Optional<Board> board = boardRepository.findById(id);
    Board boardEntity = board.orElseGet(null);

    UpdateDTO updateDTO = UpdateDTO.builder()
            .id(boardEntity.getId())
            .title(boardEntity.getTitle())
            .content(boardEntity.getContent())
            .build();

    return updateDTO;
}

 

 

update.html

수정페이지를 만들어준다.

<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head th:replace="~{fragment/header::headerFragment(~{::title})}">
    <title th:text="수정"></title>
</head>
<body>
<th:block layout:fragment="content">
    <div>
        <h2>글 수정</h2>
        <div>
            <label for="title">제목</label>
            <input title="글제목" type="text" name="title" id="title" th:value="${post.title}"/>
        </div>
        <div class="content-box">
            <label>내용</label>
            <textarea id="txtArea" class="content" name="content"
                      rows="10" cols="50" th:text="${post.content}"></textarea>
        </div>
        <button id="save" type="button">저장</button>
    </div>
</th:block>
</body>
</html>

 

th:value

input에 넘겨받은 변수값을 표시할 때 사용한다.

 

th:text

textarea에 넘겨받은 변수값을 표시할 때 사용한다.

th:value로 하면 안뜬다.

<input title="글제목" type="text" name="title" id="title" th:value="${post.title}"/>
<textarea id="txtArea" class="content" name="content"
          rows="10" cols="50" th:text="${post.content}"></textarea>

 

 

 

 

서버를 켜서 수정화면이 잘 나오는지 확인해보자.

확인했으면 이제 api를 만들어보자.

 

 

WebController

@PatchMapping("/posts/{id}")
public ResponseEntity update(@PathVariable Long id, @RequestBody UpdateFormDTO updateFormDTO) {
    ResponseEntity responseEntity = boardService.update(id, updateFormDTO);
    return responseEntity;
}

 

 

UpadateFormDTO

@Getter
@Setter
public class UpdateFormDTO {
    private String title;
    private String content;
}

 

 

BoardService

ResponseEntity update(Long id, UpdateFormDTO updateFormDTO);

 

 

BoardServiceImpl

@Override
public ResponseEntity update(Long id, UpdateFormDTO updateFormDTO) {

    Optional<Board> board = boardRepository.findById(id);
    Board boardEntity = board.orElseGet(null);

    boardEntity.update(updateFormDTO);

    return new ResponseEntity("success", HttpStatus.OK);
}

 

 

Board

update 메소드를 만들어준다.

public void update(UpdateFormDTO updateFormDTO) {
    this.title = updateFormDTO.getTitle();
    this.content = updateFormDTO.getContent();
    this.updatedAt = LocalDateTime.now();
}

 

 

update.html

<th:block layout:fragment="script">
    <script type="text/javascript">

        $(document).ready(function () {
            /*<![CDATA[*/
            var id = "[[${post.id}]]";
            console.log(id)

            $('#save').click((event) => {
                const title = $('#title').val();
                const content = $('.content').val();

                if (title == '') {
                    alert('제목을 입력해주세요');
                    return;
                }
                if (content == '') {
                    alert('내용을 입력해주세요');
                    return;
                }

                const path = 'http://localhost:8086/api/posts/'+ id;
                const json = JSON.stringify({
                    'title': title,
                    'content': content,
                });
                $.ajax({
                    url: path,
                    type: 'PATCH',
                    contentType: 'application/json',
                    data: json,
                }).done((response) => {
                    console.log(response);
                    if (response == 'success') {
                        alert('등록 성공')
                        location.href = "http://localhost:8086"
                    } else {
                        alert(response);
                    }
                });
            });
        });
        /*]]*/


    </script>
</th:block>

 

 

CDATA를 사용해서 모델값을 출력할 때 아래 방식으로 사용했었는데,

다른 페이지와 달리 update 페이지에선 콘솔에 찍히지 않았다.

var id = /*[[${post.id}]]*/'';

 

/*5*/ 요런식으로 주석 처리가 됐기 때문인데

다른 페이지에서는 여전히 잘 출력돼서 다른 방법을 찾아보았다.

요렇게 하니 값이 잘 저장된다.

var id = "[[${post.id}]]";

 

 

 

서버를 켜서 수정이 되는지 확인해보자.

수정이 잘된다면 보완할 수 있는 부분을 생각해보자.

 

 

 

저작자표시 변경금지

'Programming > Spring Boot' 카테고리의 다른 글

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 08 글 삭제  (0) 2022.08.29
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 07 글 조회, 링크연결  (0) 2022.08.26
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 06 글 등록  (0) 2022.08.26
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 05 로그인, 로그아웃 구현  (2) 2022.08.16
Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 04 타임리프 레이아웃, 회원가입 구현  (5) 2022.08.12
'Programming/Spring Boot' Related Articles more