Flask - 팬명록

박영준·2023년 5월 30일

python

Python

목록 보기

6/10

1. 세팅하기

폴더 및 파일 생성
가상환경 생성
pip install 설치 패키지

2. 데이터 명세

1.요청정보 : URL = "http://spartacodingclub.shop/sparta_api/weather/seoul" 요청방식 = GET

2.클라(fetch) → 서버(OpenAPI) : 없음

3.서버(OpenAPI) → 클라(fetch) : 서울 날씨 정보를 불러옴

3. 클라이언트와 서버 연결 확인

새로고침, '기록하기' 버튼을 눌렀을 때 알림창이 뜨는 것을 확인할 수 있었다.

4. 서버부터 만들기

데이터를 받을 곳부터 만든다. app.py

5. 클라이언트 만들기

index.html

6. 완성 확인

app.py

...

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

    doc = {
        'name':name_receive,
        'comment':comment_receive
    }
    db.fan.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

...

index.html

...

<head>
    ...

    <title>초미니홈피 - 팬명록</title>

    <!-- og 태그 -->
        <!-- og:image : '이미지 주소 복사'로 url 넣기 -->
    <meta property="og:title" content="왁굳형 팬명록" />
    <meta property="og:description" content="형에게 응원 한마디!" />
    <meta property="og:image" content="https://i.namu.wiki/i/CbBhVxmAkXCEVC0zzELg7J66aVyrjTG-dVasMl1snoH95PPTOgCHZPaA9HtgQ_d8L2cW3eho8nwGM9_seUcHlA.webp" />

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
        rel="stylesheet" />
    <style>
        ...
    </style>
    <script>
        $(document).ready(function () {
            set_temp();
            show_comment();
        });
        /* 서울 날씨 */
        function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                let temp = data['temp']
                $('temp').text(temp)
            });
        }
        /* 데이터 저장 */
        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }
        /* 데이터 조회 */
        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()
                rows.forEach((a => {
                    let name = a['name']
                    let comment = a['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>왁굳형 팬명록</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>
        <div class="card">
            ...
        </div>
    </div>
</body>

</html>