221104 TIL

어제까지 백엔드 부분은 어느정도 완성이 되었고 오늘은 프론트작업을 시작했다. 

 

음원 상세페이지 html

 

 

 

 

javascript로 연결해서 데이터 불러온 html화면

document.addEventListener("DOMContentLoaded", function(){
    handleMock()

});

async function handleMock(){
    const response = await fetch('http://127.0.0.1:8000/musics/3/',{
        headers: {
          
            "Authorization":"Bearer " + "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NzM5NDc3LCJpYXQiOjE2Njc2OTYyNzcsImp0aSI6IjgyOTUyNWJiYjg2YzQ0MjY5Y2E1MGM1OWMxN2MyM2FjIiwidXNlcl9pZCI6MiwidXNlcm5hbWUiOiJjaGFwbWFuc2VhbiJ9.-_DWEAexvJTKvlfdREfpme9wdRa_nKfOJvva3G5aCrI"
        },
        method:'GET',
    })

    const response_json = await response.json() 
    // response 값 변수에 담기
    console.log(response_json)
    let music = response_json;
    let review = response_json['reviews'];
    
    let music_detail = document.getElementById("music_detail");
    music_detail.innerHTML='';
    
    let new_music = document.createElement('div');
    new_music.className = 'sec section_recommend_music';
    new_music.innerHTML = `
    <div class="section_header" style="width:80%">
        <h2 class="section_title highlight">${music['id']} : ${music['title']} </h2>
    </div>
    <div class="container-2 text-center">
        <div class="music_content row">
            <div class="col-md-4">
                <img src="${music['image']}" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-4">
                <div class="card-body">
                <p class="text-muted">${music['title']}</p>
                <p class="text-muted">${music['artist']}</p>
                </div>
            </div>
        </div>
    </div>
    `;
    music_detail.append(new_music);
   
   
    let review_list = document.getElementById("review_list");
    review_list.innerHTML='';
    review.forEach(element => {
    let new_review = document.createElement('div');
    new_review.className = 'sec section_review_music';
    new_review.innerHTML = `
    <ol class="list-group" id="review_list">
        <li class="d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">${element['user']} : ${element['content']}</div>
          </div>
          <span class="badge bg-primary rounded-pill">${element['grade']}</span>
        </li>
    </ol>
    `;
    review_list.append(new_review);
    });
}