Flask - 버킷리스트

박영준·2023년 5월 30일

python

Python

목록 보기

5/10

1. 세팅하기

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

2. 데이터 명세

요청 정보 : URL= /bucket , 요청 방식 = POST
클라(fetch) → 서버(flask) : bucket
서버(flask) → 클라(fetch) : 메시지를 보냄 (버킷리스트 저장 완료!)

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

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

4. 서버부터 만들기

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

5. 클라이언트 만들기

index.html

6. 완성 확인

app.py

...

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    
    doc = {
        'bucket':bucket_receive
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})      # 메시지를 반환
    
@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

...

index.html

...

<head>
    ...

    <style>
        ...
    </style>
    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {     /* /bucket API 에 요청을 보낸다 */
                let rows = data['result']
                $('#bucket-list').empty()
                rows.forEach((a) => {
                    let bucket = a['bucket']

                    let temp_html = `<li>
                                        <h2>${bucket}</h2>
                                    </li>`
                    $('#bucket-list').append(temp_html)
                })
            })
        }    

        /* '기록하기' 버튼을 눌렀을 때의 반응 */
        function save_bucket() {
            let bucket = $('#bucket').val();

            /* 데이터를 담아서 */
            let formData = new FormData();
            formData.append("bucket_give", bucket);

            /* 담은 데이터를 /bucket API 로 보낸다 */
            fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
                alert(data["msg"]);         /* 서버에서 반환된 메시지를 받아서 알림을 띄운다 */
                window.location.reload();
            });
        }

    </script>
</head>

<body>
    <div class="mypic">
        <h1>나의 버킷리스트</h1>
    </div>
    <div class="mybox">
        <div class="mybucket">
            <input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />
            <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
        </div>
    </div>
    <div class="mybox" id="bucket-list">
        <li>
            <h2>✅ 호주에서 스카이다이빙 하기</h2>
        </li>
    </div>
</body>

</html>