커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
get 연결
undefined주차
북마크
한*진
댓글
5
・
추천
0
・
조회수
16
조회수
16
답변 완료

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

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


POST는 완료를 했는데, GET 연결을 확인하는 과정에서 return 값으로 설정해놓은 메시지가 뜨지 않고, 'Undefined'라고 뜹니다.


db를 불러오는 다음 단계로 진행을 해보았는데, get 연결 자체가 되지 않는 건지 콘솔창에 리스트가 찍히지 않습니다. 제 코드 중에 잘못된 부분이 있는지 확인 부탁드립니다.




스파르타 즉문즉답




작성한 코드 및 에러 메세지

//app.py 코드

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

from pymongo import MongoClient
import certifi

ca = certifi.where()
client = MongoClient('mongodb+srv://charles:1111@cluster0.szvramp.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbddymap

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

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

@app.route('/board', methods=["POST"])
def board_post():
    nickname_receive = request.form['nickname_give']
    password_receive = request.form['password_give']
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    doc = {
        'nickname': nickname_receive,
        'password': password_receive,
        'title': title_receive,
        'content': content_receive
    }
    db.board.insert_one(doc)

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

@app.route('/board', methods=["GET"])
def board_get():
    return jsonify({'msg': '가져왔다'})


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

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


db.users.insert_one({'name':'kay','age':27})


//board.html(URL에 해당하는 html 코드)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <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>대동0ㅕ지도</title>
    <style>
        @font-face {
            font-family: 'Pretendard-Regular';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        }

        * {
            font-family: 'Pretendard-Regular';
        }

        .nav-link {
            font-weight: bold;
        }

        .mypage {
            text-decoration: underline;
            text-decoration-thickness: 3px;
            text-underline-offset: 20px;
            margin-bottom: 0;
        }

        .mytitle {
            width: 100%;
            height: 150px;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mymessage {
            background-image: url("https://ifh.cc/g/r6xKPX.png");
            background-position: center center;
            background-size: 1000px auto;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            min-height: 300px;
        }

        .mymessage > button {
            width: 100px;
            height: 50px;

            background-color: white;
            color: black;

            border-radius: 50px;
            border: 1px solid black;

            margin-top: 30px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mypost {
            margin: auto;
            width: 700px;
            padding: 50px;
            box-shadow: 0px 0px 3px 0px gray;
            margin-bottom: 80px;

            display: none;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

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

        .allpost {
            margin: auto;
            width: 95%;
            max-width: 950px;
            padding: 20px;
        }

        hr {
            width: 100%;
        }

        .mycard {
            margin: auto;
            width: 95%;
            max-width: 950px;
            padding: 20px;
        }

    </style>
    <script>
        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }

        function fill_post() {
            let newNickname = $('#nickname').val()
            let newPasssword = $('#password').val()
            let newTitle = $('#title').val()
            let newContent = $('#content').val()

            if (newNickname == '') {
                alert('닉네임을 입력하세요');
                return;
            } else if (newPasssword == '') {
                alert('비밀번호를 입력하세요');
                return;
            } else if (newTitle == '') {
                alert('제목을 입력하세요');
                return;
            } else if (newContent == '') {
                alert('내용을 입력하세요');
                return;
            }
        }

        function save_post() {
            let nickname = $('#nickname').val()
            let password = $('#password').val()
            let title = $('#title').val()
            let content = $('#content').val()


            $.ajax({
                type: 'POST',
                url: '/board',
                data: { 'nickname_give': nickname, 'password_give': password, 'title_give': title, 'content_give': content},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

        $(document).ready(function () {
            if (window.location.pathname === '/board') {
                show_post();
            }
        });

        function show_post() {
            $.ajax({
                type: 'GET',
                url: '/board',
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
            });
        }

    </script>
</head>
<body>
<!-- HTML for Horizontal Menu -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a href="/">
        <img src={{ url_for('static', filename='images/logo.png') }} alt="logo">
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/board">게시판</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/about">About Us</a>
            </li>
        </ul>
    </div>
</nav>

<div class="mytitle">
    <h1 class="mypage">게시판</h1>
</div>
<div class="mymessage">
    <h3>제로 웨이스트를 실천하는 나만의 방법을 알려주세요!</h3>
    <p></p>
    <h5>🔊 이제는 일상이 된 나만의 팁을 공유해주세요</h5>
    <button onclick="open_box()">글쓰기</button>
</div>
<div class="mypost" id="post-box">
    <div class="row g-3">
        <div class="col">
            <input id="nickname" type="text" class="form-control" placeholder="닉네임" aria-label="First name">
        </div>
        <div class="col">
            <input id="password" type="text" class="form-control" placeholder="비밀번호" aria-label="Last name"
                   style="width: 70%">
        </div>
        <p></p>
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">제목</label>
        <textarea class="form-control" id="title" rows="3" style="height: 10px"></textarea>
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">내용</label>
        <textarea class="form-control" id="content" rows="3"></textarea>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark" onclick="save_post(); _box()">기록하기</button>
        <button type="button" class="btn btn-outline-dark" onclick="close_box();_box()">닫기</button>
    </div>
</div>
<div class="allpost">
    <p>전체 게시글 (nn)</p>
    <hr align="left" style="border: 1.5px;">
</div>
<div class="mycard">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col" id="">
            <div class="card border-secondary mb-3" style="max-width: 18rem;">
                <div class="card-header">닉네임</div>
                <div class="card-body text-secondary">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text" style="height: 100px">내용</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card border-secondary mb-3" style="max-width: 18rem;">
                <div class="card-header">닉네임</div>
                <div class="card-body text-secondary">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text" style="height: 100px">내용을 입력하세요.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card border-secondary mb-3" style="max-width: 18rem;">
                <div class="card-header">닉네임</div>
                <div class="card-body text-secondary">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text" style="height: 100px">내용을 입력하세요</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>



오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!




취소
 공유
취소
댓글 0
댓글 알림
나의얼굴