['21.07.18] 간단한 프론트 개발#1

기본적인 기능이 갖추어 졌으니, 간단한 프론트를 개발하여 연결해보자.

 

1. PageController

---

기존의 ApiController가 아닌 PageController를 만들어 주자.

@Controller
@RequestMapping("/movie/pages")
public class PageController {

    @GetMapping("/main2")
    public ModelAndView main(){

        return new ModelAndView("main2"); //template 하위경로
    }

}

이 컨트롤러는 해당 uri로 접속할 경우, tehmplates 하위 경로에 있는 html과  연결시켜 준다.

 

즉, http://localhost:8080/movie/pages/main2로 접속하면, 작성한 HTML과 연결이 된다.

 

 

2.HTML

---

html작성은 최대한 bootstrap을 사용하여 진행했다.

 

1)문자열 바인딩, Mustache

새로 안 점은, 의존성(?)을 추가하기 위해서는 {{search_result.title}}과 같이 작성해줘야 한다.

<li class="list-group-item" id="movie_title">제목 : {{search_result.title}}</li>
<li class="list-group-item" id="movie_director">감독 : {{search_result.director}}</li>
<li class="list-group-item" id="movie_actor">배우 : {{search_result.actor}}</li>
<li class="list-group-item" id="movie_userRating">평점 : {{search_result.userRating}}</li>

위와 같이 중괄호 두개의 쌍으로 묶는것을 문자열 바인딩 이라고 한다. 또는 수염 같다고 하여 Mustache라고도 한다.

 

 js에서 정의된 property를 넣어주면 해당 값이 문자열의 형태로 출력된다.

 

2) js와 연결하기

HTML에서 Javascript파일을 불러오기 위해서는 Script안에 경로를 지정해 줘야 한다.

<script src="/js/main2.js"></script>

default로 지정되어 있는 경로는 resources/static이다. 따라서 js상위 경로를 입력하면 경로가 달라진다.

 

경로를 제대로 입력했고, 파일도 존재하는데, 한참동안 404에러가 발생했다.

 

아무리 해도 안되다가 폴더명을 다른 이름으로 변경했다가, 다시 원래대로 돌려놓으니 언제 그랬던 것 마냥 실행되었다..

 

 

3. jQuery, vue.js, ajax

---

jQuery와 vue.js는 하나도 모른다. ㅎㅎ

 

강의를 통해 작성했던 파일을 기준으로 수정 및 다른 글들을 참고하여 이해하며 진행했다.

 

지금은 그냥 가져다가 썼지만, 짬짬히 공부해야겠다.

 

중요한 점은 태그 명이 다르지 않도록 주의해야 한다.

 

예를들어 아래와 같은 Vue객체가 있다고 하자.

    var movie_list = new Vue({
        el: '#movie-list',
        data: {
            movie_list : {}
        },
        methods: {

            deleteMovie: function (index) {
                $.ajax({
                    type: "DELETE" ,
                    async: true ,
                    url: `/api/delete/movie/${index}`,
                    timeout: 3000
                });
                getMovie();
            }
        }
    });

el은 element로 html의 어떤 id와 연동? 종속될 것인가를 의미한다.

따라서 el의 #다음에 있는 이름은 html에서 사용한 id와 동일해야 한다.

<div id="search-result">

 

4. 실행 결과

---

 

영화 검색 및 DB추가는 의도하는 대로 잘 된다.

근데 삭제는 안된다 ㅋㅋㅋ 

 

영화 삭제는 해당 entity의 id를 가져와서 삭제하게 되어있다.

 

index를 통해서 delete가 실행되어야 하는데, 안됐다.

 methods: {

            deleteMovie: function (index) {
                $.ajax({
                    type: "DELETE" ,
                    async: true ,
                    url: `/api/delete/movie/${index}`,
                    timeout: 3000
                });
                getMovie();
            }
        }

 

그리고 사진의 해상도가 낮다. 아마 네이버 영화 페이지에서 검색을 했을 때 볼 수 있는 저 사진을 가져오는 것 같다.

Naver API를 통해 가져온 사진 링크 : https://movie.naver.com/movie/bi/mi/basic.nhn?code=181114 

Naver 영화에서 직접 검색하여 가져온 링크 : https://movie.naver.com/movie/bi/mi/basic.naver?code=181114   

 

둘이 똑같은 링크다. 사진이 작을만 하다 ㅋㅋㅋ

 

5. 앞으로 해야할 일

---

1) 이미지는 Naver 이미지 검색 API를 따로 사용하여 가져오기. --> 고화질

2) Delete 되도록 코드 이해하고, 고쳐놓기

3) DB에 저장된 영화에 대하여 comment추가할 수 있도록 기능 추가.

 

 

 

6.GitHub : 210717, FrontEnd #1

---

https://github.com/bsh6463/MovieManager

bsh6463/MovieManager