Flask로 API 만들기

GET,POST 요청타입

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

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

🔔 API 만들고 사용하기
1. 클라이언트와 서버 연결하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기

(저장) Creat → POST

1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

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

[서버코드 - 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]

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

2) 서버부터 만들기

: name,address,size 정보를 받아서 저장!

@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) 클라이언트 만들기

→ name,address,size 정보를 내보내야 해

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()
        }
    });
}

4) 완성 확인하기

→ DB에 잘 들어갔는지 확인해보면 됩니다요

(보여주기) Read → GET

1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

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

[서버코드 - 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) 서버부터 만들기

: 받을 것 없이 orders에 주문정보를 담아서 내려주기만 하면 됨!

def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})

3) 클라이언트 만들기

: 응답을 잘 받아서 for 문으로 붙여주면 끝

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)
            }

        }
    });
}

4) 완성 확인하기
: 동작테스트 !!! 새로고침 했을 때 DB에 저장된 내용이 화면에 올바르게 나오는지 확인!