첫 번째, 화성 땅 공동구매
STEP 1 : 무엇을 고려해야 하는가?
- URL은 어떻게 만들 것인지, 요청 방식은 어떻게 될 것인지?
- 클라이언트에서 서버로는 어떤 것을 넘겨 줄 것인지?
- 서버에서 클라이언트로는 어떤 것을 넘겨 줄 것인지?
STEP 2 : 서버단 설정 (POST방식)
@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']
#클라이언트로부터 name, address, size를 받아와서 각각 @_receive 변수에 담아놓고,
doc = {
'name': name_receive,
'address': address_receive,
'size': size_receive
}
#우리는 NoSQL인 MongoDB의 방식을 따르니 json형태로 저장을 해 두고
db.mars.insert_one(doc)
#DB에 인서트하고
return jsonify({'msg': '주문 완료!'})
#response로 json형식의 '주문 완료'메세지를 던져준다.
STEP 3 : 클라이언트단 설정
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
#name, address, size에 무엇이 들어갈 지 체크해둔다.
$.ajax({
type: 'POST',
url: '/mars',
#Post 방식으로 /mars라는 창구에서 일을 볼 것이고
data: { name_give:name, address_give:address, size_give:size },
#data는 {param : value}의 형태로 저장할 건데
#{requestparam인 ~~~~_give : responsevalue인 ~~~~}의 형태로 받아올 것이다
success: function (response) {
#문제가 없었으면 response값을 가지고 function을 실행하는데
alert(response['msg'])
#response의 msg값을 alert로 알려줄 것이다.
window.location.reload()
#그리고 reload()를 통해 새로고침을 한번 해 줄것이다.
}
});
}
GET방식도 그대로 하면 된다.
STEP 2 : 서버단 설정(GET방식)
*POST가 아니므로 클라이언트에서 서버로 가져갈 것이 없기 때문에 간단하게 쓸 수 있다.
@app.route("/mars", methods=["GET"])
def mars_get():
orders_list = list(db.orders.find({},{'_id':False}))
#db에 있는 주문 정보를 전부 끌고와서 orders_list라는 변수에 담는다.
return jsonify({'orders':orders_list})
#그리고 json형식으로 'orders'라는 파라미터에 전체 주문 정보를 담아준다.
STEP 3 : 클라이언트단 설정
$(document).ready(function () {
show_order();
#모든 준비가 완료되면 show_order function을 실행시킨다.
});
function show_order() {
$('#order-box').empty()
#원래 있던 order-box class를 전부 지운다.
$.ajax({
type: 'GET',
url: '/mars',
data: {},
#넘겨줄게 없으니 data는 공란으로 넘긴다.
success: function (response) {
#서버단에서 넘겨준 response (전체 주문 정보)를 가지고 함수를 돌린다.
let rows = response['orders']
#rows는 response의 각각의 order 하나씩을 맡을 것이다.
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
#그리고 response의 name을 클라이언트에서 name으로,
#response의 address를 클라이언트의 address로
#response의 size를 클라이언트의 size라는 변수에 담아준다.
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
#각 name, address, size는 변동될 수 있으므로 EL문의 ${}에 담아주고
$('#order-box').append(temp_html)
#주문 정보를 나타내는 body class에 넣어주도록 한다.
}
}
});
}
'웹개발 > 항해' 카테고리의 다른 글
항해 웹개발 종합반 5주차, 서버 구동 (1) | 2023.01.07 |
---|---|
항해 웹개발 종합반 4주차, 서버 연습(2) (0) | 2023.01.04 |
항해 웹개발 종합반 4주차, 서버 (0) | 2023.01.04 |
항해 웹개발 종합반 3주차, DataBase (0) | 2023.01.04 |
항해 웹개발 종합반 3주차, Python 패키지 (0) | 2023.01.04 |