가수 김현창씨 팬명록을 만들었다.
김현창 팬명록
(혹시 AWS Elastic Beanstalk로 배포한 페이지 url 변경하는 방법 알려주실 분...)
그래서 오늘은 하루 정도 애 먹은 저 [Delete] 버튼 구현을 어떻게 했는지 써볼거다.
- 데이터를 받고 해당하는 데이터를 db에서 삭제
@app.route("/guestbook/delete", methods=["DELETE"])
def guestbook_delete():
name_receive = request.form['name_give']
db.fans.delete_one({'name':name_receive})
return jsonify({'msg': '잉.. 지우지 말지..'})flask의 HTTP 메소드에서 일반적으로 쓰이는 6종류이다.
HTTP 메소드는 클라이언트가 서버에게 요청된 페이지를 통해서 무엇을 하도록 원하는지 알려준다.
GET, POST가 많이 쓰이고 GET이 가장 많이 쓰인다. methods를 지정하지 않으면 기본적으로 GET을 제공한다.
.
.
아리송한 것은 "DELETE" 메소드는 하나의 값으로만 그 값이 포함된 모든 데이터를 삭제하는 것인지 의문이 든다. 검색해 봐도 뚜렷한 정보가 없다.. 이것도 아시는 분 있으면 알려주세요.
- 버튼 클릭시 해당 데이터 서버로 전송
- onclick에 실행될 메소드
function delete_comment(name) {
let formData = new FormData();
formData.append("name_give", name);
fetch('/guestbook/delete', { method: "DELETE", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload()
});
}- 데이터 가져올 부분
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0" id="comment">
<p>${comment}</p>
<footer class="blockquote-footer" id="name2">${name}</footer>
</blockquote>
</div>
<buttontoken interpolation">${name}')" type="button" class="btn btn-outline-dark btn-sm" style="margin : 0px 10px 5px auto">
Delete
</button>
</div>`
$('#comment-list').append(temp_html).
.
-버튼 클릭시 delete_comment() 메소드에 name이라는 매개 변수를 받습니다. 매개 변수를 formData에 바로 할당 해야 합니다.
<button onclick="delete_comment('${name}')그래서, 저 괄호 안에는 name의 값이 문자열로 존재해야 합니다. ${name}에 작은 따옴표를 붙여줍니다. 그럼 {"name_give", '유니콘'} 이라는 form을 만들어 서버로 전송 후, 해당 데이터를 삭제 합니다.✌
내일 보자~
작은 따옴표 붙이는 거 하나만 바꾸면 구현 할 수 있었는데 시간을 많이 태운 것 같다. 그 마저도 도움을 받아서 해결해서 마음이 썩 좋진 않다. 원하는 답을 얻을 수 있는 검색도 중요하다고 느낀다. 예를 들어, "버튼 클릭시 삭제 구현" 보단 "javascript onclick function parameter" 같은 검색을 지향해야 될 것 같다.
