-스파르타 코딩클럽 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 형태로 전달
- GET (주문목록 조회- Read)
서버, 클라이언트 코드 생성, alert창을 띄워 작동테스트를 한다.
# 서버 쪽 API
@app.route('/order', methods=['GET'])
def order_GET():
# 클라이언트에게 정해진 메세지를 보냄
return jsonify({'result':'success', 'msg': 'GET요청 성공'}) # 클라이언트 쪽 Ajax
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function(response){
alert(response["msg"]);
window.location.reload();
}
})2-1. 서버쪽 API 작성
'주문하기' 위해 필요한 정보 : 이름(name), 수량(count), 전화번호(tel), 이메일(address)
1) DB에 주문정보를 조회(Read)하고, 성공메세지와 주문 정보를 응답 데이터로 보냄
2) 응답 데이터 : (JSON 형식)({'result':'success', 'all_orders':reviews})
@app.route('/order', methods=['GET'])
def orders_get():
# 1. DB에서 리뷰 정보 모두 가져오기
orders = list(db.orders.find({}, {'_id': False}))
# 2. 성공 여부 & 리뷰 목록 반환하기
return jsonify({'all_orders': orders, 'msg':'GET요청 성공'})2-2. API를 사용할 클라이언트 작성
'주문하기' 위해 필요한 정보 : 이름(name), 수량(count), 이메일(address), 전화번호(tel)
1) 주문 목록을 서버에 요청 [DB에 주문목록을 조회(Read)]
2) 성공메세지와 주문 정보를 응답 데이터로 보냄
3) 요청 성공했을 때 주문목록을 올바르게 화면에 나타내기
function order_listing() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
// DB 속 orders의 모든 데이터를 데려오기
let orders = response['all_orders']
// 중간점검 - console.log(orders)
// DB에서 받은 데이터를 반복문 돌려 모두 조회
for (let i = 0; i < orders.length; i++) {
// orders의 i번째 name을 가져옴
let name = orders[i]['name']
let count = orders[i]['count']
let address = orders[i]['address']
let tel = orders[i]['tel']
// 중간점검 - console.log(name, count, address, phone)
// 반복문 돌린 값들을 구성된 틀에 넣기
let temp_html = `<tr>
<td>${name}</td>
<td>${count}</td>
<td>${address}</td>
<td>${tel}</td>
</tr>`
// table의 tbody 안에서 조회 생성
$('#orders-box').append(temp_html)
}
}
})
이름, 수량, 이메일, 전화번호를 입력하여 '주문하기' 버튼을 누르면
DB에 성공적으로 저장되며,
웹 사이트 하단의 주문목록 조회에 잘 들어가는 것으로 확인 됨 :)
