조회 페이지와 영화 리뷰
- 조회 페이지는 실제 영화 리뷰가 진행되는 공간이므로 많은 기능이 추가되어야 합니다.
- 영화 리뷰와 관련된 기능은 Ajax로 처리해서 작성합니다.
- 조회 페이지는 목록 페이지에서 영화의 번호를 클릭하면 이동하는 '/movie/read'URL을 처리해야 합니다.
MovieService와 MovieServieImpl
- MovieService에는 특정한 영화의 번호를 이용하여 MovieDTO를 반환하는 기능을 정의하고,ServiceImpl에 구현합니다.
//조회처리
MovieDTO readMovie(Long mno);- MovieServiceImpl에서 MovieDTO를 만들어 내기 위해서는 MovieRepository에서 가져오는 Movie,MovieImage 리스트, 평점 평균, 리뷰 개수리스트를 가공할 필요가 있습니다.
@Override
public MovieDTO getMovie(Long mno) {
List<Object[]> result = movieRepository.getMovieWithAll(mno);
Movie movie =(Movie)result.get(0)[0];
//Movie 엔티티는 가장 앞에 존재(모든 Row가 동일한 값을 가집니다.)
List<MovieImage>movieImageList = new ArrayList<>();
//영화의 이미지 개수 만큼 MovieImage객체 필요
result.forEach(arr ->{
MovieImage movieImage = (MovieImage)arr[1];
movieImageList.add(movieImage);
});
Double avg = (Double) result.get(0)[2];
//평균 평점 - 모든 Row가 동일한 값
Long reviewCnt = (Long)result.get(0)[3];
//리뷰 개수 - 모든 Row가 동일한 값
return entityToDto(movie,movieImageList,avg,reviewCnt);
}MovieController와 read.html
- movieController 는 get방식으로 '/movie/read?mno=xxx'와 같은 URL을 처리합니다.(수정작업에도 동일한 코드가 사용됩니다.)
@GetMapping({"/read","/modify"})
public void read(long mno, @ModelAttribute("pageRequestDTO")PageRequestDTO pageRequestDTO,Model model){
MovieDTO movieDTO = movieService.getMovie(mno);
model.addAttribute("dto",movieDTO);
}- read.html을 작성합니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">
<th:block th:fragment="content">
<h1 class="mt-4">Movie Read Page</h1>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" th:value="${dto.title}" readonly>
</div>
<div class="form-group">
<lable>Review Count</lable>
<input type="text" class="form-control" name="reviewCnt" th:value="${dto.reviewCnt}" readonly>
</div>
<div class="form-group">
<label>AVG</label>
<input type="text" class="form-control" name="avg" th:value="${dto.avg}" readonly>
</div>
<style>
.uploadResult {
width: 100%;
background-color: gray;
margin-top: 10px;
}
.uploadResult ul {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
vertical-align: top;
overflow: auto;
}
.uploadResult ul li {
list-style: none;
padding: 10px;
margin-left: 2em;
}
.uploadResult ul li img {
width: 100px;
}
</style>
<div class="uploadResult">
<ul>
<li th:each="movieImage : ${dto.imageDTOList}">
<img th:if="${movieImage.path != null}" th:src="|/display?fileName=${movieImage.getThumbnailURL()}|">
</li>
</ul>
</div>
<button type="button" class="btn btn-primary">Review Count
<span class="badge badge-light">[[${dto.reviewCnt}]]</span>
</button>
<script>
</script>
</th:block>
</th:block>
</html>- 아직 리뷰에 대한 처리는 이루어 지지 않았지만 화면은 다음과 같은 모습으로 출력됩니다.
블로그 이전합니다! https://jyyoun1022.tistory.com/