[Python] Flask - GET/POST 메서드 활용1

-스파르타 코딩클럽 4주차 숙제-

목표

(Flask 프레임워크 활용) get, post 방식으로 API 만들고 사용

스타르타 코딩 웹개발 종합반 1주차에 만들었던
원페이지 쇼핑몰에 GET, POST 메서드를 이용하여
주문하기, 주문 목록조회 API를 생성해보자.
1. POST) 주문하기 위해 데이터 (이름, 수량, 주소, 전화번호)값을 넣은 후 DB에 저장하고
2. GET) 페이지안에서 주문 목록 조회가 가능하도록 만들어보자.

사용한 패키지 (Flask, pymongo, requests, bs4)
- Flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음.
서버를 구동하기위해 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있음.
*Flask서버를 만들 땐 항상, 프로젝트 폴더안에 생성해야 할 것
1)static [이미지,css파일을 넣어둠]
2)templates [html파일을 넣어둠]
3)app.py파일

GET, POST 방식

• GET
  1) 데이터 조회(Read)를 요청할 때 사용
  ex) 도서 목록 조회
  2) 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
  ex) naver.com?q=코딩 //q(key)=코딩(value)

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

1. POST(주문하기-Create)
   서버, 클라이언트 코드 생성, alert창을 띄워 작동테스트를 한다.

# 서버 쪽 API

@app.route('/order', methods=['POST'])
def order_post():

   return jsonify({'result':'success', 'msg': 'post요청 성공'})   

# 클라이언트 쪽 Ajax

$.ajax({
    type: "POST",
    url: "/order",
    data: {},
    success: function(response){
       alert(response["msg"]);
       window.location.reload();
    }
  })

1-1. 서버쪽 API 작성
'주문하기' 위해 필요한 정보 : 이름(name), 수량(count), 전화번호(tel), 이메일(address)
1) 클라이언트가 준 데이터 (name, count, tel, address) 가져오기
2) DB에 정보 삽입 [클라이언트에게 요청(Request) 보낸 데이터를 받아, DB에 생성(Create)하고 저장]
3) alert창 띄워 성공여부 확인 ['주문 완료']

# 서버 쪽 API

@app.route('/order', methods=['POST'])
def orders_post():
	# 1) 클라이언트가 준 name을 name_receive로 가져오기
	name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    tel_receive = request.form['tel_give']
    
    # DB에 삽입 할 데이터들 딕셔너리 구조로 생성
    doc = {
    # DB안의 name으로 name_receive의 값을 저장
    	'name' : name_receive,
        'count' : count_receive,
        'address' : address_receive,
        'tel' : tel_receive
    }
    
    # DB에 orders 라는 컬렉션을 만들어서 orders의 데이터 값 저장
    db.orders.insert_one(doc)
    
    # 성공 시, '주문 완료' 메세지 반환
   	return jsonify({'result':'success', 'msg': '주문 완료'})   

1-2. API를 사용할 클라이언트 작성
'주문하기' 위해 필요한 정보 : 이름(name), 수량(count), 전화번호(tel), 이메일(address)
1) '주문하기' 버튼에 함수 생성

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

2) body에서 이름, 수량, 전화번호, 이메일의 id 값 가져오기

// 주문자 이름의 input 안에 'order-name'이란 id생성하였음.
<input id="order-name" type="text" class="form-control" aria-label="Default"
                   aria-describedby="inputGroup-sizing-default">

3) Ajax로 서버에 저장 요청하고, 화면 재로딩.
4) alert창 띄워 성공여부 확인 ['주문 완료']

// '주문하기' 버튼을 누르면, Ajax 실행
function orders() {
// 화면에 입력된 이름, 수량, 주소, 전화번호의 내용을 가져옴.
	let name = $("#order_name").val();
    let count = $("#order_count").val();
    let address = $("#order_address").val();
    let tel = $("#order_tel").val();

$.ajax({
    type: "POST",
    url: "/order",
    data: {
// 데이터(이름, 수량, 주소, 전화번호)를 ajax에 넣고 서버에 저장(Create) 요청 
    	name_give: name, count_give: count,
        address_give: address, tel_give: tel
          },
    success: function(response){
       alert(response["msg"]);
       window.location.reload();
    }
  })
}

alert메세지 잘 뜨고 DB에도 데이터가 잘 들어갔음 :)