04장. 머스테치로 화면 구성하기03

전체 조회 화면 만들기

---

전체 조회를 위해 index.mustache의 UI 변경

{{>layout/header}}
<h1>스프링부트로 시작하는 웹 서비스 Ver.2</h1>
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
        </div>
    </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>{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>
{{>layout/footer}}

{{#posts}}

• posts라는 List를 순회
• Java의 for문과 동일

{{id}} 등의 {{변수명}}

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

 

PostsRepository 인터페이스에 쿼리 추가

public interface PostsRepository extends JpaRepository<Posts, Long> {

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

}

• SpringDataJpa에서 제공하지 않는 메소드는 위처럼 쿼리로 작성해도 됨
• @Query가 훨씬 가독성이 좋음

 

PostsService에 코드 추가

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

@Transactional(readOnly = true)

• 트랜잭션 범위는 유지하되, 조회기능만 남겨두어 조회 속도가 개선되기 때문에 등록, 수정, 삭제 기능이 전혀 없는 서비스 메소드에서 사용하는 것을 추천

.map(PostsListResponseDto::new)

• .map(posts -> new PostsListResponseDto(posts))와 같음
• postsRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListResponseDto 변환 -> List로 반환하는 메소드

 

PostsListResponseDto 클래스 생성

package com.danny.makewebalone.web.dto;

import com.danny.makewebalone.web.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.getModifiedData();
    }
}

 

IndexController 수정

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

Model model

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

 

조회 목록 확인

Success