[웹개발 종합반 4주차] 프로젝트, 화성땅 공동구매

🔖05. 프로젝트 세팅

• static, templates 폴더 생성, app.py파일 생성
• flask, pymongo, dnspython 패키지 설치

---

🔖07. POST 연습

🔎 주문 저장

1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

 

🔎 index.html

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: {name_give: name, address_give:address, size_give:size},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

1. input 박스에서 name, address, size 데이터 값을 받아 name_give, address_give, size_give라는 이름으로 창구에 보냄

3. 창구에서 보낸 메세지를 받아서 페이지 새로고침

 

🔎 페이지 새로고침

window.location.reload()

 

 

🔎 app.py

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name' : name_receive,
        'address' : address_receive,
        'size' : size_receive
    }
    db.mars.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

2. 창구에서 name_give, address_give, size_give이름의 값을 받아 name_receive, address_receive, size_receive로 받아 mars라는 이름의 폴더에 데이터 저장 하고 msg 보냄.

---

🔖08. GET 연습

🔎 주문 보여주기

1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

 

🔎 app.py

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders': order_list})

1. 데이터 베이스에 저장되어 있는 주문 데이터들을 list 형태로 찾아와 'orders'라는 이름으로 클라이언트에 보내준다.

 

🔎 index.html

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            // console.log(response)
            let rows = response['orders']
            for(let i=0; i<rows.length; i++){
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                // console.log(name, address, size)

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                </tr>`
                $('#order-box').append(temp_html)
            }

        }
    });
}

2. 서버로 부터 받은 db 데이터를 html에 붙여주기

---

☀️ 느낀점

GET, POST를 해보니... 내가 개념을 잘못 알고 있었구나! 

GET : 서버에 요청해 DB에서 데이터 읽어와(Read) 클라이언트에 전달 html에 붙여주기

POST : 클라이언트가 서버에 input 데이터 전달, DB에 input데이터 값 생성(Create) 후, 클라이언트에게 주문정보가 저장되었음을 알린다.

왔다갔다 통신하는 흐름을 이해해야 하는 것 같다. 프로젝트를 여러번 반복해봐야 겠다.