삭제 버튼 만들기

yuns·2022년 9월 1일

버튼 클릭 시 데이터베이스에서 삭제시키는 기능 연습

저장하는 코드는

# 저장
doc = {'name':'bob','age':21}
db.test.insert_one(doc)

지우는 코드는

db.test.delete_one({'name':'bob'})

저장과 지우기가 잘 된다.
이름이 'bob'이라는걸 변수에 담으려면?

db.test.find_one({'name':'bob'})
print(db.test.find_one({'name':'bob'}))

fine_one으로 그대로 출력만했을땐
{'_id': ObjectId('63103c75e73449812b83a857'), 'name': 'bob', 'age': 21}
이렇게 딕셔너리로 나온다.
따라서 ['name']으로 찍어줘야 문자열로 나올것이다.

name = db.test.find_one({'name':'bob'})
print(name['name'])
db.test.delete_one({'name':name['name']})

이렇게!
여기에서 'bob'부분을 html쪽에서 가져온 값으로 설정하면 되지 않을까

테스트 하기 위해 간단한 test.html을 만들었다.

<script>
    function add_list() {
        alert('입력')
    }
    function delete_list() {
        alert('삭제')
    }
</script>
<body>
    <input id="name" type="text" placeholder="이름을 입력해보세요">
    <button onclick="add_list()">입력</button>
    <button onclick="delete_list()">삭제</button>

<ul>
    <li>하나</li>
    <li>둘</li>
    <li>셋</li>
</ul>
</body>

DB에 등록하는 코드도 작성한다

@app.route("/list", methods=["POST"])
def list_post():
    name_receive = request.form['name_give']
    print(name_receive)
    doc = {
        'name':name_receive
    }
    db.names.insert_one(doc)

    return jsonify({'msg': '등록 완료!'})

생각해보니 하나씩 지워야하니까 버튼 위치를 수정했다.

show(GET, 가져오기방법)을 구현한다.

@app.route("/list", methods=["GET"])
def list_get():
    name_list = list(db.names.find({}, {'_id': False}))
    return jsonify({'names': name_list})

    function show_list() {
        $.ajax({
            type: "GET",
            url: "/list",
            data: {},
            success: function (response) {
                let rows = response['names']
                for(let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']

                    let temp_html = `<li>${name}<button onclick="delete_list()">삭제</button></li>`
                    $('#names').append(temp_html)
                }
            }
        });
    }

삭제 버튼을 구현한다
원래의 방법은 데이터에 저장된 'name'의 값으로 호출시켜 특정 값만 지워주려고 했는데,
각 데이터에 'num'으로 숫자를 달아서 그 숫자를 삭제해주는 방법이 떠올라서 아래처럼 만들었다.

@app.route("/list/delete", methods=["POST"])
def list_delete():
    num_receive = request.form['num_give']
    db.names.delete_one({'num': num_receive})

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

    function show_list() {
        $.ajax({
            type: "GET",
            url: "/list",
            data: {},
            success: function (response) {
                let rows = response['names']
                for(let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let num = rows[i]['num']

                    let temp_html = `<li>${name}<button onclick="delete_list(${num})">삭제</button></li>`
                    $('#names').append(temp_html)
                }
            }
        });
    }
    function delete_list(num) {
        // let name = this.$('li').text()
        $.ajax({
            type: "POST",
            url: "/list/delete",
            data: {num_give:num},
            success: function (response) {
                alert(response["msg"])
                window.location.reload()
            }
        });
    }

일단 오류는 안나는데... ?
DB 클라우드를 찾아가니 ...
데이터가 삭제되지 않고 남아있다..

강의를 보며 만들었던 코드를 참고해보니 num을 받은 값을 숫자로 바꿔주지 않아서인듯하다.

@app.route("/list/delete", methods=["POST"])
def list_delete():
    num_receive = request.form['num_give']
    db.names.delete_one({'num': int(num_receive)})

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

int()로 문자열을 숫자로 변환시켜준다.
바꿔준 결과,

이름 입력(bobby)

삭제버튼 클릭삭제됨!

정상적으로 삭제 처리가 된다!!!!
정말 신기하고 뿌듯한 순간이다
DB클라우드에도 잘 삭제 된다.

전체코드

app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.xfqlj4u.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

@app.route('/')
def home():
    return render_template('index.html')

# POST
@app.route("/list", methods=["POST"])
def list_post():
    name_receive = request.form.get('name_give',False)

    name_list = list(db.names.find({}, {'_id': False}))
    num = len(name_list) + 1
    doc = {
        'name':name_receive,
        'num' : num
    }
    db.names.insert_one(doc)

    return jsonify({'msg': '등록 완료!'})

# 보여주기
@app.route("/list", methods=["GET"])
def list_get():
    name_list = list(db.names.find({}, {'_id': False}))
    return jsonify({'names': name_list})

# 삭제
@app.route("/list/delete", methods=["POST"])
def list_delete():
    num_receive = request.form['num_give']
    db.names.delete_one({'num': int(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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
</head>
<script>
    $(document).ready(function () {
        show_list();
    });
    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) {
                let rows = response['names']
                for(let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let num = rows[i]['num']

                    let temp_html = `<li>${name}<buttontoken interpolation">${num})">삭제</button></li>`
                    $('#names').append(temp_html)
                }
            }
        });
    }
    function delete_list(num) {
        // let name = this.$('li').text()
        $.ajax({
            type: "POST",
            url: "/list/delete",
            data: {num_give:num},
            success: function (response) {
                alert(response["msg"])
                window.location.reload()
            }
        });
    }
</script>
<body>
<input id="name" type="text" placeholder="이름을 입력해보세요">
<button onclick="add_list()">입력</button>


<ul id="names">
    <li>하나<button onclick="delete_list()">삭제</button></li>
    <li>둘<button onclick="delete_list()">삭제</button></li>
    <li>셋<button onclick="delete_list()">삭제</button></li>
</ul>
</body>
</html>

오류 수정

homework로 했던 팬명록에 삭제 버튼을 추가시키면서 보니, 삭제 버튼을 눌렀을 때 다른 글이 삭제되는 오류를 알게됐다.

삭제를 하고 다시 데이터를 저장할 시 num의 수가 겹치게된다.
삭제를 하면서 num을 업데이트 시켜줘야할것같다.

내가 하려는것은

db에서 모든 리스트를 하나씩 꺼내와서
num을 1부터 다시 순서대로 매기기

# 삭제
@app.route("/homework/delete", methods=["POST"])
def list_delete():
    num_receive = request.form['num_give']
    db.fans.delete_one({'num': int(num_receive)})

    # Db모든 데이터 가져오기
    fan_list = list(db.fans.find({}, {'_id': False}))

    # 넘버링 담을 변수
    num = len(fan_list) + 1

    # for 문으로 한개씩 꺼내오기
    for f in fan_list:
        db.fans.update_one({}, {'$set': {'num': num}})

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

이렇게..어찌어찌 해보는데 잘 안된다.

두번째 방법

글을 저장할 때 num이 겹치지 않게 넘버링하기

리스트에서 넘버를 가져온다
새로 추가할 넘버가 리스트의 넘버와 수가 같은지 확인한다
수가 같으면 1을 더한다

잘 모르겠어서 테스트파일에 print()로 찍어보며 넘버링시켜봤다.
1. 리스트의 num값 가져오기

for f in fan_list:
    print(f['num'])

이것들을 새로 가져올 num과 비교하기

for f in fan_list:
    print(f['num'])
    if num == f['num'] :
        num += 1
    else:
        break

값이 같으면 num에 +1을 해서 다음번호로 넘겨주고, 아니면 빠져나온다.
3.

for f in fan_list:
    print(f['num'])
    if num == f['num'] :
        num += 1
        doc = {'name': 'fan4', 'comment': 'comm1ents', 'num': num}
        db.fans.insert_one(doc)
        break
    else:
        doc = {'name': 'fan4', 'comment': 'comm1ents', 'num': num}
        db.fans.insert_one(doc)
        break

근데 생각해보니 값이 같아도 빠져나와줘야한다.
안그러면 같은 값이면 한번 더 돌아서 데이터가 한개 더 생기기 때문이다..

yuns

이전 포스트

파이썬 함수 심화, 클래스

다음 포스트