영화/리뷰 프로젝트 적용하기-(4)

19132 단어 MultipartMultipart

조회 페이지와 영화 리뷰

  • 조회 페이지는 실제 영화 리뷰가 진행되는 공간이므로 많은 기능이 추가되어야 합니다.
  • 영화 리뷰와 관련된 기능은 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>
  • 아직 리뷰에 대한 처리는 이루어 지지 않았지만 화면은 다음과 같은 모습으로 출력됩니다.

좋은 웹페이지 즐겨찾기