Part 9. 게시글 화면 만들기 (2)

1. 전체 조회 화면 만들기

 

1) index.mustache UI 변경

{{>layout/header}}
        <h1>스프링 부트로 시작하는 웹 서비스 Ver.2</h1>
    <div class="col-md-12">
    ...
    </div>
    <br>
        <!--    목록 출력 영역-->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
            <tr>
                <th>게시글 번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>최종 수정일</th>
            </tr>
        </thead>
        <tbody id = "tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
{{>layout/footer}}
</body>
</html>

 

(1) {{#posts}}

- posts라는 List를 순회

- java의 for문과 동일하게 생각

 

(2) {{id}} 등의 {{변수명}}

- List에서 뽑아낸 객체의 필드를 사용

 

 

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

- PostsRepository.java

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface PostsRepository extends JpaRepository<Posts, Long> {
    @Query("SELECT p FROM Posts p ORDER BY p.id DESC")
    List<Posts> findAllDesc();
}

 

SpringDataJpa에서 제공하지 않는 메소드는 @Query를 사용하여 작성

 

 

3) PostsService.java에 코드 추가

import java.util.List;
import java.util.stream.Collectors;

@RequiredArgsConstructor
@Service
public class PostsService {
    private final PostsRepository postsRepository;

      ...

    @Transactional(readOnly = true)
    public List<PostsListResponseDto> findAllDesc() {
        return postsRepository.findAllDesc().stream()
                .map(PostsListResponseDto::new)
                .collect(Collectors.toList());
    }
}

 

(1) readOnly 

- @Transactional의 옵션

- 트랜잭션 범위는 유지하되, 조회기능만 남겨두어 조회속도가 개선

- 등록, 수정, 삭제 기능이 전혀 없는 서비스 메소드에서 사용하는 것을 추천

 

(2) .map(PostsListResponseDto::new)

= map(posts -> new PostsListsResponseDto(posts))

- postsRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListsResponseDto변환 -> List로 반환하는 메소드

 

 

4) PostsListResponseDto.java 생성

import com.jojoldu.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) Controller 변경

@RequiredArgsConstructor
@Controller
public class IndexController {

    private final PostsService postsService;

    @GetMapping("/")
    public String index(Model model){
        model.addAttribute("posts", postsService.findAllDesc());
        return "index";
    }
}

 

(1) Model

- 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장

- 여기서는 postsService.findAllDesc()로 가저온 결과를 posts로 index.mustache에 전달

 

 

6) 테스트

 

2. 게시글 수정화면 만들기

게시글 수정 API는 이미 만들어 놨다.

public class PostApiController {
    private final PostsService postsService;

    ...

    @PutMapping("/api/v1/posts/{id}")
    public Long update(@PathVariable Long id, @RequestBody PostsUpdateRequestDto requestDto) {
        return postsService.update(id, requestDto);
    }

}

 

해당 API로 요청하는 화면을 개발해야 한다.

 

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}}

 

(1) {{posts.id}}

- 객체 필드 접근시 점으로 구분

- Post 클래스의 id에 대한 접근은 posts.id로 사용

 

(2) readonly

- input 태그에 읽기 기능만 허용하는 속성

- id와 author는 수정할 수 없도록 읽기만 허용하도록 추가

 

 

2) index.js 파일에 update function 추가

 btn-update 버튼을 클릭하면 update 기능을 호출할 수 있도록

var main = {
    init : function () {
        var _this = this;
        ...

        $('#btn-update').on('click', function () {
            _this.update();
        });
    },
    save : function () {
        ...
        });
    },
    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));
        });
    }
};

main.init();

 

(1) $('#btn-update').on('click')

- btn-update란 id를 가진 HTML 엘리먼트에 click 이벤트가 발생할 때, update function을 실행하도록 이벤트를 등록

 

(2) type: 'PUT'

- PostsApiController에 있는 API에서 이미 @PutMapping으로 선언했기 때문에, PUT을 사용해야 한다.

- 생성(Create) : POST, 읽기(Read) : GET, 수정(Update) : PUT, 삭제(Delete) : DELETE

 

(3) url: '/api/v1/posts/'+id

- 어느 게시글을 수정할 지 URL Path로 구분하기 위해 Path에 id를 추가한다.

 

 

4) index.mustache 수정

전체 목록에서 수정페이지로 이동할 수 있게 페이지 이동 기능 추가

...
<tbody id = "tbody">
  {{#posts}}
  <tr>
    <td>{{id}}</td>
    <td><a href="/posts/update/{{id}}">{{title}}</a></td>
    <td>{{author}}</td>
    <td>{{modifiedDate}}</td>
  </tr>
  {{/posts}}
</tbody>
...

 

5) IndexController.java

수정화면을 연결하기 위해서 Controller 수정

...
public class IndexController {
        ...

    @GetMapping("/posts/update/{id}")
    public String postsUpdate(@PathVariable Long id, Model model) {
        PostsResponseDto dto = postsService.findById(id);
        model.addAttribute("post", dto);

        return "posts-update";
    }
}

 

 

6) 테스트

 

수정 링크 표시

 

글번호와 작성자가 읽기 전용 상태

 

수정 완료 메시지

 

 

3. 게시글 삭제

 

1) posts-update.mustache 추가

<div class="col-md-12">
    <div class="col-md-4">
        ...
        <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>

 

 

2) index.js 추가

삭제 이벤트 진행

var main = {
    init : function () {
        ...

        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    ...
    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));
        });
    }
};

main.init();

 

 

3) 삭제 API 생성

 

- PostsService.java

@RequiredArgsConstructor
@Service
public class PostsService {
    ...

    @Transactional
    public void delete(Long id) {
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id = " + id));
        postsRepository.delete(posts);
    }
}

 

(1) postsRepository.delete(posts)

- JpaRepository에서 이미 delete 메소드를 지원하고 있음

- 엔티티를 파라미터로 삭제할 수도 있고, deleteById 메소드를 이용하면 id로 삭제할 수도 있다.

- 존재하는 Posts인지 확인을 위해 엔티티 조회 후 그대로 삭제

 

- PostsApiController.java

 서비스에서 만든 delete 메소드를 Controller가 사용하도록 코드를 추가

...
@RequiredArgsConstructor
@RestController
public class PostApiController {
    ...

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

 

 

4) 테스트

 

삭제 버튼 클릭

 

삭제 성공메시지 확인

 

삭제 확인