이미지 조회
1. ItemDB.java - Service
- interface
// 이미지 조회
public Item image(long code);2. ItemDBImpl.java - Service
- Item에 담아서 던짐
- 필요한것만 담아서 던짐
:query.fields().include("filedata", "filetype", "filesize");
@Override
public Item image(long code) {
try {
Query query = new Query();
Criteria criteria = Criteria.where("_id").is(code);
query.addCriteria(criteria);
// include 필요한것만
query.fields().include("filedata", "filetype", "filesize");
return mongodb.findOne(query, Item.class);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}3. ItemController.java - Controller
- @Controller
-
code값을 받아옴
:@RequestParam(name = "code") long code) -
받아온 code에 해당하는 이미지를 Item타입의 img에 담음
:Item img = itemDB.image(code); -
리턴받을 headers를 정해줌
:HttpHeaders headers = new HttpHeaders();
: if문으로 해당하는 이미지 타입에 맞는 header가 지정 되도록 함 -
리턴값은
ResponseEntity<byte[]>
4-1. ResponseEntity의 파라미터
:public ResponseEntity(T body, org.springframework.util.MultiValueMap<java.lang.String,java.lang.String> headers, org.springframework.http.HttpStatus status) { }
=ResponseEntity<byte[]>(T body, headers, Status);
// 이미지 조회
@GetMapping(value = "/image")
public ResponseEntity<byte[]> imageGET(
@RequestParam(name = "code") long code) {
try {
Item img = itemDB.image(code);
if (img.getFilesize() > 0) { // 이미지가 있음
HttpHeaders headers = new HttpHeaders();
if (img.getFiletype().equals("image/jpeg")) {
headers.setContentType(MediaType.IMAGE_JPEG);
} else if (img.getFiletype().equals("image/png")) {
headers.setContentType(MediaType.IMAGE_PNG);
} else if (img.getFiletype().equals("image/gif")) {
headers.setContentType(MediaType.IMAGE_GIF);
}
ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(img.getFiledata(), headers, HttpStatus.OK);
return response;
}
return null;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}4. selectlist.jsp - View
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}" />
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<title>SelectList</title>
</head>
<body>
<div class="style2">
<div class="style1">
<h3>item/selectlist.jsp</h3>
<h3>상품목록</h3>
<hr>
<table class="table table-hover">
<thead>
<tr>
<th>품번</th>
<th>이미지</th>
<th>품명</th>
<th>가격</th>
<th>수량</th>
<th>버튼</th>
</tr>
</thead>
<tbody>
<tr th:each="tmp, idx : ${list}">
<!-- entity 보고 채움 -->
<td th:text="${tmp.code}"></td>
<td><img th:src="@{/item/image(code=${tmp.code})}" style="width: 50px; height: 50px;"></td>
<!-- <td>이미지</td> -->
<td>
<a th:href="@{/item/selectone(code=${tmp.code})}" th:text="${tmp.name}"></a>
</td>
<td th:text="${tmp.price}"></td>
<td th:text="${tmp.quantity}"></td>
<td>
<!-- th: 는 반복문을 돌리는 thymeleaf 떄문에 붙인다. -->
<a th:href="@{/item/update(code=${tmp.code})}" style="text-decoration: none;">
<button type="button" class="btn btn-warning">수정</button>
</a>
<!--
http://127.0.0.1:8080/member/delete?id=a
입력 후 엔터키 친것과 같음-->
<a th:href="@{/item/delete(code=${tmp.code})}" style="text-decoration: none;">
<button type="button" class="btn btn-danger">삭제</button>
</a>
<!-- <form th:action="@{/member/delete}" method="get">
<input type="hidden" name="id" th:value="${tmp.id}" />
<input type="submit" value="삭제1" />
</form> -->
</td>
</tr>
</tbody>
</table>
<!-- <th:block th:each="i : ${#numbers.sequence(1,10)}">
<a th:href="@{/item/selectlist(page=${i})}" th:text="${i}"></a>
</th:block> -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<th:li class="page-item" th:each="i : ${#numbers.sequence(1,pages)}">
<a class="page-link" th:href="@{/item/selectlist(page=${i})}" th:text="${i}"></a>
</th:li>
</ul>
</nav>
</div>
</div>
</body>
</html>
<style>
.lbl1{
width : 100px;
display : inline-block;
}
.style1 {
border: 1px solid #cccccc;
padding: 20px;
width: 60%;
}
.style2 {
display: flex;
justify-content: center;
}
</style>
The best