[22.10.09]today I learned

today I learned
00. 프로젝트 세팅
1. 클라이언트는 ajax, 서버는 flask로 post 해보기
2. post 해보기
3. 클라이언트는 ajax, 서버는 flask로 get 해보기
4. get 해보기

00. 프로젝트 세팅
1) 새프로젝트로 venv 파일 만들기
2) 경로 static, templates 폴더 만들어주고, 파이썬 app.py 만들어주기
3) templates 내부에 index.html 만들어주기
4) 패키지 설치하기 : flask, pymongo, dnspython, bs4, requests

1. 클라이언트는 ajax, 서버는 flask로 post 해보기
1-1) 서버코드 기본 형태

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

1-2) 클라이언트 코드 기본 형태

function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

<button onclick="save_order()">주문하기</button>

1-3) 구조이해

• 클라이언트가 url '/mars'창구를 통해 type 포스트로 data에 이름을 붙여 전송하면,
• 서버가 url '/mars'창구를 통해 method 포스트로 data를 받는다.
• 잘 받았으면, 서버가 클라이언트에게 return 값을 보내고,
• 클라이언트는 return 받은 것을 띄워주는 구조

2. post 해보기
2-1) 서버

• 클라이언트한테 받을 것들을 정의해주고,
• 디비에 넣어줄 형식으로 만든 후 넣어준다.

@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']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

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

2-2) 클라이언트

• 보낼 것들을 선언해주고
• 이를 서버와 약속한 이름으로 정리해서 데이터에 넣어준다.
• 성공하면, 서버의 메세지를 받아 띄워주고, 새로고침 시켜준다.

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()
        }
    });
}

3. 클라이언트는 ajax, 서버는 flask로 get 해보기
3-1) 서버코드 기본 형태

• 클라이언트에게 받을 내용이 없기 때문에 보내는 것만 함

@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

3-2) 클라이언트 코드 기본 형태

• 준비 된 후, 받아오기

$(document).ready(function () {
    show_order();
});
function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            alert(response['msg'])
        }
    });
}

4. get 해보기
4-1) 서버

• 디비에서 전체 리스트 받아오기
• 이를 이름붙여 보내주기

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

4-2) 클라이언트

• 기존에 있는 내용 지워주기
• 받은 데이터 for 구문 돌릴 수 있도록 선언해주고
• for구문 돌려, 세부 데이터들 선언해주기
• 이를 활용하여 html 형태 만들어주고
• 붙여주기

function show_order() {
    $('#order-box').empty()
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (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']

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

        }
    });
}