Django spotify api 정보 js를 이용해서 프론트로 옮기기

views.py에서 백엔드 로직을 다 작성했다면

1. views.py에 TemplateView로 렌더링 할 뷰를 적어준다.

PlaylistPageView는 템플릿을 렌더링 하는 역할로 해당 뷰가 호출될 때 playlist.html 템플릿을 렌더링 한다.

class PlaylistPageView(TemplateView):
    template_name = "playlist/playlist.html"

2. html의 head 태그에 라이브러리 추가

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3. js 파일에서 axios를 이용해 데이터 전송하기

axios.get('url')
  # 요청 성공시 실행
  .then(response => {
    console.log(response.data);
  })
  # 요청 실패시 실행
  .catch(error => {
    console.error('Error fetching data:', error);
  });

// 플레이리스트 가져오기
function Playlist(){
    axios.get('http://127.0.0.1:8000/api/playlist/')
        .then(response => {
            displayPlaylist(response.data);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}