4주차 - 화성땅 공동구매

새 프로젝트 

-> MARS 폴더 -> 폴더에 3개 추가 : static / templates / app.py 

-> 설정으로 들어가서 패키지 추가 : flask(서버 연결) / pymongo(DB연결) / dnspython(python 꾸미기)

app.py / index.html : 내용 입력 

 

--> flask 쓸 때 templates 폴더 안에 html 들어가야 된다고 지난 강의에서도 설명 했었다. 

static : style, css  / templates : html / app.py 

 

**mongodb atlas 띄워두기. 

============================================================================

** POST 연습 ; 주문 저장 

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

2.클라(ajax) -> 서버(flask): name, address, size 

3.서버(flask) -> 클라(ajax): 메시지를 보냄 (주문 완료!) 

 

1. 잘 연결되었는지 확인 --> ok 

2. 서버 부터 : 3가지 받아야겠지. name, address, size : 받은 후 저장

 

3. app.py에서 POST로 받는 곳 확인 --> name, address, size _ receive로 각각 받을 수 있게 정의 

4. 서버를 넣어줘야지 . DB : pythonprac -> dbprac 입력 ()그러면 dbprac.py가 프로젝트에 들어간다. 

5. dbprac.py의 윗 세줄 입력

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.2imbw.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

6. 저장 하려면 insert_one()으로 "db.위치.insert_one()" 입력

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = address.form['name_give']
    size_receive = size.form['name_give']
    doc = {
        'name':name_receive,
        'address':address_receive,
        'size':size_receive
    }
    db.mars.insert_one(doc)
    
    return jsonify({'msg': 'POST 연결 완료!'})

7. 이제 서버에 저장은 끝! 다음에는 front_end로 넘어가서 (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()
        }
    });
}

save_order() { 안에 각각 저장할 항목 내용 정의해서 넣기. }

-> ajax로 type, url, data 넘기기. 

--> 이렇게 하면 database로 저장하는건 마무리된다. 

 

============================================================================

다음에는 이제 database에서 front_end로 해당 내용을 $('').append(temp_html) 해줘야지! 

그러면 순서를 써야되니까, GET 방식으로 DB 내용을 1번부터 끝번까지 가져와야지 .

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>`

 

function show_order() {
    $.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)
            }
        }
    });
}

이후에 $('#order-box').append(temp_html) 하면 밑에 붙는다.