첫 번째, 화성 땅 공동구매

이름, 주소, 평수를 고르고 주문버튼을 누르면, 주문한 내역들이 밑에 뜨게 된다.

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에 넣어주도록 한다.
                    }

                }
            });
        }

 

+ Recent posts