방명록이 밑에 안붙어요 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

방명록이 밑에 안붙어요

undefined주차

김*환

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

오랜시간 붙들어 잡고 있지만 도저히 원인을 모르겠습니다 ㅠㅠ

index.html 결과물이랑 app.py결과물이 서로 다르게 표시 되는데 어느 부분을 잘 못 연결한건가요?

왜 몽고db에 등록이 안되고 댓글이 안붙는지 알 수 있을까요?

작성한 코드 및 에러 메세지

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.629kuex.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta


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


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

    doc = {
        'name': name_receive,
        'comment': comment_receive,
    }
    db.comments.insert_one(doc)
    return jsonify({'msg': '갔나?'})


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

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

<!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>

    <style>
        .card1 {
            max-width: 600px;
            width: 95%;
            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 4px 0px gray;
            padding: 20px;
        }

        .form-floating {
            margin: 10px;
        }

        .button > button {
            margin-right: 10px;

        }

        .button {
            display: flex;
            flex-direction: row;
            justify-content: right;
            align-items: center;
            margin-top: 10px;
        }

        .card {
            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
    </style>
    <script>
        $(document).ready(function () {
            show_comment()
        });

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

            $.ajax({
                type: 'POST',
                url: '/comments',
                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: "/comments",
                data: {},
                success: function (response) {
                    let rows = response["comments"]
                    for (let i = 0; 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>
                            </div>`
                        $("#comment-list").append(temp_html)

                    }

                }
            });
        }</script>
</head>
<body>
<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img src="..." class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">‘ 살아남기’ </h5>
                <p class="card-text"> e&I 입니다.</p>
                <p2> -   비교적 온순한 편임  </p2>
                <p3> - 력..</p3>
                <p class="card-text"><small class="text-muted"> #ISFP #질문지가 #바뀌어도 #ISFP  </small></p>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">내일이 세상의 끝이라면</h5>
        <p class="card-text">마지막 만찬은 </p>
          <p2> </p2>
        <p class="card-text"><small class="text-muted">.</small></p>
      </div>
    </div>
  </div>
</div>


<div class="card1">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="name" placeholder="name@example.com">
        <label>이름</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="댓" id="comment"></textarea>
        <label>댓글</label>
    </div>
    <div class="button">
        <button onclick="save_comment()" type="button" class="btn btn-dark">방명록 작성</button>
    </div>
</div>
<div class="card2" id="comment-list">
</div>





</body>

</html>

댓글 알림