61. 상세 페이지, 이미지 불러오기
-상세 페이지
* /select_one get 생성(BoardController.java)
@GetMapping(value = "/select")
public String selectGET(Model model,
@RequestParam(name = "title", defaultValue = "", required = false) String title,
@RequestParam(name = "writer", defaultValue = "", required = false) String writer,
@RequestParam(name = "page", defaultValue = "0", required = false) int page){
if(page == 0){
return "redirect:/board/select?page=1";
}
PageRequest pageRequest = PageRequest.of(page -1, 10);
List<Board> list =
bRepository.findByTitleOrWriterContainingOrderByNoDesc(title, writer, pageRequest);
long pages = bRepository.countByTitleOrWriterContaining(title, writer);
model.addAttribute("list", list);
model.addAttribute("pages", (pages-1)/10+1);
return "board_select";
}
@GetMapping(value="/select_one")
public String selecOneGET(Model model,
@RequestParam("no") long no) {
Optional<Board> board = bRepository.findById(no);
model.addAttribute("board", board.orElse(null));
return "board_select_one";
}
* 상세 페이지 생성(board_select_one.jsp)
* 상세 페이지 구현(board_select_one.jsp)
<!DOCTYPE html>
<html lang="en">
<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">
<title>상세 페이지</title>
</head>
<body>
<h3>상세 페이지</h3>
<hr/>
글번호 : <div style="display: inline-block;" th:text="${board.no}"></div><br/>
글제목 : <div style="display: inline-block" th:text="${board.title}"></div><br />
글내용 : <div style="display: inline-block" th:text="${board.content}"></div><br />
작성자 : <div style="display: inline-block" th:text="${board.writer}"></div><br />
조회수 : <div style="display: inline-block" th:text="${board.hit}"></div><br />
날짜 : <div style="display: inline-block" th:text="${board.regdate}"></div><br />
</body>
</html>
* 화면 확인
-이미지 불러오기
* 이미지 링크 생성(board_select_one.jsp)
<h3>상세 페이지</h3>
<hr/>
글번호 : <div style="display: inline-block;" th:text="${board.no}"></div><br/>
글제목 : <div style="display: inline-block" th:text="${board.title}"></div><br />
글내용 : <div style="display: inline-block" th:text="${board.content}"></div><br />
작성자 : <div style="display: inline-block" th:text="${board.writer}"></div><br />
조회수 : <div style="display: inline-block" th:text="${board.hit}"></div><br />
날짜 : <div style="display: inline-block" th:text="${board.regdate}"></div><br />
이미지 : <img th:src="@{/board/select_image(no=${board.no})}" style="width: 50px; height: 50px;"></div><br />
<hr/>
* 디폴트 이미지 추가
* 이미지를 첨부하지 않은 글에 사용하기 위함
* resources - css, images 폴더 생성 후 images 폴더에 디폴트 이미지 저장
* /select_image 생성(BoardController.java)
@RequestMapping(value = "/select_image", method = RequestMethod.GET)
public ResponseEntity<byte[]> selectImage(@RequestParam("no") long no) throws Exception {
try {
Board board = bRepository.getById(no);
if (board.getImage().length > 0) {
HttpHeaders headers = new HttpHeaders();
if (board.getImagetype().equals("image/jpeg")) {
headers.setContentType(MediaType.IMAGE_JPEG); // gif, png 도 추가할 것(else if 이용)
} else if (board.getImagetype().equals("image/gif")) {
headers.setContentType(MediaType.IMAGE_GIF);
} else if (board.getImagetype().equals("image/png")) {
headers.setContentType(MediaType.IMAGE_PNG);
}
// 클래스명 response = new 클래스명(생성자 선택)
ResponseEntity<byte[]> response =
new ResponseEntity<>(board.getImage(), headers, HttpStatus.OK);
return response;
}
else{// 이미지를 읽을 수 없을 경우 defualt 이미지 출력
InputStream is = resourceLoader.getResource("classpath:/static/images/default.jpg").getInputStream();
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.IMAGE_JPEG);
ResponseEntity<byte[]> response = new ResponseEntity<>(is.readAllBytes(), headers, HttpStatus.OK);
return response;
}
}
catch (Exception e) { // 이미지를 읽을 수 없을 경우 defualt 이미지 출력
InputStream is = resourceLoader.getResource("classpath:/static/images/default.jpg").getInputStream();
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.IMAGE_JPEG);
ResponseEntity<byte[]> response = new ResponseEntity<>(is.readAllBytes(), headers, HttpStatus.OK);
return response;
}
}
* 상세 페이지 확인
'Spring' 카테고리의 다른 글
| Spring 일지 #63 (exam) 시험 대비8(삭제하기) (0) | 2021.10.08 |
|---|---|
| Spring 일지 #62 (exam) 시험 대비7(상세 페이지 이전글, 다음글) (0) | 2021.10.08 |
| Spring 일지 #60 (exam) 시험 대비5(검색창, 조회수 증가) (0) | 2021.10.07 |
| Spring 일지 #59 (exam) 시험 대비4(게시판 목록, 페이지네이션) (0) | 2021.10.07 |
| Spring 일지 #58 (exam) 시험 대비3(게시판 글쓰기) (0) | 2021.10.07 |