4주차 숙제중인데 mongo db에 입력이 안됩니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4주차 숙제중인데 mongo db에 입력이 안됩니다.

undefined주차

김*완

・

추천

・

조회수

답변 완료

작성한 코드 및 에러 메세지

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


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


@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form["name_give"]
    comment_receive = request.form["comment_give"]

    doc = {
        'name': name_receive,
        'comment': comment_receive
    }

    db.homework.insert_one(doc)

    return jsonify({'msg': '작성완료!'})


@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({}, {'_id': False}))
    return jsonify({'comments': comment_list})

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>

    <title>뮤지션 팬명록</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
          rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }

        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("data:image/jpeg;base64,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");
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            set_temp()
            show_comment()
        });

        function set_temp() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {'name_give': name, 'comment_give':comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }

        function show_comment() {
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`
                        $('#comment-list').append(temp_html)
                }
            });
        }
    </script>
</head>
<body>
<div class="mypic">
    <h1>uza&shane 팬명록</h1>
    <p>현재기온: <span id="temp">36</span>도</p>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="mycards" id="comment-list">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
</div>
</body>
</html>

덧붙여서 당연하게도 웹페이지도 구동이 되지 않습니다. 혹시 코드에 오류가 있을까요??

댓글 알림