2023.05.17 / 내일배움캠프[Node.js] - 3일차
| 댓글 삭제 기능 하는법 익히기. |
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.9rhu9tr.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
# 1~9까지의 숫자를 8자로 랜덤으로 돌리고 중복되지 않게 뽑고 변수 num에 넣음
import string, random
length = 8
string_pool = string.digits
num = ""
for i in range(length) :
num += random.choice(string_pool)
@app.route('/')
def home():
return render_template('index.html')
# POST
@app.route("/list", methods=["POST"])
def list_post():
# db 로 입력 값 보내기 요청 에서 name_give를 받아와 변수 name_receive에 넣음
name_receive = request.form.get('name_give',False)
# name 은 name_receive, _id 값은 num의 형태로 doc에 저장
doc = {
'name':name_receive,
'_id':num
}
db.names.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
# 보여주기
@app.route("/list", methods=["GET"])
def list_get():
# list = 배열로 받아옴 , db.names.find({}) db.names의 모든 값을 find , (_id값을 임의로 정했기 때문에 {'_id': False}는 필요하지않음.)
name_list = list(db.names.find({}))
# db.names.find({},{'_id': False}) = names의 모든 값을 find 하지만 _id 값은 제외한다.({'_id': False}) true로 하면 포함.
return jsonify({'names': name_list}) # names = key 값 , name_list를 key값에 넣어줌.
# 삭제
@app.route("/list/delete", methods=["POST"])
def list_delete():
# delete_list(id) 에서 id라는 변수를 num_give라는 변수로 보냄 >> 받은 num_give를 num_receive라는 변수에 넣어줌
num_receive = request.form['num_give']
db.names.delete_one({'_id': num_receive})
return jsonify({'msg': '삭제 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<script>
$(document).ready(function () {
show_list();
});
// db 로 입력 값 보내기 요청
function add_list() {
let name = $('#name').val()
$.ajax({
type: "POST",
url: "/list",
data: {name_give:name},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
function show_list() {
$.ajax({
type: "GET",
url: "/list",
data: {},
success: function (response) {
// app.py #보여주기의 key 값인 names 를 함수 변수 response에 넣어주고 rows에 넣어줌
let rows = response['names']
$('#names').empty()
// i를 0으로 지정 rows.length = rows 의 길이만큼돌리고, i++ = i에 1추가, for = 이걸 반복
for(let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let id = rows[i]['_id']
// console.log(rows)
// ${name} = rows[i]['name'] , ${id} = rows[i]['_id']
let temp_html = `<li>${name}<button onclick="delete_list(${id})">삭제</button></li>`
$('#names').append(temp_html)
}
}
});
}
// function ~~~(@@) { = @@은 매개변수로 해당 함수에서만 쓸수있는 변수.
function delete_list(id) {
$.ajax({
type: "POST",
url: "/list/delete",
data: {num_give:id}, // id라는 매개변수를 num_give라는 변수에 넣어줌 , num_give 는 다른곳에서 사용 가능.
success: function (response) { // 성공하면 response에 넣어줌.
alert(response["msg"])
window.location.reload()
}
});
}
</script>
<body>
<input id="name" type="text" placeholder="이름을 입력해보세요">
<button onclick="add_list()">입력</button>
<ul id="names">
</ul>
</body>
</html>
| 각 코드의 설명들은 주석으로 처리해놨다. 해당 기능을 알기 위해 인터넷 서칭도 하고 혼자 알아 볼려했지만.. 도저히 불가능하여 같은 팀원분께 도움을 요청해 성공했다! 팀원분 사랑해요 ㅠ.ㅠ |
* 갑자기 든 생각인데 이렇게 id에 임의로 생성한 값을 넣어주면 동일한 값이 생성되어 저장시 오류가 발생할 수 있다.
그래서 나의 얄팍한 코딩 지식으로 db의 저장된 id값을 get요청해 if 문이나 while 문을 써서 비교를 해주고 동일 할 경우 함수 처음부분으로 돌아가 새로 id값을 생성해주면 된다 생각했다!
문법에 익숙하지않고 제대로 공부를 하지않아 팀원분께 도움을 요청하였는데 비교를 해서 값을 새로 생성하는 부분은
문제가 없지만 db에 데이터가 많이 쌓일 경우 하나하나 다 비교해줘야해서 오히려 비효율적이라는 답변..!
그래서 그냥 해결책으로 값의 자릿수를 늘리는 방법을 택했다.
* 원래 원하는 방법은 db안에 자동적으로 생성되는 id값을 불러와서 그걸 이용한 delete 방법을 구현할려 했지만 해당 id값이 고유의 값이라 그런지 쉽지 않아 이 방법을 포기하였다..
하지만 분명 고유 id값을 수정하지 않고 하는 방법도 있기 때문에 추후에 혼자 찾아 보고 적용 시켜 볼거다.!
'긁적..' 카테고리의 다른 글
| 상세페이지 연결 localStorage / setTime, getTime (0) | 2023.06.05 |
|---|---|
| [1] Team.NIVEA 회고 (1) | 2023.05.19 |
| for반복문 증감식 (0) | 2023.05.19 |
| 동기 와 비동기 (0) | 2023.05.19 |
| 슬라이드 기능 (원하는 기능 구현못함..) (0) | 2023.05.19 |