Get(주문 보여주기)

웹개발 종합반 4주차 - Get(주문 보여주기)

 

 

 

 

페이지가 로딩되면 자동으로 get요청을 해서 받아와서 보여주기

 

 

1)데이터 명세

 

1. 요청 정보 : URL= /mars, 요청 방식 = GET

2. 클라(fetch) → 서버(flask) : 없음

3. 서버(flask) → 클라(fetch) : 전체 주문을 보내주기

 

 

 

 

2) 클라이언트와 서버 연결 확인하기

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                console.log(data)

                alert(data['msg'])

            })

        }

index.html

 

@app.route("/mars", methods=["GET"])

def mars_get():

    return jsonify({'msg':'GET 연결 완료!'})

app.py

 

클라이언트에서 페이지가 로딩되면 index.html 에서  /mars에 보내줌.

app.py 는 /mars를 받고 'msg':'GET 연결 완료!' 를,

index.html 은 그 것을 가져와서 'msg' 의  "GET 연결 완료!"를 웹브라우저에 보여줌.

 

 

 

 

3) 서버부터 만들기

 

받을 것 없이 result 에 주문정보를 담아서 내려주기만 하면 됩니다!

 

*여러개 찾기 예시

all_users = list(db.users.find({},{'_id':False}))

 

@app.route("/mars", methods=["GET"])

def mars_get():

    mars_data = list(db.mars.find({},{'_id':False}))

    return jsonify({'result':'mars_data'})

 

설명

list(db.mars.find({},{'_id':False}))

db에서 mars의 데이터를 가져와서

return jsonify({'result':'mars_data'})   ❌

    return jsonify({'result':mars_data})  ⭕

(오류가 나서 찾아봤는데 'mars_data'가 아니라 그냥 mars_data를 넣어줘야함)

그것을 다 넣은 다음에 클라이언트로 내려주기

 

 

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                console.log(data)

            })

index.html에서 alert는 이제 없애줌

 

 

데이터가 잘 내려옴

 

 

 

 

 

4) 클라이언트 만들기

 

주문정보는 리스트 형식. forEach문으로 반복하면서 데이터를 뽑아냄

return jsonify({'result':mars_data})

app.py

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                let rows = data['result']

            })

index.html

rows에 데이터 'result'값을 넣는다.

 

다음 forEach문으로 반복하여 데이터를 뽑아내고, 먼저 검사

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                let rows = data['result']

                rows.forEach((a)=>{

                    console.log(a)

                })

            })

        }

데이터가 하나씩 잘 내려옴

 

 

 

뽑아낸 데이터는 temp_html에 담아주기

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                let rows = data['result']

                rows.forEach((a)=>{

                    let name = a['name']

                    let address = a['address']

                    let size = a['size']

                    let temp_html = ``

                })

            })

        }

index.html

백틱 ``안에는 id="order-box"의 형식을 넣어줌

                <tr>

                    <td>홍길동</td>

                    <td>서울시 용산구</td>

                    <td>20평</td>

                </tr>

                   let temp_html = `<tr>

                                                   <td>${name}</td>

                                                   <td>${address}</td>

                                                   <td>${size}</td>

                                              </tr>`

 

 

담아준 temp_html을 넣을 자리를 찾아 제이쿼리로 append!

 

        function show_order() {

            fetch('/mars').then((res) => res.json()).then((data) => {

                let rows = data['result']

                $('#order-box').empty()

                rows.forEach((a)=>{

                    let name = a['name']

                    let address = a['address']

                    let size = a['size']

                    let temp_html = `<tr>

                                        <td>${name}</td>

                                        <td>${address}</td>

                                        <td>${size}</td>

                                     </tr>`

                    $('#order-box').append(temp_html)

                })

            })

        }

$('#order-box').empty로 앞에 데이터 지워주기

 

 

완성~~

 

새로운 데이터

DB에도 잘 올라가고

웹브라우저에도 잘 보여짐!