스파르타 코딩 교육) 웹 개발 종합 교육 4주차 개발일지

flask를 이용한 서버생성, POST & GET을 활용한 웹페이지 제작

GET, POST 방식

* GET → 통상적으로 데이터 조회(Read)를 요청할 때
               예) 영화 목록 조회
           → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
           → 예: google.com?q=북극곰

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
                  예) 회원가입, 회원탈퇴, 비밀번호 수정
             → 데이터 전달:바로 보이지 않는 HTML body에 key:value 형태로 전달

 

flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음

 

flask 기본 코드

 

 ◾ @app.route('/')부분을 수정해서 URL을 나눌 수 있다.

 ◾ 별로 함수명이 같거나, route('/')내의 주소가 같으면 안된다.

from flask import Flask

    app = Flask(__name__)


    @app.route('/')
    def home():
        return 'This is Home!'


    @app.route('/mypage')
    def mypage():
        return 'This is My Page!'


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

 

---

#예제

아래와 같이 닉네임,응원댓글을 남기면 아래와 같이 방명록을 남길수 있는 홈페이지 구현

 

 

1. 프로젝트 생성 및 각종 패키지 추가

 

예제에선 서버구동을 위한 Flask,dnspython과 DB활용을 위한 pymongo, certifi 를 설치하였다

 

1-2. flask활용을 위한 static,templates폴더 생성

 

 

2. 뼈대(html,app.py등 기본적인 코드) 준비하기

 

 ◾ app.py

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

import certifi

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.8vjpv.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=certifi.where())
db = client.dbsparta

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

@app.route("/homework", methods=["POST"])
def homework_post():

    return jsonify({'msg':'POST 요청'})

@app.route("/homework", methods=["GET"])
def homework_get():
    
    return jsonify({'msg':'GET 요청'})

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

 

 

 ◾ index.html의 <script>부분

....
<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() {
        
        $.ajax({
            type: 'POST',
            url: '/homework',
           data: {},
            success: function (response) {
                alert(response['msg'])
                
            }
        })
    }

    function show_comment() {
        $.ajax({
            type: "GET",
            url: "/homework",
            data: {},
            success: function (response) {
                alert(response['msg'])

                }


            }
        });
    }
</script>
....

 

 

3.POST 구현

 

◾ app.py

@app.route("/homework", methods=["POST"])
def homework_post():
    nickname_receive = request.form['nickname_give']
    comment_receive = request.form['comment_give']
    doc = {
        'nickname': nickname_receive,
        'comment': comment_receive
    }
    db.fans.insert_one(doc)

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

닉네임과 댓글로 변수를 설정하여 DB에 저장한다.

 

◾ index.html

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

    $.ajax({
        type: 'POST',
        url: '/homework',
       data: {nickname_give:nickname, comment_give:comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload() //  새로고침
        }
    })
}

닉네임,댓글 입력값을 각각 변수로 지정한 뒤, data{}에서 app.py에 전달해줄 값을 키:값 형태로 전달해준다.

 

 

4.GET 구현

 

◾ app.py

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

DB에 있는 모든 값들을 불러와준후, contents를 클라이언트에게 넘겨준다.

 

 ◾ index.html

function show_comment() {
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['contents']
            for(let i=0; i<rows.length; i++){
                let nickname = rows[i]['nickname']
                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">${nickname}</footer>
                                        </blockquote>
                                    </div>
                                </div>`

                $('#comment-list').append(temp_html)

            }


        }
    });
}

app.py에서 넘겨받은 contents를 각각 nickname,comment 변수로 나누어 temp_html변수의 들어갈 부분에 지정해준 뒤, 댓글 리스트가 있는 id에 추가해준다.