준비중..
08 데이터 읽어오기(read)
# 데이터 읽어오기(read)
### 이번 수업 요약
이번수업에서는 DB에 저장된 데이터를 가져와
페이지로 보여주는 작업을 수행해봅시다.
### 맵퍼 메소드 추가
BOOKS 테이블로부터 Book의 리스트를 만들기 위해 `getList()` 메소드를 맵퍼에 추가해줍니다.
**BookMapper.java**
```java
package com.mycompany.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import com.mycompany.vo.Book;
public interface BookMapper {
@Insert("insert into books (title, author, image) values (#{title}, #{author}, #{image})")
public boolean create(Book book);
@Select("select * from books")
public List<Book> getList();
}
```
### 데이터를 뷰 페이지로 전달
맵퍼를 사용하여 데이터를 컨트롤러로 가져옵니다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books", method = RequestMethod.GET)
public String index() {
// 맵퍼로부터 리스트를 받아옴.
List<Book> books = bookMapper.getList();
return "books/index";
}
...
}
```
가져온 데이터를 뷰 페이지로 전달하는데 이때 모델을 사용합니다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books", method = RequestMethod.GET)
public String index(Model model) {
List<Book> books = bookMapper.getList();
// 모델을 통해 뷰페이지로 데이터를 전달
model.addAttribute("books", books);
return "books/index";
}
...
}
```
현재까지의 작업 흐름을 정리하면 아래와 같습니다.
### 뷰 페이지: foreach를 사용한 데이터 렌더링
우여곡절 끝에 DB 데이터를 뷰페이지 까지 가져오게 되었습니다. foreach 태그를 사용하여 가져온 데이터를 화면으로 출력해봅시다.
**views/books/index.jsp**
```jsp
...
<body>
<div class="container">
<div class="jumbotron">
<h1>Books INDEX</h1>
<p>views/books/index.jsp</p>
<a href="<c:url value="/books/new" />" class="btn btn-lg btn-primary">도서등록</a>
</div>
<div class="row">
<c:forEach var="book" items="${books}" varStatus="status">
<div class="col-md-4">
<div class="card">
<img src="${ book.image }" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">${ book.title }</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</body>
...
```
### 결과 확인
축하합니다!! DB 데이터를 페이지로 보여주는 작업을 완료하였습니다.
