[웹개발종합반] 5주차 개발일지 (1) - 무비스타 프로젝트

무비스타에 사용된 코드는 깃허브에 올려놨습니다.

https://github.com/Hong-been/Sparta/tree/main/moviestart

GitHub - Hong-been/Sparta: 스파르타 코딩클럽-웹개발종합반을 들으며 작성한 코드입니다.

---

GET으로 서버에서 데이터요청, 가져오기

서버가 할 일

• 데이터베이스에서 like 내림차순으로 데이터 보내주기: sort(" ",-1)

movie_stars = list(db.mystar.find({},{'_id':False}).sort("like",-1));

동작하지 않을 때, 서버에서 킨 것인지 꼭! 확인! (html로 보고있었음 ㅠ)

 

POST로 서버의 데이터 업데이트, 삭제하기

1. like버튼 누르면 like 수 1 증가시키기

• 좋아요 누르면 해당 배우이름을 서버로 보낸다. → 배우의 좋아요 수를 +1 업데이트 → 페이지 새로고침

<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {name_give:name},
        success: function (response) {
            alert(response['msg']);
window.location.reload()
        }
    });
}

@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']
    target_star=db.mystar.find_one({'name':name_receive})
    new_like=target_star['like'] +1
    db.mystar.update_one({'name':name_receive}, {'$set': {'like': new_like}})
    return jsonify({'msg': '좋아요 되었습니다!'})

• 받은 이름을 근거로 해당하는 객체를 find_one해서 like를 update한다.

 

2. 삭제버튼 누르면 데이터베이스에서 해당배우 삭제하기

@app.route('/api/delete', methods=['POST'])
def delete_star():
    name_receive = request.form['name_give']
    target_star = db.mystar.find_one({'name': name_receive})
    db.mystar.delete_one({'name': name_receive})
    return jsonify({'msg': '삭제되었습니다!'})

• 좋아요버튼처럼, 이름을 받아서 해당 타켓객체를 알아내고 delete로 삭제한다.

 

프로젝트 스크린샷

• 좋아요 버튼을 누르면, 알림창이 뜨고 좋아요 수가 1 증가한다. 삭제버튼을 누르면 배우가 삭제된다.
• 좋아요가 많은 사람부터 순서대로 정렬되어 보여진다.

 

---

복습 겸 무비스타 프로젝트를 진행했다.

이제 get,post로 서버-클라이언트 통신하는 방법이 굉장히 익숙해졌다!!

다음주차부터는 서버개념과 클라우드 서버를 사용하여 나의 서비스를 띄우는 방법을 배운다.

기대된다!!!