23.05.12) 미니프로젝트-영화리뷰 카드 추가하기 1

어제는 html코드에 이미지 주소를 적어서 카드 이미지가 제대로 

보여지는지 확인하는 작업을 했다.

영화리뷰 페이지가 웹페이지에 저장하려면 자바스크립트 함수를 

이용해야 한다.

 

addEventListener를 이용해서 이벤트를 등록하면 되는데

이 방식은 여러개의 이벤트 핸들러를 등록할 수 있는 장점이 있다.

 

카드 작성하기 버튼을 클릭(이벤트)하면 html 요소들의 클래스 이름 및

태그를 갖고 오기 위해서 querySelector를 지정해준다.

 

$(document).ready(function () {

  show_order();

});

document.addEventListener('DOMContentLoaded', function () {

  document

    .querySelector('.mybtn button')

    .addEventListener('click', function () {

      var movieSelect = document.querySelector('#movie-select');

      var commentInput = document.querySelector('#comment');

      var starSelect = document.querySelector('#movie_star');

      var movie = movieSelect.value;

      var imageUrl;

      if (movie == '타짜')

        imageUrl ='이미지 주소';

      else if (movie == '도둑들')

        imageUrl ='이미지 주소'; ... 등등

이미지 url까지 작성해주고 나서 서버에 데이터를 저장할 수 있도록

fetch 코드를 작성해주면 된다

fetch('/save_review', {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

        },

        body: JSON.stringify({

          movie: movie,

          comment: comment,

          star: star,

          imageUrl: imageUrl,

        }),

      })

카드를 작성한 후 페이지가 리로드 될 수 있도록

.then(function (response) {

          if (response.ok) {

            location.reload(); // 데이터 저장 후 페이지 새로고침

          } else {

            throw new Error('데이터를 저장하는 도중 오류가 발생했습니다.');

          }

        })

        .catch(function (error) {

          alert(error.message);

        });

    });

});

작성해주면 일단 서버에 리뷰 데이터는 저장된다.

오늘은 일단 여기까지