Flask API 만들고 적용하기

이지수·2021년 8월 1일

sparta-web

목록 보기

6/8

이번에는 flask API를 이용해서 전 포스팅이었던 쇼핑몰 페이지에 다음 기능을 추가해보겠습니다!
1) 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가
2) 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기

flask 기초가 궁금하시다면 다음 링크를 참고해주세요!
flak 기초 포스트 보러가기

GET, POST

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "방식"이 존재합니다.클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려줍니다.
여러 방식이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다.
더 많은 방식은 아래 링크에서 확인해 주세요!

https://developer.mozilla.org/ko/docs/Web/HTTP/Methods

GET

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

GET 요청 API코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

GET 요청 확인 API코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

POST

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

POST 요청 API코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST 요청 확인 Ajax코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

주문하기(POST)

주문하기 기능 부분에서 만들 API 정보는 아래과 같습니다.

A. 요청 정보

요청 URL= /order , 요청 방식 = POST
요청 데이터 : 상품명(name), 수량(count), 주소(address), 핸드폰(phone)

B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 주문 완료되었다고 응답 데이터를 보냄

C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '주문 완료!'

서버 만들기

# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    # name_receive로 클라이언트가 준 name 가져오기
    name_receive = request.form['name_give']
    # count_receive로 클라이언트가 준 count 가져오기
    count_receive = request.form['count_give']
    # address_receive로 클라이언트가 준 address 가져오기
    address_receive = request.form['address_give']
    # phone_receive로 클라이언트가 준 phone 가져오기
    phone_receive = request.form['phone_give']
    
    # DB에 삽입할 order 만들기
    doc = {
        'name': name_receive,
        'count': count_receive,
        'address': address_receive,
        'phone': phone_receive
    }
    # orders에 order 저장하기
    db.orders.insert_one(doc)
    
    # 성공 여부 & 성공 메시지 반환
    return jsonify({'result': 'success', 'msg': '주문 완료!'})

클라이언트 만들기

function order() {
            // 화면에 입력이 있는 상품명, 수량, 주소, 핸드폰을 가져옵니다.
            let name = $('#order-name').val();
            let count = $('#order-count').val();
            let address = $('#order-address').val();
            let phone = $('#order-phone').val();
            
            // POST /order 에 저장(Create)을 요청합니다.
            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone},
                success: function (response) {
                    if (response["result"] == "success") {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                }
            })
        }

주문내역보기(GET)

주문내역보기 기능 부분에서 만들 API 정보는 아래과 같습니다.

A. 요청 정보

요청 URL= /order , 요청 방식 = GET
요청 데이터 : 없음

B. 서버가 제공할 기능 : 데이터베이스에 주문 정보를 조회(Read)하고, 성공 메시지와 주문 정보를 응답 데이터를 보냄

C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'orders'= orders

서버 만들기

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    # {'_id': False} -> 데이터베이스의 id값을 보여주지 않습니다.
    orders = list(db.orders.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'orders': orders})

클라이언트 만들기

function listing() {
    $.ajax({
        type: "GET",
        url: "/order",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let orders = response['orders'];
                for (let i = 0; i < orders.length; i++) {
                    let name = orders[i]['name'];
                    let count = orders[i]['count'];
                    let address = orders[i]['address'];
                    let phone = orders[i]['phone'];

                    let temp_html = `<tr>
                                       <th scope="row">${name}</th>
                                       <td>${count}</td>
                                                <td>${address}</td>
                                       <td>${phone}</td>
                                    </tr>`
                    $('#orders-box').append(temp_html)
                }
            }
        }
   })
}