[개발일지] 웹개발 종합반 4주

<스파르타코딩 웹개발종합반 수강일지>

웹개발 종합반 4주차 수강

 

수업내용: Flask / API: GET&POST

 

1. Flask 프레임워크 기본 사용법

 1) static, templates 폴더 생성

 2) app.py, templates > index.html 파일 생성

 

2. 서버에 연결하고 GET&POST

  1) 클라이언트와 서버 연결 확인하기

  2) 서버부터 만들기(app.py)

  3) 클라이언트 만들기(index.html)

  4) 완성 확인하기

 

 

 

DB 서버에 연결하여 서버로 데이터를 전송하고, 조회하여 출력하는 연습을 했다.

과정은 간단했지만, 조금 헷갈리는 면이 있어 여러번의 반복학습 과정이 있었다.

 

GET과 POST를 구분하여 데이터를 주고받는 것에 익숙해져야 한다.

 

<과제>

팬명록 페이지에 GET, POST 기능 적용하기

 

---

<기억할것들>

 

1. 설치 패키지

 - flask, pymongo, dnspython, certifi

 

2. POST

 - 클라이언트, 서버 연결 > 서버 > 클라이언트 > 완성 확인

 

 1) 클라이언트와 서버 연결: post 기본코드와, ajax기본 코드를 불러온다.

# 서버 코드 - app.py
@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

// 클라이언트 코드 - index.html
function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

 

2) 서버 만들기

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

 

3) 클라이언트 만들기

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

 

3. GET

 - 클라이언트, 서버 연결 > 서버 > 클라이언트 > 완성 확인

 

 1) 클라이언트와 서버 연결: get 기본코드와, ajax기본 코드를 불러온다.

# 서버코드 - app.py
@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

// 클라이언트 코드 - index.html
$(document).ready(function () {
    show_order();
});
function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            alert(response['msg'])
        }
    });
}

 

2) 서버 만들기

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})

 

3) 클라이언트 만들기

function show_order() {
    $('#order-box').empty()
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                  </tr>`
                $('#order-box').append(temp_html)
            }

        }
    });
}