스프링부트 공부기록(9) - 게시판 프로젝트 :: 머스테치 사용, 게시판 글 조회, 수정, 삭제 구현하기

🤍게시판 글 목록 조회

1. index.mustache UI 변경

• {{#posts}} : posts라는 List를 순회하겠다, 자바의 for문과 동일함.
• {{id}} 등의 {{변수명}} : List에서 뽑아낸 객체의 필드를 사용하겠다.

 

2. PostsRepository 인터페이스에 쿼리 추가

 

• SpringDataJpa에서 제공하지 않는 메소드는 @Query를 사용하여 작성 가능함, 기본 메소드만으로 해결이 가능하지만 @Query가 훨씬 가독성이 좋다.
• @Query : 타입 안정성이 보장됨 / 국내 많은 회사(쿠팡, 배민 등 JPA를 적극적으로 사용하는 회사)에서 사용 중 / 래퍼런스가 많음.(많은 회사, 개발자들이 사용하는 만큼 국내 자료가 많음.)

  @Query("SELECT p FROM Posts p ORDER BY p.id DESC ")
    List<Posts> findAllDesc();

 

3. PostsSercvice에 코드 추가

 

🔍@Transactional(readOnly = true)

• 트랜잭션 범위는 유지하되, 조회 기능만 남겨두겠다. => 조회 속도가 개선됨.

 

4. PostsListResponseDto 클래스 생성

import com.book.springboot.domain.posts.Posts;
import lombok.Getter;

import java.time.LocalDateTime;

@Getter
public class PostsListResponseDto {

    private Long id;
    private String title;
    private String author;
    private LocalDateTime modifiedDate;

    public PostsListResponseDto(Posts entity){
        this.id=entity.getId();
        this.title=entity.getTitle();
        this.author=entity.getAuthor();
        this.modifiedDate=entity.getModifiedDate();
    }
}

 

5. 컨트롤러 변경

 

🔍Model

• 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장한다.
• 여기에서는 postsService.findAllDesc()로 가져온 결과를 index.mustache에 전달하겠다는 뜻.

 

6. 글 목록 조회 실행

---

🤍게시판 글 수정

1. posts-update.mustache 작성

{{>layout/header}}

<h1>게시글 수정</h1>

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="title">글 번호</label>
                <input type="text" class="form-control" id="id" value="{{post.id}}" readonly>
                                                            <!--머스태치는 객체 필드 접근시 점으로 구분한다.-->
            </div>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" value="{{post.title}}">
            </div>
            <div class="form-group">
                <label for="author"> 작성자 </label>
                <input type="text" class="form-control" id="author" value="{{post.author}}" readonly>
            </div>
            <div class="form-group">
                <label for="content"> 내용 </label>
                <textarea class="form-control" id="content">{{post.content}}</textarea>
            </div>
        </form>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
        <button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
    </div>
</div>

{{>layout/footer}}

 

2. index.js 에 update function 추가

• btn-update 버튼을 클릭 시 update 기능 호출
• type : 'PUT' - 여러 HTTP Method 중 PUT 메소드를 선택함.
• CRUD 적합한 HTTP Method? 생성(Create) : POST, 읽기(Read) : GET, 수정(Update) : PUT, 삭제(Delete) : DELETE

 update : function (){
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };
        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function (){
            alert('글이 수정되었습니다.');
            window.location.href='/';
        }).fail(function (error){
            alert(JSON.stringify(error));
        });
    },

 

3. 컨트롤러 작업

 

4. 게시판 글 수정 실행

 

글 제목을 클릭하면 글 수정 페이지로 이동하도록 <a> 태그를 주었다.

 

글 수정 페이지

 

제목이 수정되었다.

---

🤍게시판 글 삭제

1. 글 삭제 버튼 추가

<button type="button" class="btn btn-danger" id="btn-delete">삭제</button>

 

2. 글 삭제 js 코드 추가

 delete: function (){
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/'+id,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8'
        }).done(function (){
            alert('글이 삭제되었습니다.');
            window.location.href='/';
        }).fail(function (error){
            alert(JSON.stringify(error));
        });
    }

 

3. 글 삭제 API 만들기

🔍postsRepository.delete(posts)

• JpaRepository 에서 이미 delete 메소드를 지원하고 있으므로 활용한다.
• 엔티티를 파라미터로 삭제할 수 있고, deleteById 메소드를 이용하면 id로 삭제할 수 있음.
• 존재하는 Posts인지 확인하기 위해 엔티티 조회 후 그대로 삭제 진행.

 

4. 글 삭제 컨트롤러 작업

 @DeleteMapping("/api/v1/posts/{id}")
    public Long delete(@PathVariable Long id){
        postsService.delete(id);
        return id;
    }

 

5. 게시판 글 삭제 실행