스프링 부트와 AWS로 혼자 구현하는 웹 서비스 정리 ( 5 ) - 메인화면

메인화면 리스트 추가

 

 

<index.mustache>

{{>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>
            {{#userName}}
                Logged in as: <span id="user">{{userName}}</span>
                <a href="/logout" class="btn btn-info active" role="button">Logout</a>
            {{/userName}}
            {{^userName}}
                <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>
            {{/userName}}
        </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><a href="/posts/update/{{id}}">{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>

{{>layout/footer}}

{{#posts}} : posts라는 List를 for문으로 돌린다.

{{id}} : List에서 뽑아낸 객체의 필드를 사용한다. 

 

 

<PostsRepository @Query추가>

package jpastudy.shop.domain.posts;

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();

}

 

@Query를 이용하여 SpringDataJpa에서 제공하지 않는 메소드는 위처럼 쿼리로 작성 가능하다. 

 

 

<PostsService findAllDesc추가>

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

 

(참고) 스트림 사용법

• map은 요소들을 특정조건에 해당하는 값으로 변환
• filter는 요소들을 조건에 따라 걸러내는 작업
• sorted는 요소들을 정렬해주는 작업
• 요소들의 가공이 끝났다면 리턴해줄 결과를 collect 를 통해 작업

@Transactional(readOnly = true) 를 사용하여 트랜잭션 범위는 유지하되, 조회 속도가 개선된다. 

등록, 수정, 삭제 기능이 없는 메소드에서 사용하는 것을 추천한다.

 

 

<PostsListResponseDto 추가>

package jpastudy.shop.web.dto;

import jpastudy.shop.domain.posts.Posts;
import lombok.Getter;

import javax.persistence.Column;
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();
    }
}

 

<IndexController>

@Controller
@RequiredArgsConstructor
public class IndexController {

    private final PostsService postsService;

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

 

 

<정상적으로 목록 기능 작동>

 

 

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - YES24

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - YES24

스프링 부트와 AWS로 혼자 구현하는 웹 서비스를 참고해서 공부하고 메모한 내용입니다.