5주차_9( [무비스타] - POST연습(삭제하기))

API 만들고 사용하기 - 카드 삭제 API (Delete → POST)

만들 API

 

1. 조회(Read) 기능: 영화인 정보 전체를 조회

2. 좋아요(Update) 기능: 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3. 삭제(Delete) 기능: 클라이언트에서 받은 이름(name_give)으로 영화인을 찾고, 해당 영화인을 삭제

 

정리하면, 만들 API 정보는 아래와 같습니다.

A. 요청 정보 - 요청 URL= /api/delete , 요청 방식 = POST - 요청 데이터 : 영화인 이름(name_give)

 

B. 서버가 제공할 기능 : 영화인 이름(요청 데이터)와 일치하는 영화인 정보를 데이터베이스에서 삭제(Delete)하고, 성공했다고 응답 메세지를 보냄

 

C. 응답 데이터 : (JSON 형식) 'msg'='삭제 완료!'

클라이언트와 서버 연결 확인하기

• 여기서는 미리 적혀 있는 쌍으로 되어있는 서버-클라이언트 코드를 확인하고 갈게요.
• 분홍 형광펜 부분이 서로 어떻게 매칭되는지 확인해보세요!

[서버 코드 - app.py]

@app.route('/api/delete', methods=['POST'])

def delete_star():

sample_receive = request.form['sample_give']

print(sample_receive)

return jsonify({'msg': 'delete 연결되었습니다!'})

 

[클라이언트 코드 - index.html].

function deleteStar(name) {

$.ajax({

type: 'POST',

url: '/api/delete',

data: {sample_give:'샘플데이터'},

success: function (response) {

alert(response['msg']);

}

});

}

 

동작 테스트

'삭제' 버튼을 눌렀을 때, 'delete 연결되었습니다!' alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.

서버부터 만들기

API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!

 

영화인 카드를 삭제하기 위해 필요한 정보는 다음과 같습니다.

- 영화인의 이름 (name_give)

 

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣기

2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 제거

3. 성공하면 success 메시지를 반환

 

@app.route('/api/delete', methods=['POST'])

def delete_star():

name_receive = request.form['name_give']

db.mystar.delete_one({'name': name_receive})

return jsonify({'msg': '삭제 완료!'})

클라이언트 만들기

API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!

 

영화인 카드를 삭제하기 위해 필요한 정보는 다음과 같습니다.

- 영화인의 이름 (name_give)

 

따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 서버에

1) POST 방식으로,

2) /api/delete 라는 url에,

3) name_give라는 이름으로 name을 전달 (참고) POST 방식이므로 data: {'name_give': name}

2. '삭제 완료! 안녕!' alert창 띄우기

3. 변경된 정보를 반영하기 위해 새로고침

 

function deleteStar(name) {

$.ajax({ type: 'POST',

url: '/api/delete',

data: {name_give:name},

success: function (response) {

alert(response['msg']);

window.location.reload()

}

});

}

완성 확인하기

동작 테스트

삭제 버튼을 눌렀을 때 영화인 카드가 삭제되는지 확인합니다.