드디어..!!! 삭제 기능을 구현했따!!!!!!!
주요 포인트는 아래와 같다.
1) 각 생성된 데이터들에 python에서 번호를 부여할 것
2) 부여한 번호를 script에서 ajax로 GET받을 것
3) 부여한 번호를 찾아 script에서 ajax delete로 받을 것(POST)
나는 입문한지 얼마 안된 코린이이기 때문에 python에서 method를 DELETE 받는 방법이 너무 어렵고, if문 쓰는것도 복잡해서 최대한 간단하고 내가 읽을 수 있는 코드로 작성했다.
이 때 기초단계인 내가 배운 코드들은
script 부분: ajax, let i = 0; i < rows.length; i++
1) ajax(Asynchronous JavaScript And XML) : Javascript에서 웹 개발을 할때 Front의 코드를 구현할 때 이용하면 서버로부터 데이터를 받아오고, 전송할 수 있다.
전송하는 방법은 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만 POST로도 데이터 전송이 가능하다.
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.
서버에서 Web Front로 데이터 전송
$ajax({
url: "/주소",
type: "POST",
success: function(result) {
if(result) {
} else {
alert("불러오기 실패");
}
}위와 같은 코드는 ajax로 설정한 url을 요청을 하면 데이터가 전송이 되고 result로 결과 값이 전송이된다.
Web Front에서 입력된 데이터를 서버로 전송
$ajax({
url:"/주소",
type:"POST",
data:JSON.stringify(params),
contentType: "application/json",
success: function(result) {
if (result) {
alert("저장되었습니다");
} else {
alert("잠시 후에 시도해주세요.");
}
},
error: function() {
alert("에러 발생")
}
})위의 코드는 Front에 입력된 데이터를 서버로 전송하는 소스코드이다.
전송하는 데이터는 params로 dictionary형태를 띄고있다.
dict형태는 json과 유사하기 때문에 data를 JSON.stringify(params)를 해줘야지 json형태로 전송이 된다. 서버에서 받은 데이터를 이후에 응답을 했을 때 성공하면 저장되었습니다. 결과가 없으면 잠시후에 시도해주세요, 에러가 발생하면 에러발생의 창을 띄운다.
2) for (let i = 0; i < rows.length; i++)
for 반복문의 기본형태는 다음과 같다
for (let i = 0; i < 반복횟수; i++) {
문장
}위의 문은 i라는 반복 변수를 가지고 반복횟수 미만으로 반복하며 1씩 더하면서(++) 반복한다.
즉 위에서 쓴 코드는 i라는 반복 변수를 가지고 i가 0번째부터 rows의 자료 수 미만으로 반복하면서 1씩 더하면서 반복한다 라는 뜻이다! (자료형은 0번째부터 세므로 4개의 자료가 있다면 0, 1, 2, 3번째까지 반복하라는 말이다. 4번째 자료는 없으니 말이다.) 결국 forEach와 비슷하지만 반복횟 수를 가질 수 있는 구문인 것 같다.
python 부분: list, len, int, delete_one
1) list : 값을 나열하는 자료구조 형태
ex) list_name = [가, 나, 다, 라]
print (name[0]) > 가
print (name[4]) > Index out of range
list는 자료의 순서를 정하는 자료형이다.
2) len : 문자열의 길이를 반환하는 함수
ex) len(한글과 공백) #6 반환
len(12345) #5 반환
3) int : 숫자나 문자열을 정수로 변환시켜주는 함수
ex) a=int(2.5)
print(a) # 2반환
4) db.h(가정).delete.one({'name':'bobby'})
우선 천천히 읽어나가자면
저장
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("comment_give", comment);
fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload()
});
}- script: 이름, 코멘트를 받아서 저장 후 새로고침
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
comment_list = list(db.fan.find({},{'_id':False}))
count = len(comment_list) + 1
doc = {
'num': count,
'name': name_receive,
'comment': comment_receive
}
db.fan.insert_one(doc)
return jsonify({'msg': '저장 완료!'})- python:
1) 이름, 코멘트를 받아 list를 만든다
2) 삭제라는 기능을 넣기 위해 각 댓글에 고유번호를 부여하는 작업
2-1) comment_list라는 변수를 만들고 list화 한다.(index, 각 데이터에 순서를 매김하는 작업)
2-2) count라는 변수를 만들고 comment_list의 문자열들의 순서에 +1을 해준다. 문서 내 위치는 0부터 세기때문에 첫 번째 문서의 숫자를 1로 바꿔주기 위한 변수이다.
2-3) 문서안에 이름(name), 댓글(comment), 고유번호(num)을 database에 저장한다.
3) 저장 후 저장완료라는 메세지가 뜬다.
보여주기
function show_comment() {
$.ajax({
type: 'GET',
url: '/guestbook',
data: {},
success: function (response) {
let rows = response['result']
$('#comment-list').empty();
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let num = rows[i]['num']
let temp_html = `<tr>
<td>${name}</td>
<td>${comment}</td>
<td><button onclick="deleteStar(${num})" type="button" class="btn-light" id="delete-btn">X</button></td>
</tr>`
$('#comment-list').append(temp_html)
}
}
})
}-script : 여기서 중요한 ajax콜을 사용한다.
여기서는 서버에서 Web Front로 데이터를 전송한다.
1) 서버에서 받은 모든 자료를 url로 받아오고, 전송 받으면 그것을 결과값으로 받는다. 반복문 사용 전 틀이 되는 리스트를 비워놓는 문을 넣었다.
2) for 반복문을 사용하여 반복변수를 0부터 자료의 길이 미만까지 한 번씩 추가하면서 반복을 한다.
3) 변수를 지정해준다. 이름(name), 댓글(comment), 고유번호(num)
4) let temp_html을 사용하여 html의 틀에 각 변수가 어느부분에 들어 갈지 지정해준다.
4-1) **중요! 삭제버튼에 뒤에 나올 삭제 함수이름과 고유번호 변수이름을 넣어 클릭 시 삭제가 될 수 있도록 지정한다.
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
all_comments = list(db.fan.find({},{'_id':False}))
return jsonify({'result':all_comments})-python: 별 거 없다. 그냥 저장한 리스트를 그대로 script ajax에 전달해준다.
삭제하기
function deleteStar(num) {
if (confirm('댓글을 정말로 삭제하시겠습니까?')) {
$.ajax({
type: 'POST',
url: '/guestbook/delete',
data: {
delete_give: num
},
success: function (response) {
alert(response['msg']);
window.location.reload();
}
});
}
}-script: ajax사용 / Web Front에서 입력된 데이터를 서버로 전송
1) 함수를 지정한다. : deleteStar(다른이름 가능, 직관적이게 설정)
2) 가정문을 열고 불 자료를 입력하는 confirm 넣는다.
3) true일 경우 ajax를 콜한다.
3-1) type은 python에서 POST를 사용하므로 POST를 부여하고,
url역시 python에서 지정한 그대로 가져온다.
3-2) data는 저장되어있는 num을 delete_give로 받는다.
3-3) 성공할 경우 응답하여 'msg'를 띄우게된다.
3-4) 새로고침 된다.
@app.route('/guestbook/delete', methods=['POST'])
def delete_star():
delete_receive = request.form['delete_give']
db.fan.delete_one({'num': int(delete_receive)})
return jsonify({'msg': '삭제 완료!'})-python: ajax로부터 받은 데이터를 해결
1) delete_give를 front에서 받아와서 delete_receive받는다.
2) 데이터베이트 용어인 자료 하나 삭제하기 코드를 받는다.
2-1) front에서 받은 num는 고유번호이고 이 고유번호가 데이터 에서 num인 일치하는 것을 찾아 지운다.
3) 성공하면 msg '삭제 완료!'를 front에 보낸다.
완성!!!
