1. 홈 화면에서 영화 목록 불러오기

먼저 home.html을 다음과 같이 만들었다.

 

 

 

영화 정보 테이블 DB를 다음과 같이 설정하고

 

 

 

이미지 경로는 이러하다

 

 

 

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class MovieVO {
private int no;
private String name;
private String country;
private LocalDate prdtYear;
private String mainImageName;
private String description;
}

MovieVO를 다음과 같이 정의하였다. 되도록이면, db의 컬럼 이름과 같게 정의하였고, 롬복으로 게터,세터,생성자를 생성

 

 

 

@Mapper
public interface MovieMapper {
// 홈 화면에 전체 평점 순서로 영화 나타내기
List<MovieVO> get_all_movies();
}

<mapper namespace="com.project.web.moviereview.mapper.MovieMapper">
<select id="get_all_movies" resultType="MovieVO">
SELECT * FROM `movie` LIMIT 5;
</select>

</mapper>

@Controller
@RequestMapping("/movies")
public class MovieController {
@Autowired private MovieMapper movieMapper;
@Autowired private MovieService movieService;


/************************ home 관련 ************************/
// 전체 평점 순위로 영화 나타내기
@GetMapping
@ResponseBody
public List<MovieVO> get_all_movies(){
return movieMapper.get_all_movies();
}

Mapper에 영화 목록들을 보여주는 메소드를 생성하고, mapper.xml로 SELECT문을 불러와서 모든 영화 정보들을 조회하게 한다. 아직 평점 순서대로 나열하기엔 각 영화의 평점이 설정되지 않아서 그것은 나중에 변경하기로 하였다. 그리고 configuration.xml로 typealias 설정하였기에, resultType 경로를 다음과 같이 간단하게 설정가능하다. Controller로 서버를 설정하였다. ResponseBody로 모든 영화의 데이터들을 저장.

 

 

 

@Service
public class MovieService {
String THUMBNAILS_FILE_PATH = "C:\\Users\\user\\Desktop\\Web19 HCS\\movie_images\\thumbnails\\";

// 각 영화의 썸네일을 불러오는 서비스
public ResponseEntity<Resource> get_movie_image_file(String fileName) throws Exception{
Resource resource = new FileSystemResource(THUMBNAILS_FILE_PATH + fileName);
HttpHeaders httpHeaders = new HttpHeaders();
httpHeaders.add("Content-Type", Files.probeContentType(resource.getFile().toPath()));
return ResponseEntity.ok().headers(httpHeaders).body(resource);
}

}

썸네일 이미지가 있는 부분의 경로를 가져와서, 각 영화의 썸네일을 불러오는 코드를 작성한다.

 

 

 

// 각 영화의 썸네일을 저장
@GetMapping("/image/{mainImageName}")
public ResponseEntity<Resource> get_movie_image_file(
@PathVariable("mainImageName") String mainImageName
) throws Exception{
return movieService.get_movie_image_file(mainImageName);
}

또 다시 MovieController로 가서 각 영화의 썸네일의 주소를 생성하는 코드를 작성하고, 그 주소에서 해당 썸네일을 불러오게끔 한다.

 

 

 

 

// 전체 평점 순서 부분의 영화를 나타내는 부분을 가져온다
const allRankMovies = document.getElementById('allRank').nextElementSibling;

get_all_movies();

// 서버에 모든 영화 데이터 요청
function get_all_movies(filterParam){
fetch(`/movies`)
.then(response => response.json())
.then(object => {create_movies(object)})
.catch();
}
// 서버에서 받은 모든 영화 데이터를 화면에 생성
function create_movies(movieList){
allRankMovies.innerHTML = '';
for (const movie of movieList) {
const name = movie.name;
const country = movie.country;
const prdtYear = movie.prdtYear;
const mainImageName = movie.mainImageName;
console.log(mainImageName);

allRankMovies.insertAdjacentHTML('beforeend',
`<div class="movie">
<div class="image-box">
<a href=""><img src="/movies/image/${mainImageName}" alt="썸네일"></a>
</div>
<span class="title">${name}</span>
<span>${prdtYear} &#12685; ${country}</span>
<span>평균 <i class="fa-solid fa-star"></i> 0.0</span>
</div>`
);
}
}

영화 목록들을 나타나게 하는 home.html의 자바스크립트 부분이다. 먼저 서버에 모든 영화 데이터를 요청하고, 그 서버에서 받은 모든 영화 데이터를 화면에 생성하는 함수코드 역시 작성한다. 먼저 화면에 있는 모든 요소들을 지운 뒤, 각 변수에 데이터들을 저장하고, 영화를 나타내는 부분에서 insertAdjacentHTML로 HTML를 생성한다. 썸네일 역시 컨트롤러에서 설정한 썸네일 주소를 적는다.

 

 

 

실행 결과, 평균 부분을 제외한 모든 데이터들이 맞게 불러온 것을 확인할 수 있다.