10. 데이터 조회하기 with JPA

# DB의 데이터를 조회하여 웹 페이지에 표시하기

 

데이터 조회 과정

사용자가 URL로 데이터를 요청하면 이 요청 URL을 컨트롤러가 받고, 이 받아진 URL에서 찾고자 하는 데이터의 정보를 Repository에게 전달 한다. 이를 받은 Repository는 DB에게 요청을 보내고 DB는 해당 데이터를 찾아서 이를 Entity 타입으로 반환해 준다. 반환된 Entity는 모델을 통해 뷰 템플릿으로 전달이 되고, 최종적으로 클라이언트에게 전달이 된다.

 

데이터 조회 수행

데이터를 조회하기 위해서는 URL을 입력해야 하는데, 아래와 같이 입력하여 데이터를 가져온다.

localhost:8080/articls/1 이런식으로 요청 했을때 1번 값을 반환 하도록 작성한다.

 

컨트롤러 코드 변경

조회하는 데이터가 Article이기 때문에 ArticleController에 작성을 해준다.

ArticleController 파일 하단에 아래와 같이 데이터를 읽어 올 수 있도록 작성을 한다.

데이터 조회에서 URL로 값을 받아오기 위해서는 아래와 같이 컨트롤러에 코드 즉, @GetMapping 값이 필요하다.

URL 요청을 파라미터로 받아오기 위해서는 @PathVariable 값이 필요하다.

    @GetMapping("articles/{id}")
    public String show(@PathVariable Long id) {
        log.info("id =" + id);
        return "";
    }

테스트를 위해 서버를 기동하고, localhost:8080/articles/1000 이라고 입력을 한다.

콘솔 창에서 id 값이 전달 되는지 확인한다.

아래와 같이 id =1000 이라는 값이 전달된 것을 확인 할 수 있다.

데이터 조회 흐름

1. id로 데이터를 가져온다.

2. 가져온 데이터를 모델에 등록한다.

3. 보여줄 페이지를 설정한다.

 

아래 코드 설명

레파지토리에서 id 값을 통해 데이터를 조회 할 수 있다. (Article articleEntity = articleRepository.findById(id).orElse(null);)

특별히 데이터가 없는 경우 null 값을 반환하도록 하는 구문 .orElse(null);)

그리고 아래와같이 모델에 데이터를 등록하고 등록된 데이터가 모델에서 사용될 수 있도록 되어 있다.

    @GetMapping("articles/{id}")
    public String show(@PathVariable Long id, Model model) {
        log.info("id =" + id);

//        1. id로 데이터를 가져온다.
//        Article타입의 articleEntity라는 이름으로 데이터를 받아 온다.
//        해당 id 값을 찾았는데 만약 값이 없다면 null을 반환해라 라는 의미.
//        그래서 articleEntity라는 변수에는 값이 있거나 없으면 null 이라는 변수가 담기게 된다.
        Article articleEntity = articleRepository.findById(id).orElse(null);
//        2. 가져온 데이터를 모델에 등록한다.
        model.addAttribute("article", articleEntity);
//        3. 보여줄 페이지를 설정한다.
        return "articles/show";
    }

뷰페이지 설명

아래와 같이 #을 통해서 모델에 등록된 article의 데이터를 가져와서 아래와 같이 쓸수 있다.

{{>layouts/header}}

<table class="table">
    <thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Title</th>
        <th scope="col">Content</th>
    </tr>
    </thead>
    <tbody>
    {{#article}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/article}}
    </tbody>
</table>

{{>layouts/footer}}

데이터를 등록하고 값을 조회하는 영상