Flask API 만들고 적용하기
이번에는 flask API를 이용해서 전 포스팅이었던 쇼핑몰 페이지에 다음 기능을 추가해보겠습니다!
1) 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가
2) 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기
flask 기초가 궁금하시다면 다음 링크를 참고해주세요!
flak 기초 포스트 보러가기
GET, POST
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "방식"이 존재합니다.클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려줍니다.
여러 방식이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다.
더 많은 방식은 아래 링크에서 확인해 주세요!
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)
}
}
}
})
}
결과 화면
주문하기 버튼을 누르면 주문이 완료되었다는 메세지가 뜨고
밑에 주문 내역이 뜨는 것을 볼 수 있습니다!
Author And Source
이 문제에 관하여(Flask API 만들고 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jisoolee11/Flask-API-만들고-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)